Display a tooltip when you hover over a location

res/css/_common.scss

@@ -423,7 +423,7 @@ legend {
  * We should go through and have one consistent set of styles for buttons throughout the app.
  * For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
  */
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton),
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton || .maplibregl-ctrl-attrib-button),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -440,18 +440,18 @@ legend {
     font-family: inherit;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):last-child {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton || .maplibregl-ctrl-attrib-button):last-child {
     margin-right: 0px;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):hover,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton || .maplibregl-ctrl-attrib-button):hover,
 .mx_Dialog input[type="submit"]:hover,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):hover,
 .mx_Dialog_buttons input[type="submit"]:hover {
     @mixin mx_DialogButton_hover;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):focus,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton || .maplibregl-ctrl-attrib-button):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@@ -482,7 +482,7 @@ legend {
     color: $alert;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):disabled,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton || .maplibregl-ctrl-attrib-button):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {

res/css/_components.scss

@@ -97,6 +97,7 @@
 @import "./views/dialogs/_JoinRuleDropdown.scss";
 @import "./views/dialogs/_KeyboardShortcutsDialog.scss";
 @import "./views/dialogs/_LeaveSpaceDialog.scss";
+@import "./views/dialogs/_LocationViewDialog.scss";
 @import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_ModalWidgetDialog.scss";

res/css/views/dialogs/_LocationViewDialog.scss

@@ -0,0 +1,56 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LocationViewDialog_wrapper .mx_Dialog {
+    padding: 0px;
+
+    /* Unset contain and position to allow the close button
+    to appear outside the dialog */
+    contain: unset;
+    position: unset;
+}
+
+.mx_LocationViewDialog {
+    /* subtract 0.5px to prevent single-pixel margin due to rounding */
+    width: calc(80vw - 0.5px);
+    height: calc(80vh - 0.5px);
+    overflow: hidden;
+
+    .mx_Dialog_header {
+        margin: 0px;
+        padding: 0px;
+        position: unset;
+
+        .mx_Dialog_title {
+            display: none;
+        }
+
+        .mx_Dialog_cancelButton {
+            z-index: 4010;
+            position: absolute;
+            right: 5vw;
+            top: 5vh;
+            width: 20px;
+            height: 20px;
+            background-color: $dialog-close-external-color;
+        }
+    }
+
+    .mx_MLocationBody .mx_MLocationBody_map {
+        width: 80vw;
+        height: 80vh;
+    }
+}

res/themes/dark/css/_dark.scss

@@ -104,6 +104,7 @@ $input-lighter-bg-color: #f2f5f8;
 $dialog-title-fg-color: $primary-content;
 $dialog-backdrop-color: $menu-border-color;
 $dialog-close-fg-color: #9fa9ba;
+$dialog-close-external-color: $primary-content;
 // ********************
 
 // RoomList

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -70,6 +70,7 @@ $dialog-title-fg-color: $base-text-color;
 $dialog-backdrop-color: #000;
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
 $dialog-close-fg-color: #9fa9ba;
+$dialog-close-external-color: $text-primary-color;
 
 $lightbox-background-bg-color: #000;
 $lightbox-background-bg-opacity: 0.85;

res/themes/legacy-light/css/_legacy-light.scss

@@ -93,6 +93,7 @@ $dialog-title-fg-color: #45474a;
 $dialog-backdrop-color: rgba(46, 48, 51, 0.38);
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
 $dialog-close-fg-color: #c1c1c1;
+$dialog-close-external-color: $primary-bg-color;
 
 $lightbox-background-bg-color: #000;
 $lightbox-background-bg-opacity: 0.95;

res/themes/light/css/_light.scss

@@ -153,6 +153,7 @@ $input-fg-color: rgba(74, 74, 74, 0.9);
 $dialog-title-fg-color: #45474a;
 $dialog-backdrop-color: rgba(46, 48, 51, 0.38);
 $dialog-close-fg-color: #c1c1c1;
+$dialog-close-external-color: $background;
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
 // ********************
 

src/components/views/elements/Tooltip.tsx

@@ -32,6 +32,7 @@ export enum Alignment {
     Right,
     Top, // Centered
     Bottom, // Centered
+    InnerBottom, // Inside the target, at the bottom
 }
 
 export interface ITooltipProps {
@@ -50,6 +51,8 @@ export interface ITooltipProps {
         // id describing tooltip
         // used to associate tooltip with target for a11y
         id?: string;
+        // If the parent is over this width, act as if it is only this wide
+        maxParentWidth?: number;
 }
 
 @replaceableComponent("views.elements.Tooltip")
@@ -107,11 +110,18 @@ export default class Tooltip extends React.Component<ITooltipProps> {
             offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
         const width = UIStore.instance.windowWidth;
+        const parentWidth = (
+            this.props.maxParentWidth
+                ? Math.min(parentBox.width, this.props.maxParentWidth)
+                : parentBox.width
+        );
         const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
         const top = baseTop + offset;
         const right = width - parentBox.right - window.pageXOffset - 16;
         const left = parentBox.right + window.pageXOffset + 6;
-        const horizontalCenter = parentBox.right - window.pageXOffset - (parentBox.width / 2);
+        const horizontalCenter = (
+            parentBox.left - window.pageXOffset + (parentWidth / 2)
+        );
         switch (this.props.alignment) {
             case Alignment.Natural:
                 if (parentBox.right > width / 2) {
@@ -136,6 +146,10 @@ export default class Tooltip extends React.Component<ITooltipProps> {
                 style.top = baseTop + parentBox.height;
                 style.left = horizontalCenter;
                 break;
+            case Alignment.InnerBottom:
+                style.top = baseTop + parentBox.height - 50;
+                style.left = horizontalCenter;
+                style.transform = "translate(-50%)"
         }
 
         return style;

src/components/views/elements/TooltipTarget.tsx

@@ -36,6 +36,7 @@ const TooltipTarget: React.FC<IProps> = ({
     alignment,
     yOffset,
     tooltipClassName,
+    maxParentWidth,
     ...rest
 }) => {
     const [isVisible, setIsVisible] = useState(false);
@@ -63,6 +64,7 @@ const TooltipTarget: React.FC<IProps> = ({
                 yOffset={yOffset}
                 alignment={alignment}
                 visible={isVisible}
+                maxParentWidth={maxParentWidth}
             />
         </div>
     );

src/components/views/location/LocationViewDialog.tsx

@@ -0,0 +1,84 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "../dialogs/BaseDialog";
+import { IDialogProps } from "../dialogs/IDialogProps";
+import { createMap, LocationBodyContent, locationEventGeoUri, parseGeoUri } from '../messages/MLocationBody';
+
+interface IProps extends IDialogProps {
+    mxEvent: MatrixEvent;
+}
+
+interface IState {
+    error: Error;
+}
+
+@replaceableComponent("views.location.LocationViewDialog")
+export default class LocationViewDialog extends React.Component<IProps, IState> {
+    private coords: GeolocationCoordinates;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.coords = parseGeoUri(locationEventGeoUri(this.props.mxEvent));
+        this.state = {
+            error: undefined,
+        };
+    }
+
+    componentDidMount() {
+        if (this.state.error) {
+            return;
+        }
+
+        createMap(
+            this.coords,
+            true,
+            this.getBodyId(),
+            this.getMarkerId(),
+            (e: Error) => this.setState({ error: e }),
+        );
+    }
+
+    private getBodyId = () => {
+        return `mx_LocationViewDialog_${this.props.mxEvent.getId()}`;
+    };
+
+    private getMarkerId = () => {
+        return `mx_MLocationViewDialog_marker_${this.props.mxEvent.getId()}`;
+    };
+
+    render() {
+        return (
+            <BaseDialog
+                className='mx_LocationViewDialog'
+                onFinished={this.props.onFinished}
+                fixedWidth={false}
+            >
+                <LocationBodyContent
+                    mxEvent={this.props.mxEvent}
+                    bodyId={this.getBodyId()}
+                    markerId={this.getMarkerId()}
+                    error={this.state.error}
+                />
+            </BaseDialog>
+        );
+    }
+}