simplify DOM and style to design

res/css/views/rooms/_WhoIsTypingTile.scss

@@ -15,73 +15,31 @@ limitations under the License.
 */
 
 .mx_WhoIsTypingTile {
-    margin-left: 65px;
+    margin-left: -18px; //offset padding from mx_RoomView_MessageList to center avatars
-    min-height: 50px;
+    height: 40px;
-    font-size: 14px;
+    display: flex;
+    align-items: center;
 }
 
 /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
-.mx_WhoIsTypingTile_indicator {
+.mx_WhoIsTypingTile_avatars {
-    padding-left: 17px;
+    flex: 0 0 83px; // 18 + 65
-    padding-right: 12px;
-    margin-left: -73px;
-    margin-top: 15px;
-    float: left;
-    width: 24px;
     text-align: center;
 }
 
-.mx_WhoIsTypingTile_placeholderIndicator span {
+.mx_WhoIsTypingTile_avatars > :not(:first-child) {
-    color: $primary-fg-color;
+    margin-left: -12px;
-    opacity: 0.5;
-    position: relative;
-    top: -4px;
-/*
-    animation-duration: 1s;
-    animation-name: bounce;
-    animation-direction: alternate;
-    animation-iteration-count: infinite;
-*/
 }
 
-.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(1) {
+.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_image {
-    animation-delay: 0.3s;
-}
-.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(2) {
-    animation-delay: 0.6s;
-}
-.mx_WhoIsTypingTile_placeholderIndicator span:nth-child(3) {
-    animation-delay: 0.9s;
-}
-
-@keyframes bounce {
-    from {
-        opacity: 0.5;
-        top: 0;
-    }
-
-    to {
-        opacity: 0.2;
-        top: -3px;
-    }
-}
-
-.mx_WhoIsTypingTile_typingIndicatorAvatars {
-    width: 52px;
-    margin-top: -1px;
-}
-
-.mx_WhoIsTypingTile_typingIndicatorAvatars .mx_BaseAvatar_image {
-    margin-right: -12px;
     border: 1px solid $primary-bg-color;
 }
 
-.mx_WhoIsTypingTile_typingIndicatorAvatars .mx_BaseAvatar_initial {
+.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
-    padding-left: 1px;
     padding-top: 1px;
 }
 
-.mx_WhoIsTypingTile_typingIndicatorRemaining {
+.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
     display: inline-block;
     color: #acacac;
     background-color: #ddd;
@@ -93,31 +51,34 @@ limitations under the License.
     font-size: 0.8em;
     vertical-align: top;
     text-align: center;
-    position: absolute;
 }
 
-.mx_WhoIsTypingTile_typingBar {
+.mx_WhoIsTypingTile_label {
-    height: 50px;
+    flex: 1;
-    line-height: 50px;
+    font-size: 14px;
-
+    font-weight: 600;
-    color: $primary-fg-color;
+    color: $eventtile-meta-color;
-    opacity: 0.5;
-    overflow-y: hidden;
-    display: block;
 }
 
+.mx_WhoIsTypingTile_label > span:after {
+    background-image: url('../../img/spinner.gif');
+    background-size: 16px;
+    background-position: right;
+    background-repeat: no-repeat;
+    right: 0px;
+    top: 0;
+    bottom: 0;
+    margin-left: 10px;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    vertical-align: middle;
+    content: "";
+}
 
 .mx_MatrixChat_useCompactLayout {
+
     .mx_WhoIsTypingTile {
-        min-height: 40px;
+        height: 35px;
-    }
-
-    .mx_WhoIsTypingTile_indicator {
-        margin-top: 10px;
-    }
-
-    .mx_WhoIsTypingTile_typingBar {
-      height: 40px;
-      line-height: 40px;
     }
 }

res/themes/dharma/css/_dharma.scss

@@ -119,6 +119,7 @@ $topleftmenu-color: #212121;
 $roomheader-color: #45474a;
 $roomheader-addroom-color: #929eb4;
 $roomtopic-color: #9fa9ba;
+$eventtile-meta-color: $roomtopic-color;
 
 // ********************
 

res/themes/light/css/_base.scss

@@ -115,7 +115,7 @@ $topleftmenu-color: $primary-fg-color;
 $roomheader-color: $primary-fg-color;
 $roomheader-addroom-color: $primary-bg-color;
 $roomtopic-color: $settings-grey-fg-color;
-
+$eventtile-meta-color: $roomtopic-color;
 // ********************
 
 $roomtile-name-color: rgba(69, 69, 69, 0.8);

src/components/views/rooms/WhoIsTypingTile.js

@@ -48,14 +48,14 @@ module.exports = React.createClass({
     },
 
     componentWillMount: function() {
-        // MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
+        MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
     },
 
     componentWillUnmount: function() {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
         const client = MatrixClientPeg.get();
         if (client) {
-            // client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
+            client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
         }
     },
 
@@ -88,7 +88,7 @@ module.exports = React.createClass({
 
         if (othersCount > 0) {
             avatars.push(
-                <span className="mx_WhoIsTypingTile_typingIndicatorRemaining" key="others">
+                <span className="mx_WhoIsTypingTile_remainingAvatarPlaceholder" key="others">
                     +{ othersCount }
                 </span>,
             );
@@ -97,36 +97,24 @@ module.exports = React.createClass({
         return avatars;
     },
 
-    // return suitable content for the main (text) part of the status bar.
+    render: function() {
-    _getContent: function() {
-        const EmojiText = sdk.getComponent('elements.EmojiText');
-
         const typingString = WhoIsTyping.whoIsTypingString(
             this.state.usersTyping,
             this.props.whoIsTypingLimit,
         );
-        if (typingString) {
+        if (!typingString) {
-            return (
+            return (<div className="mx_WhoIsTypingTile_empty" />);
-                <div className="mx_WhoIsTypingTile_typingBar">
-                    <EmojiText>{ typingString }</EmojiText>
-                </div>
-            );
         }
-    },
 
-    render: function() {
+        const EmojiText = sdk.getComponent('elements.EmojiText');
-        // if (this.state.usersTyping.length === 0) {
+
-        //     return;
-        // }
         return (
             <div className="mx_WhoIsTypingTile">
-                <div className="mx_WhoIsTypingTile_indicator">
+                <div className="mx_WhoIsTypingTile_avatars">
-                    <div className="mx_WhoIsTypingTile_typingIndicatorAvatars">
+                    { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
-                        { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
-                    </div>
                 </div>
-                <div role="alert">
+                <div className="mx_WhoIsTypingTile_label">
-                    { this._getContent() }
+                    <EmojiText>{ typingString }</EmojiText>
                 </div>
             </div>
         );