imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #5387 from matrix-org/t3chguy/fix/13066

Browse source 
Invite / Create DM UX tweaks
This commit is contained in:
Michael Telatynski 2020-11-04 14:01:21 +00:00 • committed by GitHub
commit 5a8525dd93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 60 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

36
res/css/views/dialogs/_InviteDialog.scss
View file

@ -27,37 +27,29 @@ limitations under the License.
padding-left: 8px;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.mx_InviteDialog_userTile {
margin: 6px 6px 0 0;
display: inline-block;
float: left;
position: relative;
top: 7px;
min-width: max-content; // prevent manipulation by flexbox
}
// Using a textarea for this element, to circumvent autofill
// Mostly copied from AddressPickerDialog
textarea,
textarea:focus {
height: 34px;
line-height: $font-34px;
// Mostly copied from AddressPickerDialog; overrides bunch of our default text input styles
> input[type="text"] {
margin: 6px 0 !important;
height: 24px;
line-height: $font-24px;
font-size: $font-14px;
padding-left: 12px;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
resize: none;
overflow: hidden;
box-sizing: border-box;
word-wrap: nowrap;
// Roughly fill about 2/5ths of the available space. This is to try and 'fill' the
// remaining space after a bunch of pills, but is a bit hacky. Ideally we'd have
// support for "fill remaining width", but traditional tricks don't work with what
// we're pushing into this "field". Flexbox just makes things worse. The theory is
// that users won't need more than about 2/5ths of the input to find the person
// they're looking for.
width: 40%;
min-width: 40%;
flex: 1 !important;
color: $primary-fg-color !important;
}
}
@ -148,6 +140,10 @@ limitations under the License.
}
}
.mx_InviteDialog_roomTile_nameStack {
display: inline-block;
}
.mx_InviteDialog_roomTile_name {
font-weight: 600;
font-size: $font-14px;