Display custom status messages in the UI

Part of https://github.com/vector-im/riot-web/issues/1528

res/css/views/rooms/_RoomTile.scss

@@ -35,7 +35,20 @@ limitations under the License.
 .mx_RoomTile_nameContainer {
     display: inline-block;
     width: 180px;
-    height: 24px;
+    //height: 24px;
+    vertical-align: middle;
+}
+
+.mx_RoomTile_subtext {
+    display: inline-block;
+    font-size: 0.8em;
+    padding: 0 0 0 7px;
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+    position: relative;
+    bottom: 4px;
 }
 
 .mx_RoomTile_avatar_container {
@@ -76,6 +89,10 @@ 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

@@ -70,6 +70,7 @@ const EntityTile = React.createClass({
         onClick: PropTypes.func,
         suppressOnHover: PropTypes.bool,
         showPresence: PropTypes.bool,
+        subtextLabel: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -125,19 +126,31 @@ const EntityTile = React.createClass({
             let nameClasses = 'mx_EntityTile_name';
             if (this.props.showPresence) {
                 presenceLabel = <PresenceLabel activeAgo={activeAgo}
-                    currentlyActive={this.props.presenceCurrentlyActive}
-                    presenceState={this.props.presenceState} />;
+                                               currentlyActive={this.props.presenceCurrentlyActive}
+                                               presenceState={this.props.presenceState}/>;
                 nameClasses += ' mx_EntityTile_name_hover';
             }
+            if (this.props.subtextLabel) {
+                presenceLabel = <span className="mx_PresenceLabel">{this.props.subtextLabel}</span>;
+            }
             nameEl = (
                 <div className="mx_EntityTile_details">
-                    <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12" />
+                    <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
                     <EmojiText element="div" className={nameClasses} dir="auto">
-                        { name }
+                        {name}
                     </EmojiText>
                     {presenceLabel}
                 </div>
             );
+        } else if (this.props.subtextLabel) {
+            nameEl = (
+                <div className="mx_EntityTile_details">
+                    <EmojiText element="div" className="mx_EntityTile_name" dir="auto">
+                        {name}
+                    </EmojiText>
+                    <span className="mx_PresenceLabel">{this.props.subtextLabel}</span>
+                </div>
+            );
         } else {
             nameEl = (
                 <EmojiText element="div" className="mx_EntityTile_name" dir="auto">{ name }</EmojiText>

src/components/views/rooms/MemberTile.js

@@ -84,6 +84,7 @@ module.exports = React.createClass({
         const name = this._getDisplayName();
         const active = -1;
         const presenceState = member.user ? member.user.presence : null;
+        const statusMessage = member.user ? member.user.statusMessage : null;
 
         const av = (
             <MemberAvatar member={member} width={36} height={36} />
@@ -106,7 +107,9 @@ module.exports = React.createClass({
                 presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
                 presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
                 avatarJsx={av} title={this.getPowerLabel()} onClick={this.onClick}
-                name={name} powerStatus={powerStatus} showPresence={this.props.showPresence} />
+                name={name} powerStatus={powerStatus} showPresence={this.props.showPresence}
+                subtextLabel={statusMessage}
+            />
         );
     },
 });

src/components/views/rooms/RoomTile.js

@@ -251,6 +251,17 @@ module.exports = React.createClass({
         const mentionBadges = this.props.highlight && this._shouldShowMentionBadge();
         const badges = notifBadges || mentionBadges;
 
+        const isJoined = this.props.room.getMyMembership() === "join";
+        const looksLikeDm = this.props.room.currentState.getMembers().length === 2;
+        let subtext = null;
+        if (!isInvite && isJoined && looksLikeDm) {
+            const selfId = MatrixClientPeg.get().getUserId();
+            const otherMember = this.props.room.currentState.getMembersExcept([selfId])[0];
+            if (otherMember.user && otherMember.user.statusMessage) {
+                subtext = otherMember.user.statusMessage;
+            }
+        }
+
         const classes = classNames({
             'mx_RoomTile': true,
             'mx_RoomTile_selected': this.state.selected,
@@ -261,6 +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,
         });
 
         const avatarClasses = classNames({
@@ -291,6 +303,7 @@ module.exports = React.createClass({
 
         const EmojiText = sdk.getComponent('elements.EmojiText');
         let label;
+        let subtextLabel;
         let tooltip;
         if (!this.props.collapsed) {
             const nameClasses = classNames({
@@ -299,6 +312,8 @@ module.exports = React.createClass({
                 'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.menuDisplayed,
             });
 
+            subtextLabel = subtext ? <span className="mx_RoomTile_subtext">{ subtext }</span> : null;
+
             if (this.state.selected) {
                 const nameSelected = <EmojiText>{ name }</EmojiText>;
 
@@ -339,6 +354,7 @@ module.exports = React.createClass({
             </div>
             <div className="mx_RoomTile_nameContainer">
                 { label }
+                { subtextLabel }
                 { badge }
             </div>
             { /* { incomingCallBox } */ }