Merge pull request #352 from matrix-org/wmwragg/mention-state-indicator

Now showing three dots when hovering over the badge

src/components/views/rooms/RoomTile.js

@@ -43,7 +43,10 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
-        return( { hover : false });
+        return({
+            hover : false,
+            badgeHover : false,
+        });
     },
 
     onClick: function() {
@@ -61,6 +64,14 @@ module.exports = React.createClass({
         this.setState( { hover : false });
     },
 
+    badgeOnMouseEnter: function() {
+        this.setState( { badgeHover : true } );
+    },
+
+    badgeOnMouseLeave: function() {
+        this.setState( { badgeHover : false } );
+    },
+
     render: function() {
         var myUserId = MatrixClientPeg.get().credentials.userId;
         var me = this.props.room.currentState.members[myUserId];
@@ -83,8 +94,14 @@ module.exports = React.createClass({
 
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
         var badge;
+        var badgeContent;
         if (this.props.highlight || notificationCount > 0) {
-            badge = <div className="mx_RoomTile_badge">{ notificationCount ? notificationCount : '!' }</div>;
+            if (this.state.badgeHover) {
+                badgeContent = "\u00B7 \u00B7 \u00B7";
+            } else {
+                badgeContent = notificationCount ? notificationCount : '!';
+            }
+            badge = <div className="mx_RoomTile_badge" onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>{ badgeContent }</div>;
         }
         /*
         if (this.props.highlight) {