diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index ca3efcef..dff6d5c8 100644 --- 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 =
; + + 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 (
more
-
{ content }
+
{ content }
); }, diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index b50cbfdc..2050f6bd 100644 --- 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;