From 323e911fe72c81f5e96bee5d4da2fac1ad53e2b2 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sun, 5 Jun 2022 05:40:17 +0000
Subject: [PATCH] Add ellipsis effect to hidden beacon status (#8755)

---
 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 95c4174911..65e51a934b 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 935e22f4f0..a4a1ca7056 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 b3366336a1..b27f9ee191 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 d2751ba2d9..fdaa80bdbe 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>