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

New room list: rework spacing of room list item (#29965)

Browse Source 
* feat: rework spacing of room list item

* test: update snapshot

* test(e2e): regenerate room list panel screenshots

* test(e2e): regenerate room list screenshots

* test(e2e): update filter screenshot
This commit is contained in:
Florian Duros
2025-05-16 14:29:52 +02:00
committed by GitHub
parent 4dcde7ec7a
commit b56b0f2bd0
29 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -47,7 +47,7 @@ export function RoomListItemMenuView({ room, setMenuOpen }: RoomListItemMenuView
const vm = useRoomListItemMenuViewModel(room);
return (
<Flex className="mx_RoomListItemMenuView" align="center" gap="var(--cpd-space-0-5x)">
<Flex className="mx_RoomListItemMenuView" align="center" gap="var(--cpd-space-1x)">
{vm.showMoreOptionsMenu && <MoreOptionsMenu setMenuOpen={setMenuOpen} vm={vm} />}
{vm.showNotificationMenu && <NotificationMenu setMenuOpen={setMenuOpen} vm={vm} />}
</Flex>

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

@@ -47,15 +47,10 @@ export const RoomListItemView = memo(function RoomListItemView({
const showHoverDecoration = isMenuOpen || isHover;
const showHoverMenu = showHoverDecoration && vm.showHoverMenu;
const isInvitation = vm.notificationState.invited;
const isNotificationDecorationVisible = isInvitation || (!showHoverDecoration && vm.showNotificationDecoration);
return (
<button
ref={ref}
className={classNames("mx_RoomListItemView", {
mx_RoomListItemView_empty: !isNotificationDecorationVisible && !showHoverDecoration,
mx_RoomListItemView_notification_decoration: isNotificationDecorationVisible,
mx_RoomListItemView_hover: showHoverDecoration,
mx_RoomListItemView_menu_open: showHoverMenu,
mx_RoomListItemView_selected: isSelected,
@@ -83,7 +78,7 @@ export const RoomListItemView = memo(function RoomListItemView({
<RoomAvatarView room={room} />
<Flex
className="mx_RoomListItemView_content"
gap="var(--cpd-space-3x)"
gap="var(--cpd-space-2x)"
align="center"
justify="space-between"
>