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

@@ -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;
+}
+
 

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;
+}

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); */
 }

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 {

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>;
         }

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({