Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Kerry 2022-05-13 10:30:53 +02:00 committed by GitHub
parent fdd5494402
commit fbbb9c27ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 271 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
res/css/_components.scss
View File

@ -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";

1
res/css/components/views/beacon/_BeaconListItem.scss
View File

@ -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;

7
res/css/components/views/beacon/_BeaconStatus.scss
View File

@ -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;
}

37
res/css/components/views/beacon/_BeaconStatusTooltip.scss Normal file
View File

@ -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;
}

6
src/components/views/beacon/BeaconMarker.tsx
View File

@ -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
/>;
};

61
src/components/views/beacon/BeaconStatusTooltip.tsx Normal file
View File

@ -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;

2
src/components/views/beacon/BeaconViewDialog.tsx
View File

@ -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} />
</>

57
src/components/views/location/Marker.tsx
View File

@ -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">
{ roomMember ?
<MemberAvatar
member={roomMember}
width={36}
height={36}
viewUserOnClick={false}
/>
: <LocationIcon className="mx_Marker_icon" />
}
</div>
<OptionalTooltip tooltip={tooltip}>
<div className="mx_Marker_border">
{ roomMember ?
<MemberAvatar
member={roomMember}
width={36}
height={36}
viewUserOnClick={false}
// no mxid on hover when marker has tooltip
hideTitle={!!tooltip}
/>
: <LocationIcon className="mx_Marker_icon" />
}
</div>
</OptionalTooltip>
</div>;
});

6
src/components/views/location/SmartMarker.tsx
View File

@ -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>
);

139
test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
View File

@ -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
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}
<OptionalTooltip>
<div
className="mx_Marker_border"
>
<BaseAvatar
<MemberAvatar
height={36}
idName="@alice:server"
name="@alice:server"
hideTitle={false}
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"
url={null}
viewUserOnClick={false}
width={36}
>
<span
className="mx_BaseAvatar"
role="presentation"
<BaseAvatar
height={36}
idName="@alice:server"
name="@alice:server"
resizeMethod="crop"
title="@alice:server"
url={null}
width={36}
>
<span
aria-hidden="true"
className="mx_BaseAvatar_initial"
style={
Object {
"fontSize": "23.400000000000002px",
"lineHeight": "36px",
"width": "36px",
}
}
className="mx_BaseAvatar"
role="presentation"
>
A
</span>
<img
alt=""
aria-hidden="true"
className="mx_BaseAvatar_image"
onError={[Function]}
src="data:image/png;base64,00"
style={
Object {
"height": "36px",
"width": "36px",
<span
aria-hidden="true"
className="mx_BaseAvatar_initial"
style={
Object {
"fontSize": "23.400000000000002px",
"lineHeight": "36px",
"width": "36px",
}
}
}
title="@alice:server"
/>
</span>
</BaseAvatar>
</MemberAvatar>
</div>
>
A
</span>
<img
alt=""
aria-hidden="true"
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>

14
test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
View File

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

14
test/components/views/location/__snapshots__/Marker-test.tsx.snap
View File

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

28
test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap
View File

@ -24,13 +24,15 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
<div
className="mx_Marker mx_Marker_defaultColor"
>
<div
className="mx_Marker_border"
>
<OptionalTooltip>
<div
className="mx_Marker_icon"
/>
</div>
className="mx_Marker_border"
>
<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
className="mx_Marker_border"
>
<OptionalTooltip>
<div
className="mx_Marker_icon"
/>
</div>
className="mx_Marker_border"
>
<div
className="mx_Marker_icon"
/>
</div>
</OptionalTooltip>
</div>
</ForwardRef>
</span>

14
test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
View File

@ -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
className="mx_Marker_border"
>
<OptionalTooltip>
<div
className="mx_Marker_icon"
/>
</div>
className="mx_Marker_border"
>
<div
className="mx_Marker_icon"
/>
</div>
</OptionalTooltip>
</div>
</ForwardRef>
</span>