diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index a2863460ad..6798f75a14 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -91,6 +91,10 @@ limitations under the License. background-color: $accent-color; } +.mx_RoomSubList_label .mx_RoomSubList_badge:hover { + filter: brightness($focus-brightness); +} + /* .collapsed .mx_RoomSubList_badge { display: none; diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 0b6f7eaa45..db23466f9a 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -237,6 +237,29 @@ const RoomSubList = React.createClass({ }); }, + _onNotifBadgeClick: function(e) { + // prevent the roomsublist collapsing + e.preventDefault(); + e.stopPropagation(); + // find first room which has notifications and switch to it + for (const room of this.state.sortedList) { + const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId); + const highlight = room.getUnreadNotificationCount('highlight') > 0; + const notificationCount = room.getUnreadNotificationCount(); + + const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge(roomNotifState); + const mentionBadges = highlight && this._shouldShowMentionBadge(roomNotifState); + + if (notifBadges || mentionBadges) { + dis.dispatch({ + action: 'view_room', + room_id: room.roomId, + }); + return; + } + } + }, + _getHeaderJsx: function() { const subListNotifications = this.roomNotificationCount(); const subListNotifCount = subListNotifications[0]; @@ -258,7 +281,9 @@ const RoomSubList = React.createClass({ let badge; if (subListNotifCount > 0) { - badge =
{FormattingUtils.formatCount(subListNotifCount)}
; + badge =
+ { FormattingUtils.formatCount(subListNotifCount) } +
; } else if (this.props.isInvite) { // no notifications but highlight anyway because this is an invite badge badge =
!
;