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 b02fc7902a..0c78043a42 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -26,6 +26,7 @@ import Unread from '../../Unread'; import * as RoomNotifs from '../../RoomNotifs'; import * as FormattingUtils from '../../utils/FormattingUtils'; import { KeyCode } from '../../Keyboard'; +import { Group } from 'matrix-js-sdk'; // turn this on for drop & drag console debugging galore @@ -237,6 +238,51 @@ 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; + } + } + }, + + _onInviteBadgeClick: function(e) { + // prevent the roomsublist collapsing + e.preventDefault(); + e.stopPropagation(); + // switch to first room in sortedList as that'll be the top of the list for the user + if (this.state.sortedList && this.state.sortedList.length > 0) { + dis.dispatch({ + action: 'view_room', + room_id: this.state.sortedList[0].roomId, + }); + } else if (this.props.extraTiles && this.props.extraTiles.length > 0) { + // Group Invites are different in that they are all extra tiles and not rooms + // XXX: this is a horrible special case because Group Invite sublist is a hack + if (this.props.extraTiles[0].props && this.props.extraTiles[0].props.group instanceof Group) { + dis.dispatch({ + action: 'view_group', + group_id: this.props.extraTiles[0].props.group.groupId, + }); + } + } + }, + _getHeaderJsx: function() { const subListNotifications = this.roomNotificationCount(); const subListNotifCount = subListNotifications[0]; @@ -258,10 +304,12 @@ 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 =
!
; + badge =
!
; } // When collapsed, allow a long hover on the header to show user diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js index 7c471cca2e..9e28ff5adf 100644 --- a/src/components/views/groups/GroupInviteTile.js +++ b/src/components/views/groups/GroupInviteTile.js @@ -134,7 +134,7 @@ export default React.createClass({ ; const badgeEllipsis = this.state.badgeHover || this.state.menuDisplayed; - const badgeClasses = classNames('mx_RoomSubList_badge mx_RoomSubList_badgeHighlight', { + const badgeClasses = classNames('mx_RoomTile_badge mx_RoomTile_highlight', { 'mx_RoomTile_badgeButton': badgeEllipsis, });