From e83ad2cdebd6f324384a38b0e85f1e054accafbb Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 26 Mar 2022 20:18:29 +0000 Subject: [PATCH 01/15] Place room tiles with grid Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 35fedd7cf28..6a2c8b62adf 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -143,6 +143,10 @@ limitations under the License. .mx_InviteDialog_roomTile { cursor: pointer; padding: 5px 10px; + display: grid; + gap: 7px 10px; + grid-template-columns: min-content auto auto; // avatarStack, nameStack, time + align-items: center; &:hover { background-color: $header-panel-bg-color; @@ -191,21 +195,20 @@ limitations under the License. } .mx_InviteDialog_roomTile_nameStack { - display: inline-block; overflow: hidden; + display: flex; + flex-flow: column; } .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, @@ -219,8 +222,6 @@ limitations under the License. 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 { From e7e077ee9ca48f9acf4293e9ba2b62107114bcf5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 26 Mar 2022 20:32:26 +0000 Subject: [PATCH 02/15] Set padding inside of name stack Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 6a2c8b62adf..2411506851e 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -198,6 +198,7 @@ limitations under the License. overflow: hidden; display: flex; flex-flow: column; + padding-inline-end: 7px; } .mx_InviteDialog_roomTile_name { From c5c189ad4f6e9c142e6c6610efd55472aa447972 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 26 Mar 2022 20:41:42 +0000 Subject: [PATCH 03/15] Remove overflow:hidden (to be cancelled) Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 31 ++++++++++++------------ 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 2411506851e..921879da9a3 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -195,32 +195,31 @@ limitations under the License. } .mx_InviteDialog_roomTile_nameStack { - overflow: hidden; display: flex; flex-flow: column; - padding-inline-end: 7px; + padding-inline-end: 7px; // keep space between name / userId and time } - .mx_InviteDialog_roomTile_name { - font-weight: 600; - font-size: $font-14px; - color: $primary-content; - } + .mx_InviteDialog_roomTile_name, + .mx_InviteDialog_roomTile_userId { + white-space: nowrap; + } - .mx_InviteDialog_roomTile_userId { - font-size: $font-12px; - color: $muted-fg-color; - } + .mx_InviteDialog_roomTile_name { + font-weight: 600; + font-size: $font-14px; + color: $primary-content; + } - .mx_InviteDialog_roomTile_name, - .mx_InviteDialog_roomTile_userId { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + .mx_InviteDialog_roomTile_userId { + font-size: $font-12px; + color: $muted-fg-color; + } } .mx_InviteDialog_roomTile_time { text-align: right; + width: max-content; font-size: $font-12px; color: $muted-fg-color; } From f8d53e1b2b82ed3ef3603ef13907fff58c0014aa Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 28 Mar 2022 07:10:27 +0000 Subject: [PATCH 04/15] Replace text-align with margin Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 921879da9a3..790fc3977ec 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -218,7 +218,7 @@ limitations under the License. } .mx_InviteDialog_roomTile_time { - text-align: right; + margin-inline-start: auto; width: max-content; font-size: $font-12px; color: $muted-fg-color; From 270602f8b5a05f6bbe11242ca403cfa3de9c07c5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 12 Mar 2022 09:16:48 +0000 Subject: [PATCH 05/15] Style invite failure dialog with display:grid Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 35 ++++++++++++++++++------ src/RoomInvite.tsx | 8 ++++-- 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 790fc3977ec..65e2b5a94ce 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -418,29 +418,46 @@ limitations under the License. > div { .mx_InviteDialog_multiInviterError_entry { + display: grid; + grid-template-columns: max-content auto; // max-content = avatar width + align-items: center; + gap: 6px 6px; margin-bottom: 24px; - .mx_InviteDialog_multiInviterError_entry_userProfile { - .mx_InviteDialog_multiInviterError_entry_name { - margin-left: 6px; + .mx_InviteDialog_multiInviterError_entry_avatar { + grid-row-start: 1; + grid-column-start: 1; + } + + .mx_InviteDialog_multiInviterError_entry_user { + grid-row-start: 1; + grid-column-start: 2; + column-gap: 6px; // See the gap above + align-self: center; + display: flex; + align-items: baseline; + + .mx_InviteDialog_multiInviterError_entry_user_name, + .mx_InviteDialog_multiInviterError_entry_user_id { + word-break: break-all; + } + + .mx_InviteDialog_multiInviterError_entry_user_name { font-size: $font-15px; - line-height: $font-24px; font-weight: $font-semi-bold; color: $primary-content; } - .mx_InviteDialog_multiInviterError_entry_userId { - margin-left: 6px; + .mx_InviteDialog_multiInviterError_entry_user_id { font-size: $font-12px; - line-height: $font-15px; color: $tertiary-content; } } .mx_InviteDialog_multiInviterError_entry_error { - margin-left: 32px; + grid-row-start: 2; + grid-column-start: 2; font-size: $font-15px; - line-height: $font-24px; color: $alert; } } diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index e9204996ed2..2aac0ed9dc9 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -154,7 +154,7 @@ export function showAnyInviteErrors( const name = (user as Member).name || (user as User).rawDisplayName; const avatarUrl = (user as Member).getMxcAvatarUrl?.() || (user as User).avatarUrl; return
-
+
- { name } - { user.userId } +
+
+ { name } + { user.userId }
{ inviter.getErrorText(addr) } From b060c29c0d229772b8ae33690a6b34a0e813f2f1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 6 May 2022 00:59:46 +0900 Subject: [PATCH 06/15] Merge style rules of room tiles and tiles on invitation failure dialog Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 243 ++++++++---------- src/RoomInvite.tsx | 12 +- src/components/views/dialogs/InviteDialog.tsx | 8 +- .../src/usecases/create-room.ts | 2 +- 4 files changed, 121 insertions(+), 144 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 65e2b5a94ce..7ce20a3f5b2 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -140,95 +140,6 @@ limitations under the License. } } -.mx_InviteDialog_roomTile { - cursor: pointer; - padding: 5px 10px; - display: grid; - gap: 7px 10px; - grid-template-columns: min-content auto auto; // avatarStack, nameStack, time - align-items: center; - - &: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: flex; - flex-flow: column; - padding-inline-end: 7px; // keep space between name / userId and time - } - - .mx_InviteDialog_roomTile_name, - .mx_InviteDialog_roomTile_userId { - white-space: nowrap; - } - - .mx_InviteDialog_roomTile_name { - font-weight: 600; - font-size: $font-14px; - color: $primary-content; - } - - .mx_InviteDialog_roomTile_userId { - font-size: $font-12px; - color: $muted-fg-color; - } - } - - .mx_InviteDialog_roomTile_time { - margin-inline-start: auto; - width: max-content; - font-size: $font-12px; - color: $muted-fg-color; - } - - .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; @@ -408,6 +319,107 @@ limitations under the License. mask-image: url('$(res)/img/voip/tab-dialpad.svg'); } +.mx_InviteDialog_inviterErrorTile, +.mx_InviteDialog_roomTile { + cursor: pointer; + padding: 5px 10px; + display: grid; + gap: 7px 10px; + align-items: center; + + * { + vertical-align: middle; + } + + .mx_InviteDialog_tile_avatarStack, + .mx_InviteDialog_roomTile_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; + row-gap: 2px; + column-gap: 6px; // See the gap above + padding-inline-end: 7px; // keep space between name / userId and time + + .mx_InviteDialog_tile_nameStack_name, + .mx_InviteDialog_tile_nameStack_userId { + white-space: nowrap; + } + + .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_roomTile { + grid-template-columns: min-content auto auto; // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time + + &:hover { + background-color: $header-panel-bg-color; + border-radius: 4px; + } + + .mx_InviteDialog_roomTile_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_roomTile_time { + margin-inline-start: auto; + width: max-content; + font-size: $font-12px; + color: $muted-fg-color; + } + + .mx_InviteDialog_roomTile_highlight { + font-weight: 900; + } +} + .mx_InviteDialog_multiInviterError { > h4 { font-size: $font-15px; @@ -416,50 +428,15 @@ limitations under the License. font-weight: normal; } - > div { - .mx_InviteDialog_multiInviterError_entry { - display: grid; - grid-template-columns: max-content auto; // max-content = avatar width - align-items: center; - gap: 6px 6px; - margin-bottom: 24px; - - .mx_InviteDialog_multiInviterError_entry_avatar { - grid-row-start: 1; - grid-column-start: 1; - } - - .mx_InviteDialog_multiInviterError_entry_user { - grid-row-start: 1; - grid-column-start: 2; - column-gap: 6px; // See the gap above - align-self: center; - display: flex; - align-items: baseline; - - .mx_InviteDialog_multiInviterError_entry_user_name, - .mx_InviteDialog_multiInviterError_entry_user_id { - word-break: break-all; - } - - .mx_InviteDialog_multiInviterError_entry_user_name { - font-size: $font-15px; - font-weight: $font-semi-bold; - color: $primary-content; - } - - .mx_InviteDialog_multiInviterError_entry_user_id { - font-size: $font-12px; - color: $tertiary-content; - } - } - - .mx_InviteDialog_multiInviterError_entry_error { - grid-row-start: 2; - grid-column-start: 2; - font-size: $font-15px; - color: $alert; - } + .mx_InviteDialog_inviterErrorTile { + grid-template-columns: max-content auto; // max-content = avatar width + margin-bottom: 24px; + + .mx_InviteDialog_inviterErrorTile_error { + grid-row-start: 2; + grid-column-start: 2; + font-size: $font-15px; + color: $alert; } } } diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index 2aac0ed9dc9..09293e06d41 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -153,8 +153,8 @@ 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..9bbe97710b5 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -222,7 +222,7 @@ class DMRoomTile extends React.PureComponent { // 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 } @@ -239,9 +239,9 @@ class DMRoomTile extends React.PureComponent { 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) { From dddf57c10824814587b0b989da99368ea31aa898 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 6 May 2022 01:05:09 +0900 Subject: [PATCH 07/15] Normalize avatar size for multiInviterError Signed-off-by: Suguru Hirahara --- src/RoomInvite.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index 09293e06d41..69246dbc3de 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -159,8 +159,8 @@ export function showAnyInviteErrors( url={avatarUrl ? mediaFromMxc(avatarUrl).getSquareThumbnailHttp(24) : null} name={name} idName={user.userId} - width={24} - height={24} + width={36} + height={36} />
From c7998f900fd0fccceaae5132368b52737a77ba0e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 6 May 2022 01:43:05 +0900 Subject: [PATCH 08/15] Set text overflow with ellipsis Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 7ce20a3f5b2..f822c4c0642 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -361,10 +361,14 @@ limitations under the License. row-gap: 2px; column-gap: 6px; // See the gap above padding-inline-end: 7px; // keep space between name / userId and time + 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 { From 9eb9ed3a36fb12edc287477b7503a72382435a66 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 6 May 2022 02:09:09 +0900 Subject: [PATCH 09/15] Use spacing variables Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index f822c4c0642..bf6c5c804e5 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -321,10 +321,12 @@ limitations under the License. .mx_InviteDialog_inviterErrorTile, .mx_InviteDialog_roomTile { + $gap: $spacing-8; + cursor: pointer; - padding: 5px 10px; + padding: $spacing-4 $spacing-8; display: grid; - gap: 7px 10px; + gap: $gap $spacing-12; align-items: center; * { @@ -358,9 +360,8 @@ limitations under the License. flex-flow: column; align-self: center; align-items: baseline; - row-gap: 2px; - column-gap: 6px; // See the gap above - padding-inline-end: 7px; // keep space between name / userId and time + gap: $spacing-4 $gap; + padding-inline-end: $spacing-8; // keep space between name / userId and time overflow: hidden; .mx_InviteDialog_tile_nameStack_name, @@ -434,7 +435,7 @@ limitations under the License. .mx_InviteDialog_inviterErrorTile { grid-template-columns: max-content auto; // max-content = avatar width - margin-bottom: 24px; + margin-bottom: $spacing-24; .mx_InviteDialog_inviterErrorTile_error { grid-row-start: 2; From 74d5210f29031b0eabd62f7e2f74060c9907cd3d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 6 May 2022 02:24:51 +0900 Subject: [PATCH 10/15] Set narrow gap to nameStack Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index bf6c5c804e5..73d4f95b1d5 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -321,12 +321,10 @@ limitations under the License. .mx_InviteDialog_inviterErrorTile, .mx_InviteDialog_roomTile { - $gap: $spacing-8; - cursor: pointer; padding: $spacing-4 $spacing-8; display: grid; - gap: $gap $spacing-12; + gap: $spacing-8 $spacing-12; align-items: center; * { @@ -360,7 +358,7 @@ limitations under the License. flex-flow: column; align-self: center; align-items: baseline; - gap: $spacing-4 $gap; + gap: 2px 0; padding-inline-end: $spacing-8; // keep space between name / userId and time overflow: hidden; From a9c905ecf46475d307750c9fd77a790277a0eceb Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 6 May 2022 02:48:39 +0900 Subject: [PATCH 11/15] Rename mx_InviteDialog_inviterErrorTile_error Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 2 +- src/RoomInvite.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 73d4f95b1d5..58b6f40953d 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -435,7 +435,7 @@ limitations under the License. grid-template-columns: max-content auto; // max-content = avatar width margin-bottom: $spacing-24; - .mx_InviteDialog_inviterErrorTile_error { + .mx_InviteDialog_inviterErrorTile_errorText { grid-row-start: 2; grid-column-start: 2; font-size: $font-15px; diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index 69246dbc3de..a7991a35a2c 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -167,7 +167,7 @@ export function showAnyInviteErrors( { name } { user.userId }
-
+
{ inviter.getErrorText(addr) }
; From 883c0d43747369ca0f1d3f45b3b86d242b08a7ab Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 6 May 2022 03:04:57 +0900 Subject: [PATCH 12/15] Create mx_InviteDialog_tile Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 109 +++++++++--------- src/RoomInvite.tsx | 4 +- src/components/views/dialogs/InviteDialog.tsx | 8 +- .../src/usecases/create-space.ts | 2 +- test/end-to-end-tests/src/usecases/invite.ts | 2 +- 5 files changed, 62 insertions(+), 63 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 58b6f40953d..32288652c0f 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -319,20 +319,71 @@ limitations under the License. mask-image: url('$(res)/img/voip/tab-dialpad.svg'); } -.mx_InviteDialog_inviterErrorTile, -.mx_InviteDialog_roomTile { +.mx_InviteDialog_tile { cursor: pointer; padding: $spacing-4 $spacing-8; 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 + + &: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; + + .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_roomTile_selected { + .mx_InviteDialog_tile--room_selected { width: 36px; height: 36px; display: inline-block; @@ -383,46 +434,6 @@ limitations under the License. } } -.mx_InviteDialog_roomTile { - grid-template-columns: min-content auto auto; // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time - - &:hover { - background-color: $header-panel-bg-color; - border-radius: 4px; - } - - .mx_InviteDialog_roomTile_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_roomTile_time { - margin-inline-start: auto; - width: max-content; - font-size: $font-12px; - color: $muted-fg-color; - } - - .mx_InviteDialog_roomTile_highlight { - font-weight: 900; - } -} - .mx_InviteDialog_multiInviterError { > h4 { font-size: $font-15px; @@ -430,18 +441,6 @@ limitations under the License. color: $secondary-content; font-weight: normal; } - - .mx_InviteDialog_inviterErrorTile { - grid-template-columns: max-content auto; // max-content = avatar width - margin-bottom: $spacing-24; - - .mx_InviteDialog_inviterErrorTile_errorText { - grid-row-start: 2; - grid-column-start: 2; - font-size: $font-15px; - color: $alert; - } - } } .mx_InviteDialog_identityServer { diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index a7991a35a2c..7be00917588 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -153,7 +153,7 @@ 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 }
-
+
{ inviter.getErrorText(addr) }
; diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 9bbe97710b5..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,7 +216,7 @@ 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 @@ -237,7 +237,7 @@ class DMRoomTile extends React.PureComponent { : this.highlightName(userIdentifier); return ( -
+
{ stackedAvatar }
{ this.highlightName(this.props.member.name) }
diff --git a/test/end-to-end-tests/src/usecases/create-space.ts b/test/end-to-end-tests/src/usecases/create-space.ts index 3fa2730f57d..0b3a9d4fea3 100644 --- a/test/end-to-end-tests/src/usecases/create-space.ts +++ b/test/end-to-end-tests/src/usecases/create-space.ts @@ -74,7 +74,7 @@ export async function inviteSpace(session: ElementSession, spaceName: string, us const inviteTextArea = await session.query(".mx_InviteDialog_editor input"); await inviteTextArea.type(userId); - const selectUserItem = await session.query(".mx_InviteDialog_roomTile"); + const selectUserItem = await session.query(".mx_InviteDialog_tile--room"); await selectUserItem.click(); const confirmButton = await session.query(".mx_InviteDialog_goButton"); await confirmButton.click(); 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 Date: Fri, 6 May 2022 03:19:07 +0900 Subject: [PATCH 13/15] Set padding to room tiles only Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 32288652c0f..a2f8219bd79 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -321,13 +321,13 @@ limitations under the License. .mx_InviteDialog_tile { cursor: pointer; - padding: $spacing-4 $spacing-8; 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; @@ -373,6 +373,7 @@ limitations under the License. .mx_InviteDialog_tile--inviterError_errorText { grid-row-start: 2; grid-column-start: 2; + font-size: $font-15px; color: $alert; } From 08252a7a2543b15778c7ec7aad94638c7bfedd43 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 6 May 2022 03:35:02 +0900 Subject: [PATCH 14/15] Remove space between name / userID and time (there is gap by default) Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index a2f8219bd79..606b469630d 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -411,7 +411,6 @@ limitations under the License. align-self: center; align-items: baseline; gap: 2px 0; - padding-inline-end: $spacing-8; // keep space between name / userId and time overflow: hidden; .mx_InviteDialog_tile_nameStack_name, From 2fa0b7db09d2f1cc4580d1a5f49b71b10142f0b3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 6 May 2022 04:12:07 +0900 Subject: [PATCH 15/15] Remove the margin from the last child Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_InviteDialog.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 606b469630d..1290b4eeccb 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -370,6 +370,10 @@ limitations under the License. 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;