Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -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; border-radius: 8px;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
}
&.micro { .micro {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 6px; border-radius: 6px;
} }
&.small { .small {
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
&.medium { .medium {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
&.large { .large {
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
&.xlarge { .xlarge {
width: 60px; width: 60px;
height: 60px; height: 60px;
}
} }
.avatar { .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 ( return (
<Tooltip <div className={wrapperClassName}>
className={styles.tooltip} <Tooltip
content={conditional(hasTooltip && user && <UserInfoTipContent user={user} />)} className={styles.tooltip}
> anchorClassName={styles[size]}
<div className={wrapperClassName}> content={conditional(hasTooltip && user && <UserInfoTipContent user={user} />)}
>
<div className={avatarClassName} style={{ backgroundColor: color }}> <div className={avatarClassName} style={{ backgroundColor: color }}>
{nameToDisplay ? nameToDisplay.charAt(0) : <DefaultAvatar />} {nameToDisplay ? nameToDisplay.charAt(0) : <DefaultAvatar />}
</div> </div>
</div> </Tooltip>
</Tooltip> </div>
); );
} }