nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

New room list: fix spacing and padding (#29607)

Browse Source 
* fix(menu): reduce gap between button and button size

* fix(notification decoration): increase gap between icons

* fix(room list item): different right padding depending on the menu, notification decoration and the regular case

* test: update snapshots

* test(e2e): update snapshots
This commit is contained in:
Florian Duros
2025-03-28 11:21:31 +01:00
committed by GitHub
parent fac982811c
commit 6ae11dab52
16 changed files with 49 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 80 KiB

BIN
playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

21
res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
View File

@@ -19,6 +19,10 @@
&:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
.mx_RoomListItemView_content {
padding-right: var(--cpd-space-1-5x);
}
}
.mx_RoomListItemView_container {
@@ -27,7 +31,6 @@
height: 100%;
.mx_RoomListItemView_content {
padding-right: var(--cpd-space-3x);
height: 100%;
flex: 1;
/* The border is only under the room name and the future hover menu */
@@ -46,8 +49,24 @@
.mx_RoomListItemView_menu_open {
background-color: var(--cpd-color-bg-action-secondary-hovered);
.mx_RoomListItemView_content {
padding-right: var(--cpd-space-1-5x);
}
}
.mx_RoomListItemView_selected {
background-color: var(--cpd-color-bg-action-secondary-pressed);
}
.mx_RoomListItemView_notification_decoration {
.mx_RoomListItemView_content {
padding-right: var(--cpd-space-2x);
}
}
.mx_RoomListItemView_empty {
.mx_RoomListItemView_content {
padding-right: var(--cpd-space-3x);
}
}

2
src/components/views/rooms/NotificationDecoration.tsx
View File

@@ -44,7 +44,7 @@ export function NotificationDecoration({
<Flex
align="center"
justify="center"
gap="var(--cpd-space-1x)"
gap="var(--cpd-space-1-5x)"
{...props}
data-testid="notification-decoration"
>

4
src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx
View File

@@ -43,7 +43,7 @@ export function RoomListItemMenuView({ room, setMenuOpen }: RoomListItemMenuView
const vm = useRoomListItemMenuViewModel(room);
return (
<Flex className="mx_RoomListItemMenuView" align="center" gap="var(--cpd-space-1x)">
<Flex className="mx_RoomListItemMenuView" align="center" gap="var(--cpd-space-0-5x)">
{vm.showMoreOptionsMenu && <MoreOptionsMenu setMenuOpen={setMenuOpen} vm={vm} />}
</Flex>
);
@@ -77,7 +77,7 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
title={_t("room_list|room|more_options")}
showTitle={false}
align="start"
trigger={<MoreOptionsButton />}
trigger={<MoreOptionsButton size="24px" />}
>
{vm.canMarkAsRead && (
<MenuItem

5
src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
View File

@@ -38,9 +38,14 @@ export function RoomListItemView({ room, isSelected, ...props }: RoomListItemVie
// Using display: none; and then display:flex when hovered in CSS causes the menu to be misaligned
const showHoverDecoration = (isMenuOpen || isHover) && vm.showHoverMenu;
const isNotificationDecorationVisible =
!showHoverDecoration && (vm.notificationState.hasAnyNotificationOrActivity || vm.notificationState.muted);
return (
<button
className={classNames("mx_RoomListItemView", {
mx_RoomListItemView_empty: !isNotificationDecorationVisible && !showHoverDecoration,
mx_RoomListItemView_notification_decoration: isNotificationDecorationVisible,
mx_RoomListItemView_menu_open: showHoverDecoration,
mx_RoomListItemView_selected: isSelected,
})}

20
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
View File

@@ -25,7 +25,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room0"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
type="button"
@@ -72,7 +72,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
type="button"
@@ -119,7 +119,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room2"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
type="button"
@@ -166,7 +166,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room3"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
type="button"
@@ -213,7 +213,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room4"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
type="button"
@@ -260,7 +260,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room5"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
type="button"
@@ -307,7 +307,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room6"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
type="button"
@@ -354,7 +354,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room7"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
type="button"
@@ -401,7 +401,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room8"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
type="button"
@@ -448,7 +448,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room9"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"
type="button"

4
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListItemMenuView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
>
<button
aria-disabled="false"
@@ -16,7 +16,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
data-state="closed"
id="radix-:r0:"
role="button"
style="--cpd-icon-button-size: 32px;"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
type="button"
>

4
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
View File

@@ -5,7 +5,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
<button
aria-label="Open room room1"
aria-selected="true"
class="mx_RoomListItemView mx_RoomListItemView_selected"
class="mx_RoomListItemView mx_RoomListItemView_empty mx_RoomListItemView_selected"
type="button"
>
<div
@@ -55,7 +55,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
<button
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
type="button"
>
<div

14
test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap
View File

@@ -5,7 +5,7 @@ exports[`<NotificationDecoration /> should render the activity decoration 1`] =
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
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;"
>
<div
class="_unread_1k06b_8"
@@ -21,7 +21,7 @@ exports[`<NotificationDecoration /> should render the invitation decoration 1`]
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
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;"
>
<span
class="_unread-counter_1ibqq_8"
@@ -37,7 +37,7 @@ exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
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;"
>
<svg
fill="var(--cpd-color-icon-accent-primary)"
@@ -64,7 +64,7 @@ exports[`<NotificationDecoration /> should render the muted decoration 1`] = `
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
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;"
>
<svg
fill="var(--cpd-color-icon-tertiary)"
@@ -89,7 +89,7 @@ exports[`<NotificationDecoration /> should render the notification decoration 1`
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
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;"
>
<span
class="_unread-counter_1ibqq_8"
@@ -105,7 +105,7 @@ exports[`<NotificationDecoration /> should render the notification decoration wi
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
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;"
>
<div
class="_unread-counter_1ibqq_8"
@@ -119,7 +119,7 @@ exports[`<NotificationDecoration /> should render the unset message decoration 1
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
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;"
>
<svg
fill="var(--cpd-color-icon-critical-primary)"