OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add ellipsis effect to hidden beacon status (#8755)

pull/28788/head^2
Suguru Hirahara 2022-06-05 05:40:17 +00:00 committed by GitHub
parent 527da1c5e7
commit 323e911fe7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,6 +55,11 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
.mx_BeaconStatus_description_status {
text-overflow: ellipsis;
overflow: hidden;
}
} }
.mx_BeaconStatus_expiryTime { .mx_BeaconStatus_expiryTime {

14
src/components/views/beacon/BeaconStatus.tsx
View File

@ -63,11 +63,15 @@ const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> =
/> } /> }
<div className='mx_BeaconStatus_description'> <div className='mx_BeaconStatus_description'>
{ displayStatus === BeaconDisplayStatus.Loading && <span>{ _t('Loading live location...') }</span> } { displayStatus === BeaconDisplayStatus.Loading &&
{ displayStatus === BeaconDisplayStatus.Stopped && <span>{ _t('Live location ended') }</span> } <span className="mx_BeaconStatus_description_status">{ _t('Loading live location...') }</span>
}
{ displayStatus === BeaconDisplayStatus.Error && <span>{ _t('Live location error') }</span> } { displayStatus === BeaconDisplayStatus.Stopped &&
<span className="mx_BeaconStatus_description_status">{ _t('Live location ended') }</span>
}
{ displayStatus === BeaconDisplayStatus.Error &&
<span className="mx_BeaconStatus_description_status">{ _t('Live location error') }</span>
}
{ displayStatus === BeaconDisplayStatus.Active && beacon && <> { displayStatus === BeaconDisplayStatus.Active && beacon && <>
<> <>
<span className='mx_BeaconStatus_label'>{ label }</span> <span className='mx_BeaconStatus_label'>{ label }</span>

8
test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap
View File

@ -136,7 +136,9 @@ exports[`<BeaconStatus /> renders loading state 1`] = `
<div <div
className="mx_BeaconStatus_description" className="mx_BeaconStatus_description"
> >
<span> <span
className="mx_BeaconStatus_description_status"
>
Loading live location... Loading live location...
</span> </span>
</div> </div>
@ -165,7 +167,9 @@ exports[`<BeaconStatus /> renders stopped state 1`] = `
<div <div
className="mx_BeaconStatus_description" className="mx_BeaconStatus_description"
> >
<span> <span
className="mx_BeaconStatus_description_status"
>
Live location ended Live location ended
</span> </span>
</div> </div>

4
test/components/views/beacon/__snapshots__/OwnBeaconStatus-test.tsx.snap
View File

@ -15,7 +15,9 @@ exports[`<OwnBeaconStatus /> renders without a beacon instance 1`] = `
<div <div
className="mx_BeaconStatus_description" className="mx_BeaconStatus_description"
> >
<span> <span
className="mx_BeaconStatus_description_status"
>
Loading live location... Loading live location...
</span> </span>
</div> </div>