mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-08 13:46:16 +02:00
Code Issues Projects Releases Wiki Activity

feat(room list): reworked padding between list items

Browse Source
This commit is contained in:
Florian Duros 2025-10-30 15:20:56 +01:00
parent 1d93946733
commit b92530c3ca
No known key found for this signature in database
GPG Key ID: A5BBB4041B493F15
3 changed files with 74 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,42 +18,52 @@
/* 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;
min-width: 0;
padding-right: var(--cpd-space-5x);
height: 100%;
overflow: hidden;
.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);
}

3
src/components/views/rooms/RoomListPanel/RoomList.tsx
View File

@ -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,

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

@ -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"
@ -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>
);