diff --git a/res/css/_components.scss b/res/css/_components.scss index 24d1a73edc..6659e2a746 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -181,7 +181,7 @@ @import "./views/rooms/_RoomPreviewBar.scss"; @import "./views/rooms/_RoomRecoveryReminder.scss"; @import "./views/rooms/_RoomSublist2.scss"; -@import "./views/rooms/_RoomTile2.scss"; +@import "./views/rooms/_RoomTile.scss"; @import "./views/rooms/_RoomTileIcon.scss"; @import "./views/rooms/_RoomUpgradeWarningBar.scss"; @import "./views/rooms/_SearchBar.scss"; diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.scss index 900f351074..48d72131b5 100644 --- a/res/css/views/avatars/_DecoratedRoomAvatar.scss +++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss @@ -24,7 +24,7 @@ limitations under the License. right: 0; } - .mx_NotificationBadge, .mx_RoomTile2_badgeContainer { + .mx_NotificationBadge, .mx_RoomTile_badgeContainer { position: absolute; top: 0; right: 0; diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile.scss similarity index 77% rename from res/css/views/rooms/_RoomTile2.scss rename to res/css/views/rooms/_RoomTile.scss index 79b28598bd..4171127d7b 100644 --- a/res/css/views/rooms/_RoomTile2.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -14,29 +14,27 @@ See the License for the specific language governing permissions and limitations under the License. */ -// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367 - // Note: the room tile expects to be in a flexbox column container -.mx_RoomTile2 { +.mx_RoomTile { margin-bottom: 4px; padding: 4px; // The tile is also a flexbox row itself display: flex; - &.mx_RoomTile2_selected, + &.mx_RoomTile_selected, &:hover, &:focus-within, - &.mx_RoomTile2_hasMenuOpen { + &.mx_RoomTile_hasMenuOpen { background-color: $roomtile2-selected-bg-color; border-radius: 8px; } - .mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer { + .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer { margin-right: 8px; } - .mx_RoomTile2_nameContainer { + .mx_RoomTile_nameContainer { flex-grow: 1; min-width: 0; // allow flex to shrink it margin-right: 8px; // spacing to buttons/badges @@ -46,8 +44,8 @@ limitations under the License. flex-direction: column; justify-content: center; - .mx_RoomTile2_name, - .mx_RoomTile2_messagePreview { + .mx_RoomTile_name, + .mx_RoomTile_messagePreview { margin: 0 2px; width: 100%; @@ -57,31 +55,31 @@ limitations under the License. white-space: nowrap; } - .mx_RoomTile2_name { + .mx_RoomTile_name { font-size: $font-14px; line-height: $font-18px; } - .mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents { + .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents { font-weight: 600; } - .mx_RoomTile2_messagePreview { + .mx_RoomTile_messagePreview { font-size: $font-13px; line-height: $font-18px; color: $roomtile2-preview-color; } - .mx_RoomTile2_nameWithPreview { + .mx_RoomTile_nameWithPreview { margin-top: -4px; // shift the name up a bit more } } - .mx_RoomTile2_notificationsButton { + .mx_RoomTile_notificationsButton { margin-left: 4px; // spacing between buttons } - .mx_RoomTile2_badgeContainer { + .mx_RoomTile_badgeContainer { height: 16px; // don't set width so that it takes no space when there is no badge to show margin: auto 0; // vertically align @@ -102,8 +100,8 @@ limitations under the License. } // The context menu buttons are hidden by default - .mx_RoomTile2_menuButton, - .mx_RoomTile2_notificationsButton { + .mx_RoomTile_menuButton, + .mx_RoomTile_notificationsButton { width: 20px; min-width: 20px; // yay flex height: 20px; @@ -127,62 +125,62 @@ limitations under the License. } // If the room has an overriden notification setting then we always show the notifications menu button - .mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show { + .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show { display: block; } - .mx_RoomTile2_menuButton::before { + .mx_RoomTile_menuButton::before { mask-image: url('$(res)/img/element-icons/context-menu.svg'); } - &:not(.mx_RoomTile2_minimized) { + &:not(.mx_RoomTile_minimized) { &:hover, &:focus-within, - &.mx_RoomTile2_hasMenuOpen { + &.mx_RoomTile_hasMenuOpen { // Hide the badge container on hover because it'll be a menu button - .mx_RoomTile2_badgeContainer { + .mx_RoomTile_badgeContainer { width: 0; height: 0; display: none; } - .mx_RoomTile2_notificationsButton, - .mx_RoomTile2_menuButton { + .mx_RoomTile_notificationsButton, + .mx_RoomTile_menuButton { display: block; } } } - &.mx_RoomTile2_minimized { + &.mx_RoomTile_minimized { flex-direction: column; align-items: center; position: relative; - .mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer { + .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer { margin-right: 0; } } } // We use these both in context menus and the room tiles -.mx_RoomTile2_iconBell::before { +.mx_RoomTile_iconBell::before { mask-image: url('$(res)/img/element-icons/notifications.svg'); } -.mx_RoomTile2_iconBellDot::before { +.mx_RoomTile_iconBellDot::before { mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg'); } -.mx_RoomTile2_iconBellCrossed::before { +.mx_RoomTile_iconBellCrossed::before { mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg'); } -.mx_RoomTile2_iconBellMentions::before { +.mx_RoomTile_iconBellMentions::before { mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg'); } -.mx_RoomTile2_iconCheck::before { +.mx_RoomTile_iconCheck::before { mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg'); } -.mx_RoomTile2_contextMenu { - .mx_RoomTile2_contextMenu_redRow { +.mx_RoomTile_contextMenu { + .mx_RoomTile_contextMenu_redRow { .mx_AccessibleButton { color: $warning-color !important; // !important to override styles from context menu } @@ -192,7 +190,7 @@ limitations under the License. } } - .mx_RoomTile2_contextMenu_activeRow { + .mx_RoomTile_contextMenu_activeRow { &.mx_AccessibleButton, .mx_AccessibleButton { color: $accent-color !important; // !important to override styles from context menu } @@ -219,23 +217,23 @@ limitations under the License. } } - .mx_RoomTile2_iconStar::before { + .mx_RoomTile_iconStar::before { mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg'); } - .mx_RoomTile2_iconFavorite::before { + .mx_RoomTile_iconFavorite::before { mask-image: url('$(res)/img/feather-customised/favourites.svg'); } - .mx_RoomTile2_iconArrowDown::before { + .mx_RoomTile_iconArrowDown::before { mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg'); } - .mx_RoomTile2_iconSettings::before { + .mx_RoomTile_iconSettings::before { mask-image: url('$(res)/img/element-icons/settings.svg'); } - .mx_RoomTile2_iconSignOut::before { + .mx_RoomTile_iconSignOut::before { mask-image: url('$(res)/img/element-icons/leave.svg'); } } diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 8e2d205a69..f1b22d99a5 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -51,7 +51,7 @@ const cssClasses = [ "mx_RoomSearch_input", "mx_RoomSearch_icon", // minimized "mx_RoomSublist2_headerText", - "mx_RoomTile2", + "mx_RoomTile", "mx_RoomSublist2_showNButton", ]; @@ -264,7 +264,7 @@ export default class LeftPanel extends React.Component { }; private onEnter = () => { - const firstRoom = this.listContainerRef.current.querySelector(".mx_RoomTile2"); + const firstRoom = this.listContainerRef.current.querySelector(".mx_RoomTile"); if (firstRoom) { firstRoom.click(); return true; // to get the field to clear diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx index 5116b7c54d..b60c175ab0 100644 --- a/src/components/views/rooms/RoomSublist2.tsx +++ b/src/components/views/rooms/RoomSublist2.tsx @@ -23,7 +23,7 @@ import classNames from 'classnames'; import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../../views/elements/AccessibleButton"; -import RoomTile2 from "./RoomTile2"; +import RoomTile from "./RoomTile"; import { ListLayout } from "../../../stores/room-list/ListLayout"; import { ChevronFace, @@ -252,7 +252,7 @@ export default class RoomSublist2 extends React.Component { private focusRoomTile = (index: number) => { if (!this.sublistRef.current) return; - const elements = this.sublistRef.current.querySelectorAll(".mx_RoomTile2"); + const elements = this.sublistRef.current.querySelectorAll(".mx_RoomTile"); const element = elements && elements[index]; if (element) { element.focus(); @@ -370,7 +370,7 @@ export default class RoomSublist2 extends React.Component { this.toggleCollapsed(); } else if (this.sublistRef.current) { // otherwise focus the first room - const element = this.sublistRef.current.querySelector(".mx_RoomTile2") as HTMLDivElement; + const element = this.sublistRef.current.querySelector(".mx_RoomTile") as HTMLDivElement; if (element) { element.focus(); } @@ -405,7 +405,7 @@ export default class RoomSublist2 extends React.Component { const visibleRooms = this.props.rooms.slice(0, this.numVisibleTiles); for (const room of visibleRooms) { tiles.push( - `mx_RoomTile2_messagePreview_${roomId}`; +const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`; const contextMenuBelow = (elementRect: PartialDOMRect) => { // align the context menu's icons with the icon which opened the context menu @@ -96,12 +96,12 @@ interface INotifOptionProps { const NotifOption: React.FC = ({active, onClick, iconClassName, label}) => { const classes = classNames({ - mx_RoomTile2_contextMenu_activeRow: active, + mx_RoomTile_contextMenu_activeRow: active, }); let activeIcon; if (active) { - activeIcon = ; + activeIcon = ; } return ( @@ -113,7 +113,7 @@ const NotifOption: React.FC = ({active, onClick, iconClassNam ); }; -export default class RoomTile2 extends React.Component { +export default class RoomTile extends React.Component { private dispatcherRef: string; private roomTileRef = createRef(); @@ -328,30 +328,30 @@ export default class RoomTile2 extends React.Component { if (this.state.notificationsMenuPosition) { contextMenu = ( -
+
@@ -360,16 +360,16 @@ export default class RoomTile2 extends React.Component { ); } - const classes = classNames("mx_RoomTile2_notificationsButton", { + const classes = classNames("mx_RoomTile_notificationsButton", { // Show bell icon for the default case too. - mx_RoomTile2_iconBell: state === ALL_MESSAGES, - mx_RoomTile2_iconBellDot: state === ALL_MESSAGES_LOUD, - mx_RoomTile2_iconBellMentions: state === MENTIONS_ONLY, - mx_RoomTile2_iconBellCrossed: state === MUTE, + mx_RoomTile_iconBell: state === ALL_MESSAGES, + mx_RoomTile_iconBellDot: state === ALL_MESSAGES_LOUD, + mx_RoomTile_iconBellMentions: state === MENTIONS_ONLY, + mx_RoomTile_iconBellCrossed: state === MUTE, // Only show the icon by default if the room is overridden to muted. // TODO: [FTUE Notifications] Probably need to detect global mute state - mx_RoomTile2_notificationsButton_show: state === MUTE, + mx_RoomTile_notificationsButton_show: state === MUTE, }); return ( @@ -392,18 +392,18 @@ export default class RoomTile2 extends React.Component { const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room); const isFavorite = roomTags.includes(DefaultTagID.Favourite); - const favouriteIconClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar"; - const favouriteLabelClassName = isFavorite ? "mx_RoomTile2_contextMenu_activeRow" : ""; + const favouriteIconClassName = isFavorite ? "mx_RoomTile_iconFavorite" : "mx_RoomTile_iconStar"; + const favouriteLabelClassName = isFavorite ? "mx_RoomTile_contextMenu_activeRow" : ""; const favouriteLabel = isFavorite ? _t("Favourited") : _t("Favourite"); let contextMenu = null; if (this.state.generalMenuPosition && this.props.tag === DefaultTagID.Archived) { contextMenu = ( -
-
+
+
- + {_t("Forget Room")}
@@ -413,7 +413,7 @@ export default class RoomTile2 extends React.Component { } else if (this.state.generalMenuPosition) { contextMenu = ( -
+
{ {favouriteLabel} - + {_t("Settings")}
-
+
- + {_t("Leave Room")}
@@ -443,7 +443,7 @@ export default class RoomTile2 extends React.Component { return ( { public render(): React.ReactElement { const classes = classNames({ - 'mx_RoomTile2': true, - 'mx_RoomTile2_selected': this.state.selected, - 'mx_RoomTile2_hasMenuOpen': !!(this.state.generalMenuPosition || this.state.notificationsMenuPosition), - 'mx_RoomTile2_minimized': this.props.isMinimized, + 'mx_RoomTile': true, + 'mx_RoomTile_selected': this.state.selected, + 'mx_RoomTile_hasMenuOpen': !!(this.state.generalMenuPosition || this.state.notificationsMenuPosition), + 'mx_RoomTile_minimized': this.props.isMinimized, }); const roomAvatar = { if (!this.props.isMinimized) { // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below badge = ( -