From 804ddbb332fc40c274031d33f12e05388169fb0c Mon Sep 17 00:00:00 2001 From: Kerry Date: Fri, 20 May 2022 11:49:01 +0200 Subject: [PATCH] Live location sharing - update live location tiles (PSF-1027) (#8649) * update map svg Signed-off-by: Kerry Archibald * add map fallback component, update styls Signed-off-by: Kerry Archibald * update purple location icon style Signed-off-by: Kerry Archibald * fussy import ordering Signed-off-by: Kerry Archibald * tidy Signed-off-by: Kerry Archibald --- res/css/_components.scss | 1 + .../views/beacon/_BeaconViewDialog.scss | 17 ---- .../views/beacon/_StyledLiveBeaconIcon.scss | 2 +- .../views/location/_MapFallback.scss | 45 +++++++++ .../views/messages/_MBeaconBody.scss | 19 +--- res/img/location/map.svg | 18 ++-- .../views/beacon/BeaconViewDialog.tsx | 9 +- src/components/views/location/MapFallback.tsx | 39 ++++++++ src/components/views/messages/MBeaconBody.tsx | 13 +-- .../BeaconViewDialog-test.tsx.snap | 98 ++++++++++++++----- .../views/messages/MBeaconBody-test.tsx | 6 +- 11 files changed, 182 insertions(+), 85 deletions(-) create mode 100644 res/css/components/views/location/_MapFallback.scss create mode 100644 src/components/views/location/MapFallback.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index fe09ea499b..9b808463ac 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -19,6 +19,7 @@ @import "./components/views/location/_LiveDurationDropdown.scss"; @import "./components/views/location/_LocationShareMenu.scss"; @import "./components/views/location/_MapError.scss"; +@import "./components/views/location/_MapFallback.scss"; @import "./components/views/location/_Marker.scss"; @import "./components/views/location/_ShareDialogButtons.scss"; @import "./components/views/location/_ShareType.scss"; diff --git a/res/css/components/views/beacon/_BeaconViewDialog.scss b/res/css/components/views/beacon/_BeaconViewDialog.scss index 6ad1a2a613..0fff721053 100644 --- a/res/css/components/views/beacon/_BeaconViewDialog.scss +++ b/res/css/components/views/beacon/_BeaconViewDialog.scss @@ -59,23 +59,6 @@ limitations under the License. border-radius: 8px; } -.mx_BeaconViewDialog_mapFallback { - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - background: url('$(res)/img/location/map.svg'); - background-size: cover; -} - -.mx_BeaconViewDialog_mapFallbackIcon { - width: 65px; - margin-bottom: $spacing-16; - color: $quaternary-content; -} - .mx_BeaconViewDialog_mapFallbackMessage { color: $secondary-content; margin-bottom: $spacing-16; diff --git a/res/css/components/views/beacon/_StyledLiveBeaconIcon.scss b/res/css/components/views/beacon/_StyledLiveBeaconIcon.scss index 9096c3c71f..5f9a1920e8 100644 --- a/res/css/components/views/beacon/_StyledLiveBeaconIcon.scss +++ b/res/css/components/views/beacon/_StyledLiveBeaconIcon.scss @@ -23,7 +23,7 @@ limitations under the License. border-radius: 50%; background-color: $location-live-color; - border-color: $location-live-secondary-color; + border-color: $location-live-color; padding: 2px; // colors icon color: white; diff --git a/res/css/components/views/location/_MapFallback.scss b/res/css/components/views/location/_MapFallback.scss new file mode 100644 index 0000000000..b40e98c692 --- /dev/null +++ b/res/css/components/views/location/_MapFallback.scss @@ -0,0 +1,45 @@ +/* +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_MapFallback { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + z-index: 0; + + background-color: $system; +} + +.mx_MapFallback_bg { + position: absolute; + top: 0; + left: 0; + min-height: 100%; + min-width: 100%; + color: $quinary-content; + z-index: -1; + + pointer-events: none; +} + +.mx_MapFallback_icon { + width: 65px; + margin-bottom: $spacing-16; + color: $quaternary-content; +} diff --git a/res/css/components/views/messages/_MBeaconBody.scss b/res/css/components/views/messages/_MBeaconBody.scss index dc63d6676d..5654f14a05 100644 --- a/res/css/components/views/messages/_MBeaconBody.scss +++ b/res/css/components/views/messages/_MBeaconBody.scss @@ -26,30 +26,17 @@ limitations under the License. .mx_MBeaconBody_map { height: 100%; width: 100%; - z-index: 0; // keeps the entire map under the message action bar + z-index: 0; // keeps the entire map under the message action bars - &:not(.mx_MBeaconBody_mapFallback) { - cursor: pointer; - } + cursor: pointer; } .mx_MBeaconBody_mapFallback { - box-sizing: border-box; - display: flex; - justify-content: center; - align-items: center; - // pushes spinner/icon up // to appear more centered with the footer padding-bottom: 50px; - background: url('$(res)/img/location/map.svg'); - background-size: cover; -} - -.mx_MBeaconBody_mapFallbackIcon { - width: 65px; - color: $quaternary-content; + cursor: default; } .mx_MBeaconBody_chin { diff --git a/res/img/location/map.svg b/res/img/location/map.svg index 67be3a35ad..9719d8f614 100644 --- a/res/img/location/map.svg +++ b/res/img/location/map.svg @@ -1,9 +1,9 @@ - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/src/components/views/beacon/BeaconViewDialog.tsx b/src/components/views/beacon/BeaconViewDialog.tsx index a7cdb242d3..f3e2fd12a1 100644 --- a/src/components/views/beacon/BeaconViewDialog.tsx +++ b/src/components/views/beacon/BeaconViewDialog.tsx @@ -32,12 +32,12 @@ import ZoomButtons from '../location/ZoomButtons'; import BeaconMarker from './BeaconMarker'; import { Bounds, getBeaconBounds } from '../../../utils/beacon/bounds'; import { getGeoUri } from '../../../utils/beacon'; -import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg'; import { _t } from '../../../languageHandler'; import AccessibleButton from '../elements/AccessibleButton'; import DialogSidebar from './DialogSidebar'; import DialogOwnBeaconStatus from './DialogOwnBeaconStatus'; import BeaconStatusTooltip from './BeaconStatusTooltip'; +import MapFallback from '../location/MapFallback'; interface IProps extends IDialogProps { roomId: Room['roomId']; @@ -110,11 +110,10 @@ const BeaconViewDialog: React.FC = ({ } : -
- { _t('No live locations') } = ({ > { _t('Close') } -
+ } { isSidebarOpen ? setSidebarOpen(false)} /> : diff --git a/src/components/views/location/MapFallback.tsx b/src/components/views/location/MapFallback.tsx new file mode 100644 index 0000000000..75545d5e0f --- /dev/null +++ b/src/components/views/location/MapFallback.tsx @@ -0,0 +1,39 @@ +/* +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 classNames from 'classnames'; + +import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/location.svg'; +import { Icon as MapFallbackImage } from '../../../../res/img/location/map.svg'; +import Spinner from '../elements/Spinner'; + +interface Props extends React.HTMLAttributes { + className?: string; + isLoading?: boolean; + children?: React.ReactNode | React.ReactNodeArray; +} + +const MapFallback: React.FC = ({ className, isLoading, children, ...rest }) => { + return
+ + { /*
*/ } + { isLoading ? : } + { children } +
; +}; + +export default MapFallback; diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index fb82cff29e..bd581d1bce 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -19,7 +19,6 @@ import { Beacon, BeaconEvent, MatrixEvent } from 'matrix-js-sdk/src/matrix'; import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers'; import { randomString } from 'matrix-js-sdk/src/randomstring'; -import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/location.svg'; import MatrixClientContext from '../../../contexts/MatrixClientContext'; import { useEventEmitterState } from '../../../hooks/useEventEmitter'; import { _t } from '../../../languageHandler'; @@ -28,8 +27,8 @@ import { useBeacon } from '../../../utils/beacon'; import { isSelfLocation } from '../../../utils/location'; import { BeaconDisplayStatus, getBeaconDisplayStatus } from '../beacon/displayStatus'; import BeaconStatus from '../beacon/BeaconStatus'; -import Spinner from '../elements/Spinner'; import Map from '../location/Map'; +import MapFallback from '../location/MapFallback'; import SmartMarker from '../location/SmartMarker'; import OwnBeaconStatus from '../beacon/OwnBeaconStatus'; import BeaconViewDialog from '../beacon/BeaconViewDialog'; @@ -134,12 +133,10 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => /> } - :
- { displayStatus === BeaconDisplayStatus.Loading ? - : - - } -
+ : } { isOwnBeacon ? renders a fallback when no live beacons remain 1`] = ` -
-
- - No live locations - -
+
+
+ + No live locations + + +
+ Close +
+ +
+ , +
+
+
+ + No live locations + + - Close -
- -
+
+ Close +
+ +
, +] `; diff --git a/test/components/views/messages/MBeaconBody-test.tsx b/test/components/views/messages/MBeaconBody-test.tsx index 5afbb05c78..8719df567d 100644 --- a/test/components/views/messages/MBeaconBody-test.tsx +++ b/test/components/views/messages/MBeaconBody-test.tsx @@ -116,7 +116,7 @@ describe('', () => { makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient }); const component = getComponent({ mxEvent: beaconInfoEvent }); act(() => { - component.find('.mx_MBeaconBody_map').simulate('click'); + component.find('.mx_MBeaconBody_map').at(0).simulate('click'); }); expect(modalSpy).not.toHaveBeenCalled(); @@ -230,7 +230,7 @@ describe('', () => { const component = getComponent({ mxEvent: aliceBeaconInfo }); act(() => { - component.find('.mx_MBeaconBody_map').simulate('click'); + component.find('.mx_MBeaconBody_map').at(0).simulate('click'); }); expect(modalSpy).not.toHaveBeenCalled(); @@ -264,7 +264,7 @@ describe('', () => { const component = getComponent({ mxEvent: aliceBeaconInfo }); act(() => { - component.find('.mx_MBeaconBody_map').simulate('click'); + component.find('.mx_MBeaconBody_map').at(0).simulate('click'); }); expect(modalSpy).not.toHaveBeenCalled();