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

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,
})}