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

Improve invite dialog ui - Part 1 (#30764)

Browse Source 
* refactor: move `humanize` in shared components

* feat: add `RichItem` component

* feat: add `RichList` component

* refactor: use `RichList` and `RichItem` in `InviteDialog`

* fix: exclude `InviteDialog` button to css override

* test: update selector in invite dialog

* test(e2e): update crypto test to use correct selector

* test(e2e): update invite dialog

* test: add test for `humanize.ts`

* fix: add space between the list and the input when the list is scrollable

* test(e2e): update screenshots
This commit is contained in:
Florian Duros
2025-09-23 14:29:22 +02:00
committed by GitHub
parent 3c6d341357
commit b89de61e12
30 changed files with 848 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
res/css/views/dialogs/_InviteDialog.pcss
View File

@@ -68,21 +68,6 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_section {
padding-bottom: $spacing-4;
h3 {
font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
text-transform: uppercase;
}
> p {
margin: 0;
}
> span {
color: $primary-content;
}
.mx_InviteDialog_section_showMore {
margin: 7px 18px;
display: block;
@@ -194,10 +179,13 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_userSections {
flex-grow: 1;
padding-inline-end: 0;
display: flex;
flex-direction: column;
margin-top: var(--cpd-space-3x);
gap: var(--cpd-space-3x);
.mx_InviteDialog_section {
padding-bottom: 0;
margin-top: $spacing-12;
}
}
}
@@ -249,7 +237,6 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_userSections {
margin-top: $spacing-4;
overflow-y: auto;
padding: 0 45px $spacing-4 0;
}
@@ -325,48 +312,6 @@ Please see LICENSE files in the repository root for full details.
gap: $spacing-8 $spacing-12;
align-items: center;
&.mx_InviteDialog_tile--room {
/* mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time */
grid-template-columns: min-content auto auto;
padding: $spacing-4 $spacing-8;
&:hover {
background-color: $header-panel-bg-color;
border-radius: 4px;
}
.mx_InviteDialog_tile--room_selected {
border-radius: 36px;
background-color: var(--cpd-color-bg-success-subtle);
&::before {
content: "";
width: 24px;
height: 24px;
grid-column: 1;
grid-row: 1;
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
position: absolute;
top: 6px; /* 50% */
left: 6px; /* 50% */
background-color: $primary-content;
}
}
.mx_InviteDialog_tile--room_time {
margin-inline-start: auto;
width: max-content;
font-size: $font-12px;
color: $muted-fg-color;
}
.mx_InviteDialog_tile--room_highlight {
font-weight: 900;
}
}
&.mx_InviteDialog_tile--inviterError {
grid-template-columns: max-content auto; /* max-content = avatar width */
margin-bottom: $spacing-24;
@@ -388,15 +333,11 @@ Please see LICENSE files in the repository root for full details.
vertical-align: middle;
}
.mx_InviteDialog_tile_avatarStack,
.mx_InviteDialog_tile--room_selected {
.mx_InviteDialog_tile_avatarStack {
width: 36px;
height: 36px;
display: inline-block;
position: relative;
}
.mx_InviteDialog_tile_avatarStack {
grid-row-start: 1;
grid-column-start: 1;