From 5d22561815a512e2c989208266dddc7b504b4e2f Mon Sep 17 00:00:00 2001 From: Zoe Date: Thu, 9 Jan 2020 15:17:33 +0000 Subject: [PATCH 01/13] Display a padlock icon beside encrypted rooms in the room list https://github.com/vector-im/riot-web/issues/11226 --- res/css/views/rooms/_RoomTile.scss | 28 ++++++++++++++++++++++++++ res/img/lock.svg | 4 ++++ src/components/views/rooms/RoomTile.js | 2 ++ 3 files changed, 34 insertions(+) create mode 100644 res/img/lock.svg diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index e5c7948216..ae38045712 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -200,3 +200,31 @@ limitations under the License. .mx_GroupInviteTile .mx_RoomTile_name { flex: 1; } + +.mx_RoomTile.mx_RoomTile.mx_RoomTile_isEncrypted .mx_RoomTile_name { + // Scoot the padding in a bit from 6px to make it look better + padding-left: 3px; +} + +.mx_RoomTile.mx_RoomTile_isEncrypted .mx_RoomTile_E2EIcon { + width: 12px; + height: 12px; + position: relative; + display: block !important; + // Align the padlock with unencrypted room names + margin-left: 6px; + + &::before { + background-color: $roomtile-name-color; + mask-image: url('$(res)/img/lock.svg'); + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } +} diff --git a/res/img/lock.svg b/res/img/lock.svg new file mode 100644 index 0000000000..9eb8b6a4c5 --- /dev/null +++ b/res/img/lock.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 241713c97d..b9e1abd23d 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -303,6 +303,7 @@ module.exports = createReactClass({ 'mx_RoomTile_noBadges': !badges, 'mx_RoomTile_transparent': this.props.transparent, 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed, + 'mx_RoomTile_isEncrypted': MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId), }); const avatarClasses = classNames({ @@ -428,6 +429,7 @@ module.exports = createReactClass({ { dmIndicator } +
{ label } From e9032a9f61d4b161117c98b1c5995cee3b338072 Mon Sep 17 00:00:00 2001 From: Zoe Date: Thu, 9 Jan 2020 15:59:27 +0000 Subject: [PATCH 02/13] Move the lock icon within the feather-customised directory --- res/css/views/rooms/_RoomTile.scss | 2 +- res/img/{lock.svg => feather-customised/lock-solid.svg} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename res/img/{lock.svg => feather-customised/lock-solid.svg} (100%) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index ae38045712..5c37492383 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -216,7 +216,7 @@ limitations under the License. &::before { background-color: $roomtile-name-color; - mask-image: url('$(res)/img/lock.svg'); + mask-image: url('$(res)/img/feather-customised/lock-solid.svg'); mask-position: center; mask-repeat: no-repeat; mask-size: contain; diff --git a/res/img/lock.svg b/res/img/feather-customised/lock-solid.svg similarity index 100% rename from res/img/lock.svg rename to res/img/feather-customised/lock-solid.svg From cb250c9b1024f12e260b1156f2e14efa584b5efc Mon Sep 17 00:00:00 2001 From: Zoe Date: Fri, 10 Jan 2020 13:09:16 +0000 Subject: [PATCH 03/13] Use existing available props data to determine whether a room is encrypted, thereby allowing a state update to properly rerender the tile --- src/components/views/rooms/RoomTile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index b9e1abd23d..ce0375e088 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -303,7 +303,7 @@ module.exports = createReactClass({ 'mx_RoomTile_noBadges': !badges, 'mx_RoomTile_transparent': this.props.transparent, 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed, - 'mx_RoomTile_isEncrypted': MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId), + 'mx_RoomTile_isEncrypted': Boolean(this.props.room.currentState.getStateEvents("m.room.encryption", "")), }); const avatarClasses = classNames({ From 5551b207c1b50abb52a31692d726c456a429a9e3 Mon Sep 17 00:00:00 2001 From: Zoe Date: Fri, 10 Jan 2020 16:33:08 +0000 Subject: [PATCH 04/13] Actually, this task was about join rules, not encryption ones. Oops. --- res/css/views/rooms/_RoomTile.scss | 4 ++-- src/components/views/rooms/RoomTile.js | 17 +++++++++++++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 5c37492383..cb1137bb2f 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -201,12 +201,12 @@ limitations under the License. flex: 1; } -.mx_RoomTile.mx_RoomTile.mx_RoomTile_isEncrypted .mx_RoomTile_name { +.mx_RoomTile.mx_RoomTile.mx_RoomTile_isPrivate .mx_RoomTile_name { // Scoot the padding in a bit from 6px to make it look better padding-left: 3px; } -.mx_RoomTile.mx_RoomTile_isEncrypted .mx_RoomTile_E2EIcon { +.mx_RoomTile.mx_RoomTile_isPrivate .mx_RoomTile_PrivateIcon { width: 12px; height: 12px; position: relative; diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index ce0375e088..35b5d2fea5 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -56,7 +56,10 @@ module.exports = createReactClass({ }, getInitialState: function() { + const { event: { content: { join_rule } } } = this.props.room.currentState.getStateEvents("m.room.join_rules", ""); + return ({ + join_rule, hover: false, badgeHover: false, contextMenuPosition: null, // DOM bounding box, null if non-shown @@ -104,6 +107,14 @@ module.exports = createReactClass({ }); }, + onJoinRule: function(ev) { + const { event: { type, room_id } } = ev; + if (type !== "m.room.join_rules") return; + if (room_id !== this.props.room.roomId) return; + const { event: { content: { join_rule } } } = ev; + this.setState({ join_rule }); + }, + onAccountData: function(accountDataEvent) { if (accountDataEvent.getType() === 'm.push_rules') { this.setState({ @@ -143,6 +154,7 @@ module.exports = createReactClass({ const cli = MatrixClientPeg.get(); cli.on("accountData", this.onAccountData); cli.on("Room.name", this.onRoomName); + cli.on("RoomState.events", this.onJoinRule); ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange); this.dispatcherRef = dis.register(this.onAction); @@ -159,6 +171,7 @@ module.exports = createReactClass({ if (cli) { MatrixClientPeg.get().removeListener("accountData", this.onAccountData); MatrixClientPeg.get().removeListener("Room.name", this.onRoomName); + cli.removeListener("RoomState.events", this.onJoinRule); } ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange); dis.unregister(this.dispatcherRef); @@ -303,7 +316,7 @@ module.exports = createReactClass({ 'mx_RoomTile_noBadges': !badges, 'mx_RoomTile_transparent': this.props.transparent, 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed, - 'mx_RoomTile_isEncrypted': Boolean(this.props.room.currentState.getStateEvents("m.room.encryption", "")), + 'mx_RoomTile_isPrivate': this.state.join_rule == "invite", }); const avatarClasses = classNames({ @@ -429,7 +442,7 @@ module.exports = createReactClass({ { dmIndicator }
-
+
{ label } From 808785c2f89dec842e727601ebc5dd5624eb21c1 Mon Sep 17 00:00:00 2001 From: Zoe Date: Fri, 10 Jan 2020 16:43:36 +0000 Subject: [PATCH 05/13] lint --- src/components/views/rooms/RoomTile.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 35b5d2fea5..09918ace3d 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -56,7 +56,9 @@ module.exports = createReactClass({ }, getInitialState: function() { - const { event: { content: { join_rule } } } = this.props.room.currentState.getStateEvents("m.room.join_rules", ""); + // eslint-disable-next-line camelcase + const { event: { content: { join_rule } } } = + this.props.room.currentState.getStateEvents("m.room.join_rules", ""); return ({ join_rule, @@ -108,11 +110,13 @@ module.exports = createReactClass({ }, onJoinRule: function(ev) { + /* eslint-disable camelcase */ const { event: { type, room_id } } = ev; if (type !== "m.room.join_rules") return; if (room_id !== this.props.room.roomId) return; const { event: { content: { join_rule } } } = ev; this.setState({ join_rule }); + /* eslint-enable camelcase */ }, onAccountData: function(accountDataEvent) { From df1fd4db72583c891a6850e1c19a0c87119d8ad2 Mon Sep 17 00:00:00 2001 From: Zoe Date: Fri, 10 Jan 2020 16:49:07 +0000 Subject: [PATCH 06/13] suppress private icon if the room is a DM --- src/components/views/rooms/RoomTile.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 09918ace3d..16fff4fc97 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -309,6 +309,8 @@ module.exports = createReactClass({ const isMenuDisplayed = Boolean(this.state.contextMenuPosition); + const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); + const classes = classNames({ 'mx_RoomTile': true, 'mx_RoomTile_selected': this.state.selected, @@ -320,7 +322,7 @@ module.exports = createReactClass({ 'mx_RoomTile_noBadges': !badges, 'mx_RoomTile_transparent': this.props.transparent, 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed, - 'mx_RoomTile_isPrivate': this.state.join_rule == "invite", + 'mx_RoomTile_isPrivate': this.state.join_rule == "invite" && !dmUserId, }); const avatarClasses = classNames({ @@ -384,8 +386,6 @@ module.exports = createReactClass({ let ariaLabel = name; - const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId); - let dmIndicator; let dmOnline; if (dmUserId) { From bebfd60daf14e84350e60f2a41dbd4bd99a06fc1 Mon Sep 17 00:00:00 2001 From: Zoe Date: Fri, 10 Jan 2020 17:22:09 +0000 Subject: [PATCH 07/13] Very fastidiously check for null/undefined --- src/components/views/rooms/RoomTile.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 16fff4fc97..b904f9d437 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -57,11 +57,11 @@ module.exports = createReactClass({ getInitialState: function() { // eslint-disable-next-line camelcase - const { event: { content: { join_rule } } } = - this.props.room.currentState.getStateEvents("m.room.join_rules", ""); + const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", ""); + const joinRule = joinRules && joinRules.event && joinRules.event.content && joinRules.event.content.join_rule; return ({ - join_rule, + joinRule, hover: false, badgeHover: false, contextMenuPosition: null, // DOM bounding box, null if non-shown @@ -110,12 +110,14 @@ module.exports = createReactClass({ }, onJoinRule: function(ev) { + if (!ev || !ev.event ) return; /* eslint-disable camelcase */ const { event: { type, room_id } } = ev; if (type !== "m.room.join_rules") return; if (room_id !== this.props.room.roomId) return; + if ( !event.content ) return; const { event: { content: { join_rule } } } = ev; - this.setState({ join_rule }); + this.setState({ joinRule: join_rule }); /* eslint-enable camelcase */ }, @@ -322,7 +324,7 @@ module.exports = createReactClass({ 'mx_RoomTile_noBadges': !badges, 'mx_RoomTile_transparent': this.props.transparent, 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed, - 'mx_RoomTile_isPrivate': this.state.join_rule == "invite" && !dmUserId, + 'mx_RoomTile_isPrivate': this.state.joinRule == "invite" && !dmUserId, }); const avatarClasses = classNames({ From fb587cc62c60851597723db440abe1af78ab091f Mon Sep 17 00:00:00 2001 From: "Z. E. Cat" Date: Fri, 10 Jan 2020 17:33:37 +0000 Subject: [PATCH 08/13] Update src/components/views/rooms/RoomTile.js Co-Authored-By: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/RoomTile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index b904f9d437..f7c58f5c5a 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -58,7 +58,7 @@ module.exports = createReactClass({ getInitialState: function() { // eslint-disable-next-line camelcase const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", ""); - const joinRule = joinRules && joinRules.event && joinRules.event.content && joinRules.event.content.join_rule; + const joinRule = joinRules && joinRules.getContent() && joinRules.getContent().join_rule; return ({ joinRule, From fbabe79647c8d8e54922155ce976936987ad6616 Mon Sep 17 00:00:00 2001 From: Zoe Date: Fri, 10 Jan 2020 17:35:57 +0000 Subject: [PATCH 09/13] use getContent() instead --- src/components/views/rooms/RoomTile.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index f7c58f5c5a..f17ec98d9a 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -115,10 +115,9 @@ module.exports = createReactClass({ const { event: { type, room_id } } = ev; if (type !== "m.room.join_rules") return; if (room_id !== this.props.room.roomId) return; - if ( !event.content ) return; - const { event: { content: { join_rule } } } = ev; - this.setState({ joinRule: join_rule }); /* eslint-enable camelcase */ + const joinRule = event.getContent().join_rule; + this.setState({ joinRule }); }, onAccountData: function(accountDataEvent) { From 1b75909cadc9f4af3ab7da30bc546e25c5b64614 Mon Sep 17 00:00:00 2001 From: "Z. E. Cat" Date: Fri, 10 Jan 2020 17:36:33 +0000 Subject: [PATCH 10/13] Update src/components/views/rooms/RoomTile.js Co-Authored-By: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/RoomTile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index f17ec98d9a..cc77bf5b3d 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -58,7 +58,7 @@ module.exports = createReactClass({ getInitialState: function() { // eslint-disable-next-line camelcase const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", ""); - const joinRule = joinRules && joinRules.getContent() && joinRules.getContent().join_rule; + const joinRule = joinRules && joinRules.getContent().join_rule; return ({ joinRule, From 54c69b4630afd0d1819fbcd6e617c2e08b901832 Mon Sep 17 00:00:00 2001 From: Zoe Date: Fri, 10 Jan 2020 17:46:14 +0000 Subject: [PATCH 11/13] this is what we call fast iteration --- src/components/views/rooms/RoomTile.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index cc77bf5b3d..232e11cfd8 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -110,13 +110,9 @@ module.exports = createReactClass({ }, onJoinRule: function(ev) { - if (!ev || !ev.event ) return; - /* eslint-disable camelcase */ - const { event: { type, room_id } } = ev; - if (type !== "m.room.join_rules") return; - if (room_id !== this.props.room.roomId) return; - /* eslint-enable camelcase */ - const joinRule = event.getContent().join_rule; + if (ev.getType() !== "m.room.join_rules") return; + if (ev.getRoomId() !== this.props.room.roomId) return; + const joinRule = (ev.getContent() || {}).join_rule; this.setState({ joinRule }); }, From 422d4cd73a7c5223ba5f886314f06be2ad5c1ae1 Mon Sep 17 00:00:00 2001 From: Zoe Date: Mon, 13 Jan 2020 11:18:24 +0000 Subject: [PATCH 12/13] small simplification in code as `.getContent()` will always return an object --- src/components/views/rooms/RoomTile.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 232e11cfd8..fd06962a99 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -112,8 +112,7 @@ module.exports = createReactClass({ onJoinRule: function(ev) { if (ev.getType() !== "m.room.join_rules") return; if (ev.getRoomId() !== this.props.room.roomId) return; - const joinRule = (ev.getContent() || {}).join_rule; - this.setState({ joinRule }); + this.setState({ joinRule: ev.getContent().join_rule }); }, onAccountData: function(accountDataEvent) { From 878c5b5b521e78793cf310597a6c1dbd7b2426ed Mon Sep 17 00:00:00 2001 From: Zoe Date: Mon, 13 Jan 2020 12:11:19 +0000 Subject: [PATCH 13/13] removed unnecessary lint rule --- src/components/views/rooms/RoomTile.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index fd06962a99..6c14a1cb43 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -56,7 +56,6 @@ module.exports = createReactClass({ }, getInitialState: function() { - // eslint-disable-next-line camelcase const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", ""); const joinRule = joinRules && joinRules.getContent().join_rule;