diff --git a/package.json b/package.json index ae17da4678..2e5bca3573 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "@types/png-chunks-extract": "^1.0.2", "@types/react-virtualized": "^9.21.30", "@vector-im/compound-design-tokens": "^4.0.0", - "@vector-im/compound-web": "^7.10.0", + "@vector-im/compound-web": "^7.10.1", "@vector-im/matrix-wysiwyg": "2.38.3", "@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4", diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png index 8da208a85d..7adeb314fd 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png index d6e1d2e549..aa35ea7118 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png index ded76f85e3..05e2172e24 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png index ae5bfdabc1..89a975c309 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png index d48bf49aa4..eab0846f76 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png index d360a8e31d..38b0bf2fff 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png index 59426e012e..78bca99706 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png differ diff --git a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss index 1594781dbd..41ee00fff5 100644 --- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss +++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss @@ -39,7 +39,7 @@ box-sizing: border-box; min-width: 0; - span { + .mx_RoomListItemView_roomName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -71,3 +71,7 @@ padding-right: var(--cpd-space-3x); } } + +.mx_RoomListItemView_bold .mx_RoomListItemView_roomName { + font: var(--cpd-font-body-md-semibold); +} diff --git a/src/components/viewmodels/roomlist/RoomListItemViewModel.tsx b/src/components/viewmodels/roomlist/RoomListItemViewModel.tsx index d1c9fef4ab..d15ad0a42b 100644 --- a/src/components/viewmodels/roomlist/RoomListItemViewModel.tsx +++ b/src/components/viewmodels/roomlist/RoomListItemViewModel.tsx @@ -36,6 +36,10 @@ export interface RoomListItemViewState { * The notification state of the room. */ notificationState: RoomNotificationState; + /** + * Whether the room should be bolded. + */ + isBold: boolean; } /** @@ -51,6 +55,7 @@ export function useRoomListItemViewModel(room: Room): RoomListItemViewState { hasAccessToOptionsMenu(room) || hasAccessToNotificationMenu(room, matrixClient.isGuest(), isArchived); const notificationState = useMemo(() => RoomNotificationStateStore.instance.getRoomState(room), [room]); const a11yLabel = getA11yLabel(room, notificationState); + const isBold = notificationState.hasAnyNotificationOrActivity; // Actions @@ -67,6 +72,7 @@ export function useRoomListItemViewModel(room: Room): RoomListItemViewState { showHoverMenu, openRoom, a11yLabel, + isBold, }; } diff --git a/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx b/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx index 213d83c605..e07b886f54 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx @@ -80,16 +80,32 @@ function SpaceMenu({ vm }: SpaceMenuProps): JSX.Element { } > - + {vm.canInviteInSpace && ( - + )} - + {vm.canAccessSpaceSettings && ( )} @@ -123,10 +139,22 @@ function ComposeMenu({ vm }: ComposeMenuProps): JSX.Element { } > - - {vm.canCreateRoom && } + + {vm.canCreateRoom && ( + + )} {vm.canCreateVideoRoom && ( - + )} ); diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx index 71e84984c5..5f97e44378 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx @@ -90,6 +90,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element label={_t("room_list|more_options|mark_read")} onSelect={vm.markAsRead} onClick={(evt) => evt.stopPropagation()} + hideChevron={true} /> )} {vm.canMarkAsUnread && ( @@ -98,6 +99,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element label={_t("room_list|more_options|mark_unread")} onSelect={vm.markAsUnread} onClick={(evt) => evt.stopPropagation()} + hideChevron={true} /> )} evt.stopPropagation()} + hideChevron={true} /> {vm.canInvite && ( evt.stopPropagation()} + hideChevron={true} /> )} {vm.canCopyRoomLink && ( @@ -127,6 +131,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element label={_t("room_list|more_options|copy_link")} onSelect={vm.copyRoomLink} onClick={(evt) => evt.stopPropagation()} + hideChevron={true} /> )} @@ -136,6 +141,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element label={_t("room_list|more_options|leave_room")} onSelect={vm.leaveRoom} onClick={(evt) => evt.stopPropagation()} + hideChevron={true} /> ); @@ -173,6 +179,8 @@ interface NotificationMenuProps { function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Element { const [open, setOpen] = useState(false); + const checkComponent = ; + return ( vm.setRoomNotifState(RoomNotifState.AllMessages)} onClick={(evt) => evt.stopPropagation()} > - {vm.isNotificationAllMessage && } + {vm.isNotificationAllMessage && checkComponent} vm.setRoomNotifState(RoomNotifState.AllMessagesLoud)} onClick={(evt) => evt.stopPropagation()} > - {vm.isNotificationAllMessageLoud && } + {vm.isNotificationAllMessageLoud && checkComponent} vm.setRoomNotifState(RoomNotifState.MentionsOnly)} onClick={(evt) => evt.stopPropagation()} > - {vm.isNotificationMentionOnly && } + {vm.isNotificationMentionOnly && checkComponent} vm.setRoomNotifState(RoomNotifState.Mute)} onClick={(evt) => evt.stopPropagation()} > - {vm.isNotificationMute && } + {vm.isNotificationMute && checkComponent} ); diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx index 637ac265cc..c0b204fc01 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx @@ -48,6 +48,7 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie mx_RoomListItemView_notification_decoration: isNotificationDecorationVisible, mx_RoomListItemView_menu_open: showHoverDecoration, mx_RoomListItemView_selected: isSelected, + mx_RoomListItemView_bold: vm.isBold, })} type="button" aria-selected={isSelected} @@ -69,7 +70,9 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie justify="space-between" > {/* We truncate the room name when too long. Title here is to show the full name on hover */} - {room.name} + + {room.name} + {showHoverDecoration ? ( ", () => { showHoverMenu: false, notificationState: new RoomNotificationState(room, false), a11yLabel: "Open room room1", + isBold: false, }; mocked(useRoomListItemViewModel).mockReturnValue(defaultValue); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap index 2417527ac7..b65c6ec70d 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap @@ -62,6 +62,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room0 @@ -109,6 +110,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room1 @@ -156,6 +158,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room2 @@ -203,6 +206,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room3 @@ -250,6 +254,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room4 @@ -297,6 +302,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room5 @@ -344,6 +350,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room6 @@ -391,6 +398,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room7 @@ -438,6 +446,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room8 @@ -485,6 +494,7 @@ exports[` should render a room list 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room9 diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap index b9c01ccec8..5800d78aa6 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap @@ -40,6 +40,7 @@ exports[` should be selected if isSelected=true 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room1 @@ -90,6 +91,7 @@ exports[` should render a room item 1`] = ` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > room1 diff --git a/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap index b2b9502a5b..e4c5b17657 100644 --- a/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap @@ -24,7 +24,7 @@ exports[` should render the invitation decoration 1`] style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;" > 1 @@ -51,7 +51,7 @@ exports[` should render the mention decoration 1`] = ` /> 1 @@ -92,7 +92,7 @@ exports[` should render the notification decoration 1` style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;" > 1 @@ -108,7 +108,7 @@ exports[` should render the notification decoration wi style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;" >
diff --git a/yarn.lock b/yarn.lock index e5bb282806..4b6788392a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3724,10 +3724,10 @@ resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-4.0.1.tgz#5c4ea7ad664d8e6206dc42e41649c80ef060a760" integrity sha512-V4AsK1FVFxZ6DmmCoeAi8FyvE7ODMlXPWjqRGotcnVaoGNrDQrVz2ZGV85DCz5ISxB3iynYASe6OXsDVXT1zFA== -"@vector-im/compound-web@^7.10.0": - version "7.10.0" - resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.10.0.tgz#d3913ea8737c56271152a1643f12d5c5be370718" - integrity sha512-lqIA/eHum5tekFkNeHmgK9Cm48pl7leWKVvJDy/hJFX2KDHqGvPcIy6E0waqTIsodV8z0GAztj1c/1cYRpdYIA== +"@vector-im/compound-web@^7.10.1": + version "7.10.1" + resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.10.1.tgz#9aa7fc93550b4b064484fa30226439b2d07bb35e" + integrity sha512-3tVIPCNxXCrMz6TqJc5GiOndPC7bjCRdYIcSKIb7T3B0gVo81aAD2wWL5xSb33yDbXc/tdlKCiav57eQB8dRsQ== dependencies: "@floating-ui/react" "^0.27.0" "@radix-ui/react-context-menu" "^2.2.1" @@ -3741,13 +3741,14 @@ "@vector-im/matrix-wysiwyg-wasm@link:../../bindings/wysiwyg-wasm": version "0.0.0" + uid "" "@vector-im/matrix-wysiwyg@2.38.3": version "2.38.3" resolved "https://registry.yarnpkg.com/@vector-im/matrix-wysiwyg/-/matrix-wysiwyg-2.38.3.tgz#cc54d8b3e9472bcd8e622126ba364ee31952cd8a" integrity sha512-fqo8P55Vc/t0vxpFar9RDJN5gKEjJmzrLo+O4piDbFda6VrRoqrWAtiu0Au0g6B4hRDPKIuFupk8v9Ja7q8Hvg== dependencies: - "@vector-im/matrix-wysiwyg-wasm" "link:../../bindings/wysiwyg-wasm" + "@vector-im/matrix-wysiwyg-wasm" "link:../../../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.3-cc54d8b3e9472bcd8e622126ba364ee31952cd8a-integrity/node_modules/bindings/wysiwyg-wasm" "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1": version "1.14.1"