Florian DurosandGitHub
55cc7ba597
* fix(sc): use correct icon size for room list icons * feat(sc): implement new selection and hover design for room list item * feat(sc): set room list item height * chore(sc): add story for long room and message preview * fix(sc): use correct letter-spacing for room list item * feat(sc): use new padding for room list filters * feat(sc): update room list header style * test(sc): update unit tests * test(sc): update visual tests * test: update playwright screenshots * doc: update figma link in item story * test: fix sliding sync test The notification pop up was at the top of the room list filters (less top padding) and it was unable to click on the People filter. * chore: fix `VirtuaalizedRoomListView` comment * test: update playwright screenshot * fix(sc): add ellipsis on room name
116 lines
2.8 KiB
CSS
116 lines
2.8 KiB
CSS
/*
|
|
* Copyright 2025 Element Creations Ltd.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
.roomListItem {
|
|
/* Remove button default style */
|
|
background: unset;
|
|
border: none;
|
|
padding: 0;
|
|
text-align: unset;
|
|
|
|
/* Needed to position the selected marker */
|
|
position: relative;
|
|
cursor: pointer;
|
|
height: 44px;
|
|
width: 100%;
|
|
/* Gap between items, accounted for in ROOM_LIST_ITEM_HEIGHT */
|
|
margin-bottom: var(--cpd-space-2x);
|
|
|
|
font: var(--cpd-font-body-md-regular);
|
|
letter-spacing: var(--cpd-font-letter-spacing-body-md);
|
|
color: var(--cpd-color-text-secondary);
|
|
|
|
/* Hide the menu by default */
|
|
.hoverMenu {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Show hover menu and background on hover/focus/menu-open states */
|
|
.roomListItem:hover,
|
|
.roomListItem:focus-visible,
|
|
/* When the context menu is opened */
|
|
.roomListItem[data-state="open"],
|
|
/* When the options and notifications menu are opened */
|
|
.roomListItem:has(.hoverMenu > button[data-state="open"]) {
|
|
color: var(--cpd-color-text-primary);
|
|
|
|
.container {
|
|
background-color: var(--cpd-color-bg-action-tertiary-hovered);
|
|
}
|
|
|
|
/* Preserve selected background on hover/focus/menu-open states */
|
|
&.selected .container {
|
|
background-color: var(--cpd-color-bg-action-tertiary-selected);
|
|
}
|
|
|
|
.hoverMenu {
|
|
display: flex;
|
|
}
|
|
|
|
/* When the menu is visible, hide the notification decoration to avoid clutter */
|
|
.notificationDecoration {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
flex: 1;
|
|
height: 100%;
|
|
margin: 0 var(--cpd-space-3x);
|
|
padding: 0 var(--cpd-space-2x);
|
|
border-radius: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.text {
|
|
min-width: 0;
|
|
}
|
|
|
|
.ellipsis,
|
|
.roomName {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.selected {
|
|
.container {
|
|
background-color: var(--cpd-color-bg-action-tertiary-selected);
|
|
font: var(--cpd-font-body-md-semibold);
|
|
color: var(--cpd-color-text-primary);
|
|
}
|
|
|
|
/* Visual marker at the left on the container when the room is selected */
|
|
.container::before {
|
|
content: "";
|
|
position: absolute;
|
|
/* Marker height is 34px, room list item height is 44px. So position is at 5px and top and bottom */
|
|
top: 5px;
|
|
bottom: 5px;
|
|
left: 0;
|
|
width: 4px;
|
|
background-color: var(--cpd-color-bg-accent-rest);
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
}
|
|
|
|
.bold .roomName {
|
|
font: var(--cpd-font-body-md-semibold);
|
|
color: var(--cpd-color-text-primary);
|
|
}
|
|
|
|
/* Set icon color for hover menu buttons */
|
|
.hoverMenu svg {
|
|
fill: var(--cpd-color-icon-primary);
|
|
}
|