Name lists on invite dialog (#8046)

* Place room tiles with grid

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set padding inside of name stack

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove overflow:hidden (to be cancelled)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace text-align with margin

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Style invite failure dialog with display:grid

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style rules of room tiles and tiles on invitation failure dialog

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Normalize avatar size for multiInviterError

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set text overflow with ellipsis

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set narrow gap to nameStack

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Rename mx_InviteDialog_inviterErrorTile_error

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Create mx_InviteDialog_tile

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set padding to room tiles only

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove space between name / userID and time (there is gap by default)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove the margin from the last child

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-09 12:45:33 +00:00 committed by GitHub
parent 67cace7de7
commit 12dd5a7ef0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 138 additions and 135 deletions

View file

@ -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 <div key={addr} className="mx_InviteDialog_multiInviterError_entry">
<div className="mx_InviteDialog_multiInviterError_entry_userProfile">
return <div key={addr} className="mx_InviteDialog_tile mx_InviteDialog_tile--inviterError">
<div className="mx_InviteDialog_tile_avatarStack">
<BaseAvatar
url={avatarUrl ? mediaFromMxc(avatarUrl).getSquareThumbnailHttp(24) : null}
name={name}
idName={user.userId}
width={24}
height={24}
width={36}
height={36}
/>
<span className="mx_InviteDialog_multiInviterError_entry_name">{ name }</span>
<span className="mx_InviteDialog_multiInviterError_entry_userId">{ user.userId }</span>
</div>
<div className="mx_InviteDialog_multiInviterError_entry_error">
<div className="mx_InviteDialog_tile_nameStack">
<span className="mx_InviteDialog_tile_nameStack_name">{ name }</span>
<span className="mx_InviteDialog_tile_nameStack_userId">{ user.userId }</span>
</div>
<div className="mx_InviteDialog_tile--inviterError_errorText">
{ inviter.getErrorText(addr) }
</div>
</div>;