Skip to content

Commit d337106

Browse files
floriandurosflorianduros
authored
New room list: fix multiple visual issues (#29673)
* fix(room list item): add bold when there is a notification * fix(room list item menu): fix color of check icon * fix(menu): remove chevron * chore: update @vector-im/compound-web * test(room list): update tests * test(e2e): update snapshots
1 parent 5ce5e90 commit d337106

18 files changed

+85
-22
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
"@types/png-chunks-extract": "^1.0.2",
9494
"@types/react-virtualized": "^9.21.30",
9595
"@vector-im/compound-design-tokens": "^4.0.0",
96-
"@vector-im/compound-web": "^7.10.0",
96+
"@vector-im/compound-web": "^7.10.1",
9797
"@vector-im/matrix-wysiwyg": "2.38.3",
9898
"@zxcvbn-ts/core": "^3.0.4",
9999
"@zxcvbn-ts/language-common": "^3.0.4",

‎playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png

234 Bytes
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png

22 Bytes
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png

206 Bytes
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png

64 Bytes
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png

392 Bytes
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png

15 Bytes
Loading

‎playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png

-53 Bytes
Loading

‎res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss

+5-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
box-sizing: border-box;
4040
min-width: 0;
4141

42-
span {
42+
.mx_RoomListItemView_roomName {
4343
white-space: nowrap;
4444
overflow: hidden;
4545
text-overflow: ellipsis;
@@ -71,3 +71,7 @@
7171
padding-right: var(--cpd-space-3x);
7272
}
7373
}
74+
75+
.mx_RoomListItemView_bold .mx_RoomListItemView_roomName {
76+
font: var(--cpd-font-body-md-semibold);
77+
}

‎src/components/viewmodels/roomlist/RoomListItemViewModel.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ export interface RoomListItemViewState {
3636
* The notification state of the room.
3737
*/
3838
notificationState: RoomNotificationState;
39+
/**
40+
* Whether the room should be bolded.
41+
*/
42+
isBold: boolean;
3943
}
4044

4145
/**
@@ -51,6 +55,7 @@ export function useRoomListItemViewModel(room: Room): RoomListItemViewState {
5155
hasAccessToOptionsMenu(room) || hasAccessToNotificationMenu(room, matrixClient.isGuest(), isArchived);
5256
const notificationState = useMemo(() => RoomNotificationStateStore.instance.getRoomState(room), [room]);
5357
const a11yLabel = getA11yLabel(room, notificationState);
58+
const isBold = notificationState.hasAnyNotificationOrActivity;
5459

5560
// Actions
5661

@@ -67,6 +72,7 @@ export function useRoomListItemViewModel(room: Room): RoomListItemViewState {
6772
showHoverMenu,
6873
openRoom,
6974
a11yLabel,
75+
isBold,
7076
};
7177
}
7278

‎src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx

+34-6
Original file line numberDiff line numberDiff line change
@@ -80,16 +80,32 @@ function SpaceMenu({ vm }: SpaceMenuProps): JSX.Element {
8080
</IconButton>
8181
}
8282
>
83-
<MenuItem Icon={HomeIcon} label={_t("room_list|space_menu|home")} onSelect={vm.openSpaceHome} />
83+
<MenuItem
84+
Icon={HomeIcon}
85+
label={_t("room_list|space_menu|home")}
86+
onSelect={vm.openSpaceHome}
87+
hideChevron={true}
88+
/>
8489
{vm.canInviteInSpace && (
85-
<MenuItem Icon={UserAddIcon} label={_t("action|invite")} onSelect={vm.inviteInSpace} />
90+
<MenuItem
91+
Icon={UserAddIcon}
92+
label={_t("action|invite")}
93+
onSelect={vm.inviteInSpace}
94+
hideChevron={true}
95+
/>
8696
)}
87-
<MenuItem Icon={PreferencesIcon} label={_t("common|preferences")} onSelect={vm.openSpacePreferences} />
97+
<MenuItem
98+
Icon={PreferencesIcon}
99+
label={_t("common|preferences")}
100+
onSelect={vm.openSpacePreferences}
101+
hideChevron={true}
102+
/>
88103
{vm.canAccessSpaceSettings && (
89104
<MenuItem
90105
Icon={SettingsIcon}
91106
label={_t("room_list|space_menu|space_settings")}
92107
onSelect={vm.openSpaceSettings}
108+
hideChevron={true}
93109
/>
94110
)}
95111
</Menu>
@@ -123,10 +139,22 @@ function ComposeMenu({ vm }: ComposeMenuProps): JSX.Element {
123139
</IconButton>
124140
}
125141
>
126-
<MenuItem Icon={UserAddIcon} label={_t("action|new_message")} onSelect={vm.createChatRoom} />
127-
{vm.canCreateRoom && <MenuItem Icon={RoomIcon} label={_t("action|new_room")} onSelect={vm.createRoom} />}
142+
<MenuItem
143+
Icon={UserAddIcon}
144+
label={_t("action|new_message")}
145+
onSelect={vm.createChatRoom}
146+
hideChevron={true}
147+
/>
148+
{vm.canCreateRoom && (
149+
<MenuItem Icon={RoomIcon} label={_t("action|new_room")} onSelect={vm.createRoom} hideChevron={true} />
150+
)}
128151
{vm.canCreateVideoRoom && (
129-
<MenuItem Icon={VideoCallIcon} label={_t("action|new_video_room")} onSelect={vm.createVideoRoom} />
152+
<MenuItem
153+
Icon={VideoCallIcon}
154+
label={_t("action|new_video_room")}
155+
onSelect={vm.createVideoRoom}
156+
hideChevron={true}
157+
/>
130158
)}
131159
</Menu>
132160
);

‎src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
9090
label={_t("room_list|more_options|mark_read")}
9191
onSelect={vm.markAsRead}
9292
onClick={(evt) => evt.stopPropagation()}
93+
hideChevron={true}
9394
/>
9495
)}
9596
{vm.canMarkAsUnread && (
@@ -98,6 +99,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
9899
label={_t("room_list|more_options|mark_unread")}
99100
onSelect={vm.markAsUnread}
100101
onClick={(evt) => evt.stopPropagation()}
102+
hideChevron={true}
101103
/>
102104
)}
103105
<ToggleMenuItem
@@ -112,13 +114,15 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
112114
label={_t("room_list|more_options|low_priority")}
113115
onSelect={vm.toggleLowPriority}
114116
onClick={(evt) => evt.stopPropagation()}
117+
hideChevron={true}
115118
/>
116119
{vm.canInvite && (
117120
<MenuItem
118121
Icon={UserAddIcon}
119122
label={_t("action|invite")}
120123
onSelect={vm.invite}
121124
onClick={(evt) => evt.stopPropagation()}
125+
hideChevron={true}
122126
/>
123127
)}
124128
{vm.canCopyRoomLink && (
@@ -127,6 +131,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
127131
label={_t("room_list|more_options|copy_link")}
128132
onSelect={vm.copyRoomLink}
129133
onClick={(evt) => evt.stopPropagation()}
134+
hideChevron={true}
130135
/>
131136
)}
132137
<Separator />
@@ -136,6 +141,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
136141
label={_t("room_list|more_options|leave_room")}
137142
onSelect={vm.leaveRoom}
138143
onClick={(evt) => evt.stopPropagation()}
144+
hideChevron={true}
139145
/>
140146
</Menu>
141147
);
@@ -173,6 +179,8 @@ interface NotificationMenuProps {
173179
function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Element {
174180
const [open, setOpen] = useState(false);
175181

182+
const checkComponent = <CheckIcon width="24px" height="24px" color="var(--cpd-color-icon-primary)" />;
183+
176184
return (
177185
<Menu
178186
open={open}
@@ -192,7 +200,7 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
192200
onSelect={() => vm.setRoomNotifState(RoomNotifState.AllMessages)}
193201
onClick={(evt) => evt.stopPropagation()}
194202
>
195-
{vm.isNotificationAllMessage && <CheckIcon width="24px" height="24px" />}
203+
{vm.isNotificationAllMessage && checkComponent}
196204
</MenuItem>
197205
<MenuItem
198206
aria-selected={vm.isNotificationAllMessageLoud}
@@ -201,7 +209,7 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
201209
onSelect={() => vm.setRoomNotifState(RoomNotifState.AllMessagesLoud)}
202210
onClick={(evt) => evt.stopPropagation()}
203211
>
204-
{vm.isNotificationAllMessageLoud && <CheckIcon width="24px" height="24px" />}
212+
{vm.isNotificationAllMessageLoud && checkComponent}
205213
</MenuItem>
206214
<MenuItem
207215
aria-selected={vm.isNotificationMentionOnly}
@@ -210,7 +218,7 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
210218
onSelect={() => vm.setRoomNotifState(RoomNotifState.MentionsOnly)}
211219
onClick={(evt) => evt.stopPropagation()}
212220
>
213-
{vm.isNotificationMentionOnly && <CheckIcon width="24px" height="24px" />}
221+
{vm.isNotificationMentionOnly && checkComponent}
214222
</MenuItem>
215223
<MenuItem
216224
aria-selected={vm.isNotificationMute}
@@ -219,7 +227,7 @@ function NotificationMenu({ vm, setMenuOpen }: NotificationMenuProps): JSX.Eleme
219227
onSelect={() => vm.setRoomNotifState(RoomNotifState.Mute)}
220228
onClick={(evt) => evt.stopPropagation()}
221229
>
222-
{vm.isNotificationMute && <CheckIcon width="24px" height="24px" />}
230+
{vm.isNotificationMute && checkComponent}
223231
</MenuItem>
224232
</Menu>
225233
);

‎src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
4848
mx_RoomListItemView_notification_decoration: isNotificationDecorationVisible,
4949
mx_RoomListItemView_menu_open: showHoverDecoration,
5050
mx_RoomListItemView_selected: isSelected,
51+
mx_RoomListItemView_bold: vm.isBold,
5152
})}
5253
type="button"
5354
aria-selected={isSelected}
@@ -69,7 +70,9 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
6970
justify="space-between"
7071
>
7172
{/* We truncate the room name when too long. Title here is to show the full name on hover */}
72-
<span title={room.name}>{room.name}</span>
73+
<span className="mx_RoomListItemView_roomName" title={room.name}>
74+
{room.name}
75+
</span>
7376
{showHoverDecoration ? (
7477
<RoomListItemMenuView
7578
room={room}

‎test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ describe("<RoomListItemView />", () => {
4141
showHoverMenu: false,
4242
notificationState: new RoomNotificationState(room, false),
4343
a11yLabel: "Open room room1",
44+
isBold: false,
4445
};
4546

4647
mocked(useRoomListItemViewModel).mockReturnValue(defaultValue);

‎test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap

+10
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ exports[`<RoomList /> should render a room list 1`] = `
6262
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;"
6363
>
6464
<span
65+
class="mx_RoomListItemView_roomName"
6566
title="room0"
6667
>
6768
room0
@@ -109,6 +110,7 @@ exports[`<RoomList /> should render a room list 1`] = `
109110
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;"
110111
>
111112
<span
113+
class="mx_RoomListItemView_roomName"
112114
title="room1"
113115
>
114116
room1
@@ -156,6 +158,7 @@ exports[`<RoomList /> should render a room list 1`] = `
156158
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;"
157159
>
158160
<span
161+
class="mx_RoomListItemView_roomName"
159162
title="room2"
160163
>
161164
room2
@@ -203,6 +206,7 @@ exports[`<RoomList /> should render a room list 1`] = `
203206
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;"
204207
>
205208
<span
209+
class="mx_RoomListItemView_roomName"
206210
title="room3"
207211
>
208212
room3
@@ -250,6 +254,7 @@ exports[`<RoomList /> should render a room list 1`] = `
250254
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;"
251255
>
252256
<span
257+
class="mx_RoomListItemView_roomName"
253258
title="room4"
254259
>
255260
room4
@@ -297,6 +302,7 @@ exports[`<RoomList /> should render a room list 1`] = `
297302
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;"
298303
>
299304
<span
305+
class="mx_RoomListItemView_roomName"
300306
title="room5"
301307
>
302308
room5
@@ -344,6 +350,7 @@ exports[`<RoomList /> should render a room list 1`] = `
344350
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;"
345351
>
346352
<span
353+
class="mx_RoomListItemView_roomName"
347354
title="room6"
348355
>
349356
room6
@@ -391,6 +398,7 @@ exports[`<RoomList /> should render a room list 1`] = `
391398
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;"
392399
>
393400
<span
401+
class="mx_RoomListItemView_roomName"
394402
title="room7"
395403
>
396404
room7
@@ -438,6 +446,7 @@ exports[`<RoomList /> should render a room list 1`] = `
438446
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;"
439447
>
440448
<span
449+
class="mx_RoomListItemView_roomName"
441450
title="room8"
442451
>
443452
room8
@@ -485,6 +494,7 @@ exports[`<RoomList /> should render a room list 1`] = `
485494
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;"
486495
>
487496
<span
497+
class="mx_RoomListItemView_roomName"
488498
title="room9"
489499
>
490500
room9

‎test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
4040
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;"
4141
>
4242
<span
43+
class="mx_RoomListItemView_roomName"
4344
title="room1"
4445
>
4546
room1
@@ -90,6 +91,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
9091
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;"
9192
>
9293
<span
94+
class="mx_RoomListItemView_roomName"
9395
title="room1"
9496
>
9597
room1

‎test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ exports[`<NotificationDecoration /> should render the invitation decoration 1`]
2424
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;"
2525
>
2626
<span
27-
class="_unread-counter_1ibqq_8"
27+
class="_unread-counter_9mg0k_8"
2828
>
2929
1
3030
</span>
@@ -51,7 +51,7 @@ exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
5151
/>
5252
</svg>
5353
<span
54-
class="_unread-counter_1ibqq_8"
54+
class="_unread-counter_9mg0k_8"
5555
>
5656
1
5757
</span>
@@ -92,7 +92,7 @@ exports[`<NotificationDecoration /> should render the notification decoration 1`
9292
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;"
9393
>
9494
<span
95-
class="_unread-counter_1ibqq_8"
95+
class="_unread-counter_9mg0k_8"
9696
>
9797
1
9898
</span>
@@ -108,7 +108,7 @@ exports[`<NotificationDecoration /> should render the notification decoration wi
108108
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;"
109109
>
110110
<div
111-
class="_unread-counter_1ibqq_8"
111+
class="_unread-counter_9mg0k_8"
112112
/>
113113
</div>
114114
</DocumentFragment>

‎yarn.lock

+6-5
Original file line numberDiff line numberDiff line change
@@ -3724,10 +3724,10 @@
37243724
resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-4.0.1.tgz#5c4ea7ad664d8e6206dc42e41649c80ef060a760"
37253725
integrity sha512-V4AsK1FVFxZ6DmmCoeAi8FyvE7ODMlXPWjqRGotcnVaoGNrDQrVz2ZGV85DCz5ISxB3iynYASe6OXsDVXT1zFA==
37263726

3727-
"@vector-im/compound-web@^7.10.0":
3728-
version "7.10.0"
3729-
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.10.0.tgz#d3913ea8737c56271152a1643f12d5c5be370718"
3730-
integrity sha512-lqIA/eHum5tekFkNeHmgK9Cm48pl7leWKVvJDy/hJFX2KDHqGvPcIy6E0waqTIsodV8z0GAztj1c/1cYRpdYIA==
3727+
"@vector-im/compound-web@^7.10.1":
3728+
version "7.10.1"
3729+
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.10.1.tgz#9aa7fc93550b4b064484fa30226439b2d07bb35e"
3730+
integrity sha512-3tVIPCNxXCrMz6TqJc5GiOndPC7bjCRdYIcSKIb7T3B0gVo81aAD2wWL5xSb33yDbXc/tdlKCiav57eQB8dRsQ==
37313731
dependencies:
37323732
"@floating-ui/react" "^0.27.0"
37333733
"@radix-ui/react-context-menu" "^2.2.1"
@@ -3741,13 +3741,14 @@
37413741

37423742
"@vector-im/matrix-wysiwyg-wasm@link:../../bindings/wysiwyg-wasm":
37433743
version "0.0.0"
3744+
uid ""
37443745

37453746
"@vector-im/[email protected]":
37463747
version "2.38.3"
37473748
resolved "https://registry.yarnpkg.com/@vector-im/matrix-wysiwyg/-/matrix-wysiwyg-2.38.3.tgz#cc54d8b3e9472bcd8e622126ba364ee31952cd8a"
37483749
integrity sha512-fqo8P55Vc/t0vxpFar9RDJN5gKEjJmzrLo+O4piDbFda6VrRoqrWAtiu0Au0g6B4hRDPKIuFupk8v9Ja7q8Hvg==
37493750
dependencies:
3750-
"@vector-im/matrix-wysiwyg-wasm" "link:../../bindings/wysiwyg-wasm"
3751+
"@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"
37513752

37523753
"@webassemblyjs/[email protected]", "@webassemblyjs/ast@^1.14.1":
37533754
version "1.14.1"

0 commit comments

Comments
 (0)