Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 12dd5a7

Browse files
luixxiulluixxiul
authored
Name lists on invite dialog (#8046)
* Place room tiles with grid Signed-off-by: Suguru Hirahara <[email protected]> * Set padding inside of name stack Signed-off-by: Suguru Hirahara <[email protected]> * Remove overflow:hidden (to be cancelled) Signed-off-by: Suguru Hirahara <[email protected]> * Replace text-align with margin Signed-off-by: Suguru Hirahara <[email protected]> * Style invite failure dialog with display:grid Signed-off-by: Suguru Hirahara <[email protected]> * Merge style rules of room tiles and tiles on invitation failure dialog Signed-off-by: Suguru Hirahara <[email protected]> * Normalize avatar size for multiInviterError Signed-off-by: Suguru Hirahara <[email protected]> * Set text overflow with ellipsis Signed-off-by: Suguru Hirahara <[email protected]> * Use spacing variables Signed-off-by: Suguru Hirahara <[email protected]> * Set narrow gap to nameStack Signed-off-by: Suguru Hirahara <[email protected]> * Rename mx_InviteDialog_inviterErrorTile_error Signed-off-by: Suguru Hirahara <[email protected]> * Create mx_InviteDialog_tile Signed-off-by: Suguru Hirahara <[email protected]> * Set padding to room tiles only Signed-off-by: Suguru Hirahara <[email protected]> * Remove space between name / userID and time (there is gap by default) Signed-off-by: Suguru Hirahara <[email protected]> * Remove the margin from the last child Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 67cace7 commit 12dd5a7

File tree

5 files changed

+138
-135
lines changed

5 files changed

+138
-135
lines changed

‎res/css/views/dialogs/_InviteDialog.scss‎

Lines changed: 119 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -146,94 +146,6 @@ limitations under the License.
146146
}
147147
}
148148

149-
.mx_InviteDialog_roomTile {
150-
cursor: pointer;
151-
padding: 5px 10px;
152-
153-
&:hover {
154-
background-color: $header-panel-bg-color;
155-
border-radius: 4px;
156-
}
157-
158-
* {
159-
vertical-align: middle;
160-
}
161-
162-
.mx_InviteDialog_roomTile_avatarStack {
163-
display: inline-block;
164-
position: relative;
165-
width: 36px;
166-
height: 36px;
167-
168-
& > * {
169-
position: absolute;
170-
top: 0;
171-
left: 0;
172-
}
173-
}
174-
175-
.mx_InviteDialog_roomTile_selected {
176-
width: 36px;
177-
height: 36px;
178-
border-radius: 36px;
179-
background-color: $username-variant1-color;
180-
display: inline-block;
181-
position: relative;
182-
183-
&::before {
184-
content: "";
185-
width: 24px;
186-
height: 24px;
187-
grid-column: 1;
188-
grid-row: 1;
189-
mask-image: url("$(res)/img/feather-customised/check.svg");
190-
mask-size: 100%;
191-
mask-repeat: no-repeat;
192-
position: absolute;
193-
top: 6px; // 50%
194-
left: 6px; // 50%
195-
background-color: #ffffff; // this is fine without a var because it's for both themes
196-
}
197-
}
198-
199-
.mx_InviteDialog_roomTile_nameStack {
200-
display: inline-block;
201-
overflow: hidden;
202-
}
203-
204-
.mx_InviteDialog_roomTile_name {
205-
font-weight: 600;
206-
font-size: $font-14px;
207-
color: $primary-content;
208-
margin-left: 7px;
209-
}
210-
211-
.mx_InviteDialog_roomTile_userId {
212-
font-size: $font-12px;
213-
color: $muted-fg-color;
214-
margin-left: 7px;
215-
}
216-
217-
.mx_InviteDialog_roomTile_name,
218-
.mx_InviteDialog_roomTile_userId {
219-
overflow: hidden;
220-
text-overflow: ellipsis;
221-
white-space: nowrap;
222-
}
223-
224-
.mx_InviteDialog_roomTile_time {
225-
text-align: right;
226-
font-size: $font-12px;
227-
color: $muted-fg-color;
228-
float: right;
229-
line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
230-
}
231-
232-
.mx_InviteDialog_roomTile_highlight {
233-
font-weight: 900;
234-
}
235-
}
236-
237149
// Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
238150
.mx_InviteDialog_userTile {
239151
margin-right: 8px;
@@ -414,43 +326,132 @@ limitations under the License.
414326
mask-image: url('$(res)/img/voip/tab-dialpad.svg');
415327
}
416328

329+
.mx_InviteDialog_tile {
330+
cursor: pointer;
331+
display: grid;
332+
gap: $spacing-8 $spacing-12;
333+
align-items: center;
334+
335+
&.mx_InviteDialog_tile--room {
336+
grid-template-columns: min-content auto auto; // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time
337+
padding: $spacing-4 $spacing-8;
338+
339+
&:hover {
340+
background-color: $header-panel-bg-color;
341+
border-radius: 4px;
342+
}
343+
344+
.mx_InviteDialog_tile--room_selected {
345+
border-radius: 36px;
346+
background-color: $username-variant1-color;
347+
348+
&::before {
349+
content: "";
350+
width: 24px;
351+
height: 24px;
352+
grid-column: 1;
353+
grid-row: 1;
354+
mask-image: url("$(res)/img/feather-customised/check.svg");
355+
mask-size: 100%;
356+
mask-repeat: no-repeat;
357+
position: absolute;
358+
top: 6px; // 50%
359+
left: 6px; // 50%
360+
background-color: #ffffff; // this is fine without a var because it's for both themes
361+
}
362+
}
363+
364+
.mx_InviteDialog_tile--room_time {
365+
margin-inline-start: auto;
366+
width: max-content;
367+
font-size: $font-12px;
368+
color: $muted-fg-color;
369+
}
370+
371+
.mx_InviteDialog_tile--room_highlight {
372+
font-weight: 900;
373+
}
374+
}
375+
376+
&.mx_InviteDialog_tile--inviterError {
377+
grid-template-columns: max-content auto; // max-content = avatar width
378+
margin-bottom: $spacing-24;
379+
380+
&:last-child {
381+
margin-bottom: 0;
382+
}
383+
384+
.mx_InviteDialog_tile--inviterError_errorText {
385+
grid-row-start: 2;
386+
grid-column-start: 2;
387+
388+
font-size: $font-15px;
389+
color: $alert;
390+
}
391+
}
392+
393+
* {
394+
vertical-align: middle;
395+
}
396+
397+
.mx_InviteDialog_tile_avatarStack,
398+
.mx_InviteDialog_tile--room_selected {
399+
width: 36px;
400+
height: 36px;
401+
display: inline-block;
402+
position: relative;
403+
}
404+
405+
.mx_InviteDialog_tile_avatarStack {
406+
grid-row-start: 1;
407+
grid-column-start: 1;
408+
409+
& > * {
410+
position: absolute;
411+
top: 0;
412+
left: 0;
413+
}
414+
}
415+
416+
.mx_InviteDialog_tile_nameStack {
417+
grid-row-start: 1;
418+
grid-column-start: 2;
419+
420+
display: flex;
421+
flex-flow: column;
422+
align-self: center;
423+
align-items: baseline;
424+
gap: 2px 0;
425+
overflow: hidden;
426+
427+
.mx_InviteDialog_tile_nameStack_name,
428+
.mx_InviteDialog_tile_nameStack_userId {
429+
overflow: hidden;
430+
text-overflow: ellipsis;
431+
white-space: nowrap;
432+
max-width: 100%;
433+
}
434+
435+
.mx_InviteDialog_tile_nameStack_name {
436+
font-size: $font-15px;
437+
font-weight: $font-semi-bold;
438+
color: $primary-content;
439+
}
440+
441+
.mx_InviteDialog_tile_nameStack_userId {
442+
font-size: $font-12px;
443+
color: $muted-fg-color;
444+
}
445+
}
446+
}
447+
417448
.mx_InviteDialog_multiInviterError {
418449
> h4 {
419450
font-size: $font-15px;
420451
line-height: $font-24px;
421452
color: $secondary-content;
422453
font-weight: normal;
423454
}
424-
425-
> div {
426-
.mx_InviteDialog_multiInviterError_entry {
427-
margin-bottom: 24px;
428-
429-
.mx_InviteDialog_multiInviterError_entry_userProfile {
430-
.mx_InviteDialog_multiInviterError_entry_name {
431-
margin-left: 6px;
432-
font-size: $font-15px;
433-
line-height: $font-24px;
434-
font-weight: $font-semi-bold;
435-
color: $primary-content;
436-
}
437-
438-
.mx_InviteDialog_multiInviterError_entry_userId {
439-
margin-left: 6px;
440-
font-size: $font-12px;
441-
line-height: $font-15px;
442-
color: $tertiary-content;
443-
}
444-
}
445-
446-
.mx_InviteDialog_multiInviterError_entry_error {
447-
margin-left: 32px;
448-
font-size: $font-15px;
449-
line-height: $font-24px;
450-
color: $alert;
451-
}
452-
}
453-
}
454455
}
455456

456457
.mx_InviteDialog_identityServer {

‎src/RoomInvite.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -153,19 +153,21 @@ export function showAnyInviteErrors(
153153
const user = userMap?.get(addr) || cli.getUser(addr);
154154
const name = (user as Member).name || (user as User).rawDisplayName;
155155
const avatarUrl = (user as Member).getMxcAvatarUrl?.() || (user as User).avatarUrl;
156-
return <div key={addr} className="mx_InviteDialog_multiInviterError_entry">
157-
<div className="mx_InviteDialog_multiInviterError_entry_userProfile">
156+
return <div key={addr} className="mx_InviteDialog_tile mx_InviteDialog_tile--inviterError">
157+
<div className="mx_InviteDialog_tile_avatarStack">
158158
<BaseAvatar
159159
url={avatarUrl ? mediaFromMxc(avatarUrl).getSquareThumbnailHttp(24) : null}
160160
name={name}
161161
idName={user.userId}
162-
width={24}
163-
height={24}
162+
width={36}
163+
height={36}
164164
/>
165-
<span className="mx_InviteDialog_multiInviterError_entry_name">{ name }</span>
166-
<span className="mx_InviteDialog_multiInviterError_entry_userId">{ user.userId }</span>
167165
</div>
168-
<div className="mx_InviteDialog_multiInviterError_entry_error">
166+
<div className="mx_InviteDialog_tile_nameStack">
167+
<span className="mx_InviteDialog_tile_nameStack_name">{ name }</span>
168+
<span className="mx_InviteDialog_tile_nameStack_userId">{ user.userId }</span>
169+
</div>
170+
<div className="mx_InviteDialog_tile--inviterError_errorText">
169171
{ inviter.getErrorText(addr) }
170172
</div>
171173
</div>;

‎src/components/views/dialogs/InviteDialog.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
178178

179179
// Highlight the word the user entered
180180
const substr = str.substring(i, filterStr.length + i);
181-
result.push(<span className='mx_InviteDialog_roomTile_highlight' key={i + 'bold'}>{ substr }</span>);
181+
result.push(<span className='mx_InviteDialog_tile--room_highlight' key={i + 'bold'}>{ substr }</span>);
182182
i += substr.length;
183183
}
184184

@@ -194,7 +194,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
194194
let timestamp = null;
195195
if (this.props.lastActiveTs) {
196196
const humanTs = humanizeTime(this.props.lastActiveTs);
197-
timestamp = <span className='mx_InviteDialog_roomTile_time'>{ humanTs }</span>;
197+
timestamp = <span className='mx_InviteDialog_tile--room_time'>{ humanTs }</span>;
198198
}
199199

200200
const avatarSize = 36;
@@ -216,13 +216,13 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
216216
let checkmark = null;
217217
if (this.props.isSelected) {
218218
// To reduce flickering we put the 'selected' room tile above the real avatar
219-
checkmark = <div className='mx_InviteDialog_roomTile_selected' />;
219+
checkmark = <div className='mx_InviteDialog_tile--room_selected' />;
220220
}
221221

222222
// To reduce flickering we put the checkmark on top of the actual avatar (prevents
223223
// the browser from reloading the image source when the avatar remounts).
224224
const stackedAvatar = (
225-
<span className='mx_InviteDialog_roomTile_avatarStack'>
225+
<span className='mx_InviteDialog_tile_avatarStack'>
226226
{ avatar }
227227
{ checkmark }
228228
</span>
@@ -237,11 +237,11 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
237237
: this.highlightName(userIdentifier);
238238

239239
return (
240-
<div className='mx_InviteDialog_roomTile' onClick={this.onClick}>
240+
<div className='mx_InviteDialog_tile mx_InviteDialog_tile--room' onClick={this.onClick}>
241241
{ stackedAvatar }
242-
<span className="mx_InviteDialog_roomTile_nameStack">
243-
<div className='mx_InviteDialog_roomTile_name'>{ this.highlightName(this.props.member.name) }</div>
244-
<div className='mx_InviteDialog_roomTile_userId'>{ caption }</div>
242+
<span className="mx_InviteDialog_tile_nameStack">
243+
<div className='mx_InviteDialog_tile_nameStack_name'>{ this.highlightName(this.props.member.name) }</div>
244+
<div className='mx_InviteDialog_tile_nameStack_userId'>{ caption }</div>
245245
</span>
246246
{ timestamp }
247247
</div>

‎test/end-to-end-tests/src/usecases/create-room.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export async function createDm(session: ElementSession, invitees: string[]): Pro
6868
await session.replaceInputText(inviteesEditor, target);
6969
await session.delay(1000); // give it a moment to figure out a suggestion
7070
// find the suggestion and accept it
71-
const suggestions = await session.queryAll('.mx_InviteDialog_roomTile_userId');
71+
const suggestions = await session.queryAll('.mx_InviteDialog_tile_nameStack_userId');
7272
const suggestionTexts = await Promise.all(suggestions.map(s => session.innerText(s)));
7373
const suggestionIndex = suggestionTexts.indexOf(target);
7474
if (suggestionIndex === -1) {

‎test/end-to-end-tests/src/usecases/invite.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export async function invite(session: ElementSession, userId: string): Promise<v
3535
await inviteButton.click();
3636
const inviteTextArea = await session.query(".mx_InviteDialog_editor input");
3737
await inviteTextArea.type(userId);
38-
const selectUserItem = await session.query(".mx_InviteDialog_roomTile");
38+
const selectUserItem = await session.query(".mx_InviteDialog_tile--room");
3939
await selectUserItem.click();
4040
const confirmButton = await session.query(".mx_InviteDialog_goButton");
4141
await confirmButton.click();

0 commit comments

Comments
 (0)