From 3ef7e5113bedaa4172c6d0cec3655aaec5b1df20 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 30 Jan 2020 22:04:47 +0000
Subject: [PATCH] Move power label to right of name

The power label is shown to the right of the name, but hidden on hover.

Part of https://github.com/vector-im/riot-web/issues/11940
---
 res/css/views/rooms/_EntityTile.scss     | 13 ++++++++++++-
 src/components/views/rooms/EntityTile.js |  7 ++++---
 src/i18n/strings/en_EN.json              |  1 +
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index e37770066c..bce01af097 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -40,7 +40,7 @@ limitations under the License.
     content: "";
     position: absolute;
     top: calc(50% - 8px); // center
-    right: 10px;
+    right: -8px;
     mask: url('$(res)/img/member_chevron.png');
     mask-repeat: no-repeat;
     width: 16px;
@@ -85,6 +85,7 @@ limitations under the License.
 
 .mx_EntityTile_details {
     overflow: hidden;
+    flex: 1;
 }
 
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
@@ -121,3 +122,13 @@ limitations under the License.
     white-space: nowrap;
     text-overflow: clip;
 }
+
+.mx_EntityTile_power {
+    padding-inline-start: 6px;
+    font-size: 10px;
+    color: $notice-secondary-color;
+}
+
+.mx_EntityTile:hover .mx_EntityTile_power {
+    display: none;
+}
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index 133205b1a5..fd92cb8e57 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -160,10 +160,11 @@ const EntityTile = createReactClass({
         let powerLabel;
         const powerStatus = this.props.powerStatus;
         if (powerStatus) {
-            powerLabel = {
-                [EntityTile.POWER_STATUS_MODERATOR]: _t("Moderator"),
+            const powerText = {
+                [EntityTile.POWER_STATUS_MODERATOR]: _t("Mod"),
                 [EntityTile.POWER_STATUS_ADMIN]: _t("Admin"),
             }[powerStatus];
+            powerLabel = <div className="mx_EntityTile_power">{powerText}</div>;
         }
 
         let e2eIcon;
@@ -183,10 +184,10 @@ const EntityTile = createReactClass({
                                   onClick={this.props.onClick}>
                     <div className="mx_EntityTile_avatar">
                         { av }
-                        { powerLabel }
                         { e2eIcon }
                     </div>
                     { nameEl }
+                    { powerLabel }
                     { inviteButton }
                 </AccessibleButton>
             </div>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 6e58a76283..dde006bbd2 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -909,6 +909,7 @@
     "Some sessions in this encrypted room are not trusted": "Some sessions in this encrypted room are not trusted",
     "All sessions in this encrypted room are trusted": "All sessions in this encrypted room are trusted",
     "Edit message": "Edit message",
+    "Mod": "Mod",
     "This event could not be displayed": "This event could not be displayed",
     "%(senderName)s sent an image": "%(senderName)s sent an image",
     "%(senderName)s sent a video": "%(senderName)s sent a video",