From 04a9038a05127cc66d1eeafa6f875d6ab2b416f8 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 26 Mar 2019 19:22:24 -0600 Subject: [PATCH 1/3] Alert the user to unread notifications in prior versions of rooms Fixes https://github.com/vector-im/riot-web/issues/8161 --- res/css/structures/_RoomView.scss | 7 ++++++ src/components/structures/RoomSubList.js | 27 +++++++++++++++++++-- src/components/structures/RoomView.js | 30 ++++++++++++++++++++++++ src/i18n/strings/en_EN.json | 2 ++ 4 files changed, 64 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index f15552e484a..b958d934d18 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -70,6 +70,13 @@ limitations under the License. background-color: $primary-bg-color; } +.mx_RoomView_auxPanel_hiddenHighlights { + border-bottom: 1px solid $primary-hairline-color; + padding: 10px; + color: $warning-color; + cursor: pointer; +} + .mx_RoomView_auxPanel_apps { max-width: 1920px ! important; } diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 78cc5bd58f7..825a80b844e 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -29,6 +29,7 @@ import { Group } from 'matrix-js-sdk'; import PropTypes from 'prop-types'; import RoomTile from "../views/rooms/RoomTile"; import LazyRenderList from "../views/elements/LazyRenderList"; +import MatrixClientPeg from "../../MatrixClientPeg"; // turn this on for drop & drag console debugging galore const debug = false; @@ -138,6 +139,28 @@ const RoomSubList = React.createClass({ this.setState(this.state); }, + getUnreadNotificationCount: function(room, type=null) { + let notificationCount = room.getUnreadNotificationCount(type); + + // Check notification counts in the old room just in case there's some lost + // there. We only go one level down to avoid performance issues, and theory + // is that 1st generation rooms will have already been read by the 3rd generation. + const createEvent = room.currentState.getStateEvents("m.room.create", ""); + if (createEvent && createEvent.getContent()['predecessor']) { + const oldRoomId = createEvent.getContent()['predecessor']['room_id']; + const oldRoom = MatrixClientPeg.get().getRoom(oldRoomId); + if (oldRoom) { + // We only ever care if there's highlights in the old room. No point in + // notifying the user for unread messages because they would have extreme + // difficulty changing their notification preferences away from "All Messages" + // and "Noisy". + notificationCount += oldRoom.getUnreadNotificationCount("highlight"); + } + } + + return notificationCount; + }, + makeRoomTile: function(room) { return 0 || this.props.isInvite} - notificationCount={room.getUnreadNotificationCount()} + highlight={this.props.isInvite || this.getUnreadNotificationCount(room, 'highlight') > 0} + notificationCount={this.getUnreadNotificationCount(room)} isInvite={this.props.isInvite} refreshSubList={this._updateSubListCount} incomingCall={null} diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 34c711ee6f1..740e2dba7bc 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1515,6 +1515,25 @@ module.exports = React.createClass({ } }, + _getOldRoom: function() { + const createEvent = this.state.room.currentState.getStateEvents("m.room.create", ""); + if (!createEvent || !createEvent.getContent()['predecessor']) return null; + + return MatrixClientPeg.get().getRoom(createEvent.getContent()['predecessor']['room_id']); + }, + + _getHiddenHighlightCount: function() { + const oldRoom = this._getOldRoom(); + if (!oldRoom) return 0; + return oldRoom.getUnreadNotificationCount('highlight'); + }, + + _onHiddenHighlightsClick: function() { + const oldRoom = this._getOldRoom(); + if (!oldRoom) return; + dis.dispatch({action: "view_room", room_id: oldRoom.roomId}); + }, + render: function() { const RoomHeader = sdk.getComponent('rooms.RoomHeader'); const MessageComposer = sdk.getComponent('rooms.MessageComposer'); @@ -1673,6 +1692,8 @@ module.exports = React.createClass({ !MatrixClientPeg.get().getKeyBackupEnabled() ); + const hiddenHighlightCount = this._getHiddenHighlightCount(); + let aux = null; let hideCancel = false; if (this.state.forwardingEvent !== null) { @@ -1713,6 +1734,15 @@ module.exports = React.createClass({ room={this.state.room} /> ); + } else if (hiddenHighlightCount > 0) { + aux = ( +
+ {_t( + "You have %(count)s unread notifications in a prior version of this room.", + {count: hiddenHighlightCount}, + )} +
+ ); } const auxPanel = ( diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 18bc8769669..56a31e1dcb6 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1416,6 +1416,8 @@ "Unknown room %(roomId)s": "Unknown room %(roomId)s", "Room": "Room", "Failed to reject invite": "Failed to reject invite", + "You have %(count)s unread notifications in a prior version of this room.|other": "You have %(count)s unread notifications in a prior version of this room.", + "You have %(count)s unread notifications in a prior version of this room.|one": "You have %(count)s unread notification in a prior version of this room.", "Fill screen": "Fill screen", "Click to unmute video": "Click to unmute video", "Click to mute video": "Click to mute video", From 5ac3905a3768630927eba36c8d477a43c7c4bb00 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Wed, 27 Mar 2019 13:15:03 +0100 Subject: [PATCH 2/3] Use same horizontal padding as room avatar to align to grid --- res/css/structures/_RoomView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index b958d934d18..e914869fd16 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -72,7 +72,7 @@ limitations under the License. .mx_RoomView_auxPanel_hiddenHighlights { border-bottom: 1px solid $primary-hairline-color; - padding: 10px; + padding: 10px 26px; color: $warning-color; cursor: pointer; } From c94ae6401b53d0db4d00de6b1848ac95114fbee3 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 27 Mar 2019 13:14:31 -0600 Subject: [PATCH 3/3] Use an AccessibleButton for the clickable element --- src/components/structures/RoomView.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 740e2dba7bc..99d4ba55322 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -52,6 +52,7 @@ import RoomScrollStateStore from '../../stores/RoomScrollStateStore'; import WidgetEchoStore from '../../stores/WidgetEchoStore'; import SettingsStore, {SettingLevel} from "../../settings/SettingsStore"; import WidgetUtils from '../../utils/WidgetUtils'; +import AccessibleButton from "../views/elements/AccessibleButton"; const DEBUG = false; let debuglog = function() {}; @@ -1736,12 +1737,13 @@ module.exports = React.createClass({ ); } else if (hiddenHighlightCount > 0) { aux = ( -
+ {_t( "You have %(count)s unread notifications in a prior version of this room.", {count: hiddenHighlightCount}, )} -
+ ); }