Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 12:28:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(component): ensure the colorfulCallback of Avatar in different sizes behaves consistently (#6784)

Browse Source
This commit is contained in:
CatsJuice
2024-05-07 02:40:22 +00:00
parent a5e4730a5f
commit 4a74148ea3
3 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/component/src/ui/avatar/avatar.stories.tsx
View File

@@ -31,6 +31,13 @@ ColorfulFallback.args = {
colorfulFallback: true,
name: 'blocksuite',
};
export const ColorfulFallbackWithDifferentSize: StoryFn<AvatarProps> = args => (
<>
<Avatar {...args} size={20} colorfulFallback name="AFFiNE" />
<Avatar {...args} size={40} colorfulFallback name="AFFiNE" />
<Avatar {...args} size={60} colorfulFallback name="AFFiNE" />
</>
);
export const WithHover: StoryFn<AvatarProps> = Template.bind(undefined);
WithHover.args = {
size: 50,

3
packages/frontend/component/src/ui/avatar/avatar.tsx
View File

@@ -24,7 +24,7 @@ import type { TooltipProps } from '../tooltip';
import { Tooltip } from '../tooltip';
import { ColorfulFallback } from './colorful-fallback';
import * as style from './style.css';
import { sizeVar } from './style.css';
import { blurVar, sizeVar } from './style.css';
export type AvatarProps = {
size?: number;
@@ -92,6 +92,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
style={{
...assignInlineVars({
[sizeVar]: size ? `${size}px` : '20px',
[blurVar]: `${size * 0.3}px`,
}),
...propsStyles,
}}

7
packages/frontend/component/src/ui/avatar/style.css.ts
View File

@@ -1,6 +1,7 @@
import { cssVar } from '@toeverything/theme';
import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css';
export const sizeVar = createVar('sizeVar');
export const blurVar = createVar('blurVar');
const bottomAnimation = keyframes({
'0%': {
top: '-44%',
@@ -89,7 +90,7 @@ export const DefaultAvatarMiddleItemStyle = style({
top: '-30%',
transform: 'matrix(-0.48, -0.88, 0.8, -0.6, 0, 0)',
opacity: '0.8',
filter: 'blur(12px)',
filter: `blur(${blurVar})`,
transformOrigin: 'center center',
animation: `${middleAnimation} 3s ease-in-out forwards infinite`,
animationPlayState: 'paused',
@@ -105,7 +106,7 @@ export const DefaultAvatarBottomItemStyle = style({
left: '-11%',
transform: 'matrix(-0.29, -0.96, 0.94, -0.35, 0, 0)',
opacity: '0.8',
filter: 'blur(12px)',
filter: `blur(${blurVar})`,
transformOrigin: 'center center',
willChange: 'left, top, transform',
animation: `${bottomAnimation} 3s ease-in-out forwards infinite`,
@@ -121,7 +122,7 @@ export const DefaultAvatarTopItemStyle = style({
right: '-30%',
top: '-30%',
opacity: '0.8',
filter: 'blur(12px)',
filter: `blur(${blurVar})`,
transform: 'matrix(-0.28, -0.96, 0.93, -0.37, 0, 0)',
transformOrigin: 'center center',
});