nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

new room list: keep space name in one line in header (#29369)

Browse Source 
* fix(new room list): keep space name in one line in header

* test(new room list): update tests
This commit is contained in:
Florian Duros
2025-02-28 09:34:06 +01:00
committed by GitHub
parent 1ad1387e05
commit 7db909a47d
4 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
View File

@@ -9,9 +9,16 @@
height: 60px;
padding: 0 var(--cpd-space-3x);
h1 {
all: unset;
font: var(--cpd-font-heading-sm-semibold);
.mx_RoomListHeaderView_title {
min-width: 0;
h1 {
all: unset;
font: var(--cpd-font-heading-sm-semibold);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
button {

4
src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx
View File

@@ -38,8 +38,8 @@ export function RoomListHeaderView(): JSX.Element {
align="center"
data-testid="room-list-header"
>
<Flex align="center" gap="var(--cpd-space-1x)">
<h1>{vm.title}</h1>
<Flex className="mx_RoomListHeaderView_title" align="center" gap="var(--cpd-space-1x)">
<h1 title={vm.title}>{vm.title}</h1>
{vm.displaySpaceMenu && <SpaceMenu vm={vm} />}
</Flex>
{vm.displayComposeMenu && <ComposeMenu vm={vm} />}

24
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
View File

@@ -9,10 +9,12 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
class="mx_Flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
<h1
title="title"
>
title
</h1>
<button
@@ -94,10 +96,12 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
class="mx_Flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
<h1
title="title"
>
title
</h1>
<button
@@ -144,10 +148,12 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
class="mx_Flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
<h1
title="title"
>
title
</h1>
<button
@@ -229,10 +235,12 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
class="mx_Flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
<h1
title="title"
>
title
</h1>
</div>

12
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
View File

@@ -13,10 +13,12 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
class="mx_Flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
<h1
title="Home"
>
Home
</h1>
</div>
@@ -94,10 +96,12 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
>
<div
class="mx_Flex"
class="mx_Flex mx_RoomListHeaderView_title"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
>
<h1>
<h1
title="Home"
>
Home
</h1>
</div>