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

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

@@ -7,19 +7,19 @@
/**
* The RoomListItemView has the following structure:
* button----------------------------------------|
* | <-12px-> container--------------------------|
* | | room avatar <-12px-> content-----|
* | | | room_name |
* | | | ----------| <-- border
* |---------------------------------------------|
* button--------------------------------------------------|
* | <-12px-> container------------------------------------|
* | | room avatar <-8px-> content----------------|
* | | | room_name <- 20px ->|
* | | | --------------------| <-- border
* |-------------------------------------------------------|
*/
.mx_RoomListItemView {
all: unset;
cursor: pointer;
.mx_RoomListItemView_container {
padding-left: var(--cpd-space-2x);
padding-left: var(--cpd-space-3x);
font: var(--cpd-font-body-md-regular);
height: 100%;
@@ -30,6 +30,7 @@
border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
box-sizing: border-box;
min-width: 0;
padding-right: var(--cpd-space-5x);
.mx_RoomListItemView_text {
min-width: 0;
@@ -56,26 +57,20 @@
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
.mx_RoomListItemView_menu_open .mx_RoomListItemView_content {
padding-right: var(--cpd-space-1-5x);
.mx_RoomListItemView_menu_open .mx_RoomListItemView_container .mx_RoomListItemView_content {
/**
* The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
* the icon size of the menu is 18px instead of 20px with a different internal padding
* We need to use 18px to align the icon with the others icons
* 18px is not available in compound spacing
*/
padding-right: 18px;
}
.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);
}
}
.mx_RoomListItemView_bold .mx_RoomListItemView_roomName {
font: var(--cpd-font-body-md-semibold);
}