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",