From b3f50b6e1795a8502db199992112bfae436f5264 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Jul 2020 23:14:04 +0100 Subject: [PATCH 1/5] Enable options to favourite and low priority rooms --- res/css/views/rooms/_RoomTile2.scss | 5 +++ res/img/feather-customised/favourites.svg | 3 ++ src/components/views/rooms/RoomTile2.tsx | 29 ++++++++++++-- .../tabs/room/AdvancedRoomSettingsTab.js | 39 ++++++++++++++++++- src/i18n/strings/en_EN.json | 2 + 5 files changed, 72 insertions(+), 6 deletions(-) create mode 100644 res/img/feather-customised/favourites.svg diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss index 50d376a66f..c6947e91c5 100644 --- a/res/css/views/rooms/_RoomTile2.scss +++ b/res/css/views/rooms/_RoomTile2.scss @@ -224,6 +224,11 @@ limitations under the License. mask-image: url('$(res)/img/feather-customised/star.svg'); } + .mx_RoomTile2_iconFavorite::before { + background-color: $accent-color; + mask-image: url('$(res)/img/feather-customised/favourites.svg'); + } + .mx_RoomTile2_iconArrowDown::before { mask-image: url('$(res)/img/feather-customised/arrow-down.svg'); } diff --git a/res/img/feather-customised/favourites.svg b/res/img/feather-customised/favourites.svg new file mode 100644 index 0000000000..80f08f6e55 --- /dev/null +++ b/res/img/feather-customised/favourites.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx index c6cd401803..5e4560c7cd 100644 --- a/src/components/views/rooms/RoomTile2.tsx +++ b/src/components/views/rooms/RoomTile2.tsx @@ -50,6 +50,8 @@ import { INotificationState } from "../../../stores/notifications/INotificationS import NotificationBadge from "./NotificationBadge"; import { NotificationColor } from "../../../stores/notifications/NotificationColor"; import { Volume } from "../../../RoomNotifsTypes"; +import RoomListStore from "../../../stores/room-list/RoomListStore2"; +import RoomListActions from "../../../actions/RoomListActions"; // TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231 // TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231 @@ -212,8 +214,22 @@ export default class RoomTile2 extends React.Component { ev.preventDefault(); ev.stopPropagation(); - // TODO: Support tagging: https://github.com/vector-im/riot-web/issues/14211 - // TODO: XOR favourites and low priority: https://github.com/vector-im/riot-web/issues/14210 + if (tagId === DefaultTagID.Favourite) { + const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room); + const isFavourite = roomTags.includes(DefaultTagID.Favourite); + const removeTag = isFavourite ? DefaultTagID.Favourite : DefaultTagID.LowPriority; + const addTag = isFavourite ? null : DefaultTagID.Favourite; + dis.dispatch(RoomListActions.tagRoom( + MatrixClientPeg.get(), + this.props.room, + removeTag, + addTag, + undefined, + 0 + )); + } else { + console.log(`Unexpected tag ${tagId} applied to ${this.props.room.room_id}`); + } if ((ev as React.KeyboardEvent).key === Key.ENTER) { // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12 @@ -345,6 +361,11 @@ export default class RoomTile2 extends React.Component { // TODO: We could do with a proper invite context menu, unlike what showContextMenu suggests + const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room); + + const isFavorite = roomTags.includes(DefaultTagID.Favourite); + const favoriteClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar" + let contextMenu = null; if (this.state.generalMenuPosition) { contextMenu = ( @@ -353,10 +374,10 @@ export default class RoomTile2 extends React.Component {
this.onTagRoom(e, DefaultTagID.Favourite)} - active={false} // TODO: https://github.com/vector-im/riot-web/issues/14283 + active={isFavorite} label={_t("Favourite")} > - + {_t("Favourite")} diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js index f57d5d3798..87d4455767 100644 --- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js @@ -22,6 +22,10 @@ import * as sdk from "../../../../.."; import AccessibleButton from "../../../elements/AccessibleButton"; import Modal from "../../../../../Modal"; import dis from "../../../../../dispatcher/dispatcher"; +import RoomListStore from "../../../../../stores/room-list/RoomListStore2"; +import RoomListActions from "../../../../../actions/RoomListActions"; +import { DefaultTagID } from '../../../../../stores/room-list/models'; +import LabelledToggleSwitch from '../../../elements/LabelledToggleSwitch'; export default class AdvancedRoomSettingsTab extends React.Component { static propTypes = { @@ -29,12 +33,16 @@ export default class AdvancedRoomSettingsTab extends React.Component { closeSettingsFn: PropTypes.func.isRequired, }; - constructor() { - super(); + constructor(props) { + super(props); + + const room = MatrixClientPeg.get().getRoom(props.roomId); + const roomTags = RoomListStore.instance.getTagsForRoom(room); this.state = { // This is eventually set to the value of room.getRecommendedVersion() upgradeRecommendation: null, + isLowPriorityRoom: roomTags.includes(DefaultTagID.LowPriority), }; } @@ -86,6 +94,25 @@ export default class AdvancedRoomSettingsTab extends React.Component { this.props.closeSettingsFn(); }; + _onToggleLowPriorityTag = (e) => { + this.setState({ + isLowPriorityRoom: !this.state.isLowPriorityRoom, + }); + + const removeTag = this.state.isLowPriorityRoom ? DefaultTagID.LowPriority : DefaultTagID.Favourite; + const addTag = this.state.isLowPriorityRoom ? null : DefaultTagID.LowPriority; + const client = MatrixClientPeg.get(); + + dis.dispatch(RoomListActions.tagRoom( + client, + client.getRoom(this.props.roomId), + removeTag, + addTag, + undefined, + 0, + )); + } + render() { const client = MatrixClientPeg.get(); const room = client.getRoom(this.props.roomId); @@ -156,6 +183,14 @@ export default class AdvancedRoomSettingsTab extends React.Component { {_t("Open Devtools")}
+
+ {_t('Make this room low priority')} + +
); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f16fb38f86..e576411323 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -966,6 +966,8 @@ "Room version:": "Room version:", "Developer options": "Developer options", "Open Devtools": "Open Devtools", + "Make this room low priority": "Make this room low priority", + "Low priority rooms show up at the bottom of your room list in a dedicated section at the bottom of your room list": "Low priority rooms show up at the bottom of your room list in a dedicated section at the bottom of your room list", "This room is bridging messages to the following platforms. Learn more.": "This room is bridging messages to the following platforms. Learn more.", "This room isn’t bridging messages to any platforms. Learn more.": "This room isn’t bridging messages to any platforms. Learn more.", "Bridges": "Bridges", From f4e05142dbcbda8ae6b4f2faed5868e932a9b80f Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 7 Jul 2020 23:17:56 +0100 Subject: [PATCH 2/5] lint --- src/components/views/rooms/RoomTile2.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx index 5e4560c7cd..8f00e2d085 100644 --- a/src/components/views/rooms/RoomTile2.tsx +++ b/src/components/views/rooms/RoomTile2.tsx @@ -364,7 +364,7 @@ export default class RoomTile2 extends React.Component { const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room); const isFavorite = roomTags.includes(DefaultTagID.Favourite); - const favoriteClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar" + const favoriteClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar"; let contextMenu = null; if (this.state.generalMenuPosition) { From 53bdddfcdd95ff908e143d695c18004426d9e07c Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 8 Jul 2020 16:07:38 +0100 Subject: [PATCH 3/5] Fix discrepancies with style --- res/css/views/rooms/_RoomTile2.scss | 1 - src/components/views/rooms/RoomTile2.tsx | 11 +++++++---- src/i18n/strings/en_EN.json | 1 + 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss index c6947e91c5..380a3ab9c7 100644 --- a/res/css/views/rooms/_RoomTile2.scss +++ b/res/css/views/rooms/_RoomTile2.scss @@ -225,7 +225,6 @@ limitations under the License. } .mx_RoomTile2_iconFavorite::before { - background-color: $accent-color; mask-image: url('$(res)/img/feather-customised/favourites.svg'); } diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx index 8f00e2d085..aae731cf49 100644 --- a/src/components/views/rooms/RoomTile2.tsx +++ b/src/components/views/rooms/RoomTile2.tsx @@ -364,7 +364,9 @@ export default class RoomTile2 extends React.Component { const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room); const isFavorite = roomTags.includes(DefaultTagID.Favourite); - const favoriteClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar"; + const favouriteIconClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar"; + const favouriteLabelClassName = isFavorite ? "mx_RoomTile2_contextMenu_activeRow" : ""; + const favouriteLabel = isFavorite ? _t("Favourited") : _t("Favourite"); let contextMenu = null; if (this.state.generalMenuPosition) { @@ -373,12 +375,13 @@ export default class RoomTile2 extends React.Component {
this.onTagRoom(e, DefaultTagID.Favourite)} active={isFavorite} - label={_t("Favourite")} + label={favouriteLabel} > - - {_t("Favourite")} + + {favouriteLabel} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index e576411323..5e1b1c4397 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1226,6 +1226,7 @@ "All messages": "All messages", "Mentions & Keywords": "Mentions & Keywords", "Notification options": "Notification options", + "Favourited": "Favourited", "Favourite": "Favourite", "Leave Room": "Leave Room", "Room options": "Room options", From 4ae64aff9a856cb2746377d590e4b3ea038ad724 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 8 Jul 2020 16:14:04 +0100 Subject: [PATCH 4/5] lint line length --- .../views/settings/tabs/room/AdvancedRoomSettingsTab.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js index 87d4455767..a1b3bbd136 100644 --- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js @@ -188,7 +188,10 @@ export default class AdvancedRoomSettingsTab extends React.Component {
From 9dd28a9ce0387e66d595e997d76e1acae014d9af Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 8 Jul 2020 17:02:26 +0100 Subject: [PATCH 5/5] semi --- .../views/settings/tabs/room/AdvancedRoomSettingsTab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js index a1b3bbd136..2edf3021dc 100644 --- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js @@ -190,7 +190,7 @@ export default class AdvancedRoomSettingsTab extends React.Component { onChange={this._onToggleLowPriorityTag} label={_t( "Low priority rooms show up at the bottom of your room list" + - " in a dedicated section at the bottom of your room list" + " in a dedicated section at the bottom of your room list", )} />