Add zoom buttons to the location view (#7482)

src/components/views/messages/MLocationBody.tsx

@@ -29,6 +29,7 @@ import Modal from '../../../Modal';
 import LocationViewDialog from '../location/LocationViewDialog';
 import TooltipTarget from '../elements/TooltipTarget';
 import { Alignment } from '../elements/Tooltip';
+import AccessibleButton from '../elements/AccessibleButton';
 
 interface IState {
     error: Error;
@@ -89,7 +90,7 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         );
     };
 
-    render() {
+    render(): React.ReactElement<HTMLDivElement> {
         return <LocationBodyContent
             mxEvent={this.props.mxEvent}
             bodyId={this.getBodyId()}
@@ -108,9 +109,13 @@ interface ILocationBodyContentProps {
     error: Error;
     tooltip?: string;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    zoomButtons?: boolean;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
 }
 
-export function LocationBodyContent(props: ILocationBodyContentProps) {
+export function LocationBodyContent(props: ILocationBodyContentProps):
+        React.ReactElement<HTMLDivElement> {
     const mapDiv = <div
         id={props.bodyId}
         onClick={props.onClick}
@@ -152,6 +157,36 @@ export function LocationBodyContent(props: ILocationBodyContentProps) {
                 height="5"
             />
         </div>
+        {
+            props.zoomButtons
+                ? <ZoomButtons
+                    onZoomIn={props.onZoomIn}
+                    onZoomOut={props.onZoomOut}
+                />
+                : null
+        }
+    </div>;
+}
+
+interface IZoomButtonsProps {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+}
+
+function ZoomButtons(props: IZoomButtonsProps): React.ReactElement<HTMLDivElement> {
+    return <div className="mx_MLocationBody_zoomButtons">
+        <AccessibleButton
+            onClick={props.onZoomIn}
+            title={_t("Zoom in")}
+        >
+            <div className="mx_MLocationBody_zoomButton mx_MLocationBody_plusButton" />
+        </AccessibleButton>
+        <AccessibleButton
+            onClick={props.onZoomOut}
+            title={_t("Zoom out")}
+        >
+            <div className="mx_MLocationBody_zoomButton mx_MLocationBody_minusButton" />
+        </AccessibleButton>
     </div>;
 }