From a980864886e9c6c79bd9c89d81feea7d48e5544d Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 23 Aug 2016 10:47:17 +0100
Subject: [PATCH] Initial sub list notifications count. Still needs propagation
 of muting/unmuting etc. events from room tile up to sub list

---
 src/components/structures/RoomSubList.js      | 55 ++++++++++++++++---
 .../css/vector-web/structures/RoomSubList.css | 23 +++++++-
 2 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index a60951f9..740cb82e 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -214,6 +214,38 @@ var RoomSubList = React.createClass({
         this.setState({ sortedList: list.sort(comparator) });
     },
 
+    roomNotificationCount: function() {
+        var self = this;
+        var subListCount = 0;
+        var subListHighlight = false;
+        var cli = MatrixClientPeg.get();
+
+        this.state.sortedList.map(function(room) {
+            var notifsMuted = false;
+            if (!cli.isGuest()) {
+                var roomPushRule = cli.getRoomPushRule("global", room.roomId);
+                if (roomPushRule) {
+                    if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
+                        notifsMuted = true;
+                    }
+                }
+            }
+
+            var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
+
+            var notificationCount = room.getUnreadNotificationCount();
+
+            if (notificationCount > 0 && (!notifsMuted || (notifsMuted && highlight))) {
+                subListCount += notificationCount;
+                if (highlight) {
+                    subListHighlight = true;
+                }
+            }
+        });
+
+        return [subListCount, subListHighlight];
+    },
+
     moveRoomTile: function(room, atIndex) {
         if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex);
         //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms));
@@ -329,12 +361,9 @@ var RoomSubList = React.createClass({
     _getHeaderJsx: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        var chevronClasses = classNames({
-            'mx_RoomSubList_chevron': true,
-            'mx_RoomSubList_chevronUp': this.state.hidden,
-            'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
-            'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
-        });
+        var subListNotifications = this.roomNotificationCount();
+        var subListNotificationsCount = subListNotifications[0];
+        var subListNotificationsHighlight = subListNotifications[1];
 
         var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
         var isTruncatable = this.props.list.length > TRUNCATE_AT;
@@ -342,12 +371,24 @@ var RoomSubList = React.createClass({
             roomCount = TRUNCATE_AT + " of " + roomCount;
         }
 
+        var chevronClasses = classNames({
+            'mx_RoomSubList_chevron': true,
+            'mx_RoomSubList_chevronUp': this.state.hidden,
+            'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
+            'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
+        });
+
+        var badgeClasses = classNames({
+            'mx_RoomSubList_badge': true,
+            'mx_RoomSubList_badgeHighlight': subListNotificationsHighlight,
+        });
+
         return (
             <div onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
                 <div className="mx_RoomSubList_roomCount">{roomCount}</div>
                 <div className={chevronClasses}></div>
-                <div className="mx_RoomSubList_badge">0</div>
+                <div className={badgeClasses}>{subListNotificationsCount}</div>
             </div>
         );
     },
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index aeef4a42..a5ea7d14 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -66,13 +66,34 @@ limitations under the License.
     padding-top: 1px;
     padding-left: 4px;
     padding-right: 4px;
-    background-color: #76cfa6; /* Temporary */
+    background-color: #76cfa6;
 }
 
 .collapsed .mx_RoomSubList_badge {
     display: none;
 }
 
+.mx_RoomSubList_badgeHighlight {
+    background-color: #ff0064;
+}
+
+/* This is the bottom of the speech bubble */
+.mx_RoomSubList_badgeHighlight:after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    border-top: 5px solid #ff0064;
+    border-right: 7px solid transparent;
+}
+
+/* Hide the bottom of speech bubble */
+.collapsed .mx_RoomSubList_badgeHighlight:after {
+    display: none;
+}
+
 .mx_RoomSubList_chevron {
     pointer-events: none;
     position: absolute;