Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 804ddbb

Browse files
author
Kerry
authored
Live location sharing - update live location tiles (PSF-1027) (#8649)
* update map svg Signed-off-by: Kerry Archibald <[email protected]> * add map fallback component, update styls Signed-off-by: Kerry Archibald <[email protected]> * update purple location icon style Signed-off-by: Kerry Archibald <[email protected]> * fussy import ordering Signed-off-by: Kerry Archibald <[email protected]> * tidy Signed-off-by: Kerry Archibald <[email protected]>
1 parent 30b0377 commit 804ddbb

File tree

11 files changed

+181
-84
lines changed

11 files changed

+181
-84
lines changed

‎res/css/_components.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
@import "./components/views/location/_LiveDurationDropdown.scss";
2020
@import "./components/views/location/_LocationShareMenu.scss";
2121
@import "./components/views/location/_MapError.scss";
22+
@import "./components/views/location/_MapFallback.scss";
2223
@import "./components/views/location/_Marker.scss";
2324
@import "./components/views/location/_ShareDialogButtons.scss";
2425
@import "./components/views/location/_ShareType.scss";

‎res/css/components/views/beacon/_BeaconViewDialog.scss

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -59,23 +59,6 @@ limitations under the License.
5959
border-radius: 8px;
6060
}
6161

62-
.mx_BeaconViewDialog_mapFallback {
63-
box-sizing: border-box;
64-
display: flex;
65-
flex-direction: column;
66-
justify-content: center;
67-
align-items: center;
68-
69-
background: url('$(res)/img/location/map.svg');
70-
background-size: cover;
71-
}
72-
73-
.mx_BeaconViewDialog_mapFallbackIcon {
74-
width: 65px;
75-
margin-bottom: $spacing-16;
76-
color: $quaternary-content;
77-
}
78-
7962
.mx_BeaconViewDialog_mapFallbackMessage {
8063
color: $secondary-content;
8164
margin-bottom: $spacing-16;

‎res/css/components/views/beacon/_StyledLiveBeaconIcon.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ limitations under the License.
2323
border-radius: 50%;
2424

2525
background-color: $location-live-color;
26-
border-color: $location-live-secondary-color;
26+
border-color: $location-live-color;
2727
padding: 2px;
2828
// colors icon
2929
color: white;

‎res/css/components/views/location/_MapFallback.scss

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_MapFallback {
18+
box-sizing: border-box;
19+
display: flex;
20+
flex-direction: column;
21+
justify-content: center;
22+
align-items: center;
23+
position: relative;
24+
z-index: 0;
25+
26+
background-color: $system;
27+
}
28+
29+
.mx_MapFallback_bg {
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
min-height: 100%;
34+
min-width: 100%;
35+
color: $quinary-content;
36+
z-index: -1;
37+
38+
pointer-events: none;
39+
}
40+
41+
.mx_MapFallback_icon {
42+
width: 65px;
43+
margin-bottom: $spacing-16;
44+
color: $quaternary-content;
45+
}

‎res/css/components/views/messages/_MBeaconBody.scss

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,30 +26,17 @@ limitations under the License.
2626
.mx_MBeaconBody_map {
2727
height: 100%;
2828
width: 100%;
29-
z-index: 0; // keeps the entire map under the message action bar
29+
z-index: 0; // keeps the entire map under the message action bars
3030

31-
&:not(.mx_MBeaconBody_mapFallback) {
32-
cursor: pointer;
33-
}
31+
cursor: pointer;
3432
}
3533

3634
.mx_MBeaconBody_mapFallback {
37-
box-sizing: border-box;
38-
display: flex;
39-
justify-content: center;
40-
align-items: center;
41-
4235
// pushes spinner/icon up
4336
// to appear more centered with the footer
4437
padding-bottom: 50px;
4538

46-
background: url('$(res)/img/location/map.svg');
47-
background-size: cover;
48-
}
49-
50-
.mx_MBeaconBody_mapFallbackIcon {
51-
width: 65px;
52-
color: $quaternary-content;
39+
cursor: default;
5340
}
5441

5542
.mx_MBeaconBody_chin {

‎res/img/location/map.svg

Lines changed: 9 additions & 9 deletions
Loading

‎src/components/views/beacon/BeaconViewDialog.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@ import ZoomButtons from '../location/ZoomButtons';
3232
import BeaconMarker from './BeaconMarker';
3333
import { Bounds, getBeaconBounds } from '../../../utils/beacon/bounds';
3434
import { getGeoUri } from '../../../utils/beacon';
35-
import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
3635
import { _t } from '../../../languageHandler';
3736
import AccessibleButton from '../elements/AccessibleButton';
3837
import DialogSidebar from './DialogSidebar';
3938
import DialogOwnBeaconStatus from './DialogOwnBeaconStatus';
4039
import BeaconStatusTooltip from './BeaconStatusTooltip';
40+
import MapFallback from '../location/MapFallback';
4141

4242
interface IProps extends IDialogProps {
4343
roomId: Room['roomId'];
@@ -110,11 +110,10 @@ const BeaconViewDialog: React.FC<IProps> = ({
110110
</>
111111
}
112112
</Map> :
113-
<div
113+
<MapFallback
114114
data-test-id='beacon-view-dialog-map-fallback'
115-
className='mx_BeaconViewDialog_map mx_BeaconViewDialog_mapFallback'
115+
className='mx_BeaconViewDialog_map'
116116
>
117-
<LocationIcon className='mx_BeaconViewDialog_mapFallbackIcon' />
118117
<span className='mx_BeaconViewDialog_mapFallbackMessage'>{ _t('No live locations') }</span>
119118
<AccessibleButton
120119
kind='primary'
@@ -123,7 +122,7 @@ const BeaconViewDialog: React.FC<IProps> = ({
123122
>
124123
{ _t('Close') }
125124
</AccessibleButton>
126-
</div>
125+
</MapFallback>
127126
}
128127
{ isSidebarOpen ?
129128
<DialogSidebar beacons={liveBeacons} requestClose={() => setSidebarOpen(false)} /> :

‎src/components/views/location/MapFallback.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
import classNames from 'classnames';
19+
20+
import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/location.svg';
21+
import { Icon as MapFallbackImage } from '../../../../res/img/location/map.svg';
22+
import Spinner from '../elements/Spinner';
23+
24+
interface Props extends React.HTMLAttributes<HTMLDivElement> {
25+
className?: string;
26+
isLoading?: boolean;
27+
children?: React.ReactNode | React.ReactNodeArray;
28+
}
29+
30+
const MapFallback: React.FC<Props> = ({ className, isLoading, children, ...rest }) => {
31+
return <div className={classNames('mx_MapFallback', className)} {...rest}>
32+
<MapFallbackImage className='mx_MapFallback_bg' />
33+
{ /* <div className='mx_MapFallback_bg'/> */ }
34+
{ isLoading ? <Spinner h={32} w={32} /> : <LocationMarkerIcon className='mx_MapFallback_icon' /> }
35+
{ children }
36+
</div>;
37+
};
38+
39+
export default MapFallback;

‎src/components/views/messages/MBeaconBody.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { Beacon, BeaconEvent, MatrixEvent } from 'matrix-js-sdk/src/matrix';
1919
import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers';
2020
import { randomString } from 'matrix-js-sdk/src/randomstring';
2121

22-
import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/location.svg';
2322
import MatrixClientContext from '../../../contexts/MatrixClientContext';
2423
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
2524
import { _t } from '../../../languageHandler';
@@ -28,8 +27,8 @@ import { useBeacon } from '../../../utils/beacon';
2827
import { isSelfLocation } from '../../../utils/location';
2928
import { BeaconDisplayStatus, getBeaconDisplayStatus } from '../beacon/displayStatus';
3029
import BeaconStatus from '../beacon/BeaconStatus';
31-
import Spinner from '../elements/Spinner';
3230
import Map from '../location/Map';
31+
import MapFallback from '../location/MapFallback';
3332
import SmartMarker from '../location/SmartMarker';
3433
import OwnBeaconStatus from '../beacon/OwnBeaconStatus';
3534
import BeaconViewDialog from '../beacon/BeaconViewDialog';
@@ -134,12 +133,10 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
134133
/>
135134
}
136135
</Map>
137-
: <div className='mx_MBeaconBody_map mx_MBeaconBody_mapFallback'>
138-
{ displayStatus === BeaconDisplayStatus.Loading ?
139-
<Spinner h={32} w={32} /> :
140-
<LocationMarkerIcon className='mx_MBeaconBody_mapFallbackIcon' />
141-
}
142-
</div>
136+
: <MapFallback
137+
isLoading={displayStatus === BeaconDisplayStatus.Loading}
138+
className='mx_MBeaconBody_map mx_MBeaconBody_mapFallback'
139+
/>
143140
}
144141
{ isOwnBeacon ?
145142
<OwnBeaconStatus

0 commit comments

Comments
 (0)