Live location share - beacon tooltip in maximised view (#8572) PSF-926

* pass optional tooltip prop down through markers

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add beaconstatustooltip, handle overflow on beacon status label

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove debug, fix mouseout

Signed-off-by: Kerry Archibald <kerrya@element.io>

* tidy comments

Signed-off-by: Kerry Archibald <kerrya@element.io>

res/css/_components.scss

@@ -6,6 +6,7 @@
 @import "./_spacing.scss";
 @import "./components/views/beacon/_BeaconListItem.scss";
 @import "./components/views/beacon/_BeaconStatus.scss";
+@import "./components/views/beacon/_BeaconStatusTooltip.scss";
 @import "./components/views/beacon/_BeaconViewDialog.scss";
 @import "./components/views/beacon/_DialogOwnBeaconStatus.scss";
 @import "./components/views/beacon/_DialogSidebar.scss";
@@ -143,7 +144,6 @@
 @import "./views/elements/_AddressSelector.scss";
 @import "./views/elements/_AddressTile.scss";
 @import "./views/elements/_CopyableText.scss";
-@import "./views/elements/_SearchWarning.scss";
 @import "./views/elements/_DesktopCapturerSourcePicker.scss";
 @import "./views/elements/_DialPadBackspaceButton.scss";
 @import "./views/elements/_DirectorySearchBox.scss";
@@ -172,6 +172,7 @@
 @import "./views/elements/_RoleButton.scss";
 @import "./views/elements/_RoomAliasField.scss";
 @import "./views/elements/_SSOButtons.scss";
+@import "./views/elements/_SearchWarning.scss";
 @import "./views/elements/_ServerPicker.scss";
 @import "./views/elements/_SettingsFlag.scss";
 @import "./views/elements/_Slider.scss";

res/css/components/views/beacon/_BeaconListItem.scss

@@ -40,6 +40,7 @@ limitations under the License.
 
 .mx_BeaconListItem_info {
     flex: 1 1 0;
+    width: 0;
     display: flex;
     flex-direction: column;
     align-items: stretch;

res/css/components/views/beacon/_BeaconStatus.scss

@@ -46,14 +46,15 @@ limitations under the License.
 }
 
 .mx_BeaconStatus_description {
-    flex: 1;
+    flex: 1 1 0;
     display: flex;
     flex-direction: column;
     line-height: $font-14px;
 
     padding-right: $spacing-8;
 
-    // TODO handle text-overflow
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .mx_BeaconStatus_expiryTime {
@@ -62,4 +63,6 @@ limitations under the License.
 
 .mx_BeaconStatus_label {
     margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

res/css/components/views/beacon/_BeaconStatusTooltip.scss

@@ -0,0 +1,37 @@
+/*
+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_BeaconStatusTooltip {
+    position: absolute;
+    top: 42px;
+    max-width: 150px;
+    height: 38px;
+    box-sizing: content-box;
+    padding-top: $spacing-8;
+
+    // override copyable text style to make compact
+    .mx_CopyableText_copyButton {
+        margin-left: 0 !important;
+    }
+}
+
+.mx_BeaconStatusTooltip_inner {
+    position: relative;
+    height: 100%;
+    border-radius: 4px;
+    background: $menu-bg-color;
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
+}

src/components/views/beacon/BeaconMarker.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useContext } from 'react';
+import React, { ReactNode, useContext } from 'react';
 import maplibregl from 'maplibre-gl';
 import {
     Beacon,
@@ -29,12 +29,13 @@ import SmartMarker from '../location/SmartMarker';
 interface Props {
     map: maplibregl.Map;
     beacon: Beacon;
+    tooltip?: ReactNode;
 }
 
 /**
  * Updates a map SmartMarker with latest location from given beacon
  */
-const BeaconMarker: React.FC<Props> = ({ map, beacon }) => {
+const BeaconMarker: React.FC<Props> = ({ map, beacon, tooltip }) => {
     const latestLocationState = useEventEmitterState(
         beacon,
         BeaconEvent.LocationUpdate,
@@ -58,6 +59,7 @@ const BeaconMarker: React.FC<Props> = ({ map, beacon }) => {
         id={beacon.identifier}
         geoUri={geoUri}
         roomMember={markerRoomMember}
+        tooltip={tooltip}
         useMemberColor
     />;
 };

src/components/views/beacon/BeaconStatusTooltip.tsx

@@ -0,0 +1,61 @@
+/*
+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, { useContext } from 'react';
+import { Beacon } from 'matrix-js-sdk/src/matrix';
+import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
+
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import CopyableText from '../elements/CopyableText';
+import BeaconStatus from './BeaconStatus';
+import { BeaconDisplayStatus } from './displayStatus';
+
+interface Props {
+    beacon: Beacon;
+}
+
+const useBeaconName = (beacon: Beacon): string => {
+    const matrixClient = useContext(MatrixClientContext);
+
+    if (beacon.beaconInfo.assetType !== LocationAssetType.Self) {
+        return beacon.beaconInfo.description;
+    }
+    const room = matrixClient.getRoom(beacon.roomId);
+    const member = room?.getMember(beacon.beaconInfoOwner);
+
+    return member?.rawDisplayName || beacon.beaconInfoOwner;
+};
+
+const BeaconStatusTooltip: React.FC<Props> = ({ beacon }) => {
+    const label = useBeaconName(beacon);
+
+    return <div className='mx_BeaconStatusTooltip'>
+        <BeaconStatus
+            beacon={beacon}
+            label={label}
+            displayStatus={BeaconDisplayStatus.Active}
+            displayLiveTimeRemaining
+            className='mx_BeaconStatusTooltip_inner'
+        >
+            <CopyableText
+                border={false}
+                getTextToCopy={() => beacon.latestLocationState?.uri}
+            />
+        </BeaconStatus>
+    </div>;
+};
+
+export default BeaconStatusTooltip;

src/components/views/beacon/BeaconViewDialog.tsx

@@ -37,6 +37,7 @@ import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
 import DialogSidebar from './DialogSidebar';
 import DialogOwnBeaconStatus from './DialogOwnBeaconStatus';
+import BeaconStatusTooltip from './BeaconStatusTooltip';
 
 interface IProps extends IDialogProps {
     roomId: Room['roomId'];
@@ -103,6 +104,7 @@ const BeaconViewDialog: React.FC<IProps> = ({
                                     key={beacon.identifier}
                                     map={map}
                                     beacon={beacon}
+                                    tooltip={<BeaconStatusTooltip beacon={beacon} />}
                                 />) }
                                 <ZoomButtons map={map} />
                             </>

src/components/views/location/Marker.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { ReactNode, useState } from 'react';
 import classNames from 'classnames';
 import { RoomMember } from 'matrix-js-sdk/src/matrix';
 
@@ -28,12 +28,39 @@ interface Props {
     roomMember?: RoomMember;
     // use member text color as background
     useMemberColor?: boolean;
+    tooltip?: ReactNode;
 }
 
+/**
+ * Wrap with tooltip handlers when
+ * tooltip is truthy
+ */
+const OptionalTooltip: React.FC<{
+    tooltip?: ReactNode; children: ReactNode;
+}> = ({ tooltip, children }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    if (!tooltip) {
+        return <>{ children }</>;
+    }
+
+    const show = () => setIsVisible(true);
+    const hide = () => setIsVisible(false);
+    const toggleVisibility = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        // stop map from zooming in on click
+        e.stopPropagation();
+        setIsVisible(!isVisible);
+    };
+
+    return <div onMouseEnter={show} onClick={toggleVisibility} onMouseLeave={hide}>
+        { children }
+        { isVisible && tooltip }
+    </div>;
+};
+
 /**
  * Generic location marker
  */
-const Marker = React.forwardRef<HTMLDivElement, Props>(({ id, roomMember, useMemberColor }, ref) => {
+const Marker = React.forwardRef<HTMLDivElement, Props>(({ id, roomMember, useMemberColor, tooltip }, ref) => {
     const memberColorClass = useMemberColor && roomMember ? getUserNameColorClass(roomMember.userId) : '';
     return <div
         ref={ref}
@@ -42,17 +69,21 @@ const Marker = React.forwardRef<HTMLDivElement, Props>(({ id, roomMember, useMem
             "mx_Marker_defaultColor": !memberColorClass,
         })}
     >
-        <div className="mx_Marker_border">
+        <OptionalTooltip tooltip={tooltip}>
-            { roomMember ?
+            <div className="mx_Marker_border">
-                <MemberAvatar
+                { roomMember ?
-                    member={roomMember}
+                    <MemberAvatar
-                    width={36}
+                        member={roomMember}
-                    height={36}
+                        width={36}
-                    viewUserOnClick={false}
+                        height={36}
-                />
+                        viewUserOnClick={false}
-                : <LocationIcon className="mx_Marker_icon" />
+                        // no mxid on hover when marker has tooltip
-            }
+                        hideTitle={!!tooltip}
-        </div>
+                    />
+                    : <LocationIcon className="mx_Marker_icon" />
+                }
+            </div>
+        </OptionalTooltip>
     </div>;
 });
 

src/components/views/location/SmartMarker.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import maplibregl from 'maplibre-gl';
 import { RoomMember } from 'matrix-js-sdk/src/matrix';
 
@@ -64,12 +64,13 @@ interface SmartMarkerProps {
     roomMember?: RoomMember;
     // use member text color as background
     useMemberColor?: boolean;
+    tooltip?: ReactNode;
 }
 
 /**
  * Generic location marker
  */
-const SmartMarker: React.FC<SmartMarkerProps> = ({ id, map, geoUri, roomMember, useMemberColor }) => {
+const SmartMarker: React.FC<SmartMarkerProps> = ({ id, map, geoUri, roomMember, useMemberColor, tooltip }) => {
     const { onElementRef } = useMapMarker(map, geoUri);
 
     return (
@@ -84,6 +85,7 @@ const SmartMarker: React.FC<SmartMarkerProps> = ({ id, map, geoUri, roomMember,
                 id={id}
                 roomMember={roomMember}
                 useMemberColor={useMemberColor}
+                tooltip={tooltip}
             />
         </span>
     );

test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap

@@ -148,83 +148,86 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
           className="mx_Marker mx_Username_color4"
           id="!room:server_@alice:server"
         >
-          <div
+          <OptionalTooltip>
-            className="mx_Marker_border"
+            <div
-          >
+              className="mx_Marker_border"
-            <MemberAvatar
-              height={36}
-              member={
-                RoomMember {
-                  "_events": Object {},
-                  "_eventsCount": 0,
-                  "_isOutOfBand": false,
-                  "_maxListeners": undefined,
-                  "_modified": 1647270879403,
-                  "_requestedProfileInfo": undefined,
-                  "disambiguate": false,
-                  "events": Object {
-                    "member": null,
-                  },
-                  "membership": null,
-                  "name": "@alice:server",
-                  "powerLevel": 0,
-                  "powerLevelNorm": 0,
-                  "rawDisplayName": "@alice:server",
-                  "roomId": "!room:server",
-                  "typing": false,
-                  "user": null,
-                  "userId": "@alice:server",
-                  Symbol(kCapture): false,
-                }
-              }
-              resizeMethod="crop"
-              viewUserOnClick={false}
-              width={36}
             >
-              <BaseAvatar
+              <MemberAvatar
                 height={36}
-                idName="@alice:server"
+                hideTitle={false}
-                name="@alice:server"
+                member={
+                  RoomMember {
+                    "_events": Object {},
+                    "_eventsCount": 0,
+                    "_isOutOfBand": false,
+                    "_maxListeners": undefined,
+                    "_modified": 1647270879403,
+                    "_requestedProfileInfo": undefined,
+                    "disambiguate": false,
+                    "events": Object {
+                      "member": null,
+                    },
+                    "membership": null,
+                    "name": "@alice:server",
+                    "powerLevel": 0,
+                    "powerLevelNorm": 0,
+                    "rawDisplayName": "@alice:server",
+                    "roomId": "!room:server",
+                    "typing": false,
+                    "user": null,
+                    "userId": "@alice:server",
+                    Symbol(kCapture): false,
+                  }
+                }
                 resizeMethod="crop"
-                title="@alice:server"
+                viewUserOnClick={false}
-                url={null}
                 width={36}
               >
-                <span
+                <BaseAvatar
-                  className="mx_BaseAvatar"
+                  height={36}
-                  role="presentation"
+                  idName="@alice:server"
+                  name="@alice:server"
+                  resizeMethod="crop"
+                  title="@alice:server"
+                  url={null}
+                  width={36}
                 >
                   <span
-                    aria-hidden="true"
+                    className="mx_BaseAvatar"
-                    className="mx_BaseAvatar_initial"
+                    role="presentation"
-                    style={
-                      Object {
-                        "fontSize": "23.400000000000002px",
-                        "lineHeight": "36px",
-                        "width": "36px",
-                      }
-                    }
                   >
-                    A
+                    <span
-                  </span>
+                      aria-hidden="true"
-                  <img
+                      className="mx_BaseAvatar_initial"
-                    alt=""
+                      style={
-                    aria-hidden="true"
+                        Object {
-                    className="mx_BaseAvatar_image"
+                          "fontSize": "23.400000000000002px",
-                    onError={[Function]}
+                          "lineHeight": "36px",
-                    src="data:image/png;base64,00"
+                          "width": "36px",
-                    style={
+                        }
-                      Object {
-                        "height": "36px",
-                        "width": "36px",
                       }
-                    }
+                    >
-                    title="@alice:server"
+                      A
-                  />
+                    </span>
-                </span>
+                    <img
-              </BaseAvatar>
+                      alt=""
-            </MemberAvatar>
+                      aria-hidden="true"
-          </div>
+                      className="mx_BaseAvatar_image"
+                      onError={[Function]}
+                      src="data:image/png;base64,00"
+                      style={
+                        Object {
+                          "height": "36px",
+                          "width": "36px",
+                        }
+                      }
+                      title="@alice:server"
+                    />
+                  </span>
+                </BaseAvatar>
+              </MemberAvatar>
+            </div>
+          </OptionalTooltip>
         </div>
       </ForwardRef>
     </span>

test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -57,13 +57,15 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
             className="mx_Marker mx_Marker_defaultColor"
             id="mx_LocationViewDialog_$2-marker"
           >
-            <div
+            <OptionalTooltip>
-              className="mx_Marker_border"
-            >
               <div
-                className="mx_Marker_icon"
+                className="mx_Marker_border"
-              />
+              >
-            </div>
+                <div
+                  className="mx_Marker_icon"
+                />
+              </div>
+            </OptionalTooltip>
           </div>
         </ForwardRef>
       </span>

test/components/views/location/__snapshots__/Marker-test.tsx.snap

@@ -8,13 +8,15 @@ exports[`<Marker /> renders with location icon when no room member 1`] = `
     className="mx_Marker mx_Marker_defaultColor"
     id="abc123"
   >
-    <div
+    <OptionalTooltip>
-      className="mx_Marker_border"
-    >
       <div
-        className="mx_Marker_icon"
+        className="mx_Marker_border"
-      />
+      >
-    </div>
+        <div
+          className="mx_Marker_icon"
+        />
+      </div>
+    </OptionalTooltip>
   </div>
 </ForwardRef>
 `;

test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap

@@ -24,13 +24,15 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
       <div
         className="mx_Marker mx_Marker_defaultColor"
       >
-        <div
+        <OptionalTooltip>
-          className="mx_Marker_border"
-        >
           <div
-            className="mx_Marker_icon"
+            className="mx_Marker_border"
-          />
+          >
-        </div>
+            <div
+              className="mx_Marker_icon"
+            />
+          </div>
+        </OptionalTooltip>
       </div>
     </ForwardRef>
   </span>
@@ -61,13 +63,15 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
       <div
         className="mx_Marker mx_Marker_defaultColor"
       >
-        <div
+        <OptionalTooltip>
-          className="mx_Marker_border"
-        >
           <div
-            className="mx_Marker_icon"
+            className="mx_Marker_border"
-          />
+          >
-        </div>
+            <div
+              className="mx_Marker_icon"
+            />
+          </div>
+        </OptionalTooltip>
       </div>
     </ForwardRef>
   </span>

test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -167,13 +167,15 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
                       className="mx_Marker mx_Marker_defaultColor"
                       id="mx_MLocationBody_$2_1f9acffa-marker"
                     >
-                      <div
+                      <OptionalTooltip>
-                        className="mx_Marker_border"
-                      >
                         <div
-                          className="mx_Marker_icon"
+                          className="mx_Marker_border"
-                        />
+                        >
-                      </div>
+                          <div
+                            className="mx_Marker_icon"
+                          />
+                        </div>
+                      </OptionalTooltip>
                     </div>
                   </ForwardRef>
                 </span>