From bd6920078d86f35d2ed462c9310702fc2321908c Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 4 Jun 2022 22:47:22 +0900
Subject: [PATCH] Add ellipsis effect to hidden beacon status

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/components/views/beacon/_BeaconStatus.scss |  5 +++++
 src/components/views/beacon/BeaconStatus.tsx       | 14 +++++++++-----
 .../__snapshots__/BeaconStatus-test.tsx.snap       |  8 ++++++--
 .../__snapshots__/OwnBeaconStatus-test.tsx.snap    |  4 +++-
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.scss
index 95c41749111..65e51a934ba 100644
--- a/res/css/components/views/beacon/_BeaconStatus.scss
+++ b/res/css/components/views/beacon/_BeaconStatus.scss
@@ -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 {
diff --git a/src/components/views/beacon/BeaconStatus.tsx b/src/components/views/beacon/BeaconStatus.tsx
index 935e22f4f0b..a4a1ca70560 100644
--- a/src/components/views/beacon/BeaconStatus.tsx
+++ b/src/components/views/beacon/BeaconStatus.tsx
@@ -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>
diff --git a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap
index b3366336a17..b27f9ee191f 100644
--- a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap
@@ -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>
diff --git a/test/components/views/beacon/__snapshots__/OwnBeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/OwnBeaconStatus-test.tsx.snap
index d2751ba2d9d..fdaa80bdbea 100644
--- a/test/components/views/beacon/__snapshots__/OwnBeaconStatus-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/OwnBeaconStatus-test.tsx.snap
@@ -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>