From ca322f1ad3b12b8a9a176ecc6a9a96b7a06a6f0c Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 4 Apr 2022 17:17:22 +0200 Subject: [PATCH 01/33] extract location markers into generic Marker Signed-off-by: Kerry Archibald --- src/components/views/location/Marker.tsx | 5 ++--- .../views/location/__snapshots__/Marker-test.tsx.snap | 4 ++-- .../location/__snapshots__/SmartMarker-test.tsx.snap | 8 ++++---- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/views/location/Marker.tsx b/src/components/views/location/Marker.tsx index bacade71cf4..7978e0d5330 100644 --- a/src/components/views/location/Marker.tsx +++ b/src/components/views/location/Marker.tsx @@ -33,10 +33,9 @@ interface Props { /** * Generic location marker */ -const Marker = React.forwardRef(({ id, roomMember, useMemberColor }, ref) => { +const Marker: React.FC = ({ id, roomMember, useMemberColor }) => { const memberColorClass = useMemberColor && roomMember ? getUserNameColorClass(roomMember.userId) : ''; return
(({ id, roomMember, useMem }
; -}); +}; export default Marker; diff --git a/test/components/views/location/__snapshots__/Marker-test.tsx.snap b/test/components/views/location/__snapshots__/Marker-test.tsx.snap index b7596d1af8a..8030f6448e1 100644 --- a/test/components/views/location/__snapshots__/Marker-test.tsx.snap +++ b/test/components/views/location/__snapshots__/Marker-test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` renders with location icon when no room member 1`] = ` -
renders with location icon when no room member 1`] = ` />
- + `; diff --git a/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap b/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap index 064b3ccff66..a8bd04a76ab 100644 --- a/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap +++ b/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap @@ -18,7 +18,7 @@ exports[` creates a marker on mount 1`] = ` } } > - +
@@ -30,7 +30,7 @@ exports[` creates a marker on mount 1`] = ` />
- + `; @@ -52,7 +52,7 @@ exports[` removes marker on unmount 1`] = ` } } > - +
@@ -64,6 +64,6 @@ exports[` removes marker on unmount 1`] = ` />
- + `; From b214ebb64299b3d1bc2db8fc46d225493beb9ab8 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 5 Apr 2022 16:47:56 +0200 Subject: [PATCH 02/33] wrap marker in smartmarker Signed-off-by: Kerry Archibald --- src/components/views/location/Marker.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/views/location/Marker.tsx b/src/components/views/location/Marker.tsx index 7978e0d5330..bacade71cf4 100644 --- a/src/components/views/location/Marker.tsx +++ b/src/components/views/location/Marker.tsx @@ -33,9 +33,10 @@ interface Props { /** * Generic location marker */ -const Marker: React.FC = ({ id, roomMember, useMemberColor }) => { +const Marker = React.forwardRef(({ id, roomMember, useMemberColor }, ref) => { const memberColorClass = useMemberColor && roomMember ? getUserNameColorClass(roomMember.userId) : ''; return
= ({ id, roomMember, useMemberColor }) => { }
; -}; +}); export default Marker; From b5742f1615d22ed2d6a9ddd6138d2500609dd8ad Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 5 Apr 2022 17:17:04 +0200 Subject: [PATCH 03/33] test smartmarker Signed-off-by: Kerry Archibald --- .../views/location/__snapshots__/Marker-test.tsx.snap | 4 ++-- .../location/__snapshots__/SmartMarker-test.tsx.snap | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/test/components/views/location/__snapshots__/Marker-test.tsx.snap b/test/components/views/location/__snapshots__/Marker-test.tsx.snap index 8030f6448e1..b7596d1af8a 100644 --- a/test/components/views/location/__snapshots__/Marker-test.tsx.snap +++ b/test/components/views/location/__snapshots__/Marker-test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` renders with location icon when no room member 1`] = ` -
renders with location icon when no room member 1`] = ` />
- + `; diff --git a/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap b/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap index a8bd04a76ab..064b3ccff66 100644 --- a/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap +++ b/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap @@ -18,7 +18,7 @@ exports[` creates a marker on mount 1`] = ` } } > - +
@@ -30,7 +30,7 @@ exports[` creates a marker on mount 1`] = ` />
- + `; @@ -52,7 +52,7 @@ exports[` removes marker on unmount 1`] = ` } } > - +
@@ -64,6 +64,6 @@ exports[` removes marker on unmount 1`] = ` />
- + `; From 44c41d74a97c4e863fc1cee598184408b8874f42 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 5 Apr 2022 18:13:13 +0200 Subject: [PATCH 04/33] working map in location body Signed-off-by: Kerry Archibald --- res/css/_components.scss | 1 + res/css/components/views/location/_Map.scss | 18 ++++++++++++++++++ res/css/views/messages/_MLocationBody.scss | 2 ++ src/components/views/location/SmartMarker.tsx | 2 ++ 4 files changed, 23 insertions(+) create mode 100644 res/css/components/views/location/_Map.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 38d539248ca..2b94af8672f 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -11,6 +11,7 @@ @import "./components/views/beacon/_StyledLiveBeaconIcon.scss"; @import "./components/views/location/_LiveDurationDropdown.scss"; @import "./components/views/location/_LocationShareMenu.scss"; +@import "./components/views/location/_Map.scss"; @import "./components/views/location/_MapError.scss"; @import "./components/views/location/_Marker.scss"; @import "./components/views/location/_ShareDialogButtons.scss"; diff --git a/res/css/components/views/location/_Map.scss b/res/css/components/views/location/_Map.scss new file mode 100644 index 00000000000..4744848a99a --- /dev/null +++ b/res/css/components/views/location/_Map.scss @@ -0,0 +1,18 @@ +/* +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_Map { +} diff --git a/res/css/views/messages/_MLocationBody.scss b/res/css/views/messages/_MLocationBody.scss index 9c7e2767d74..d97a689e21d 100644 --- a/res/css/views/messages/_MLocationBody.scss +++ b/res/css/views/messages/_MLocationBody.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_MLocationBody { + width: 450px; + height: 300px; .mx_MLocationBody_map { width: 450px; height: 300px; diff --git a/src/components/views/location/SmartMarker.tsx b/src/components/views/location/SmartMarker.tsx index 29207eb6e35..aedb6e123ce 100644 --- a/src/components/views/location/SmartMarker.tsx +++ b/src/components/views/location/SmartMarker.tsx @@ -72,6 +72,8 @@ interface SmartMarkerProps { const SmartMarker: React.FC = ({ id, map, geoUri, roomMember, useMemberColor }) => { const { onElementRef } = useMapMarker(map, geoUri); + console.log('hhhh ', id); + return Date: Tue, 5 Apr 2022 20:03:49 +0200 Subject: [PATCH 05/33] remove skinned sdk Signed-off-by: Kerry Archibald --- src/components/views/messages/MLocationBody.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/MLocationBody.tsx b/src/components/views/messages/MLocationBody.tsx index 94abc1c7a88..40197e4dc6c 100644 --- a/src/components/views/messages/MLocationBody.tsx +++ b/src/components/views/messages/MLocationBody.tsx @@ -98,10 +98,10 @@ export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent, error: return
- { message } + {message}
- { locationFallback } + {locationFallback}
; }; @@ -149,7 +149,7 @@ export const LocationBodyContent: React.FC = ({ alignment={Alignment.InnerBottom} maxParentWidth={450} > - { mapElement } + {mapElement} : mapElement } From 480cd16baf8e71eef50519bbb70450f8373fff23 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 11:24:00 +0200 Subject: [PATCH 06/33] use new ZoomButtons in MLocationBody Signed-off-by: Kerry Archibald --- res/css/views/messages/_MLocationBody.scss | 2 -- src/components/views/location/LocationViewDialog.tsx | 1 + src/components/views/location/SmartMarker.tsx | 2 -- 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/res/css/views/messages/_MLocationBody.scss b/res/css/views/messages/_MLocationBody.scss index d97a689e21d..9c7e2767d74 100644 --- a/res/css/views/messages/_MLocationBody.scss +++ b/res/css/views/messages/_MLocationBody.scss @@ -15,8 +15,6 @@ limitations under the License. */ .mx_MLocationBody { - width: 450px; - height: 300px; .mx_MLocationBody_map { width: 450px; height: 300px; diff --git a/src/components/views/location/LocationViewDialog.tsx b/src/components/views/location/LocationViewDialog.tsx index 9719013ee4c..6bfe3b38bfd 100644 --- a/src/components/views/location/LocationViewDialog.tsx +++ b/src/components/views/location/LocationViewDialog.tsx @@ -62,6 +62,7 @@ export default class LocationViewDialog extends React.Component className='mx_LocationViewDialog' onFinished={this.props.onFinished} fixedWidth={false} + > = ({ id, map, geoUri, roomMember, useMemberColor }) => { const { onElementRef } = useMapMarker(map, geoUri); - console.log('hhhh ', id); - return Date: Mon, 11 Apr 2022 12:11:58 +0200 Subject: [PATCH 07/33] test LocationViewDialog Signed-off-by: Kerry Archibald --- res/css/_components.scss | 1 - res/css/components/views/location/_Map.scss | 18 ------------------ .../views/location/LocationViewDialog.tsx | 1 - .../views/messages/MLocationBody.tsx | 2 +- 4 files changed, 1 insertion(+), 21 deletions(-) delete mode 100644 res/css/components/views/location/_Map.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 2b94af8672f..38d539248ca 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -11,7 +11,6 @@ @import "./components/views/beacon/_StyledLiveBeaconIcon.scss"; @import "./components/views/location/_LiveDurationDropdown.scss"; @import "./components/views/location/_LocationShareMenu.scss"; -@import "./components/views/location/_Map.scss"; @import "./components/views/location/_MapError.scss"; @import "./components/views/location/_Marker.scss"; @import "./components/views/location/_ShareDialogButtons.scss"; diff --git a/res/css/components/views/location/_Map.scss b/res/css/components/views/location/_Map.scss deleted file mode 100644 index 4744848a99a..00000000000 --- a/res/css/components/views/location/_Map.scss +++ /dev/null @@ -1,18 +0,0 @@ -/* -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_Map { -} diff --git a/src/components/views/location/LocationViewDialog.tsx b/src/components/views/location/LocationViewDialog.tsx index 6bfe3b38bfd..9719013ee4c 100644 --- a/src/components/views/location/LocationViewDialog.tsx +++ b/src/components/views/location/LocationViewDialog.tsx @@ -62,7 +62,6 @@ export default class LocationViewDialog extends React.Component className='mx_LocationViewDialog' onFinished={this.props.onFinished} fixedWidth={false} - > = ({ alignment={Alignment.InnerBottom} maxParentWidth={450} > - {mapElement} + { mapElement } : mapElement } From 475ebd891818a5cc3f6753da330fa0a5e4200d3d Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 12:22:47 +0200 Subject: [PATCH 08/33] update commentt Signed-off-by: Kerry Archibald --- src/components/views/location/Map.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/location/Map.tsx b/src/components/views/location/Map.tsx index 8776e8e8264..a270de9c3e0 100644 --- a/src/components/views/location/Map.tsx +++ b/src/components/views/location/Map.tsx @@ -94,7 +94,7 @@ const Map: React.FC = ({ id={bodyId} onClick={onMapClick} > - { !!children && !!map && children({ map }) } + {!!children && !!map && children({ map })} ; }; From dc74e11d21ffc33712a8d1b58b3163a0ac911498 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 12:31:40 +0200 Subject: [PATCH 09/33] lint Signed-off-by: Kerry Archibald --- src/components/views/location/Map.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/location/Map.tsx b/src/components/views/location/Map.tsx index a270de9c3e0..8776e8e8264 100644 --- a/src/components/views/location/Map.tsx +++ b/src/components/views/location/Map.tsx @@ -94,7 +94,7 @@ const Map: React.FC = ({ id={bodyId} onClick={onMapClick} > - {!!children && !!map && children({ map })} + { !!children && !!map && children({ map }) } ; }; From 26e968a569ed29903777f1ea7ac9b9c45158a1bd Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 14:10:19 +0200 Subject: [PATCH 10/33] lint Signed-off-by: Kerry Archibald --- src/components/views/messages/MLocationBody.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/messages/MLocationBody.tsx b/src/components/views/messages/MLocationBody.tsx index c560f4928f8..94abc1c7a88 100644 --- a/src/components/views/messages/MLocationBody.tsx +++ b/src/components/views/messages/MLocationBody.tsx @@ -98,10 +98,10 @@ export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent, error: return
- {message} + { message }
- {locationFallback} + { locationFallback }
; }; From 060f35f612b32f010111bb318592a6d84ee063a6 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 15:58:04 +0200 Subject: [PATCH 11/33] extract livetimeremaining into own component Signed-off-by: Kerry Archibald --- src/components/views/beacon/LiveTimeRemaining.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/beacon/LiveTimeRemaining.tsx b/src/components/views/beacon/LiveTimeRemaining.tsx index 1f25706a13f..2a8ff5d8956 100644 --- a/src/components/views/beacon/LiveTimeRemaining.tsx +++ b/src/components/views/beacon/LiveTimeRemaining.tsx @@ -69,7 +69,7 @@ const LiveTimeRemaining: React.FC<{ beacon: Beacon }> = ({ beacon }) => { return { liveTimeRemaining }; + >{liveTimeRemaining}; }; export default LiveTimeRemaining; From 3049e64551db3acc912d3e5a027a18216f13b52a Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 16:51:12 +0200 Subject: [PATCH 12/33] extract more beacon state utils Signed-off-by: Kerry Archibald --- src/components/views/beacon/LiveTimeRemaining.tsx | 2 +- src/components/views/beacon/RoomLiveShareWarning.tsx | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/views/beacon/LiveTimeRemaining.tsx b/src/components/views/beacon/LiveTimeRemaining.tsx index 2a8ff5d8956..1f25706a13f 100644 --- a/src/components/views/beacon/LiveTimeRemaining.tsx +++ b/src/components/views/beacon/LiveTimeRemaining.tsx @@ -69,7 +69,7 @@ const LiveTimeRemaining: React.FC<{ beacon: Beacon }> = ({ beacon }) => { return {liveTimeRemaining}; + >{ liveTimeRemaining }; }; export default LiveTimeRemaining; diff --git a/src/components/views/beacon/RoomLiveShareWarning.tsx b/src/components/views/beacon/RoomLiveShareWarning.tsx index 01c749a26ab..33a22639aa3 100644 --- a/src/components/views/beacon/RoomLiveShareWarning.tsx +++ b/src/components/views/beacon/RoomLiveShareWarning.tsx @@ -72,13 +72,13 @@ const RoomLiveShareWarningInner: React.FC = ({ l - { getLabel(hasWireError, hasStopSharingError) } + {getLabel(hasWireError, hasStopSharingError)} - { stoppingInProgress && + {stoppingInProgress && } - { !stoppingInProgress && !hasError && } + {!stoppingInProgress && !hasError && } = ({ l element='button' disabled={stoppingInProgress} > - { hasError ? _t('Retry') : _t('Stop sharing') } + {hasError ? _t('Retry') : _t('Stop sharing')} - { hasWireError && = ({ l onClick={onStopSharing} > - } + } ; }; From ead91c1c4ee46bc886621d1122f3a0ed431c51f9 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 17:12:56 +0200 Subject: [PATCH 13/33] update tests for roomlivesharewarning Signed-off-by: Kerry Archibald --- .../views/beacon/_BeaconStatusChin.scss | 65 +++++++++++++ .../views/beacon/BeaconStatusChin.tsx | 92 +++++++++++++++++++ .../views/beacon/BeaconStatusChin-test.tsx | 16 ++++ 3 files changed, 173 insertions(+) create mode 100644 res/css/components/views/beacon/_BeaconStatusChin.scss create mode 100644 src/components/views/beacon/BeaconStatusChin.tsx create mode 100644 test/components/views/beacon/BeaconStatusChin-test.tsx diff --git a/res/css/components/views/beacon/_BeaconStatusChin.scss b/res/css/components/views/beacon/_BeaconStatusChin.scss new file mode 100644 index 00000000000..88364796bda --- /dev/null +++ b/res/css/components/views/beacon/_BeaconStatusChin.scss @@ -0,0 +1,65 @@ +/* +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_BeaconStatusChin { + box-sizing: border-box; + position: absolute; + bottom: 0; + width: 100%; + + background-color: $overlay-background; + padding: $spacing-8; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + + color: var(--color); + font-size: $font-12px; +} + +.mx_BeaconStatusChin_Loading, +.mx_BeaconStatusChin_Stopped { + --color: $tertiary-content; +} + +.mx_BeaconStatusChin_Active, +.mx_BeaconStatusChin_Error { + --color: $primary-content; +} + +.mx_BeaconStatusChin_icon { + height: 32px; + width: 32px; + + flex: 0 0 32px; + margin-right: $spacing-8; +} + +.mx_BeaconStatusChin_activeDescription { + flex: 1; + display: flex; + flex-direction: column; + line-height: $font-14px; +} + +.mx_BeaconStatusChin_stopButton { + // override button link_inline styles + color: $alert !important; + font-weight: $font-semi-bold !important; + text-transform: uppercase; +} diff --git a/src/components/views/beacon/BeaconStatusChin.tsx b/src/components/views/beacon/BeaconStatusChin.tsx new file mode 100644 index 00000000000..84260f2e415 --- /dev/null +++ b/src/components/views/beacon/BeaconStatusChin.tsx @@ -0,0 +1,92 @@ +/* +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, { HTMLProps } from 'react'; +import classNames from 'classnames'; +import { Beacon } from 'matrix-js-sdk/src/matrix'; +import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers'; + +import StyledLiveBeaconIcon from './StyledLiveBeaconIcon'; +import { _t } from '../../../languageHandler'; +import AccessibleButton from '../elements/AccessibleButton'; +import LiveTimeRemaining from './LiveTimeRemaining'; + +interface Props { + beacon?: Beacon; + error?: Error; + isLive?: boolean; + latestLocationState?: BeaconLocationState; + // assumes permission to stop was checked by parent + stopBeacon?: () => void; +} + +enum DisplayStatus { + Loading = 'Loading', + Error = 'Error', + Stopped = 'Stopped', + Active = 'Active', +} +const getStatus = ( + isLive: boolean, + latestLocationState?: BeaconLocationState, + error?: Error): DisplayStatus => { + if (error) { + return DisplayStatus.Error; + } + if (!isLive) { + return DisplayStatus.Stopped; + } + + if (!latestLocationState) { + return DisplayStatus.Loading; + } + if (latestLocationState) { + return DisplayStatus.Active; + } +}; + +const BeaconStatusChin: React.FC> = + ({ beacon, latestLocationState, error, isLive, stopBeacon, ...rest }) => { + + const status = getStatus(isLive, latestLocationState, error); + const isIdle = status === DisplayStatus.Loading || status === DisplayStatus.Stopped; + const isOwnBeacon = false; + return
+ + {status === DisplayStatus.Loading && {_t('Loading live location...')}} + {status === DisplayStatus.Stopped && {_t('Live location ended')}} + + { /* TODO error */} + + {status === DisplayStatus.Active && <> +
+ {isOwnBeacon ? _t('Live location enabled') : _t('View live location')} + +
+ {_t('Stop')} + + } +
; + }; + +export default BeaconStatusChin; diff --git a/test/components/views/beacon/BeaconStatusChin-test.tsx b/test/components/views/beacon/BeaconStatusChin-test.tsx new file mode 100644 index 00000000000..f430908da60 --- /dev/null +++ b/test/components/views/beacon/BeaconStatusChin-test.tsx @@ -0,0 +1,16 @@ + +import React from 'react'; +import { mount } from 'enzyme'; + +import BeaconStatusChin from '../../../../src/components/views/beacon/BeaconStatusChin'; + +describe('', () => { + const defaultProps = {}; + const getComponent = (props = {}) => + mount(); + + it('renders', () => { + const component = getComponent(); + expect(component).toBeTruthy(); + }); +}); From a010145feed6cc9aa6d76bb2ef674b61fd31dcf7 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 17:31:35 +0200 Subject: [PATCH 14/33] add beacon map and status chin Signed-off-by: Kerry Archibald --- .../views/beacon/BeaconStatusChin.tsx | 20 +++---- src/components/views/messages/MBeaconBody.tsx | 4 +- .../__snapshots__/MBeaconBody-test.tsx.snap | 56 +++++++++++++++++++ 3 files changed, 68 insertions(+), 12 deletions(-) create mode 100644 test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap diff --git a/src/components/views/beacon/BeaconStatusChin.tsx b/src/components/views/beacon/BeaconStatusChin.tsx index 84260f2e415..3806c33fa98 100644 --- a/src/components/views/beacon/BeaconStatusChin.tsx +++ b/src/components/views/beacon/BeaconStatusChin.tsx @@ -28,6 +28,7 @@ interface Props { beacon?: Beacon; error?: Error; isLive?: boolean; + label?: string; latestLocationState?: BeaconLocationState; // assumes permission to stop was checked by parent stopBeacon?: () => void; @@ -59,31 +60,30 @@ const getStatus = ( }; const BeaconStatusChin: React.FC> = - ({ beacon, latestLocationState, error, isLive, stopBeacon, ...rest }) => { - + ({ beacon, latestLocationState, error, isLive, label, stopBeacon, ...rest }) => { const status = getStatus(isLive, latestLocationState, error); const isIdle = status === DisplayStatus.Loading || status === DisplayStatus.Stopped; - const isOwnBeacon = false; return
- {status === DisplayStatus.Loading && {_t('Loading live location...')}} - {status === DisplayStatus.Stopped && {_t('Live location ended')}} + { status === DisplayStatus.Loading && { _t('Loading live location...') } } + { status === DisplayStatus.Stopped && { _t('Live location ended') } } - { /* TODO error */} + { /* TODO error */ } - {status === DisplayStatus.Active && <> + { status === DisplayStatus.Active && <>
- {isOwnBeacon ? _t('Live location enabled') : _t('View live location')} + { label }
- {_t('Stop')} + >{ _t('Stop') } + } }
; diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index ed40bfdda75..1a1f0a2f94a 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -92,7 +92,7 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => return (
- { displayStatus === BeaconDisplayStatus.Active ? + {displayStatus === BeaconDisplayStatus.Active ? = React.forwardRef(({ mxEvent }, ref) => } :
- { displayStatus === BeaconDisplayStatus.Loading ? + {displayStatus === BeaconDisplayStatus.Loading ? : } diff --git a/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap new file mode 100644 index 00000000000..74afc187c12 --- /dev/null +++ b/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders a live beacon with basic stub 1`] = ` + +
+ +
+ +
+ + + Loading live location... + +
+ +
+ +`; From 0af3d96af99c77188eeccf315b85ee7f677af620 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 17:40:00 +0200 Subject: [PATCH 15/33] add handling for bubbles Signed-off-by: Kerry Archibald --- src/utils/EventRenderingUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/EventRenderingUtils.ts b/src/utils/EventRenderingUtils.ts index fd6e518c4f2..2e818074fc4 100644 --- a/src/utils/EventRenderingUtils.ts +++ b/src/utils/EventRenderingUtils.ts @@ -18,7 +18,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { EventType, MsgType } from "matrix-js-sdk/src/@types/event"; import { M_POLL_START } from "matrix-events-sdk"; import { M_LOCATION } from "matrix-js-sdk/src/@types/location"; -import { M_BEACON_INFO } from "matrix-js-sdk/src/@types/beacon"; +import { M_BEACON, M_BEACON_INFO } from "matrix-js-sdk/src/@types/beacon"; import SettingsStore from "../settings/SettingsStore"; import { haveRendererForEvent, JitsiEventFactory, JSONEventFactory, pickFactory } from "../events/EventTileFactory"; From 7971cb0b0d365c406ef4102e19da9524b9a6dc5c Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 17:52:13 +0200 Subject: [PATCH 16/33] tests for BeaconBody Signed-off-by: Kerry Archibald --- src/utils/EventRenderingUtils.ts | 2 +- .../__snapshots__/MBeaconBody-test.tsx.snap | 56 ------------------- 2 files changed, 1 insertion(+), 57 deletions(-) delete mode 100644 test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap diff --git a/src/utils/EventRenderingUtils.ts b/src/utils/EventRenderingUtils.ts index 2e818074fc4..fd6e518c4f2 100644 --- a/src/utils/EventRenderingUtils.ts +++ b/src/utils/EventRenderingUtils.ts @@ -18,7 +18,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { EventType, MsgType } from "matrix-js-sdk/src/@types/event"; import { M_POLL_START } from "matrix-events-sdk"; import { M_LOCATION } from "matrix-js-sdk/src/@types/location"; -import { M_BEACON, M_BEACON_INFO } from "matrix-js-sdk/src/@types/beacon"; +import { M_BEACON_INFO } from "matrix-js-sdk/src/@types/beacon"; import SettingsStore from "../settings/SettingsStore"; import { haveRendererForEvent, JitsiEventFactory, JSONEventFactory, pickFactory } from "../events/EventTileFactory"; diff --git a/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap deleted file mode 100644 index 74afc187c12..00000000000 --- a/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap +++ /dev/null @@ -1,56 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders a live beacon with basic stub 1`] = ` - -
- -
- -
- - - Loading live location... - -
- -
- -`; From 091fc5a738ef6f673f64ddd043cc07bc14d5b50b Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 18:12:29 +0200 Subject: [PATCH 17/33] move displaystatus check up to mbeaconbody Signed-off-by: Kerry Archibald --- .../views/beacon/BeaconStatusChin.tsx | 50 +++++-------------- 1 file changed, 13 insertions(+), 37 deletions(-) diff --git a/src/components/views/beacon/BeaconStatusChin.tsx b/src/components/views/beacon/BeaconStatusChin.tsx index 3806c33fa98..ac1eea82c93 100644 --- a/src/components/views/beacon/BeaconStatusChin.tsx +++ b/src/components/views/beacon/BeaconStatusChin.tsx @@ -17,63 +17,39 @@ limitations under the License. import React, { HTMLProps } from 'react'; import classNames from 'classnames'; import { Beacon } from 'matrix-js-sdk/src/matrix'; -import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers'; import StyledLiveBeaconIcon from './StyledLiveBeaconIcon'; import { _t } from '../../../languageHandler'; import AccessibleButton from '../elements/AccessibleButton'; import LiveTimeRemaining from './LiveTimeRemaining'; +import { BeaconDisplayStatus } from './displayStatus'; interface Props { beacon?: Beacon; - error?: Error; - isLive?: boolean; + displayStatus: BeaconDisplayStatus; label?: string; - latestLocationState?: BeaconLocationState; // assumes permission to stop was checked by parent stopBeacon?: () => void; } -enum DisplayStatus { - Loading = 'Loading', - Error = 'Error', - Stopped = 'Stopped', - Active = 'Active', -} -const getStatus = ( - isLive: boolean, - latestLocationState?: BeaconLocationState, - error?: Error): DisplayStatus => { - if (error) { - return DisplayStatus.Error; - } - if (!isLive) { - return DisplayStatus.Stopped; - } - - if (!latestLocationState) { - return DisplayStatus.Loading; - } - if (latestLocationState) { - return DisplayStatus.Active; - } -}; - const BeaconStatusChin: React.FC> = - ({ beacon, latestLocationState, error, isLive, label, stopBeacon, ...rest }) => { - const status = getStatus(isLive, latestLocationState, error); - const isIdle = status === DisplayStatus.Loading || status === DisplayStatus.Stopped; + ({ beacon, displayStatus, label, stopBeacon, ...rest }) => { + const isIdle = displayStatus === BeaconDisplayStatus.Loading || status === BeaconDisplayStatus.Stopped; return
- - { status === DisplayStatus.Loading && { _t('Loading live location...') } } - { status === DisplayStatus.Stopped && { _t('Live location ended') } } + + { displayStatus === BeaconDisplayStatus.Loading && { _t('Loading live location...') } } + { displayStatus === BeaconDisplayStatus.Stopped && { _t('Live location ended') } } { /* TODO error */ } - { status === DisplayStatus.Active && <> + { displayStatus === BeaconDisplayStatus.Active && <>
{ label } From 6d1c3f7caa9de7c0214505f51eae42f10cf1e6e4 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 18:41:36 +0200 Subject: [PATCH 18/33] test BeaconStatus Signed-off-by: Kerry Archibald --- .../views/beacon/BeaconStatusChin.tsx | 8 +- src/components/views/messages/MBeaconBody.tsx | 9 +- .../views/beacon/BeaconStatusChin-test.tsx | 44 +++- .../BeaconStatusChin-test.tsx.snap | 195 ++++++++++++++++++ 4 files changed, 245 insertions(+), 11 deletions(-) create mode 100644 test/components/views/beacon/__snapshots__/BeaconStatusChin-test.tsx.snap diff --git a/src/components/views/beacon/BeaconStatusChin.tsx b/src/components/views/beacon/BeaconStatusChin.tsx index ac1eea82c93..1466b163159 100644 --- a/src/components/views/beacon/BeaconStatusChin.tsx +++ b/src/components/views/beacon/BeaconStatusChin.tsx @@ -25,8 +25,8 @@ import LiveTimeRemaining from './LiveTimeRemaining'; import { BeaconDisplayStatus } from './displayStatus'; interface Props { - beacon?: Beacon; displayStatus: BeaconDisplayStatus; + beacon?: Beacon; label?: string; // assumes permission to stop was checked by parent stopBeacon?: () => void; @@ -34,7 +34,8 @@ interface Props { const BeaconStatusChin: React.FC> = ({ beacon, displayStatus, label, stopBeacon, ...rest }) => { - const isIdle = displayStatus === BeaconDisplayStatus.Loading || status === BeaconDisplayStatus.Stopped; + const isIdle = displayStatus === BeaconDisplayStatus.Loading || + displayStatus === BeaconDisplayStatus.Stopped; return
> = { /* TODO error */ } - { displayStatus === BeaconDisplayStatus.Active && <> + { displayStatus === BeaconDisplayStatus.Active && beacon && <>
{ label }
{ stopBeacon && = React.forwardRef(({ mxEvent }, ref) => } :
- {displayStatus === BeaconDisplayStatus.Loading ? - : - + { + displayStatus === BeaconDisplayStatus.Loading ? + : + } -
+
} ', () => { - const defaultProps = {}; + const defaultProps = { + displayStatus: BeaconDisplayStatus.Loading, + }; const getComponent = (props = {}) => mount(); - it('renders', () => { - const component = getComponent(); - expect(component).toBeTruthy(); + it('renders loading state', () => { + const component = getComponent({ displayStatus: BeaconDisplayStatus.Loading }); + expect(component).toMatchSnapshot(); + }); + + it('renders stopped state', () => { + const component = getComponent({ displayStatus: BeaconDisplayStatus.Stopped }); + expect(component).toMatchSnapshot(); + }); + + it('renders active state without stop buttons', () => { + // mock for stable snapshot + jest.spyOn(Date, 'now').mockReturnValue(123456789); + const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1')); + const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active }); + expect(component).toMatchSnapshot(); + }); + + it('renders active state with stop button', () => { + const stopBeacon = jest.fn(); + const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:sever')); + const component = getComponent({ + beacon, + stopBeacon, + displayStatus: BeaconDisplayStatus.Active, + }); + expect(findByTestId(component, 'beacon-status-stop-beacon')).toMatchSnapshot(); + + act(() => { + findByTestId(component, 'beacon-status-stop-beacon').at(0).simulate('click'); + }); + + expect(stopBeacon).toHaveBeenCalled(); }); }); diff --git a/test/components/views/beacon/__snapshots__/BeaconStatusChin-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatusChin-test.tsx.snap new file mode 100644 index 00000000000..ab1ad38e818 --- /dev/null +++ b/test/components/views/beacon/__snapshots__/BeaconStatusChin-test.tsx.snap @@ -0,0 +1,195 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders active state with stop button 1`] = ` +Array [ + +
+ Stop +
+ , +
+ Stop +
, +] +`; + +exports[` renders active state without stop buttons 1`] = ` + +
+ +
+ +
+ + + 1h left + + +
+
+ +`; + +exports[` renders loading state 1`] = ` + +
+ +
+ + + Loading live location... + +
+ +`; + +exports[` renders stopped state 1`] = ` + +
+ +
+ + + Live location ended + +
+ +`; From b14811a29ed20d7990441060c5bb3964f4061cbe Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 18:43:39 +0200 Subject: [PATCH 19/33] rename BeaconStatusChin -> BeaconStatus Signed-off-by: Kerry Archibald --- .../views/beacon/_BeaconStatusChin.scss | 65 ------ src/components/views/beacon/BeaconStatus.tsx | 14 +- .../views/beacon/BeaconStatusChin.tsx | 70 ------- .../views/beacon/BeaconStatusChin-test.tsx | 52 ----- .../BeaconStatusChin-test.tsx.snap | 195 ------------------ 5 files changed, 7 insertions(+), 389 deletions(-) delete mode 100644 res/css/components/views/beacon/_BeaconStatusChin.scss delete mode 100644 src/components/views/beacon/BeaconStatusChin.tsx delete mode 100644 test/components/views/beacon/BeaconStatusChin-test.tsx delete mode 100644 test/components/views/beacon/__snapshots__/BeaconStatusChin-test.tsx.snap diff --git a/res/css/components/views/beacon/_BeaconStatusChin.scss b/res/css/components/views/beacon/_BeaconStatusChin.scss deleted file mode 100644 index 88364796bda..00000000000 --- a/res/css/components/views/beacon/_BeaconStatusChin.scss +++ /dev/null @@ -1,65 +0,0 @@ -/* -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_BeaconStatusChin { - box-sizing: border-box; - position: absolute; - bottom: 0; - width: 100%; - - background-color: $overlay-background; - padding: $spacing-8; - - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - - color: var(--color); - font-size: $font-12px; -} - -.mx_BeaconStatusChin_Loading, -.mx_BeaconStatusChin_Stopped { - --color: $tertiary-content; -} - -.mx_BeaconStatusChin_Active, -.mx_BeaconStatusChin_Error { - --color: $primary-content; -} - -.mx_BeaconStatusChin_icon { - height: 32px; - width: 32px; - - flex: 0 0 32px; - margin-right: $spacing-8; -} - -.mx_BeaconStatusChin_activeDescription { - flex: 1; - display: flex; - flex-direction: column; - line-height: $font-14px; -} - -.mx_BeaconStatusChin_stopButton { - // override button link_inline styles - color: $alert !important; - font-weight: $font-semi-bold !important; - text-transform: uppercase; -} diff --git a/src/components/views/beacon/BeaconStatus.tsx b/src/components/views/beacon/BeaconStatus.tsx index 15c94732fc7..487aca2d54b 100644 --- a/src/components/views/beacon/BeaconStatus.tsx +++ b/src/components/views/beacon/BeaconStatus.tsx @@ -46,22 +46,22 @@ const BeaconStatus: React.FC> = withError={displayStatus === BeaconDisplayStatus.Error} isIdle={isIdle} /> - { displayStatus === BeaconDisplayStatus.Loading && { _t('Loading live location...') } } - { displayStatus === BeaconDisplayStatus.Stopped && { _t('Live location ended') } } + {displayStatus === BeaconDisplayStatus.Loading && {_t('Loading live location...')}} + {displayStatus === BeaconDisplayStatus.Stopped && {_t('Live location ended')}} - { /* TODO error */ } + { /* TODO error */} - { displayStatus === BeaconDisplayStatus.Active && beacon && <> + {displayStatus === BeaconDisplayStatus.Active && beacon && <>
- { label } + {label}
- { stopBeacon && { _t('Stop') } + >{_t('Stop')} } } diff --git a/src/components/views/beacon/BeaconStatusChin.tsx b/src/components/views/beacon/BeaconStatusChin.tsx deleted file mode 100644 index 1466b163159..00000000000 --- a/src/components/views/beacon/BeaconStatusChin.tsx +++ /dev/null @@ -1,70 +0,0 @@ -/* -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, { HTMLProps } from 'react'; -import classNames from 'classnames'; -import { Beacon } from 'matrix-js-sdk/src/matrix'; - -import StyledLiveBeaconIcon from './StyledLiveBeaconIcon'; -import { _t } from '../../../languageHandler'; -import AccessibleButton from '../elements/AccessibleButton'; -import LiveTimeRemaining from './LiveTimeRemaining'; -import { BeaconDisplayStatus } from './displayStatus'; - -interface Props { - displayStatus: BeaconDisplayStatus; - beacon?: Beacon; - label?: string; - // assumes permission to stop was checked by parent - stopBeacon?: () => void; -} - -const BeaconStatusChin: React.FC> = - ({ beacon, displayStatus, label, stopBeacon, ...rest }) => { - const isIdle = displayStatus === BeaconDisplayStatus.Loading || - displayStatus === BeaconDisplayStatus.Stopped; - return
- - { displayStatus === BeaconDisplayStatus.Loading && { _t('Loading live location...') } } - { displayStatus === BeaconDisplayStatus.Stopped && { _t('Live location ended') } } - - { /* TODO error */ } - - { displayStatus === BeaconDisplayStatus.Active && beacon && <> -
- { label } - -
- { stopBeacon && { _t('Stop') } - } - - } -
; - }; - -export default BeaconStatusChin; diff --git a/test/components/views/beacon/BeaconStatusChin-test.tsx b/test/components/views/beacon/BeaconStatusChin-test.tsx deleted file mode 100644 index bd983150150..00000000000 --- a/test/components/views/beacon/BeaconStatusChin-test.tsx +++ /dev/null @@ -1,52 +0,0 @@ - -import React from 'react'; -import { mount } from 'enzyme'; -import { Beacon } from 'matrix-js-sdk/src/matrix'; -import { act } from 'react-dom/test-utils'; - -import BeaconStatusChin from '../../../../src/components/views/beacon/BeaconStatusChin'; -import { BeaconDisplayStatus } from '../../../../src/components/views/beacon/displayStatus'; -import { findByTestId, makeBeaconInfoEvent } from '../../../test-utils'; - -describe('', () => { - const defaultProps = { - displayStatus: BeaconDisplayStatus.Loading, - }; - const getComponent = (props = {}) => - mount(); - - it('renders loading state', () => { - const component = getComponent({ displayStatus: BeaconDisplayStatus.Loading }); - expect(component).toMatchSnapshot(); - }); - - it('renders stopped state', () => { - const component = getComponent({ displayStatus: BeaconDisplayStatus.Stopped }); - expect(component).toMatchSnapshot(); - }); - - it('renders active state without stop buttons', () => { - // mock for stable snapshot - jest.spyOn(Date, 'now').mockReturnValue(123456789); - const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1')); - const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active }); - expect(component).toMatchSnapshot(); - }); - - it('renders active state with stop button', () => { - const stopBeacon = jest.fn(); - const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:sever')); - const component = getComponent({ - beacon, - stopBeacon, - displayStatus: BeaconDisplayStatus.Active, - }); - expect(findByTestId(component, 'beacon-status-stop-beacon')).toMatchSnapshot(); - - act(() => { - findByTestId(component, 'beacon-status-stop-beacon').at(0).simulate('click'); - }); - - expect(stopBeacon).toHaveBeenCalled(); - }); -}); diff --git a/test/components/views/beacon/__snapshots__/BeaconStatusChin-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatusChin-test.tsx.snap deleted file mode 100644 index ab1ad38e818..00000000000 --- a/test/components/views/beacon/__snapshots__/BeaconStatusChin-test.tsx.snap +++ /dev/null @@ -1,195 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders active state with stop button 1`] = ` -Array [ - -
- Stop -
- , -
- Stop -
, -] -`; - -exports[` renders active state without stop buttons 1`] = ` - -
- -
- -
- - - 1h left - - -
-
- -`; - -exports[` renders loading state 1`] = ` - -
- -
- - - Loading live location... - -
- -`; - -exports[` renders stopped state 1`] = ` - -
- -
- - - Live location ended - -
- -`; From de008324f5dee6c1beacec9c7610fe177c1061c0 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 18:47:31 +0200 Subject: [PATCH 20/33] make BeaconStatus generic Signed-off-by: Kerry Archibald --- res/css/components/views/beacon/_BeaconStatus.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.scss index fa971ffd0fd..a7ead93ac88 100644 --- a/res/css/components/views/beacon/_BeaconStatus.scss +++ b/res/css/components/views/beacon/_BeaconStatus.scss @@ -19,6 +19,9 @@ limitations under the License. flex-direction: row; align-items: center; justify-content: flex-start; + + box-sizing: border-box; + padding: $spacing-8; box-sizing: border-box; padding: $spacing-8; From 26e2366eefe4552988f98968e6321eac40ecd77b Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 18:48:24 +0200 Subject: [PATCH 21/33] lint Signed-off-by: Kerry Archibald --- res/css/components/views/beacon/_BeaconStatus.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.scss index a7ead93ac88..c2a5ad3eb51 100644 --- a/res/css/components/views/beacon/_BeaconStatus.scss +++ b/res/css/components/views/beacon/_BeaconStatus.scss @@ -19,7 +19,7 @@ limitations under the License. flex-direction: row; align-items: center; justify-content: flex-start; - + box-sizing: border-box; padding: $spacing-8; From 393d1fba8e3741bbc8d8f70af6285f0c24460d57 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 11 Apr 2022 18:58:46 +0200 Subject: [PATCH 22/33] adjust spinner size Signed-off-by: Kerry Archibald --- src/components/views/messages/MBeaconBody.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index 72bce501c46..18870483831 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -110,10 +110,9 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => } :
- { - displayStatus === BeaconDisplayStatus.Loading ? - : - + {displayStatus === BeaconDisplayStatus.Loading ? + : + }
} From 7053df830ce2cae39b3b61a514e42aa813d3e2d3 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Apr 2022 10:33:51 +0200 Subject: [PATCH 23/33] lint Signed-off-by: Kerry Archibald --- src/components/views/messages/MBeaconBody.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index 18870483831..ed40bfdda75 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -92,7 +92,7 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => return (
- {displayStatus === BeaconDisplayStatus.Active ? + { displayStatus === BeaconDisplayStatus.Active ? = React.forwardRef(({ mxEvent }, ref) => } :
- {displayStatus === BeaconDisplayStatus.Loading ? + { displayStatus === BeaconDisplayStatus.Loading ? : } -
+
} Date: Tue, 12 Apr 2022 14:41:39 +0200 Subject: [PATCH 24/33] add static time remaining option to beacon status Signed-off-by: Kerry Archibald --- src/components/views/beacon/BeaconStatus.tsx | 23 +++++++- src/i18n/strings/en_EN.json | 1 + .../views/beacon/BeaconStatus-test.tsx | 57 +++++++++++++------ .../__snapshots__/BeaconStatus-test.tsx.snap | 27 ++++----- 4 files changed, 71 insertions(+), 37 deletions(-) diff --git a/src/components/views/beacon/BeaconStatus.tsx b/src/components/views/beacon/BeaconStatus.tsx index 487aca2d54b..4fcc22c0f1e 100644 --- a/src/components/views/beacon/BeaconStatus.tsx +++ b/src/components/views/beacon/BeaconStatus.tsx @@ -23,17 +23,33 @@ import { _t } from '../../../languageHandler'; import AccessibleButton from '../elements/AccessibleButton'; import LiveTimeRemaining from './LiveTimeRemaining'; import { BeaconDisplayStatus } from './displayStatus'; +import { getBeaconExpiryTimestamp } from '../../../utils/beacon'; +import { formatTime } from '../../../DateUtils'; interface Props { displayStatus: BeaconDisplayStatus; + displayLiveTimeRemaining?: boolean; beacon?: Beacon; label?: string; // assumes permission to stop was checked by parent stopBeacon?: () => void; } +const BeaconExpiryTime: React.FC<{ beacon: Beacon }> = ({ beacon }) => { + const expiryTime = formatTime(new Date(getBeaconExpiryTimestamp(beacon))); + return {_t('Live until %(expiryTime)s', { expiryTime })}; +}; + const BeaconStatus: React.FC> = - ({ beacon, displayStatus, label, stopBeacon, className, ...rest }) => { + ({ + beacon, + displayStatus, + displayLiveTimeRemaining, + label, + className, + stopBeacon, + ...rest + }) => { const isIdle = displayStatus === BeaconDisplayStatus.Loading || displayStatus === BeaconDisplayStatus.Stopped; @@ -54,7 +70,10 @@ const BeaconStatus: React.FC> = {displayStatus === BeaconDisplayStatus.Active && beacon && <>
{label} - + {displayLiveTimeRemaining ? + : + + }
{stopBeacon && ', () => { expect(component).toMatchSnapshot(); }); - it('renders active state without stop buttons', () => { - // mock for stable snapshot - jest.spyOn(Date, 'now').mockReturnValue(123456789); - const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1')); - const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active }); - expect(component).toMatchSnapshot(); - }); + describe('active state', () => { + it('renders without stop buttons', () => { + // mock for stable snapshot + jest.spyOn(Date, 'now').mockReturnValue(123456789); + const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1')); + const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active }); + expect(component).toMatchSnapshot(); + }); - it('renders active state with stop button', () => { - const stopBeacon = jest.fn(); - const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:sever')); - const component = getComponent({ - beacon, - stopBeacon, - displayStatus: BeaconDisplayStatus.Active, + it('renders with stop button', () => { + const stopBeacon = jest.fn(); + const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:sever')); + const component = getComponent({ + beacon, + stopBeacon, + displayStatus: BeaconDisplayStatus.Active, + }); + expect(findByTestId(component, 'beacon-status-stop-beacon')).toMatchSnapshot(); + + act(() => { + findByTestId(component, 'beacon-status-stop-beacon').at(0).simulate('click'); + }); + + expect(stopBeacon).toHaveBeenCalled(); }); - expect(findByTestId(component, 'beacon-status-stop-beacon')).toMatchSnapshot(); - act(() => { - findByTestId(component, 'beacon-status-stop-beacon').at(0).simulate('click'); + it('renders static remaining time when displayLiveTimeRemaining is falsy', () => { + // mock for stable snapshot + jest.spyOn(Date, 'now').mockReturnValue(123456789); + const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1')); + const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active }); + expect(component.text().includes('Live until 11:17')).toBeTruthy(); }); - expect(stopBeacon).toHaveBeenCalled(); + it('renders live time remaining when displayLiveTimeRemaining is truthy', () => { + // mock for stable snapshot + jest.spyOn(Date, 'now').mockReturnValue(123456789); + const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1')); + const component = getComponent({ + beacon, displayStatus: BeaconDisplayStatus.Active, + displayLiveTimeRemaining: true, + }); + expect(component.text().includes('1h left')).toBeTruthy(); + }); }); }); diff --git a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap index cf0ef327540..fd14f1d6a6c 100644 --- a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` renders active state with stop button 1`] = ` +exports[` active state renders with stop button 1`] = ` Array [ renders active state without stop buttons 1`] = ` +exports[` active state renders without stop buttons 1`] = ` renders active state without stop buttons 1`] = ` "timeout": 3600000, "timestamp": 123456789, }, - "_events": Object { - "Beacon.update": [Function], - }, - "_eventsCount": 1, + "_events": Object {}, + "_eventsCount": 0, "_isLive": undefined, "_latestLocationState": undefined, "_maxListeners": undefined, @@ -95,7 +93,7 @@ exports[` renders active state without stop buttons 1`] = `
- renders active state without stop buttons 1`] = ` "timeout": 3600000, "timestamp": 123456789, }, - "_events": Object { - "Beacon.update": [Function], - }, - "_eventsCount": 1, + "_events": Object {}, + "_eventsCount": 0, "_isLive": undefined, "_latestLocationState": undefined, "_maxListeners": undefined, @@ -136,13 +132,10 @@ exports[` renders active state without stop buttons 1`] = ` } } > - - 1h left + + Live until 11:17 - +
From 4227b15647e265087c6e53a6fb7562df3122ec59 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Apr 2022 14:48:58 +0200 Subject: [PATCH 25/33] render time differently for own beacon Signed-off-by: Kerry Archibald --- res/css/components/views/beacon/_BeaconStatus.scss | 4 ++++ src/components/views/beacon/BeaconStatus.tsx | 2 +- src/components/views/messages/MBeaconBody.tsx | 11 +++++++---- src/i18n/strings/en_EN.json | 2 +- .../beacon/__snapshots__/BeaconStatus-test.tsx.snap | 4 +++- 5 files changed, 16 insertions(+), 7 deletions(-) diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.scss index c2a5ad3eb51..dcc3e62ea7f 100644 --- a/res/css/components/views/beacon/_BeaconStatus.scss +++ b/res/css/components/views/beacon/_BeaconStatus.scss @@ -61,3 +61,7 @@ limitations under the License. font-weight: $font-semi-bold !important; text-transform: uppercase; } + +.mx_BeaconStatus_expiryTime { + color: $secondary-content; +} diff --git a/src/components/views/beacon/BeaconStatus.tsx b/src/components/views/beacon/BeaconStatus.tsx index 4fcc22c0f1e..39992d84db0 100644 --- a/src/components/views/beacon/BeaconStatus.tsx +++ b/src/components/views/beacon/BeaconStatus.tsx @@ -37,7 +37,7 @@ interface Props { const BeaconExpiryTime: React.FC<{ beacon: Beacon }> = ({ beacon }) => { const expiryTime = formatTime(new Date(getBeaconExpiryTimestamp(beacon))); - return {_t('Live until %(expiryTime)s', { expiryTime })}; + return {_t('Live until %(expiryTime)s', { expiryTime })}; }; const BeaconStatus: React.FC> = diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index ed40bfdda75..bf2546096b6 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useEffect, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; 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'; @@ -30,6 +30,7 @@ import SmartMarker from '../location/SmartMarker'; import BeaconStatus from '../beacon/BeaconStatus'; import { IBodyProps } from "./IBodyProps"; import { _t } from '../../../languageHandler'; +import MatrixClientContext from '../../../contexts/MatrixClientContext'; const useBeaconState = (beaconInfoEvent: MatrixEvent): { beacon?: Beacon; @@ -83,13 +84,13 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => latestLocationState, } = useBeaconState(mxEvent); const mapId = useUniqueId(mxEvent.getId()); - const [error, setError] = useState(); - + const matrixClient = useContext(MatrixClientContext); const displayStatus = getBeaconDisplayStatus(isLive, latestLocationState, error); - const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined; + const isOwnBeacon = beacon?.beaconInfoOwner === matrixClient.getUserId(); + return (
{ displayStatus === BeaconDisplayStatus.Active ? @@ -106,6 +107,7 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => id={`${mapId}-marker`} geoUri={latestLocationState.uri} roomMember={markerRoomMember} + useMemberColor /> } @@ -121,6 +123,7 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => beacon={beacon} displayStatus={displayStatus} label={_t('View live location')} + displayLiveTimeRemaining={isOwnBeacon} />
); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index ab0cdf0c52d..d1d5b933d38 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2901,7 +2901,7 @@ "Beta": "Beta", "Leave the beta": "Leave the beta", "Join the beta": "Join the beta", - "until %(expiryTime)s": "until %(expiryTime)s", + "Live until %(expiryTime)s": "Live until %(expiryTime)s", "Loading live location...": "Loading live location...", "Live location ended": "Live location ended", "An error occured whilst sharing your live location": "An error occured whilst sharing your live location", diff --git a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap index fd14f1d6a6c..6ca6b11a99a 100644 --- a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap @@ -132,7 +132,9 @@ exports[` active state renders without stop buttons 1`] = ` } } > - + Live until 11:17 From 02d6983467a3d436bc3631dc74d42a1b1d404188 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Apr 2022 15:05:47 +0200 Subject: [PATCH 26/33] use children to add actions to BeaconStatus Signed-off-by: Kerry Archibald --- .../views/beacon/_BeaconStatus.scss | 6 +- src/components/views/beacon/BeaconStatus.tsx | 41 ++++++------- .../views/beacon/RoomLiveShareWarning.tsx | 12 ++-- .../views/beacon/BeaconStatus-test.tsx | 15 ++--- .../__snapshots__/BeaconStatus-test.tsx.snap | 61 ++++++------------- 5 files changed, 50 insertions(+), 85 deletions(-) diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.scss index dcc3e62ea7f..119909e2443 100644 --- a/res/css/components/views/beacon/_BeaconStatus.scss +++ b/res/css/components/views/beacon/_BeaconStatus.scss @@ -48,11 +48,15 @@ limitations under the License. margin-right: $spacing-8; } -.mx_BeaconStatus_activeDescription { +.mx_BeaconStatus_description { flex: 1; display: flex; flex-direction: column; line-height: $font-14px; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .mx_BeaconStatus_stopButton { diff --git a/src/components/views/beacon/BeaconStatus.tsx b/src/components/views/beacon/BeaconStatus.tsx index 39992d84db0..eca3f365893 100644 --- a/src/components/views/beacon/BeaconStatus.tsx +++ b/src/components/views/beacon/BeaconStatus.tsx @@ -31,13 +31,11 @@ interface Props { displayLiveTimeRemaining?: boolean; beacon?: Beacon; label?: string; - // assumes permission to stop was checked by parent - stopBeacon?: () => void; } const BeaconExpiryTime: React.FC<{ beacon: Beacon }> = ({ beacon }) => { const expiryTime = formatTime(new Date(getBeaconExpiryTimestamp(beacon))); - return {_t('Live until %(expiryTime)s', { expiryTime })}; + return { _t('Live until %(expiryTime)s', { expiryTime }) }; }; const BeaconStatus: React.FC> = @@ -47,7 +45,7 @@ const BeaconStatus: React.FC> = displayLiveTimeRemaining, label, className, - stopBeacon, + children, ...rest }) => { const isIdle = displayStatus === BeaconDisplayStatus.Loading || @@ -62,28 +60,25 @@ const BeaconStatus: React.FC> = withError={displayStatus === BeaconDisplayStatus.Error} isIdle={isIdle} /> - {displayStatus === BeaconDisplayStatus.Loading && {_t('Loading live location...')}} - {displayStatus === BeaconDisplayStatus.Stopped && {_t('Live location ended')}} +
- { /* TODO error */} + { displayStatus === BeaconDisplayStatus.Loading && { _t('Loading live location...') } } + { displayStatus === BeaconDisplayStatus.Stopped && { _t('Live location ended') } } - {displayStatus === BeaconDisplayStatus.Active && beacon && <> -
- {label} - {displayLiveTimeRemaining ? - : - - } -
- {stopBeacon && {_t('Stop')} + { /* TODO error */ } + + { displayStatus === BeaconDisplayStatus.Active && beacon && <> + <> + { label } + { displayLiveTimeRemaining ? + : + + } + + } - - } +
+ { children }
; }; diff --git a/src/components/views/beacon/RoomLiveShareWarning.tsx b/src/components/views/beacon/RoomLiveShareWarning.tsx index 33a22639aa3..01c749a26ab 100644 --- a/src/components/views/beacon/RoomLiveShareWarning.tsx +++ b/src/components/views/beacon/RoomLiveShareWarning.tsx @@ -72,13 +72,13 @@ const RoomLiveShareWarningInner: React.FC = ({ l - {getLabel(hasWireError, hasStopSharingError)} + { getLabel(hasWireError, hasStopSharingError) } - {stoppingInProgress && + { stoppingInProgress && } - {!stoppingInProgress && !hasError && } + { !stoppingInProgress && !hasError && } = ({ l element='button' disabled={stoppingInProgress} > - {hasError ? _t('Retry') : _t('Stop sharing')} + { hasError ? _t('Retry') : _t('Stop sharing') } - {hasWireError && = ({ l onClick={onStopSharing} > - } + }
; }; diff --git a/test/components/views/beacon/BeaconStatus-test.tsx b/test/components/views/beacon/BeaconStatus-test.tsx index ca5bd7c87ed..426bdc785e5 100644 --- a/test/components/views/beacon/BeaconStatus-test.tsx +++ b/test/components/views/beacon/BeaconStatus-test.tsx @@ -41,7 +41,7 @@ describe('', () => { }); describe('active state', () => { - it('renders without stop buttons', () => { + it('renders without children', () => { // mock for stable snapshot jest.spyOn(Date, 'now').mockReturnValue(123456789); const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1')); @@ -49,21 +49,14 @@ describe('', () => { expect(component).toMatchSnapshot(); }); - it('renders with stop button', () => { - const stopBeacon = jest.fn(); + it('renders with children', () => { const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:sever')); const component = getComponent({ beacon, - stopBeacon, + children: test, displayStatus: BeaconDisplayStatus.Active, }); - expect(findByTestId(component, 'beacon-status-stop-beacon')).toMatchSnapshot(); - - act(() => { - findByTestId(component, 'beacon-status-stop-beacon').at(0).simulate('click'); - }); - - expect(stopBeacon).toHaveBeenCalled(); + expect(findByTestId(component, 'test-child')).toMatchSnapshot(); }); it('renders static remaining time when displayLiveTimeRemaining is falsy', () => { diff --git a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap index 6ca6b11a99a..7d47dda1053 100644 --- a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap @@ -1,43 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` active state renders with stop button 1`] = ` -Array [ - -
- Stop -
- , -
- Stop -
, -] -`; +exports[` active state renders with children 1`] = `null`; -exports[` active state renders without stop buttons 1`] = ` +exports[` active state renders without children 1`] = ` active state renders without stop buttons 1`] = ` />
renders loading state 1`] = ` className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle" /> - - Loading live location... - +
+ + Loading live location... + +
`; @@ -182,9 +151,13 @@ exports[` renders stopped state 1`] = ` className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle" /> - - Live location ended - +
+ + Live location ended + +
`; From 25fea5ef105fc0bf205d23e137b95801da516a9d Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Apr 2022 15:18:51 +0200 Subject: [PATCH 27/33] add OwnBeaconStatus wrapper with stop button Signed-off-by: Kerry Archibald --- .../views/beacon/_BeaconStatus.scss | 10 ++-- src/components/views/beacon/BeaconStatus.tsx | 1 - .../views/location/OwnBeaconStatus.tsx | 46 +++++++++++++++++++ src/components/views/messages/MBeaconBody.tsx | 22 ++++++--- src/i18n/strings/en_EN.json | 1 + .../views/beacon/BeaconStatus-test.tsx | 1 - 6 files changed, 69 insertions(+), 12 deletions(-) create mode 100644 src/components/views/location/OwnBeaconStatus.tsx diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.scss index 119909e2443..9bb011aead5 100644 --- a/res/css/components/views/beacon/_BeaconStatus.scss +++ b/res/css/components/views/beacon/_BeaconStatus.scss @@ -54,9 +54,9 @@ limitations under the License. flex-direction: column; line-height: $font-14px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + padding-right: $spacing-8; + + // TODO handle text-overflow } .mx_BeaconStatus_stopButton { @@ -64,6 +64,10 @@ limitations under the License. color: $alert !important; font-weight: $font-semi-bold !important; text-transform: uppercase; + + // align to top to make room for timestamp + // in bubble view + align-self: start; } .mx_BeaconStatus_expiryTime { diff --git a/src/components/views/beacon/BeaconStatus.tsx b/src/components/views/beacon/BeaconStatus.tsx index eca3f365893..a5438477e8a 100644 --- a/src/components/views/beacon/BeaconStatus.tsx +++ b/src/components/views/beacon/BeaconStatus.tsx @@ -20,7 +20,6 @@ import { Beacon } from 'matrix-js-sdk/src/matrix'; import StyledLiveBeaconIcon from './StyledLiveBeaconIcon'; import { _t } from '../../../languageHandler'; -import AccessibleButton from '../elements/AccessibleButton'; import LiveTimeRemaining from './LiveTimeRemaining'; import { BeaconDisplayStatus } from './displayStatus'; import { getBeaconExpiryTimestamp } from '../../../utils/beacon'; diff --git a/src/components/views/location/OwnBeaconStatus.tsx b/src/components/views/location/OwnBeaconStatus.tsx new file mode 100644 index 00000000000..53d0f855716 --- /dev/null +++ b/src/components/views/location/OwnBeaconStatus.tsx @@ -0,0 +1,46 @@ + +import { Beacon } from 'matrix-js-sdk/src/matrix'; +import React, { HTMLProps } from 'react'; + +import { _t } from '../../../languageHandler'; +import { useOwnLiveBeacons } from '../../../utils/beacon'; +import BeaconStatus from '../beacon/BeaconStatus'; +import { BeaconDisplayStatus } from '../beacon/displayStatus'; +import AccessibleButton from '../elements/AccessibleButton'; + +interface Props { + displayStatus: BeaconDisplayStatus; + beacon?: Beacon; + error?: Error; +} + +/** + * Wraps BeaconStatus with more listeners + */ +const OwnBeaconStatus: React.FC> = ({ + beacon, displayStatus, error, className, ...rest +}) => { + const { onStopSharing, stoppingInProgress } = useOwnLiveBeacons([beacon?.identifier]); + + return + { displayStatus === BeaconDisplayStatus.Active && + { _t('Stop') } + + } + ; +}; + +export default OwnBeaconStatus; diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index bf2546096b6..15765f8aa85 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -31,6 +31,7 @@ import BeaconStatus from '../beacon/BeaconStatus'; import { IBodyProps } from "./IBodyProps"; import { _t } from '../../../languageHandler'; import MatrixClientContext from '../../../contexts/MatrixClientContext'; +import OwnBeaconStatus from '../location/OwnBeaconStatus'; const useBeaconState = (beaconInfoEvent: MatrixEvent): { beacon?: Beacon; @@ -118,13 +119,20 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => }
} - + { isOwnBeacon ? + : + + }
); }); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d1d5b933d38..927b4057ab5 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2166,6 +2166,7 @@ "Failed to fetch your location. Please try again later.": "Failed to fetch your location. Please try again later.", "Timed out trying to fetch your location. Please try again later.": "Timed out trying to fetch your location. Please try again later.", "Unknown error fetching location. Please try again later.": "Unknown error fetching location. Please try again later.", + "Live location enabled": "Live location enabled", "We couldn't send your location": "We couldn't send your location", "%(brand)s could not send your location. Please try again later.": "%(brand)s could not send your location. Please try again later.", "%(displayName)s's live location": "%(displayName)s's live location", diff --git a/test/components/views/beacon/BeaconStatus-test.tsx b/test/components/views/beacon/BeaconStatus-test.tsx index 426bdc785e5..1a14744d2ac 100644 --- a/test/components/views/beacon/BeaconStatus-test.tsx +++ b/test/components/views/beacon/BeaconStatus-test.tsx @@ -17,7 +17,6 @@ limitations under the License. import React from 'react'; import { mount } from 'enzyme'; import { Beacon } from 'matrix-js-sdk/src/matrix'; -import { act } from 'react-dom/test-utils'; import BeaconStatus from '../../../../src/components/views/beacon/BeaconStatus'; import { BeaconDisplayStatus } from '../../../../src/components/views/beacon/displayStatus'; From f97e9e7299762e344981de7f4a9cc78baf464e9b Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Apr 2022 15:33:28 +0200 Subject: [PATCH 28/33] add error states for own beacon Signed-off-by: Kerry Archibald --- .../views/beacon/_BeaconStatus.scss | 2 +- src/components/views/beacon/BeaconStatus.tsx | 2 +- .../views/location/OwnBeaconStatus.tsx | 39 ++++++++++++++++--- src/i18n/strings/en_EN.json | 1 + .../views/location/OwnBeaconStatus-test.tsx | 16 ++++++++ 5 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 test/components/views/location/OwnBeaconStatus-test.tsx diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.scss index 9bb011aead5..03a6433e0a2 100644 --- a/res/css/components/views/beacon/_BeaconStatus.scss +++ b/res/css/components/views/beacon/_BeaconStatus.scss @@ -59,7 +59,7 @@ limitations under the License. // TODO handle text-overflow } -.mx_BeaconStatus_stopButton { +.mx_BeaconStatus_destructiveButton { // override button link_inline styles color: $alert !important; font-weight: $font-semi-bold !important; diff --git a/src/components/views/beacon/BeaconStatus.tsx b/src/components/views/beacon/BeaconStatus.tsx index a5438477e8a..c9d7bd3762d 100644 --- a/src/components/views/beacon/BeaconStatus.tsx +++ b/src/components/views/beacon/BeaconStatus.tsx @@ -64,7 +64,7 @@ const BeaconStatus: React.FC> = { displayStatus === BeaconDisplayStatus.Loading && { _t('Loading live location...') } } { displayStatus === BeaconDisplayStatus.Stopped && { _t('Live location ended') } } - { /* TODO error */ } + { displayStatus === BeaconDisplayStatus.Error && { _t('Live location error') } } { displayStatus === BeaconDisplayStatus.Active && beacon && <> <> diff --git a/src/components/views/location/OwnBeaconStatus.tsx b/src/components/views/location/OwnBeaconStatus.tsx index 53d0f855716..282ca1942f4 100644 --- a/src/components/views/location/OwnBeaconStatus.tsx +++ b/src/components/views/location/OwnBeaconStatus.tsx @@ -11,35 +11,62 @@ import AccessibleButton from '../elements/AccessibleButton'; interface Props { displayStatus: BeaconDisplayStatus; beacon?: Beacon; - error?: Error; } /** * Wraps BeaconStatus with more listeners */ const OwnBeaconStatus: React.FC> = ({ - beacon, displayStatus, error, className, ...rest + beacon, displayStatus, className, ...rest }) => { - const { onStopSharing, stoppingInProgress } = useOwnLiveBeacons([beacon?.identifier]); + const { + hasWireError, + hasStopSharingError, + stoppingInProgress, + onStopSharing, + onResetWireError, + } = useOwnLiveBeacons([beacon?.identifier]); + + // combine display status with errors that only occur for user's own beacons + const ownDisplayStatus = hasWireError || hasStopSharingError ? + BeaconDisplayStatus.Error : + displayStatus; return - { displayStatus === BeaconDisplayStatus.Active && { _t('Stop') } } + {hasWireError && + {_t('Retry')} + + } + {hasStopSharingError && + {_t('Retry')} + } ; }; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 927b4057ab5..6e4c96c7439 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2905,6 +2905,7 @@ "Live until %(expiryTime)s": "Live until %(expiryTime)s", "Loading live location...": "Loading live location...", "Live location ended": "Live location ended", + "Live location error": "Live location error", "An error occured whilst sharing your live location": "An error occured whilst sharing your live location", "You are sharing your live location": "You are sharing your live location", "%(timeRemaining)s left": "%(timeRemaining)s left", diff --git a/test/components/views/location/OwnBeaconStatus-test.tsx b/test/components/views/location/OwnBeaconStatus-test.tsx new file mode 100644 index 00000000000..6c1702b9d9b --- /dev/null +++ b/test/components/views/location/OwnBeaconStatus-test.tsx @@ -0,0 +1,16 @@ + +import React from 'react'; +import { mount } from 'enzyme'; + +import OwnBeaconStatus from '../../../../src/components/views/location/OwnBeaconStatus'; + +describe('', () => { + const defaultProps = {}; + const getComponent = (props = {}) => + mount(); + + it('renders', () => { + const component = getComponent(); + expect(component).toBeTruthy(); + }); +}); From 4891352066c377cdc9334628ee4857d769bab526 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Apr 2022 16:02:03 +0200 Subject: [PATCH 29/33] test OwnBeaconStatus Signed-off-by: Kerry Archibald --- .../views/location/OwnBeaconStatus.tsx | 30 +++- src/components/views/messages/MBeaconBody.tsx | 9 +- .../views/beacon/BeaconStatus-test.tsx | 1 + .../__snapshots__/BeaconStatus-test.tsx.snap | 6 + .../views/location/OwnBeaconStatus-test.tsx | 149 +++++++++++++++++- .../OwnBeaconStatus-test.tsx.snap | 35 ++++ 6 files changed, 216 insertions(+), 14 deletions(-) create mode 100644 test/components/views/location/__snapshots__/OwnBeaconStatus-test.tsx.snap diff --git a/src/components/views/location/OwnBeaconStatus.tsx b/src/components/views/location/OwnBeaconStatus.tsx index 282ca1942f4..c4334b5664f 100644 --- a/src/components/views/location/OwnBeaconStatus.tsx +++ b/src/components/views/location/OwnBeaconStatus.tsx @@ -1,3 +1,18 @@ +/* +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 { Beacon } from 'matrix-js-sdk/src/matrix'; import React, { HTMLProps } from 'react'; @@ -14,7 +29,8 @@ interface Props { } /** - * Wraps BeaconStatus with more listeners + * Wraps BeaconStatus with more capabilities + * for errors and actions available for users own live beacons */ const OwnBeaconStatus: React.FC> = ({ beacon, displayStatus, className, ...rest @@ -40,7 +56,7 @@ const OwnBeaconStatus: React.FC> = ({ displayLiveTimeRemaining {...rest} > - {ownDisplayStatus === BeaconDisplayStatus.Active && > = ({ { _t('Stop') } } - {hasWireError && - {_t('Retry')} + { _t('Retry') } } - {hasStopSharingError && - {_t('Retry')} - } + { _t('Retry') } + } ; }; diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index 15765f8aa85..5935d18d1f1 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -20,18 +20,18 @@ 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'; 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 SmartMarker from '../location/SmartMarker'; -import BeaconStatus from '../beacon/BeaconStatus'; -import { IBodyProps } from "./IBodyProps"; -import { _t } from '../../../languageHandler'; -import MatrixClientContext from '../../../contexts/MatrixClientContext'; import OwnBeaconStatus from '../location/OwnBeaconStatus'; +import { IBodyProps } from "./IBodyProps"; const useBeaconState = (beaconInfoEvent: MatrixEvent): { beacon?: Beacon; @@ -124,7 +124,6 @@ const MBeaconBody: React.FC = React.forwardRef(({ mxEvent }, ref) => className='mx_MBeaconBody_chin' beacon={beacon} displayStatus={displayStatus} - error={error} /> : ', () => { const defaultProps = { displayStatus: BeaconDisplayStatus.Loading, + label: 'test label', }; const getComponent = (props = {}) => mount(); diff --git a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap index 7d47dda1053..e65d416a443 100644 --- a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap @@ -42,6 +42,7 @@ exports[` active state renders without children 1`] = ` } } displayStatus="Active" + label="test label" >
active state renders without children 1`] = `
+ + test label + active state renders without children 1`] = ` exports[` renders loading state 1`] = `
renders loading state 1`] = ` exports[` renders stopped state 1`] = `
({ + useOwnLiveBeacons: jest.fn(), +})); describe('', () => { - const defaultProps = {}; + const defaultProps = { + displayStatus: BeaconDisplayStatus.Loading, + }; + const userId = '@user:server'; + const roomId = '!room:server'; + let defaultBeacon; const getComponent = (props = {}) => mount(); - it('renders', () => { + beforeEach(() => { + jest.spyOn(global.Date, 'now').mockReturnValue(123456789); + mocked(useOwnLiveBeacons).mockClear().mockReturnValue({}); + + defaultBeacon = new Beacon(makeBeaconInfoEvent(userId, roomId)); + }); + + it('renders without a beacon instance', () => { + const component = getComponent(); + expect(component).toMatchSnapshot(); + }); + + it('renders loading state correctly', () => { + const component = getComponent(); + expect(component.find('BeaconStatus').props()).toBeTruthy(); + }); + + describe('Active state', () => { + it('renders stop button', () => { + const displayStatus = BeaconDisplayStatus.Active; + mocked(useOwnLiveBeacons).mockReturnValue({ + onStopSharing: jest.fn(), + }); + const component = getComponent({ displayStatus, beacon: defaultBeacon }); + expect(component.text()).toContain('Live location enabled'); + + expect(findByTestId(component, 'beacon-status-stop-beacon').length).toBeTruthy(); + }); + + it('stops sharing on stop button click', () => { + const displayStatus = BeaconDisplayStatus.Active; + const onStopSharing = jest.fn(); + mocked(useOwnLiveBeacons).mockReturnValue({ + onStopSharing, + }); + const component = getComponent({ displayStatus, beacon: defaultBeacon }); + + act(() => { + findByTestId(component, 'beacon-status-stop-beacon').at(0).simulate('click'); + }); + + expect(onStopSharing).toHaveBeenCalled(); + }); + }); + + describe('errors', () => { + it('renders in error mode when displayStatus is error', () => { + const displayStatus = BeaconDisplayStatus.Error; + const component = getComponent({ displayStatus }); + expect(component.text()).toEqual('Live location error'); + + // no actions for plain error + expect(component.find('AccessibleButton').length).toBeFalsy(); + }); + + describe('with wire error', () => { + it('renders in error mode', () => { + const displayStatus = BeaconDisplayStatus.Active; + mocked(useOwnLiveBeacons).mockReturnValue({ + hasWireError: true, + onResetWireError: jest.fn(), + }); + const component = getComponent({ displayStatus, beacon: defaultBeacon }); + expect(component.text()).toContain('Live location error'); + // retry button + expect(findByTestId(component, 'beacon-status-reset-wire-error').length).toBeTruthy(); + }); + + it('retry button resets wire error', () => { + const displayStatus = BeaconDisplayStatus.Active; + const onResetWireError = jest.fn(); + mocked(useOwnLiveBeacons).mockReturnValue({ + hasWireError: true, + onResetWireError, + }); + const component = getComponent({ displayStatus, beacon: defaultBeacon }); + act(() => { + findByTestId(component, 'beacon-status-reset-wire-error').at(0).simulate('click'); + }); + + expect(onResetWireError).toHaveBeenCalled(); + }); + }); + + describe('with stopping error', () => { + it('renders in error mode', () => { + const displayStatus = BeaconDisplayStatus.Active; + mocked(useOwnLiveBeacons).mockReturnValue({ + hasWireError: false, + hasStopSharingError: true, + onStopSharing: jest.fn(), + }); + const component = getComponent({ displayStatus, beacon: defaultBeacon }); + expect(component.text()).toContain('Live location error'); + // retry button + expect(findByTestId(component, 'beacon-status-stop-beacon-retry').length).toBeTruthy(); + }); + + it('retry button retries stop sharing', () => { + const displayStatus = BeaconDisplayStatus.Active; + const onStopSharing = jest.fn(); + mocked(useOwnLiveBeacons).mockReturnValue({ + hasStopSharingError: true, + onStopSharing, + }); + const component = getComponent({ displayStatus, beacon: defaultBeacon }); + act(() => { + findByTestId(component, 'beacon-status-stop-beacon-retry').at(0).simulate('click'); + }); + + expect(onStopSharing).toHaveBeenCalled(); + }); + }); + }); + + it('renders loading state correctly', () => { const component = getComponent(); expect(component).toBeTruthy(); }); diff --git a/test/components/views/location/__snapshots__/OwnBeaconStatus-test.tsx.snap b/test/components/views/location/__snapshots__/OwnBeaconStatus-test.tsx.snap new file mode 100644 index 00000000000..4d8b4e76605 --- /dev/null +++ b/test/components/views/location/__snapshots__/OwnBeaconStatus-test.tsx.snap @@ -0,0 +1,35 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders without a beacon instance 1`] = ` + + +
+ +
+ +
+ + Loading live location... + +
+
+ + +`; From 6a94cc29b80e31dcc6e2b6d957721c83be542dca Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Apr 2022 16:09:26 +0200 Subject: [PATCH 30/33] move ownbeaconstatus to write dir Signed-off-by: Kerry Archibald --- .../{location => beacon}/OwnBeaconStatus.tsx | 18 +++++++++--------- src/components/views/messages/MBeaconBody.tsx | 2 +- .../OwnBeaconStatus-test.tsx | 2 +- .../OwnBeaconStatus-test.tsx.snap | 0 4 files changed, 11 insertions(+), 11 deletions(-) rename src/components/views/{location => beacon}/OwnBeaconStatus.tsx (86%) rename test/components/views/{location => beacon}/OwnBeaconStatus-test.tsx (98%) rename test/components/views/{location => beacon}/__snapshots__/OwnBeaconStatus-test.tsx.snap (100%) diff --git a/src/components/views/location/OwnBeaconStatus.tsx b/src/components/views/beacon/OwnBeaconStatus.tsx similarity index 86% rename from src/components/views/location/OwnBeaconStatus.tsx rename to src/components/views/beacon/OwnBeaconStatus.tsx index c4334b5664f..53b05130581 100644 --- a/src/components/views/location/OwnBeaconStatus.tsx +++ b/src/components/views/beacon/OwnBeaconStatus.tsx @@ -19,8 +19,8 @@ import React, { HTMLProps } from 'react'; import { _t } from '../../../languageHandler'; import { useOwnLiveBeacons } from '../../../utils/beacon'; -import BeaconStatus from '../beacon/BeaconStatus'; -import { BeaconDisplayStatus } from '../beacon/displayStatus'; +import BeaconStatus from './BeaconStatus'; +import { BeaconDisplayStatus } from './displayStatus'; import AccessibleButton from '../elements/AccessibleButton'; interface Props { @@ -56,33 +56,33 @@ const OwnBeaconStatus: React.FC> = ({ displayLiveTimeRemaining {...rest} > - { ownDisplayStatus === BeaconDisplayStatus.Active && - { _t('Stop') } + {_t('Stop')} } - { hasWireError && - { _t('Retry') } + {_t('Retry')} } - { hasStopSharingError && - { _t('Retry') } - } + {_t('Retry')} + } ; }; diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index 5935d18d1f1..a2142e7b0bb 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -30,7 +30,7 @@ import BeaconStatus from '../beacon/BeaconStatus'; import Spinner from '../elements/Spinner'; import Map from '../location/Map'; import SmartMarker from '../location/SmartMarker'; -import OwnBeaconStatus from '../location/OwnBeaconStatus'; +import OwnBeaconStatus from '../beacon/OwnBeaconStatus'; import { IBodyProps } from "./IBodyProps"; const useBeaconState = (beaconInfoEvent: MatrixEvent): { diff --git a/test/components/views/location/OwnBeaconStatus-test.tsx b/test/components/views/beacon/OwnBeaconStatus-test.tsx similarity index 98% rename from test/components/views/location/OwnBeaconStatus-test.tsx rename to test/components/views/beacon/OwnBeaconStatus-test.tsx index 92ff4fc36e1..a76e514538b 100644 --- a/test/components/views/location/OwnBeaconStatus-test.tsx +++ b/test/components/views/beacon/OwnBeaconStatus-test.tsx @@ -20,7 +20,7 @@ import { act } from 'react-dom/test-utils'; import { mocked } from 'jest-mock'; import { Beacon } from 'matrix-js-sdk/src/matrix'; -import OwnBeaconStatus from '../../../../src/components/views/location/OwnBeaconStatus'; +import OwnBeaconStatus from '../../../../src/components/views/beacon/OwnBeaconStatus'; import { BeaconDisplayStatus } from '../../../../src/components/views/beacon/displayStatus'; import { useOwnLiveBeacons } from '../../../../src/utils/beacon'; import { findByTestId, makeBeaconInfoEvent } from '../../../test-utils'; diff --git a/test/components/views/location/__snapshots__/OwnBeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/OwnBeaconStatus-test.tsx.snap similarity index 100% rename from test/components/views/location/__snapshots__/OwnBeaconStatus-test.tsx.snap rename to test/components/views/beacon/__snapshots__/OwnBeaconStatus-test.tsx.snap From 87c329ff1477001fb2da3f343c44505217c7e046 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Apr 2022 16:14:32 +0200 Subject: [PATCH 31/33] improve button styling Signed-off-by: Kerry Archibald --- res/css/_components.scss | 1 + .../views/beacon/_BeaconStatus.scss | 11 -------- .../views/beacon/_OwnBeaconStatus.scss | 27 +++++++++++++++++++ .../views/beacon/OwnBeaconStatus.tsx | 20 +++++++------- 4 files changed, 38 insertions(+), 21 deletions(-) create mode 100644 res/css/components/views/beacon/_OwnBeaconStatus.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 38d539248ca..f0aff95be0d 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -7,6 +7,7 @@ @import "./components/views/beacon/_BeaconStatus.scss"; @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss"; @import "./components/views/beacon/_LiveTimeRemaining.scss"; +@import "./components/views/beacon/_OwnBeaconStatus.scss"; @import "./components/views/beacon/_RoomLiveShareWarning.scss"; @import "./components/views/beacon/_StyledLiveBeaconIcon.scss"; @import "./components/views/location/_LiveDurationDropdown.scss"; diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.scss index 03a6433e0a2..67d94b7c7ff 100644 --- a/res/css/components/views/beacon/_BeaconStatus.scss +++ b/res/css/components/views/beacon/_BeaconStatus.scss @@ -59,17 +59,6 @@ limitations under the License. // TODO handle text-overflow } -.mx_BeaconStatus_destructiveButton { - // override button link_inline styles - color: $alert !important; - font-weight: $font-semi-bold !important; - text-transform: uppercase; - - // align to top to make room for timestamp - // in bubble view - align-self: start; -} - .mx_BeaconStatus_expiryTime { color: $secondary-content; } diff --git a/res/css/components/views/beacon/_OwnBeaconStatus.scss b/res/css/components/views/beacon/_OwnBeaconStatus.scss new file mode 100644 index 00000000000..aa01b6269a4 --- /dev/null +++ b/res/css/components/views/beacon/_OwnBeaconStatus.scss @@ -0,0 +1,27 @@ +/* +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_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button { + // align to top to make room for timestamp + // in bubble view + align-self: start; +} + +.mx_OwnBeaconStatus_destructiveButton { + // override button link_inline styles + color: $alert !important; + font-weight: $font-semi-bold !important; +} diff --git a/src/components/views/beacon/OwnBeaconStatus.tsx b/src/components/views/beacon/OwnBeaconStatus.tsx index 53b05130581..204e2968293 100644 --- a/src/components/views/beacon/OwnBeaconStatus.tsx +++ b/src/components/views/beacon/OwnBeaconStatus.tsx @@ -56,33 +56,33 @@ const OwnBeaconStatus: React.FC> = ({ displayLiveTimeRemaining {...rest} > - {ownDisplayStatus === BeaconDisplayStatus.Active && - {_t('Stop')} + { _t('Stop') } } - {hasWireError && - {_t('Retry')} + { _t('Retry') } } - {hasStopSharingError && - {_t('Retry')} - } + { _t('Retry') } + } ; }; From d24d3a07cdd962726f2c714d474209c17a368ff8 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Apr 2022 16:23:46 +0200 Subject: [PATCH 32/33] i18n Signed-off-by: Kerry Archibald --- src/i18n/strings/en_EN.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 6e4c96c7439..62b3031ce54 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2166,7 +2166,6 @@ "Failed to fetch your location. Please try again later.": "Failed to fetch your location. Please try again later.", "Timed out trying to fetch your location. Please try again later.": "Timed out trying to fetch your location. Please try again later.", "Unknown error fetching location. Please try again later.": "Unknown error fetching location. Please try again later.", - "Live location enabled": "Live location enabled", "We couldn't send your location": "We couldn't send your location", "%(brand)s could not send your location. Please try again later.": "%(brand)s could not send your location. Please try again later.", "%(displayName)s's live location": "%(displayName)s's live location", @@ -2909,6 +2908,7 @@ "An error occured whilst sharing your live location": "An error occured whilst sharing your live location", "You are sharing your live location": "You are sharing your live location", "%(timeRemaining)s left": "%(timeRemaining)s left", + "Live location enabled": "Live location enabled", "An error occured whilst sharing your live location, please try again": "An error occured whilst sharing your live location, please try again", "An error occurred while stopping your live location, please try again": "An error occurred while stopping your live location, please try again", "Stop sharing": "Stop sharing", From 9e8abe73c95554387eef14f3e7d6ab40120e181c Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 13 Apr 2022 10:52:52 +0200 Subject: [PATCH 33/33] lint Signed-off-by: Kerry Archibald --- res/css/components/views/beacon/_BeaconStatus.scss | 3 --- .../views/beacon/__snapshots__/BeaconStatus-test.tsx.snap | 4 +--- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.scss index 67d94b7c7ff..8ac873604d2 100644 --- a/res/css/components/views/beacon/_BeaconStatus.scss +++ b/res/css/components/views/beacon/_BeaconStatus.scss @@ -23,9 +23,6 @@ limitations under the License. box-sizing: border-box; padding: $spacing-8; - box-sizing: border-box; - padding: $spacing-8; - color: var(--color); font-size: $font-12px; } diff --git a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap index e65d416a443..5e2b6673daa 100644 --- a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap @@ -59,9 +59,7 @@ exports[` active state renders without children 1`] = `
- - test label - + test label