From 12dd5a7ef04aa9caf30fe6bc81dcada41fc1e3c4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Jun 2022 12:45:33 +0000 Subject: [PATCH] Name lists on invite dialog (#8046) * Place room tiles with grid Signed-off-by: Suguru Hirahara * Set padding inside of name stack Signed-off-by: Suguru Hirahara * Remove overflow:hidden (to be cancelled) Signed-off-by: Suguru Hirahara * Replace text-align with margin Signed-off-by: Suguru Hirahara * Style invite failure dialog with display:grid Signed-off-by: Suguru Hirahara * Merge style rules of room tiles and tiles on invitation failure dialog Signed-off-by: Suguru Hirahara * Normalize avatar size for multiInviterError Signed-off-by: Suguru Hirahara * Set text overflow with ellipsis Signed-off-by: Suguru Hirahara * Use spacing variables Signed-off-by: Suguru Hirahara * Set narrow gap to nameStack Signed-off-by: Suguru Hirahara * Rename mx_InviteDialog_inviterErrorTile_error Signed-off-by: Suguru Hirahara * Create mx_InviteDialog_tile Signed-off-by: Suguru Hirahara * Set padding to room tiles only Signed-off-by: Suguru Hirahara * Remove space between name / userID and time (there is gap by default) Signed-off-by: Suguru Hirahara * Remove the margin from the last child Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 237 +++++++++--------- src/RoomInvite.tsx | 16 +- src/components/views/dialogs/InviteDialog.tsx | 16 +- .../src/usecases/create-room.ts | 2 +- test/end-to-end-tests/src/usecases/invite.ts | 2 +- 5 files changed, 138 insertions(+), 135 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 6a1f93fdff5..6c3edb896be 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -146,94 +146,6 @@ limitations under the License. } } -.mx_InviteDialog_roomTile { - cursor: pointer; - padding: 5px 10px; - - &:hover { - background-color: $header-panel-bg-color; - border-radius: 4px; - } - - * { - vertical-align: middle; - } - - .mx_InviteDialog_roomTile_avatarStack { - display: inline-block; - position: relative; - width: 36px; - height: 36px; - - & > * { - position: absolute; - top: 0; - left: 0; - } - } - - .mx_InviteDialog_roomTile_selected { - width: 36px; - height: 36px; - border-radius: 36px; - background-color: $username-variant1-color; - display: inline-block; - position: relative; - - &::before { - content: ""; - width: 24px; - height: 24px; - grid-column: 1; - grid-row: 1; - mask-image: url("$(res)/img/feather-customised/check.svg"); - mask-size: 100%; - mask-repeat: no-repeat; - position: absolute; - top: 6px; // 50% - left: 6px; // 50% - background-color: #ffffff; // this is fine without a var because it's for both themes - } - } - - .mx_InviteDialog_roomTile_nameStack { - display: inline-block; - overflow: hidden; - } - - .mx_InviteDialog_roomTile_name { - font-weight: 600; - font-size: $font-14px; - color: $primary-content; - margin-left: 7px; - } - - .mx_InviteDialog_roomTile_userId { - font-size: $font-12px; - color: $muted-fg-color; - margin-left: 7px; - } - - .mx_InviteDialog_roomTile_name, - .mx_InviteDialog_roomTile_userId { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .mx_InviteDialog_roomTile_time { - text-align: right; - font-size: $font-12px; - color: $muted-fg-color; - float: right; - line-height: $font-36px; // Height of the avatar to keep the time vertically aligned - } - - .mx_InviteDialog_roomTile_highlight { - font-weight: 900; - } -} - // Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. .mx_InviteDialog_userTile { margin-right: 8px; @@ -414,6 +326,125 @@ limitations under the License. mask-image: url('$(res)/img/voip/tab-dialpad.svg'); } +.mx_InviteDialog_tile { + cursor: pointer; + display: grid; + gap: $spacing-8 $spacing-12; + align-items: center; + + &.mx_InviteDialog_tile--room { + grid-template-columns: min-content auto auto; // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time + 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: $username-variant1-color; + + &::before { + content: ""; + width: 24px; + height: 24px; + grid-column: 1; + grid-row: 1; + mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-size: 100%; + mask-repeat: no-repeat; + position: absolute; + top: 6px; // 50% + left: 6px; // 50% + background-color: #ffffff; // this is fine without a var because it's for both themes + } + } + + .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; + + &:last-child { + margin-bottom: 0; + } + + .mx_InviteDialog_tile--inviterError_errorText { + grid-row-start: 2; + grid-column-start: 2; + + font-size: $font-15px; + color: $alert; + } + } + + * { + vertical-align: middle; + } + + .mx_InviteDialog_tile_avatarStack, + .mx_InviteDialog_tile--room_selected { + width: 36px; + height: 36px; + display: inline-block; + position: relative; + } + + .mx_InviteDialog_tile_avatarStack { + grid-row-start: 1; + grid-column-start: 1; + + & > * { + position: absolute; + top: 0; + left: 0; + } + } + + .mx_InviteDialog_tile_nameStack { + grid-row-start: 1; + grid-column-start: 2; + + display: flex; + flex-flow: column; + align-self: center; + align-items: baseline; + gap: 2px 0; + overflow: hidden; + + .mx_InviteDialog_tile_nameStack_name, + .mx_InviteDialog_tile_nameStack_userId { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; + } + + .mx_InviteDialog_tile_nameStack_name { + font-size: $font-15px; + font-weight: $font-semi-bold; + color: $primary-content; + } + + .mx_InviteDialog_tile_nameStack_userId { + font-size: $font-12px; + color: $muted-fg-color; + } + } +} + .mx_InviteDialog_multiInviterError { > h4 { font-size: $font-15px; @@ -421,36 +452,6 @@ limitations under the License. color: $secondary-content; font-weight: normal; } - - > div { - .mx_InviteDialog_multiInviterError_entry { - margin-bottom: 24px; - - .mx_InviteDialog_multiInviterError_entry_userProfile { - .mx_InviteDialog_multiInviterError_entry_name { - margin-left: 6px; - font-size: $font-15px; - line-height: $font-24px; - font-weight: $font-semi-bold; - color: $primary-content; - } - - .mx_InviteDialog_multiInviterError_entry_userId { - margin-left: 6px; - font-size: $font-12px; - line-height: $font-15px; - color: $tertiary-content; - } - } - - .mx_InviteDialog_multiInviterError_entry_error { - margin-left: 32px; - font-size: $font-15px; - line-height: $font-24px; - color: $alert; - } - } - } } .mx_InviteDialog_identityServer { diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index f7cad382543..ff34c66274a 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -153,19 +153,21 @@ export function showAnyInviteErrors( const user = userMap?.get(addr) || cli.getUser(addr); const name = (user as Member).name || (user as User).rawDisplayName; const avatarUrl = (user as Member).getMxcAvatarUrl?.() || (user as User).avatarUrl; - return
-
+ return
+
- { name } - { user.userId }
-
+
+ { name } + { user.userId } +
+
{ inviter.getErrorText(addr) }
; diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 978c176ab0a..d8a6b7df7a5 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -178,7 +178,7 @@ class DMRoomTile extends React.PureComponent { // Highlight the word the user entered const substr = str.substring(i, filterStr.length + i); - result.push({ substr }); + result.push({ substr }); i += substr.length; } @@ -194,7 +194,7 @@ class DMRoomTile extends React.PureComponent { let timestamp = null; if (this.props.lastActiveTs) { const humanTs = humanizeTime(this.props.lastActiveTs); - timestamp = { humanTs }; + timestamp = { humanTs }; } const avatarSize = 36; @@ -216,13 +216,13 @@ class DMRoomTile extends React.PureComponent { let checkmark = null; if (this.props.isSelected) { // To reduce flickering we put the 'selected' room tile above the real avatar - checkmark =
; + checkmark =
; } // To reduce flickering we put the checkmark on top of the actual avatar (prevents // the browser from reloading the image source when the avatar remounts). const stackedAvatar = ( - + { avatar } { checkmark } @@ -237,11 +237,11 @@ class DMRoomTile extends React.PureComponent { : this.highlightName(userIdentifier); return ( -
+
{ stackedAvatar } - -
{ this.highlightName(this.props.member.name) }
-
{ caption }
+ +
{ this.highlightName(this.props.member.name) }
+
{ caption }
 { timestamp }
diff --git a/test/end-to-end-tests/src/usecases/create-room.ts b/test/end-to-end-tests/src/usecases/create-room.ts index b0e7738fb4e..d0a492f8c5c 100644 --- a/test/end-to-end-tests/src/usecases/create-room.ts +++ b/test/end-to-end-tests/src/usecases/create-room.ts @@ -68,7 +68,7 @@ export async function createDm(session: ElementSession, invitees: string[]): Pro await session.replaceInputText(inviteesEditor, target); await session.delay(1000); // give it a moment to figure out a suggestion // find the suggestion and accept it - const suggestions = await session.queryAll('.mx_InviteDialog_roomTile_userId'); + const suggestions = await session.queryAll('.mx_InviteDialog_tile_nameStack_userId'); const suggestionTexts = await Promise.all(suggestions.map(s => session.innerText(s))); const suggestionIndex = suggestionTexts.indexOf(target); if (suggestionIndex === -1) { diff --git a/test/end-to-end-tests/src/usecases/invite.ts b/test/end-to-end-tests/src/usecases/invite.ts index 8dc5d31f272..9df9f386699 100644 --- a/test/end-to-end-tests/src/usecases/invite.ts +++ b/test/end-to-end-tests/src/usecases/invite.ts @@ -35,7 +35,7 @@ export async function invite(session: ElementSession, userId: string): Promise