From 9e4511b8eb60d8a81fd654593dae9a1c4584b697 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 18 Jul 2016 16:10:07 +0100
Subject: [PATCH] Now showing three dots when hovering over the badge

---
 src/components/views/rooms/RoomTile.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index da9f97ab65..d3fbfa0220 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/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) {