From cd9ea2b2d79ad01cbd719be69c9e1c185f23d503 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 12 Dec 2018 12:57:48 -0700
Subject: [PATCH] Fix alignment of avatars and status messages

also introduce the status message to the MemberInfo pane

Part of https://github.com/vector-im/riot-web/issues/1528
---
 res/css/views/rooms/_EntityTile.scss     |  8 ++++++++
 res/css/views/rooms/_MemberInfo.scss     |  7 +++++++
 res/css/views/rooms/_RoomTile.scss       | 12 ++++++------
 src/components/views/rooms/EntityTile.js |  4 ++--
 src/components/views/rooms/MemberInfo.js |  8 ++++++++
 src/components/views/rooms/RoomTile.js   |  2 +-
 6 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index 031894afde..90d5dc9aa5 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -111,4 +111,12 @@ limitations under the License.
     opacity: 0.25;
 }
 
+.mx_EntityTile_subtext {
+    font-size: 11px;
+    opacity: 0.5;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+}
+
 
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index 5d47275efe..2270e83743 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -110,3 +110,10 @@ limitations under the License.
     margin-left: 8px;
 }
 
+.mx_MemberInfo_statusMessage {
+    font-size: 11px;
+    opacity: 0.5;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+}
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 2014bb6404..6a89636d15 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -41,7 +41,7 @@ limitations under the License.
 
 .mx_RoomTile_subtext {
     display: inline-block;
-    font-size: 0.8em;
+    font-size: 11px;
     padding: 0 0 0 7px;
     margin: 0;
     overflow: hidden;
@@ -62,10 +62,14 @@ limitations under the License.
     padding-left: 16px;
     padding-right: 6px;
     width: 24px;
-    height: 24px;
     vertical-align: middle;
 }
 
+.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
+    padding-top: 0;
+    vertical-align: super;
+}
+
 .mx_RoomTile_dm {
     display: block;
     position: absolute;
@@ -89,10 +93,6 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
-.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
-    padding-top: 0;
-}
-
 .mx_RoomTile_invite {
 /*    color: rgba(69, 69, 69, 0.5); */
 }
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index 27215430a1..a5b75b89bf 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -131,7 +131,7 @@ const EntityTile = React.createClass({
                 nameClasses += ' mx_EntityTile_name_hover';
             }
             if (this.props.subtextLabel) {
-                presenceLabel = <span className="mx_PresenceLabel">{this.props.subtextLabel}</span>;
+                presenceLabel = <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>;
             }
             nameEl = (
                 <div className="mx_EntityTile_details">
@@ -148,7 +148,7 @@ const EntityTile = React.createClass({
                     <EmojiText element="div" className="mx_EntityTile_name" dir="auto">
                         {name}
                     </EmojiText>
-                    <span className="mx_PresenceLabel">{this.props.subtextLabel}</span>
+                    <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>
                 </div>
             );
         } else {
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 17b1311c4f..4eea33e952 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -889,11 +889,13 @@ module.exports = withMatrixClient(React.createClass({
         let presenceState;
         let presenceLastActiveAgo;
         let presenceCurrentlyActive;
+        let statusMessage;
 
         if (this.props.member.user) {
             presenceState = this.props.member.user.presence;
             presenceLastActiveAgo = this.props.member.user.lastActiveAgo;
             presenceCurrentlyActive = this.props.member.user.currentlyActive;
+            statusMessage = this.props.member.user.statusMessage;
         }
 
         const room = this.props.matrixClient.getRoom(this.props.member.roomId);
@@ -915,6 +917,11 @@ module.exports = withMatrixClient(React.createClass({
                 presenceState={presenceState} />;
         }
 
+        let statusLabel = null;
+        if (statusMessage) {
+            statusLabel = <span className="mx_MemberInfo_statusMessage">{ statusMessage }</span>;
+        }
+
         let roomMemberDetails = null;
         if (this.props.member.roomId) { // is in room
             const PowerSelector = sdk.getComponent('elements.PowerSelector');
@@ -931,6 +938,7 @@ module.exports = withMatrixClient(React.createClass({
                 </div>
                 <div className="mx_MemberInfo_profileField">
                     {presenceLabel}
+                    {statusLabel}
                 </div>
             </div>;
         }
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 2c48862ee9..2f95aab97a 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -272,7 +272,7 @@ module.exports = React.createClass({
             'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
             'mx_RoomTile_noBadges': !badges,
             'mx_RoomTile_transparent': this.props.transparent,
-            'mx_RoomTile_hasSubtext': !!subtext && !this.props.isCollapsed,
+            'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
         });
 
         const avatarClasses = classNames({