Skip to content

Commit 35d7642

Browse files
floriandurosflorianduros
committed
feat(room list): reworked padding between list items
1 parent 1d93946 commit 35d7642

File tree

3 files changed

+74
-57
lines changed

3 files changed

+74
-57
lines changed

‎res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,38 +22,49 @@
2222
text-align: unset;
2323

2424
cursor: pointer;
25-
height: 48px;
25+
height: 52px;
2626
width: 100%;
27+
padding: 0 var(--cpd-space-2x) var(--cpd-space-1x) var(--cpd-space-2x);
2728

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

31-
.mx_RoomListItemView_content {
32-
height: 100%;
31+
.mx_RoomListItemView_container {
32+
padding-left: var(--cpd-space-3x);
3333
flex: 1;
34-
min-width: 0;
35-
padding-right: var(--cpd-space-5x);
34+
height: 100%;
35+
overflow: hidden;
3636

37-
.mx_RoomListItemView_text {
37+
.mx_RoomListItemView_content {
38+
height: 100%;
39+
flex: 1;
3840
min-width: 0;
39-
}
41+
padding-right: var(--cpd-space-5x);
4042

41-
.mx_RoomListItemView_roomName {
42-
white-space: nowrap;
43-
overflow: hidden;
44-
text-overflow: ellipsis;
45-
}
43+
.mx_RoomListItemView_text {
44+
min-width: 0;
45+
}
4646

47-
.mx_RoomListItemView_messagePreview {
48-
font: var(--cpd-font-body-sm-regular);
49-
color: var(--cpd-color-text-secondary);
50-
white-space: nowrap;
51-
overflow: hidden;
52-
text-overflow: ellipsis;
47+
.mx_RoomListItemView_roomName {
48+
white-space: nowrap;
49+
overflow: hidden;
50+
text-overflow: ellipsis;
51+
}
52+
53+
.mx_RoomListItemView_messagePreview {
54+
font: var(--cpd-font-body-sm-regular);
55+
color: var(--cpd-color-text-secondary);
56+
white-space: nowrap;
57+
overflow: hidden;
58+
text-overflow: ellipsis;
59+
}
5360
}
5461
}
5562
}
5663

64+
.mx_RoomListItemView:not([data-index="0"]) {
65+
padding-top: var(--cpd-space-1x);
66+
}
67+
5768
.mx_RoomListItemView_hover {
5869
background-color: var(--cpd-color-bg-action-secondary-hovered);
5970
}

‎src/components/views/rooms/RoomListPanel/RoomList.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,9 @@ interface RoomListProps {
2727
}
2828
/**
2929
* Height of a single room list item
30+
* 44px (item height) + 4px (top padding) + 4px (bottom padding) = 52px
3031
*/
31-
const ROOM_LIST_ITEM_HEIGHT = 48;
32+
const ROOM_LIST_ITEM_HEIGHT = 52;
3233
/**
3334
* Amount to extend the top and bottom of the viewport by.
3435
* From manual testing and user feedback 25 items is reported to be enough to avoid blank space when using the mouse wheel,

‎src/components/views/rooms/RoomListPanel/RoomListItemView.tsx‎

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -85,13 +85,7 @@ export const RoomListItemView = memo(function RoomListItemView({
8585
<Flex
8686
as="button"
8787
ref={ref}
88-
className={classNames("mx_RoomListItemView", {
89-
mx_RoomListItemView_hover: showHoverDecoration,
90-
mx_RoomListItemView_menu_open: showHoverMenu,
91-
mx_RoomListItemView_selected: isSelected,
92-
mx_RoomListItemView_bold: vm.isBold,
93-
})}
94-
gap="var(--cpd-space-3x)"
88+
className="mx_RoomListItemView"
9589
align="center"
9690
type="button"
9791
role="option"
@@ -107,41 +101,52 @@ export const RoomListItemView = memo(function RoomListItemView({
107101
tabIndex={isFocused ? 0 : -1}
108102
{...props}
109103
>
110-
<RoomAvatarView room={room} />
111104
<Flex
112-
className="mx_RoomListItemView_content"
113-
gap="var(--cpd-space-2x)"
105+
gap="var(--cpd-space-3x)"
114106
align="center"
115-
justify="space-between"
107+
className={classNames("mx_RoomListItemView_container", {
108+
mx_RoomListItemView_hover: showHoverDecoration,
109+
mx_RoomListItemView_menu_open: showHoverMenu,
110+
mx_RoomListItemView_selected: isSelected,
111+
mx_RoomListItemView_bold: vm.isBold,
112+
})}
116113
>
117-
{/* We truncate the room name when too long. Title here is to show the full name on hover */}
118-
<div className="mx_RoomListItemView_text">
119-
<div className="mx_RoomListItemView_roomName" title={vm.name}>
120-
{vm.name}
121-
</div>
122-
{vm.messagePreview && (
123-
<div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
124-
{vm.messagePreview}
114+
<RoomAvatarView room={room} />
115+
<Flex
116+
className="mx_RoomListItemView_content"
117+
gap="var(--cpd-space-2x)"
118+
align="center"
119+
justify="space-between"
120+
>
121+
{/* We truncate the room name when too long. Title here is to show the full name on hover */}
122+
<div className="mx_RoomListItemView_text">
123+
<div className="mx_RoomListItemView_roomName" title={vm.name}>
124+
{vm.name}
125125
</div>
126-
)}
127-
</div>
128-
{showHoverMenu ? (
129-
<RoomListItemMenuView
130-
room={room}
131-
setMenuOpen={(isOpen) => (isOpen ? setIsMenuOpen(true) : closeMenu())}
132-
/>
133-
) : (
134-
<>
135-
{/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
136-
{vm.showNotificationDecoration && (
137-
<NotificationDecoration
138-
notificationState={vm.notificationState}
139-
aria-hidden={true}
140-
hasVideoCall={vm.hasParticipantInCall}
141-
/>
126+
{vm.messagePreview && (
127+
<div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
128+
{vm.messagePreview}
129+
</div>
142130
)}
143-
</>
144-
)}
131+
</div>
132+
{showHoverMenu ? (
133+
<RoomListItemMenuView
134+
room={room}
135+
setMenuOpen={(isOpen) => (isOpen ? setIsMenuOpen(true) : closeMenu())}
136+
/>
137+
) : (
138+
<>
139+
{/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
140+
{vm.showNotificationDecoration && (
141+
<NotificationDecoration
142+
notificationState={vm.notificationState}
143+
aria-hidden={true}
144+
hasVideoCall={vm.hasParticipantInCall}
145+
/>
146+
)}
147+
</>
148+
)}
149+
</Flex>
145150
</Flex>
146151
</Flex>
147152
);

0 commit comments

Comments
 (0)