Add shields to member list, move power label to text

res/css/views/rooms/_EntityTile.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,6 +20,15 @@ limitations under the License.
     align-items: center;
     color: $primary-fg-color;
     cursor: pointer;
+
+    .mx_E2EIcon {
+        margin: 0;
+        position: absolute;
+        bottom: 2px;
+        right: 7px;
+        height: 15px;
+        width: 15px;
+    }
 }
 
 .mx_EntityTile:hover {
@@ -30,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;
@@ -64,14 +74,6 @@ limitations under the License.
     position: relative;
 }
 
-.mx_EntityTile_power {
-    position: absolute;
-    width: 16px;
-    height: 17px;
-    top: 0px;
-    right: 6px;
-}
-
 .mx_EntityTile_name,
 .mx_GroupRoomTile_name {
     flex: 1 1 0;
@@ -83,6 +85,7 @@ limitations under the License.
 
 .mx_EntityTile_details {
     overflow: hidden;
+    flex: 1;
 }
 
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
@@ -112,14 +115,24 @@ limitations under the License.
     opacity: 0.25;
 }
 
-.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
-    font-size: 13px;
-}
-
 .mx_EntityTile_subtext {
     font-size: 11px;
     opacity: 0.5;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: clip;
 }
+
+.mx_EntityTile_power {
+    padding-inline-start: 6px;
+    font-size: 10px;
+    color: $notice-secondary-color;
+    max-width: 6em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.mx_EntityTile:hover .mx_EntityTile_power {
+    display: none;
+}

src/components/views/rooms/EntityTile.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,15 +23,14 @@ import * as sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
 import classNames from "classnames";
-
+import E2EIcon from './E2EIcon';
 
 const PRESENCE_CLASS = {
     "offline": "mx_EntityTile_offline",
     "online": "mx_EntityTile_online",
     "unavailable": "mx_EntityTile_unavailable",
 };
 
-
 function presenceClassForMember(presenceState, lastActiveAgo, showPresence) {
     if (showPresence === false) {
         return 'mx_EntityTile_online_beenactive';
@@ -69,6 +69,7 @@ const EntityTile = createReactClass({
         suppressOnHover: PropTypes.bool,
         showPresence: PropTypes.bool,
         subtextLabel: PropTypes.string,
+        e2eStatus: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -156,18 +157,20 @@ const EntityTile = createReactClass({
             );
         }
 
-        let power;
+        let powerLabel;
         const powerStatus = this.props.powerStatus;
         if (powerStatus) {
-            const src = {
-                [EntityTile.POWER_STATUS_MODERATOR]: require("../../../../res/img/mod.svg"),
-                [EntityTile.POWER_STATUS_ADMIN]: require("../../../../res/img/admin.svg"),
-            }[powerStatus];
-            const alt = {
-                [EntityTile.POWER_STATUS_MODERATOR]: _t("Moderator"),
+            const powerText = {
+                [EntityTile.POWER_STATUS_MODERATOR]: _t("Mod"),
                 [EntityTile.POWER_STATUS_ADMIN]: _t("Admin"),
             }[powerStatus];
-            power = <img src={src} className="mx_EntityTile_power" width="16" height="17" alt={alt} />;
+            powerLabel = <div className="mx_EntityTile_power">{powerText}</div>;
+        }
+
+        let e2eIcon;
+        const { e2eStatus } = this.props;
+        if (e2eStatus) {
+            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} />;
         }
 
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
@@ -181,9 +184,10 @@ const EntityTile = createReactClass({
                                   onClick={this.props.onClick}>
                     <div className="mx_EntityTile_avatar">
                         { av }
-                        { power }
+                        { e2eIcon }
                     </div>
                     { nameEl }
+                    { powerLabel }
                     { inviteButton }
                 </AccessibleButton>
             </div>
@@ -194,5 +198,4 @@ const EntityTile = createReactClass({
 EntityTile.POWER_STATUS_MODERATOR = "moderator";
 EntityTile.POWER_STATUS_ADMIN = "admin";
 
-
 export default EntityTile;