From 68a114c540842663d158c84c7529b8518570025e Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Fri, 19 May 2023 15:07:07 +0800 Subject: [PATCH] fix: optimize app updater (#2452) --- .../favorite/favorite-list.tsx | 37 ++++++++++-------- .../favorite/styles.css.ts | 32 +++++++++++++++- packages/component/package.json | 1 + .../app-updater-button/index.css.ts | 38 ++++++++++--------- .../app-sidebar/app-updater-button/index.tsx | 1 + yarn.lock | 21 ++++++++++ 6 files changed, 97 insertions(+), 33 deletions(-) diff --git a/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx b/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx index 38dd9bf56b..a8e7aeed5b 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx @@ -1,6 +1,7 @@ import { MenuLinkItem } from '@affine/component/app-sidebar'; import { EdgelessIcon, PageIcon } from '@blocksuite/icons'; import type { PageMeta, Workspace } from '@blocksuite/store'; +import * as Collapsible from '@radix-ui/react-collapsible'; import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta'; import { useBlockSuitePageReferences } from '@toeverything/hooks/use-block-suite-page-references'; import { useAtomValue } from 'jotai'; @@ -35,11 +36,14 @@ function FavoriteMenuItem({ }, [references, parentIds]); const [collapsed, setCollapsed] = useState(true); const collapsible = referencesToShow.length > 0; - const showReferences = collapsible ? !collapsed : referencesToShow.length > 0; const nestedItem = parentIds.size > 0; const untitled = !metaMapping[pageId]?.title; return ( -
+ - {showReferences && - referencesToShow.map(ref => { - return ( - - ); - })} -
+ {collapsible && ( + + {referencesToShow.map(ref => { + return ( + + ); + })} + + )} + ); } diff --git a/apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts b/apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts index 6ab7d1a8ae..4315cf7530 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts @@ -1,4 +1,4 @@ -import { style } from '@vanilla-extract/css'; +import { keyframes, style } from '@vanilla-extract/css'; export const label = style({ selectors: { @@ -19,3 +19,33 @@ export const favItemWrapper = style({ }, }, }); + +const slideDown = keyframes({ + '0%': { + height: '0px', + }, + '100%': { + height: 'var(--radix-collapsible-content-height)', + }, +}); + +const slideUp = keyframes({ + '0%': { + height: 'var(--radix-collapsible-content-height)', + }, + '100%': { + height: '0px', + }, +}); + +export const collapsibleContent = style({ + overflow: 'hidden', + selectors: { + '&[data-state="open"]': { + animation: `${slideDown} 0.2s ease-out`, + }, + '&[data-state="closed"]': { + animation: `${slideUp} 0.2s ease-out`, + }, + }, +}); diff --git a/packages/component/package.json b/packages/component/package.json index 24fdc77e46..da29ce742f 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -36,6 +36,7 @@ "@mui/material": "^5.13.1", "@popperjs/core": "^2.11.7", "@radix-ui/react-avatar": "^1.0.2", + "@radix-ui/react-collapsible": "^1.0.2", "@toeverything/hooks": "workspace:*", "@toeverything/theme": "^0.5.8", "@vanilla-extract/dynamic": "^2.0.3", diff --git a/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts b/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts index 1edd029dfe..95b4f5530d 100644 --- a/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts +++ b/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts @@ -159,28 +159,32 @@ export const particles = style({ backgroundRepeat: 'no-repeat, repeat', backgroundPosition: 'center, center top 100%', backgroundSize: '100%, 130%', - WebkitMaskImage: - 'linear-gradient(to top, transparent, black, black, transparent)', + maskImage: 'linear-gradient(to top, transparent, black, black, transparent)', width: '100%', height: '100%', position: 'absolute', left: 0, pointerEvents: 'none', -}); - -export const particlesBefore = style({ - content: '""', - display: 'block', - position: 'absolute', - width: '100%', - height: '100%', - background: `var(--svg-dot-animation), var(--svg-dot-animation), var(--svg-dot-animation)`, - backgroundRepeat: 'no-repeat, repeat, repeat', - backgroundPosition: 'center, center top 100%, center center', - backgroundSize: '100% 120%, 150%, 120%', - filter: 'blur(1px)', - willChange: 'filter', - pointerEvents: 'none', + display: 'none', + selectors: { + [`${root}:hover &`]: { + display: 'block', + }, + '&:before': { + content: '""', + display: 'block', + position: 'absolute', + width: '100%', + height: '100%', + background: `var(--svg-dot-animation), var(--svg-dot-animation), var(--svg-dot-animation)`, + backgroundRepeat: 'no-repeat, repeat, repeat', + backgroundPosition: 'center, center top 100%, center center', + backgroundSize: '100% 120%, 150%, 120%', + filter: 'blur(1px)', + willChange: 'filter', + pointerEvents: 'none', + }, + }, }); export const halo = style({ diff --git a/packages/component/src/components/app-sidebar/app-updater-button/index.tsx b/packages/component/src/components/app-sidebar/app-updater-button/index.tsx index 68b16f84f8..cc0eedf059 100644 --- a/packages/component/src/components/app-sidebar/app-updater-button/index.tsx +++ b/packages/component/src/components/app-sidebar/app-updater-button/index.tsx @@ -85,6 +85,7 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) { } } else if (currentChangelogUnread) { window.open(config.changelogUrl, '_blank'); + onDismissCurrentChangelog(); } else { throw new Unreachable(); } diff --git a/yarn.lock b/yarn.lock index e9b09ef1b7..f2f6ec04fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -67,6 +67,7 @@ __metadata: "@mui/material": ^5.13.1 "@popperjs/core": ^2.11.7 "@radix-ui/react-avatar": ^1.0.2 + "@radix-ui/react-collapsible": ^1.0.2 "@storybook/addon-actions": ^7.0.12 "@storybook/addon-coverage": ^0.0.8 "@storybook/addon-essentials": ^7.0.12 @@ -6417,6 +6418,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-collapsible@npm:^1.0.2": + version: 1.0.2 + resolution: "@radix-ui/react-collapsible@npm:1.0.2" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.0 + "@radix-ui/react-compose-refs": 1.0.0 + "@radix-ui/react-context": 1.0.0 + "@radix-ui/react-id": 1.0.0 + "@radix-ui/react-presence": 1.0.0 + "@radix-ui/react-primitive": 1.0.2 + "@radix-ui/react-use-controllable-state": 1.0.0 + "@radix-ui/react-use-layout-effect": 1.0.0 + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + checksum: a0fcfd3aad5159e1fb6fc54fd09210d7de9c1ee1e19739a5a82af81d3f2233e4e5eb204da326f32e2f2a4740aa4c3b42530b61e36b7ced9f857801809d1d3527 + languageName: node + linkType: hard + "@radix-ui/react-compose-refs@npm:1.0.0": version: 1.0.0 resolution: "@radix-ui/react-compose-refs@npm:1.0.0"