From d62935935f2916d1069cf129715c0330dc6a8246 Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Tue, 29 Aug 2023 00:04:22 +0800 Subject: [PATCH] fix: left sidebar style fixes (#3950) Co-authored-by: Alex Yang --- .../delete-leave-workspace/delete/style.ts | 1 - .../delete-leave-workspace/leave/style.ts | 1 - .../new-workspace-setting-detail/storage.tsx | 1 + .../src/components/root-app-sidebar/index.tsx | 1 + apps/electron/src/main/updater/index.ts | 2 +- .../src/stories/app-sidebar.stories.tsx | 2 +- .../stories/app-updater-button.stories.tsx | 60 +++++++ packages/@types/env/__all.d.ts | 3 +- .../app-updater-button/index.css.ts | 32 ++-- .../app-updater-button/index.jotai.ts | 15 +- .../app-sidebar/app-updater-button/index.tsx | 156 +++++++++++------- .../src/components/workspace/index.css.ts | 2 +- packages/infra/src/type.ts | 53 ++++-- .../__tests__/sqlite-provider.spec.ts | 3 - plugins/image-preview/src/component/index.tsx | 2 +- 15 files changed, 235 insertions(+), 99 deletions(-) create mode 100644 apps/storybook/src/stories/app-updater-button.stories.tsx diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts index b3951cd52..dc144a604 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts +++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts @@ -27,7 +27,6 @@ export const StyledTextContent = styled('div')(() => { return { margin: 'auto', width: '425px', - fontFamily: 'Avenir Next', fontStyle: 'normal', fontWeight: '400', fontSize: '18px', diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/style.ts b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/style.ts index 64254a5aa..5a54f0dee 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/style.ts +++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/style.ts @@ -26,7 +26,6 @@ export const StyledTextContent = styled('div')(() => { return { margin: 'auto', width: '425px', - fontFamily: 'Avenir Next', fontStyle: 'normal', fontWeight: '400', fontSize: '18px', diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx index c2063949c..3e2d40299 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx +++ b/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx @@ -29,6 +29,7 @@ const useDBFileSecondaryPath = (workspaceId: string) => { } }); } + return; }, [workspaceId]); return path; }; diff --git a/apps/core/src/components/root-app-sidebar/index.tsx b/apps/core/src/components/root-app-sidebar/index.tsx index 4804783b9..b719d806e 100644 --- a/apps/core/src/components/root-app-sidebar/index.tsx +++ b/apps/core/src/components/root-app-sidebar/index.tsx @@ -111,6 +111,7 @@ export const RootAppSidebar = ({ if (isDesktop) { return window.events?.applicationMenu.onNewPageAction(onClickNewPage); } + return; }, [onClickNewPage]); const [sidebarOpen, setSidebarOpen] = useAtom(appSidebarOpenAtom); diff --git a/apps/electron/src/main/updater/index.ts b/apps/electron/src/main/updater/index.ts index 292766d20..9a7d4378b 100644 --- a/apps/electron/src/main/updater/index.ts +++ b/apps/electron/src/main/updater/index.ts @@ -15,7 +15,7 @@ export const updaterHandlers = { if (res) { const { updateInfo } = res; return { - updateInfo, + version: updateInfo.version, }; } return null; diff --git a/apps/storybook/src/stories/app-sidebar.stories.tsx b/apps/storybook/src/stories/app-sidebar.stories.tsx index 6ab5fe9a9..3fa62d54f 100644 --- a/apps/storybook/src/stories/app-sidebar.stories.tsx +++ b/apps/storybook/src/stories/app-sidebar.stories.tsx @@ -24,7 +24,7 @@ import { type PropsWithChildren, useState } from 'react'; import { MemoryRouter } from 'react-router-dom'; export default { - title: 'Components/AppSidebar', + title: 'AFFiNE/AppSidebar', component: AppSidebar, } satisfies Meta; diff --git a/apps/storybook/src/stories/app-updater-button.stories.tsx b/apps/storybook/src/stories/app-updater-button.stories.tsx new file mode 100644 index 000000000..ff995d2e3 --- /dev/null +++ b/apps/storybook/src/stories/app-updater-button.stories.tsx @@ -0,0 +1,60 @@ +import { + type AddPageButtonPureProps, + AppUpdaterButtonPure, +} from '@affine/component/app-sidebar'; +import type { Meta, StoryFn } from '@storybook/react'; +import type { PropsWithChildren } from 'react'; + +export default { + title: 'AFFiNE/AppUpdaterButton', + component: AppUpdaterButtonPure, + parameters: { + chromatic: { disableSnapshot: true }, + }, +} satisfies Meta; + +const Container = ({ children }: PropsWithChildren) => ( +
+ {children} +
+); + +export const Default: StoryFn = props => { + return ( + + + + ); +}; + +Default.args = { + appQuitting: false, + updateReady: true, + updateAvailable: { + version: '1.0.0-beta.1', + allowAutoUpdate: true, + }, + downloadProgress: 42, + currentChangelogUnread: true, +}; + +export const Updated: StoryFn = props => { + return ( + + + + ); +}; + +Updated.args = { + currentChangelogUnread: true, +}; diff --git a/packages/@types/env/__all.d.ts b/packages/@types/env/__all.d.ts index a9d9848a4..9be292bc3 100644 --- a/packages/@types/env/__all.d.ts +++ b/packages/@types/env/__all.d.ts @@ -3,6 +3,7 @@ import type { DBHandlerManager, DebugHandlerManager, DialogHandlerManager, + EventMap, ExportHandlerManager, UIHandlerManager, UnwrapManagerHandlerToClientSide, @@ -24,7 +25,7 @@ declare global { updater: UnwrapManagerHandlerToClientSide; workspace: UnwrapManagerHandlerToClientSide; }; - events: any; + events: EventMap; } interface WindowEventMap { 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 99b7bfe4b..a2d56ad2e 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 @@ -18,21 +18,23 @@ export const root = style({ '&:hover': { background: 'var(--affine-white-60)', }, - '&[data-has-update="true"]:before': { + '&[data-disabled="true"]': { + pointerEvents: 'none', + }, + '&:after': { content: "''", position: 'absolute', - top: '-3px', - right: '-3px', + top: '-2px', + right: '-2px', width: '8px', height: '8px', backgroundColor: 'var(--affine-primary-color)', borderRadius: '50%', zIndex: 1, - opacity: 1, - transition: '0.3s ease', + transition: 'opacity 0.3s', }, - '&[data-disabled="true"]': { - pointerEvents: 'none', + '&:hover:after': { + opacity: 0, }, }, vars: { @@ -42,7 +44,7 @@ export const root = style({ export const icon = style({ marginRight: '18px', - color: 'var(--affine-primary-color)', + color: 'var(--affine-icon-color)', fontSize: '24px', }); @@ -90,7 +92,7 @@ export const installLabelNormal = style([ { justifyContent: 'space-between', selectors: { - [`${root}:hover &`]: { + [`${root}:hover &, ${root}[data-updating=true] &`]: { display: 'none', }, }, @@ -102,7 +104,7 @@ export const installLabelHover = style([ { display: 'none', selectors: { - [`${root}:hover &`]: { + [`${root}:hover &, ${root}[data-updating=true] &`]: { display: 'flex', }, }, @@ -175,7 +177,7 @@ export const particles = style({ pointerEvents: 'none', display: 'none', selectors: { - [`${root}:hover &`]: { + [`${root}:hover &, ${root}[data-updating=true] &`]: { display: 'block', }, '&:before': { @@ -224,8 +226,10 @@ export const halo = style({ 'radial-gradient(ellipse 30% 45% at bottom, rgba(30, 150, 235, 0.6), transparent)', }, selectors: { - '&:hover:before, &:hover:after': { - transform: 'translateY(0) scale(1)', - }, + [`${root}:hover &:before, ${root}:hover &:after, + ${root}[data-updating=true] &:before, ${root}[data-updating=true] &:after`]: + { + transform: 'translateY(0) scale(1)', + }, }, }); diff --git a/packages/component/src/components/app-sidebar/app-updater-button/index.jotai.ts b/packages/component/src/components/app-sidebar/app-updater-button/index.jotai.ts index 55024db33..2c1eaf853 100644 --- a/packages/component/src/components/app-sidebar/app-updater-button/index.jotai.ts +++ b/packages/component/src/components/app-sidebar/app-updater-button/index.jotai.ts @@ -1,4 +1,5 @@ import { isBrowser } from '@affine/env/constant'; +import type { UpdateMeta } from '@toeverything/infra'; import { atomWithObservable, atomWithStorage } from 'jotai/utils'; import { Observable } from 'rxjs'; @@ -8,7 +9,7 @@ function rpcToObservable< H extends () => Promise, E extends (callback: (t: T) => void) => () => void, >( - initialValue: T, + initialValue: T | null, { event, handler, @@ -18,8 +19,8 @@ function rpcToObservable< handler?: H; onSubscribe?: () => void; } -) { - return new Observable(subscriber => { +): Observable { + return new Observable(subscriber => { subscriber.next(initialValue); onSubscribe?.(); if (!isBrowser || !environment.isDesktop || !event) { @@ -40,13 +41,13 @@ function rpcToObservable< } export const updateReadyAtom = atomWithObservable(() => { - return rpcToObservable(null as any | null, { + return rpcToObservable(null as UpdateMeta | null, { event: window.events?.updater.onUpdateReady, }); }); export const updateAvailableAtom = atomWithObservable(() => { - return rpcToObservable(null as any | null, { + return rpcToObservable(null as UpdateMeta | null, { event: window.events?.updater.onUpdateAvailable, onSubscribe: () => { window.apis?.updater.checkForUpdatesAndNotify().catch(err => { @@ -56,8 +57,8 @@ export const updateAvailableAtom = atomWithObservable(() => { }); }); -export const downloadProgressAtom = atomWithObservable(() => { - return rpcToObservable(0, { +export const downloadProgressAtom = atomWithObservable(() => { + return rpcToObservable(null as number | null, { event: window.events?.updater.onDownloadProgress, }); }); 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 3fbad8e84..5c90f45f9 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 @@ -14,7 +14,17 @@ import { updateReadyAtom, } from './index.jotai'; -interface AddPageButtonProps { +export interface AddPageButtonPureProps { + onClickUpdate: () => void; + onDismissCurrentChangelog: () => void; + currentChangelogUnread: boolean; + updateReady: boolean; + updateAvailable: { + version: string; + allowAutoUpdate: boolean; + } | null; + downloadProgress: number | null; + appQuitting: boolean; className?: string; style?: React.CSSProperties; } @@ -39,61 +49,19 @@ const currentChangelogUnreadAtom = atom(async get => { return false; }); -// Although it is called an input, it is actually a button. -export function AppUpdaterButton({ className, style }: AddPageButtonProps) { +export function AppUpdaterButtonPure({ + updateReady, + onClickUpdate, + onDismissCurrentChangelog, + currentChangelogUnread, + updateAvailable, + downloadProgress, + appQuitting, + className, + style, +}: AddPageButtonPureProps) { const t = useAFFiNEI18N(); - const currentChangelogUnread = useAtomValue(currentChangelogUnreadAtom); - const updateReady = useAtomValue(updateReadyAtom); - const updateAvailable = useAtomValue(updateAvailableAtom); - const currentVersion = useAtomValue(currentVersionAtom); - const downloadProgress = useAtomValue(downloadProgressAtom); - const setChangelogCheckAtom = useSetAtom(changelogCheckedAtom); - const [appQuitting, setAppQuitting] = useState(false); - - const onDismissCurrentChangelog = useCallback(() => { - if (!currentVersion) { - return; - } - startTransition(() => - setChangelogCheckAtom(mapping => { - return { - ...mapping, - [currentVersion]: true, - }; - }) - ); - }, [currentVersion, setChangelogCheckAtom]); - const onClickUpdate = useCallback(() => { - if (updateReady) { - setAppQuitting(true); - window.apis?.updater.quitAndInstall().catch(err => { - // TODO: add error toast here - console.error(err); - }); - } else if (updateAvailable) { - if (updateAvailable.allowAutoUpdate) { - // wait for download to finish - } else { - window.open( - `https://github.com/toeverything/AFFiNE/releases/tag/v${currentVersion}`, - '_blank' - ); - } - } else if (currentChangelogUnread) { - window.open(runtimeConfig.changelogUrl, '_blank'); - onDismissCurrentChangelog(); - } else { - throw new Unreachable(); - } - }, [ - currentChangelogUnread, - currentVersion, - onDismissCurrentChangelog, - updateAvailable, - updateReady, - ]); - if (!updateAvailable && !currentChangelogUnread) { return null; } @@ -125,7 +93,8 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {