Skip to content

Room list: rework selection and hover design #31142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from
Draft

Room list: rework selection and hover design #31142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d93946
feat(room list): remove border between each list item
florianduros Oct 29, 2025
b92530c
feat(room list): reworked padding between list items
florianduros Oct 30, 2025
269329a
feat(filter): increase bottom padding
florianduros Oct 30, 2025
d3d3a77
feat(room list): improve hover and selection style
florianduros Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 31 additions & 23 deletions res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,45 +18,53 @@
/* Remove button default style */
background: unset;
border: none;
padding: 0;
text-align: unset;

cursor: pointer;
height: 48px;
height: 52px;
width: 100%;
padding: 0 var(--cpd-space-2x) var(--cpd-space-1x) var(--cpd-space-2x);

padding-left: var(--cpd-space-3x);
font: var(--cpd-font-body-md-regular);

.mx_RoomListItemView_content {
height: 100%;
.mx_RoomListItemView_container {
padding-left: var(--cpd-space-3x);
flex: 1;
/* The border is only under the room name and the future hover menu */
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);
height: 100%;
overflow: hidden;
border-radius: 8px;

.mx_RoomListItemView_text {
.mx_RoomListItemView_content {
height: 100%;
flex: 1;
min-width: 0;
}
padding-right: var(--cpd-space-5x);

.mx_RoomListItemView_roomName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_RoomListItemView_text {
min-width: 0;
}

.mx_RoomListItemView_messagePreview {
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.mx_RoomListItemView_roomName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.mx_RoomListItemView_messagePreview {
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}

.mx_RoomListItemView:not([data-index="0"]) {
padding-top: var(--cpd-space-1x);
}

.mx_RoomListItemView_hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

.mx_RoomListPrimaryFilters {
padding: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-2x) var(--cpd-space-3x);
padding: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-4x) var(--cpd-space-3x);

.mx_RoomListPrimaryFilters_wrapping {
display: none;
Expand Down
3 changes: 2 additions & 1 deletion src/components/views/rooms/RoomListPanel/RoomList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ interface RoomListProps {
}
/**
* Height of a single room list item
* 44px (item height) + 4px (top padding) + 4px (bottom padding) = 52px
*/
const ROOM_LIST_ITEM_HEIGHT = 48;
const ROOM_LIST_ITEM_HEIGHT = 52;
/**
* Amount to extend the top and bottom of the viewport by.
* From manual testing and user feedback 25 items is reported to be enough to avoid blank space when using the mouse wheel,
Expand Down
79 changes: 42 additions & 37 deletions src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,7 @@ export const RoomListItemView = memo(function RoomListItemView({
<Flex
as="button"
ref={ref}
className={classNames("mx_RoomListItemView", {
mx_RoomListItemView_hover: showHoverDecoration,
mx_RoomListItemView_menu_open: showHoverMenu,
mx_RoomListItemView_selected: isSelected,
mx_RoomListItemView_bold: vm.isBold,
})}
gap="var(--cpd-space-3x)"
className="mx_RoomListItemView"
align="center"
type="button"
role="option"
Expand All @@ -107,41 +101,52 @@ export const RoomListItemView = memo(function RoomListItemView({
tabIndex={isFocused ? 0 : -1}
{...props}
>
<RoomAvatarView room={room} />
<Flex
className="mx_RoomListItemView_content"
gap="var(--cpd-space-2x)"
gap="var(--cpd-space-3x)"
align="center"
justify="space-between"
className={classNames("mx_RoomListItemView_container", {
mx_RoomListItemView_hover: showHoverDecoration,
mx_RoomListItemView_menu_open: showHoverMenu,
mx_RoomListItemView_selected: isSelected,
mx_RoomListItemView_bold: vm.isBold,
})}
>
{/* We truncate the room name when too long. Title here is to show the full name on hover */}
<div className="mx_RoomListItemView_text">
<div className="mx_RoomListItemView_roomName" title={vm.name}>
{vm.name}
</div>
{vm.messagePreview && (
<div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
{vm.messagePreview}
<RoomAvatarView room={room} />
<Flex
className="mx_RoomListItemView_content"
gap="var(--cpd-space-2x)"
align="center"
justify="space-between"
>
{/* We truncate the room name when too long. Title here is to show the full name on hover */}
<div className="mx_RoomListItemView_text">
<div className="mx_RoomListItemView_roomName" title={vm.name}>
{vm.name}
</div>
)}
</div>
{showHoverMenu ? (
<RoomListItemMenuView
room={room}
setMenuOpen={(isOpen) => (isOpen ? setIsMenuOpen(true) : closeMenu())}
/>
) : (
<>
{/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
{vm.showNotificationDecoration && (
<NotificationDecoration
notificationState={vm.notificationState}
aria-hidden={true}
hasVideoCall={vm.hasParticipantInCall}
/>
{vm.messagePreview && (
<div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
{vm.messagePreview}
</div>
)}
</>
)}
</div>
{showHoverMenu ? (
<RoomListItemMenuView
room={room}
setMenuOpen={(isOpen) => (isOpen ? setIsMenuOpen(true) : closeMenu())}
/>
) : (
<>
{/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
{vm.showNotificationDecoration && (
<NotificationDecoration
notificationState={vm.notificationState}
aria-hidden={true}
hasVideoCall={vm.hasParticipantInCall}
/>
)}
</>
)}
</Flex>
</Flex>
</Flex>
);
Expand Down
Loading