Notification counts now done correctly, as well as highlights

wmwragg · wmwragg · commit 7af765976b83 · 2016-09-16T13:25:39.000+01:00
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
@@ -217,22 +217,30 @@ var RoomSubList = React.createClass({
         return roomNotifState != RoomNotifs.MUTE;
     },
 
-    roomNotificationCount: function() {
+    /**
+     * Total up all the notification counts from the rooms
+     *
+     * @param {Number} If supplied will only total notifications for rooms outside the truncation number
+     * @returns {Array} The array takes the form [total, highlight] where highlight is a bool
+     */
+    roomNotificationCount: function(truncateAt) {
         var self = this;
 
-        return this.props.list.reduce(function(result, room) {
-            var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
-            var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
-            var notificationCount = room.getUnreadNotificationCount();
+        return this.props.list.reduce(function(result, room, index) {
+            if (truncateAt === undefined || index >= truncateAt) {
+                var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
+                var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
+                var notificationCount = room.getUnreadNotificationCount();
 
-            const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
-            const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
-            const badges = notifBadges || mentionBadges;
+                const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
+                const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
+                const badges = notifBadges || mentionBadges;
 
-            if (badges) {
-                result[0] += notificationCount;
-                if (highlight) {
-                    result[1] = true;
+                if (badges) {
+                    result[0] += notificationCount;
+                    if (highlight) {
+                        result[1] = true;
+                    }
                 }
             }
             return result;
@@ -423,11 +431,25 @@ var RoomSubList = React.createClass({
 
     _createOverflowTile: function(overflowCount, totalCount) {
         var content = <div className="mx_RoomSubList_chevronDown"></div>;
+
+        var overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
+        var overflowNotifCount = overflowNotifications[0];
+        var overflowNotifHighlight = overflowNotifications[1];
+        if (overflowNotifCount && !this.props.collapsed) {
+            content = overflowNotifCount;
+        }
+
+        var badgeClasses = classNames({
+            'mx_RoomSubList_moreBadge': true,
+            'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed,
+            'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed,
+        });
+
         return (
             <div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
                 <div className="mx_RoomSubList_line"></div>
                 <div className="mx_RoomSubList_more">more</div>
-                <div className="mx_RoomSubList_moreBadge">{ content }</div>
+            <div className={ badgeClasses }>{ content }</div>
             </div>
         );
     },
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -152,15 +152,14 @@ limitations under the License.
 .mx_RoomSubList_ellipsis {
     display: block;
     line-height: 11px;
-    height: auto;
-    margin-bottom: 4px;
+    height: 18px;
     position: relative;
     cursor: pointer;
     font-size: 13px;
 }
 
 .collapsed .mx_RoomSubList_ellipsis {
-    height: 16px;
+    height: 20px;
 }
 
 .mx_RoomSubList_line {
@@ -205,12 +204,28 @@ limitations under the License.
     font-size: 10px;
     text-align: center;
     padding-top: 1px;
-    padding-left: 4px;
-    padding-right: 4px;
+    padding-left: 3px;
+    padding-right: 3px;
     background-color: #fff;
     vertical-align: middle;
 }
 
+.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
+    background-color: #76cfa6;
+    border: 0;
+    padding-top: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
+    background-color: #ff0064;
+    border: 0;
+    padding-top: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
 .collapsed .mx_RoomSubList_moreBadge {
     position: static;
     margin-left: 16px;
