Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Improve invite dialog ui - Part 2 (#30836)

Browse Source 
* feat: add `Pill` component

* chore: add `react-merge-refs` lib

* feat: add `PillInput` component

* feat: use new pills component in invite dialog

* test: update invite dialog selector

* test(e2e): update test locators

* test(e2e): update screenshot
This commit is contained in:
Florian Duros
2025-10-01 11:03:43 +02:00
committed by GitHub
parent 3d5749bfc7
commit 9cecd52477
29 changed files with 520 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,37 +24,7 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_editor {
flex: 1;
width: 100%; /* Needed to make the Field inside grow */
background-color: $header-panel-bg-color;
border-radius: 4px;
min-height: 25px;
padding-inline-start: $spacing-8;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.mx_InviteDialog_userTile {
margin: 6px 6px 0 0;
display: inline-block;
min-width: max-content; /* prevent manipulation by flexbox */
}
/* overrides bunch of our default text input styles */
> input[type="text"] {
margin: 6px 0 !important;
height: 24px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
padding-inline-start: $spacing-12;
border: 0 !important;
outline: 0 !important;
resize: none;
box-sizing: border-box;
min-width: 40%;
flex: 1 !important;
color: $primary-content !important;
}
margin-left: var(--cpd-space-0-5x);
}
.mx_InviteDialog_goButton {
@@ -112,51 +82,6 @@ Please see LICENSE files in the repository root for full details.
}
}
/* Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. */
.mx_InviteDialog_userTile {
margin-inline-end: $spacing-8;
.mx_InviteDialog_userTile_pill {
background-color: var(--cpd-color-bg-canvas-default);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 99px;
display: inline-block;
height: 24px;
line-height: $font-24px;
padding-inline: $spacing-8;
vertical-align: middle;
color: var(--cpd-color-gray-1100);
.mx_SearchResultAvatar {
border-radius: 20px;
position: relative;
left: -5px;
top: 2px;
}
img.mx_SearchResultAvatar {
vertical-align: top;
}
.mx_InviteDialog_userTile_name {
vertical-align: top;
}
.mx_SearchResultAvatar_threepidAvatar {
background-color: #ffffff; /* this is fine without a var because it's for both themes */
}
}
.mx_InviteDialog_userTile_remove {
display: inline-block;
vertical-align: middle;
svg {
vertical-align: middle;
}
}
}
.mx_InviteDialog_other {
/* Prevent the dialog from jumping around randomly when elements change. */
display: flex;