Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

fix(console): grouped avatars should stack on each other (#4539)

Browse source
This commit is contained in:
Charles Zhao 2023-09-18 16:05:53 +08:00 committed by GitHub
parent 256aa30c31
commit 460784041b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
packages/console/src/components/UserAvatar/index.module.scss
View file

@ -7,32 +7,32 @@
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
&.micro {
width: 20px;
height: 20px;
border-radius: 6px;
}
.micro {
width: 20px;
height: 20px;
border-radius: 6px;
}
&.small {
width: 24px;
height: 24px;
}
.small {
width: 24px;
height: 24px;
}
&.medium {
width: 32px;
height: 32px;
}
.medium {
width: 32px;
height: 32px;
}
&.large {
width: 40px;
height: 40px;
}
.large {
width: 40px;
height: 40px;
}
&.xlarge {
width: 60px;
height: 60px;
}
.xlarge {
width: 60px;
height: 60px;
}
.avatar {

15
packages/console/src/components/UserAvatar/index.tsx
View file

@ -92,16 +92,17 @@ function UserAvatar({ className, size = 'medium', user, hasTooltip = false }: Pr
);
return (
<Tooltip
className={styles.tooltip}
content={conditional(hasTooltip && user && <UserInfoTipContent user={user} />)}
>
<div className={wrapperClassName}>
<div className={wrapperClassName}>
<Tooltip
className={styles.tooltip}
anchorClassName={styles[size]}
content={conditional(hasTooltip && user && <UserInfoTipContent user={user} />)}
>
<div className={avatarClassName} style={{ backgroundColor: color }}>
{nameToDisplay ? nameToDisplay.charAt(0) : <DefaultAvatar />}
</div>
</div>
</Tooltip>
</Tooltip>
</div>
);
}