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

Commit e59edb7

Browse files
author
Kerry
authored
Live location sharing - beacon in timeline happy path (#8285)
* extract location markers into generic Marker Signed-off-by: Kerry Archibald <[email protected]> * wrap marker in smartmarker Signed-off-by: Kerry Archibald <[email protected]> * test smartmarker Signed-off-by: Kerry Archibald <[email protected]> * working map in location body Signed-off-by: Kerry Archibald <[email protected]> * remove skinned sdk Signed-off-by: Kerry Archibald <[email protected]> * use new ZoomButtons in MLocationBody Signed-off-by: Kerry Archibald <[email protected]> * test LocationViewDialog Signed-off-by: Kerry Archibald <[email protected]> * update commentt Signed-off-by: Kerry Archibald <[email protected]> * lint Signed-off-by: Kerry Archibald <[email protected]> * lint Signed-off-by: Kerry Archibald <[email protected]> * extract livetimeremaining into own component Signed-off-by: Kerry Archibald <[email protected]> * extract more beacon state utils Signed-off-by: Kerry Archibald <[email protected]> * update tests for roomlivesharewarning Signed-off-by: Kerry Archibald <[email protected]> * add idle status to live beacon icon * add beacon map and status chin Signed-off-by: Kerry Archibald <[email protected]> * add handling for bubbles Signed-off-by: Kerry Archibald <[email protected]> * tests for BeaconBody Signed-off-by: Kerry Archibald <[email protected]> * i18n Signed-off-by: Kerry Archibald <[email protected]> * move displaystatus check up to mbeaconbody Signed-off-by: Kerry Archibald <[email protected]> * test BeaconStatus Signed-off-by: Kerry Archibald <[email protected]> * rename BeaconStatusChin -> BeaconStatus Signed-off-by: Kerry Archibald <[email protected]> * make BeaconStatus generic Signed-off-by: Kerry Archibald <[email protected]> * lint Signed-off-by: Kerry Archibald <[email protected]> * adjust spinner size Signed-off-by: Kerry Archibald <[email protected]> * polish and copyrights Signed-off-by: Kerry Archibald <[email protected]> * lint Signed-off-by: Kerry Archibald <[email protected]> * better comment Signed-off-by: Kerry Archibald <[email protected]>
1 parent b4a91ea commit e59edb7

File tree

22 files changed

+562
-91
lines changed

22 files changed

+562
-91
lines changed

‎res/css/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "./_font-sizes.scss";
55
@import "./_font-weights.scss";
66
@import "./_spacing.scss";
7+
@import "./components/views/beacon/_BeaconStatus.scss";
78
@import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
89
@import "./components/views/beacon/_LiveTimeRemaining.scss";
910
@import "./components/views/beacon/_RoomLiveShareWarning.scss";

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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_BeaconStatus {
18+
display: flex;
19+
flex-direction: row;
20+
align-items: center;
21+
justify-content: flex-start;
22+
23+
box-sizing: border-box;
24+
padding: $spacing-8;
25+
26+
color: var(--color);
27+
font-size: $font-12px;
28+
}
29+
30+
.mx_BeaconStatus_Loading,
31+
.mx_BeaconStatus_Stopped {
32+
--color: $tertiary-content;
33+
}
34+
35+
.mx_BeaconStatus_Active,
36+
.mx_BeaconStatus_Error {
37+
--color: $primary-content;
38+
}
39+
40+
.mx_BeaconStatus_icon {
41+
height: 32px;
42+
width: 32px;
43+
44+
flex: 0 0 32px;
45+
margin-right: $spacing-8;
46+
}
47+
48+
.mx_BeaconStatus_activeDescription {
49+
flex: 1;
50+
display: flex;
51+
flex-direction: column;
52+
line-height: $font-14px;
53+
}
54+
55+
.mx_BeaconStatus_stopButton {
56+
// override button link_inline styles
57+
color: $alert !important;
58+
font-weight: $font-semi-bold !important;
59+
text-transform: uppercase;
60+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ limitations under the License.
4848
margin-left: $spacing-16;
4949
}
5050

51+
.mx_RoomLiveShareWarning_stopButton {
52+
margin-left: $spacing-16;
53+
}
54+
5155
.mx_RoomLiveShareWarning_closeButtonIcon {
5256
height: $font-18px;
5357
padding: $spacing-4;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,8 @@ limitations under the License.
3333
background-color: $alert;
3434
border-color: $alert;
3535
}
36+
37+
.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
38+
background-color: $quaternary-content;
39+
border-color: $quaternary-content;
40+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@ limitations under the License.
4848
color: $quaternary-content;
4949
}
5050

51+
.mx_MBeaconBody_chin {
52+
position: absolute;
53+
bottom: 0;
54+
width: 100%;
55+
background-color: $overlay-background;
56+
}
57+
5158
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MBeaconBody {
5259
max-width: 100%;
5360
width: 450px;

‎res/themes/dark/css/_dark.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ $quinary-content: #394049;
88

99
$system: #21262C;
1010
$background: #15191E;
11+
$overlay-background: rgba($background, 0.85);
1112

1213
$panel-base: #8D97A5; // This color is not intended for use in the app
1314
$panels: rgba($system, 0.9);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@ $quaternary-content: #6F7882;
9898
$quinary-content: $quaternary-content;
9999
$system: #21262C;
100100
$background: $primary-bg-color;
101+
$overlay-background: rgba($background, 0.85);
102+
101103
$panels: rgba($system, 0.9);
102104
$panel-base: #8D97A5; // This color is not intended for use in the app
103105
$panel-selected: rgba($panel-base, 0.3);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,8 @@ $quaternary-content: #6F7882;
151151
$quinary-content: $quaternary-content;
152152
$system: #F4F6FA;
153153
$background: $primary-bg-color;
154+
$overlay-background: rgba($background, 0.85);
155+
154156
$panels: rgba($system, 0.9);
155157
$panel-base: #8D97A5; // This color is not intended for use in the app
156158
$panel-selected: rgba($tertiary-content, 0.3);

‎res/themes/light/css/_light.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ $quinary-content: #E3E8F0;
3535

3636
$system: #F4F6FA;
3737
$background: #ffffff;
38+
$overlay-background: rgba($background, 0.85);
3839

3940
$panels: rgba($system, 0.9);
4041
$panel-selected: rgba($tertiary-content, 0.3);

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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, { HTMLProps } from 'react';
18+
import classNames from 'classnames';
19+
import { Beacon } from 'matrix-js-sdk/src/matrix';
20+
21+
import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
22+
import { _t } from '../../../languageHandler';
23+
import AccessibleButton from '../elements/AccessibleButton';
24+
import LiveTimeRemaining from './LiveTimeRemaining';
25+
import { BeaconDisplayStatus } from './displayStatus';
26+
27+
interface Props {
28+
displayStatus: BeaconDisplayStatus;
29+
beacon?: Beacon;
30+
label?: string;
31+
// assumes permission to stop was checked by parent
32+
stopBeacon?: () => void;
33+
}
34+
35+
const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> =
36+
({ beacon, displayStatus, label, stopBeacon, className, ...rest }) => {
37+
const isIdle = displayStatus === BeaconDisplayStatus.Loading ||
38+
displayStatus === BeaconDisplayStatus.Stopped;
39+
40+
return <div
41+
{...rest}
42+
className={classNames('mx_BeaconStatus', `mx_BeaconStatus_${displayStatus}`, className)}
43+
>
44+
<StyledLiveBeaconIcon
45+
className='mx_BeaconStatus_icon'
46+
withError={displayStatus === BeaconDisplayStatus.Error}
47+
isIdle={isIdle}
48+
/>
49+
{ displayStatus === BeaconDisplayStatus.Loading && <span>{ _t('Loading live location...') }</span> }
50+
{ displayStatus === BeaconDisplayStatus.Stopped && <span>{ _t('Live location ended') }</span> }
51+
52+
{ /* TODO error */ }
53+
54+
{ displayStatus === BeaconDisplayStatus.Active && beacon && <>
55+
<div className='mx_BeaconStatus_activeDescription'>
56+
{ label }
57+
<LiveTimeRemaining beacon={beacon} />
58+
</div>
59+
{ stopBeacon && <AccessibleButton
60+
data-test-id='beacon-status-stop-beacon'
61+
kind='link'
62+
onClick={stopBeacon}
63+
className='mx_BeaconStatus_stopButton'
64+
>{ _t('Stop') }</AccessibleButton>
65+
}
66+
</>
67+
}
68+
</div>;
69+
};
70+
71+
export default BeaconStatus;

0 commit comments

Comments
 (0)