From b3341e6664ccfaf76e2a8673fe9b26d7a19b74a7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 27 Jun 2018 09:16:37 +0100 Subject: [PATCH 1/3] on click roomsublist notif badge, goto first room with notif Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_RoomSubList.scss | 4 ++++ src/components/structures/RoomSubList.js | 27 +++++++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) 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 =
!
; From 613e83edb4b89368e54f2ecca559337130f0c351 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 27 Jun 2018 09:49:58 +0100 Subject: [PATCH 2/3] on roomsublist invite badge click goto first room/group Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/RoomSubList.js | 25 +++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index db23466f9a..e5a08d62ea 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 @@ -260,6 +261,28 @@ const RoomSubList = React.createClass({ } }, + _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]; @@ -286,7 +309,7 @@ const RoomSubList = React.createClass({ ; } 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 From a6ab51cd73589eb7c076be4aaba54d7ffec49253 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 27 Jun 2018 09:50:32 +0100 Subject: [PATCH 3/3] change GroupInviteTile from RoomSubList css so new :hover won't apply Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/groups/GroupInviteTile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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, });