Add ellipsis effect to hidden beacon status (#8755)

This commit is contained in:
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

View File

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

View File

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

View File

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

View File

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