From ecbf5a95faa96d431132230243212709cd936415 Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Fri, 1 Nov 2024 18:42:09 +0800 Subject: [PATCH] fix: open in app card style (#8667) --- .../general-setting/appearance/links.tsx | 5 +- .../components/layouts/workspace-layout.tsx | 6 +- .../src/components/root-app-sidebar/index.tsx | 4 +- .../pages/workspace/share/share-page.css.ts | 6 - .../pages/workspace/share/share-page.tsx | 2 +- .../open-in-app-card/open-in-app-card.css.ts | 116 +++++++++++++----- .../open-in-app-card/open-in-app-card.tsx | 93 +++++++------- packages/frontend/i18n/src/resources/en.json | 5 +- 8 files changed, 147 insertions(+), 90 deletions(-) diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/links.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/links.tsx index bedf16e361d07..931d1735c2af9 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/links.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/links.tsx @@ -44,10 +44,7 @@ export const OpenInAppLinksMenu = () => { align: 'end', }} > - + {options.find(option => option.value === currentOpenInAppMode)?.label} diff --git a/packages/frontend/core/src/components/layouts/workspace-layout.tsx b/packages/frontend/core/src/components/layouts/workspace-layout.tsx index 965d24af0a75e..7b46e7180a133 100644 --- a/packages/frontend/core/src/components/layouts/workspace-layout.tsx +++ b/packages/frontend/core/src/components/layouts/workspace-layout.tsx @@ -3,7 +3,10 @@ import { pushGlobalLoadingEventAtom, resolveGlobalLoadingEventAtom, } from '@affine/component/global-loading'; -import { SidebarSwitch } from '@affine/core/modules/app-sidebar/views'; +import { + OpenInAppCard, + SidebarSwitch, +} from '@affine/core/modules/app-sidebar/views'; import { WorkspaceDesktopApiService } from '@affine/core/modules/desktop-api/service'; import { useI18n } from '@affine/i18n'; import { type DocMode, ZipTransformer } from '@blocksuite/affine/blocks'; @@ -205,6 +208,7 @@ const DesktopLayout = ({ children }: PropsWithChildren) => { const BrowserLayout = ({ children }: PropsWithChildren) => { return (
+ {children}
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx index d24fbf8be4674..585098d5f1734 100644 --- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx +++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx @@ -5,11 +5,11 @@ import { import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks'; import { AddPageButton, + AppDownloadButton, AppSidebar, CategoryDivider, MenuItem, MenuLinkItem, - OpenInAppCard, QuickSearchInput, SidebarContainer, SidebarScrollableContainer, @@ -191,7 +191,7 @@ export const RootAppSidebar = (): ReactElement => { - {BUILD_CONFIG.isElectron ? : } + {BUILD_CONFIG.isElectron ? : } ); diff --git a/packages/frontend/core/src/desktop/pages/workspace/share/share-page.css.ts b/packages/frontend/core/src/desktop/pages/workspace/share/share-page.css.ts index 172e583e18228..048df4bc5313a 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/share/share-page.css.ts +++ b/packages/frontend/core/src/desktop/pages/workspace/share/share-page.css.ts @@ -57,9 +57,3 @@ export const linkText = style({ fontWeight: 700, whiteSpace: 'nowrap', }); - -export const shareCard = style({ - position: 'fixed', - bottom: '16px', - left: '16px', -}); diff --git a/packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx b/packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx index c82fe8e1359f4..54e2465c5ed52 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx @@ -167,7 +167,7 @@ const SharePageWebContainer = ({ {children} - + ); diff --git a/packages/frontend/core/src/modules/app-sidebar/views/open-in-app-card/open-in-app-card.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/open-in-app-card/open-in-app-card.css.ts index be0287c022b2e..094addc78ebdb 100644 --- a/packages/frontend/core/src/modules/app-sidebar/views/open-in-app-card/open-in-app-card.css.ts +++ b/packages/frontend/core/src/modules/app-sidebar/views/open-in-app-card/open-in-app-card.css.ts @@ -2,12 +2,28 @@ import { cssVar } from '@toeverything/theme'; import { cssVarV2 } from '@toeverything/theme/v2'; import { style } from '@vanilla-extract/css'; +const width = 440; + export const root = style({ background: cssVarV2('layer/background/primary'), borderRadius: '8px', border: `1px solid ${cssVarV2('layer/insideBorder/border')}`, cursor: 'default', - userSelect: 'none', + padding: '12px 10px', + boxShadow: cssVar('shadow1'), + display: 'flex', + gap: 8, + position: 'fixed', + bottom: 16, + left: `calc(50dvw - ${width / 2}px)`, + width, + zIndex: cssVar('zIndexPopover'), + transition: 'transform 0.2s ease-in-out', + selectors: { + '&[data-hidden="true"]': { + transform: 'translateY(200%)', + }, + }, }); export const pane = style({ @@ -22,48 +38,86 @@ export const pane = style({ }, }); -export const row = style({ - fontSize: cssVar('fontSm'), - fontWeight: 400, - display: 'flex', - alignItems: 'center', - columnGap: 10, - color: cssVarV2('text/secondary'), -}); - -export const clickableRow = style([ - row, - { - cursor: 'pointer', - }, -]); - export const buttonGroup = style({ display: 'flex', gap: 4, + justifyContent: 'flex-end', }); export const button = style({ height: 26, - borderRadius: 4, - padding: '0 8px', + borderRadius: 8, + padding: '0 12px', + fontSize: cssVar('fontXs'), }); -export const primaryRow = style([ - row, - { - color: cssVarV2('text/primary'), - }, -]); +export const titleRow = style({ + display: 'inline-flex', + alignItems: 'center', + fontSize: cssVar('fontSm'), + color: cssVarV2('text/primary'), + fontWeight: 500, +}); + +export const subtitleRow = style({ + fontSize: cssVar('fontXs'), + color: cssVarV2('text/primary'), + marginTop: 4, +}); -export const icon = style({ +export const controlsRow = style({ + display: 'flex', + alignItems: 'center', + marginTop: 8, +}); + +export const rememberLabel = style({ + display: 'flex', + alignItems: 'center', + gap: 4, + fontWeight: 500, + fontSize: cssVar('fontXs'), + cursor: 'pointer', +}); + +export const rememberCheckbox = style({ width: 20, height: 20, flexShrink: 0, fontSize: 20, - selectors: { - [`${primaryRow} &`]: { - color: cssVarV2('icon/activated'), - }, - }, + color: cssVarV2('icon/primary'), +}); + +export const closeButton = style({ + width: 24, + height: 24, + flexShrink: 0, + fontSize: 24, +}); + +export const contentCol = style({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + flex: 1, +}); + +export const appIconCol = style({ + display: 'flex', + justifyContent: 'flex-start', +}); + +export const appIcon = style({ + width: 48, + height: 48, + flexShrink: 0, +}); + +export const spacer = style({ + flex: 1, +}); + +export const link = style({ + color: cssVarV2('text/link'), + textDecoration: 'underline', }); diff --git a/packages/frontend/core/src/modules/app-sidebar/views/open-in-app-card/open-in-app-card.tsx b/packages/frontend/core/src/modules/app-sidebar/views/open-in-app-card/open-in-app-card.tsx index 254020fd25e36..f1d09d748b2e9 100644 --- a/packages/frontend/core/src/modules/app-sidebar/views/open-in-app-card/open-in-app-card.tsx +++ b/packages/frontend/core/src/modules/app-sidebar/views/open-in-app-card/open-in-app-card.tsx @@ -1,18 +1,17 @@ -import { Button, Checkbox } from '@affine/component'; +import { Button, Checkbox, IconButton } from '@affine/component'; import { OpenInAppService, OpenLinkMode, } from '@affine/core/modules/open-in-app'; -import { useI18n } from '@affine/i18n'; -import { track } from '@affine/track'; -import { DownloadIcon, LocalWorkspaceIcon } from '@blocksuite/icons/rc'; +import { appIconMap } from '@affine/core/utils'; +import { Trans, useI18n } from '@affine/i18n'; +import { CloseIcon } from '@blocksuite/icons/rc'; import { useLiveData, useService } from '@toeverything/infra'; -import clsx from 'clsx'; import { useCallback, useState } from 'react'; import * as styles from './open-in-app-card.css'; -export const OpenInAppCard = ({ className }: { className?: string }) => { +export const OpenInAppCard = () => { const openInAppService = useService(OpenInAppService); const show = useLiveData(openInAppService.showOpenInAppBanner$); const t = useI18n(); @@ -22,7 +21,7 @@ export const OpenInAppCard = ({ className }: { className?: string }) => { const onOpen = useCallback(() => { openInAppService.showOpenInAppPage(); if (remember) { - openInAppService.setOpenLinkMode(OpenLinkMode.OPEN_IN_DESKTOP_APP); + openInAppService.dismissBanner(OpenLinkMode.OPEN_IN_DESKTOP_APP); } }, [openInAppService, remember]); @@ -36,59 +35,67 @@ export const OpenInAppCard = ({ className }: { className?: string }) => { setRemember(v => !v); }, []); - const handleDownload = useCallback(() => { - track.$.navigationPanel.bottomButtons.downloadApp(); - const url = `https://affine.pro/download?channel=stable`; - open(url, '_blank'); - }, []); - - if (!show) { - return null; - } + const appIcon = appIconMap[BUILD_CONFIG.appBuildType]; return ( -
-
-
- -
{t.t('com.affine.open-in-app.card.title')}
+
+
+ app icon +
+
+
+ {t.t('com.affine.open-in-app.card.title')} +
+ } + onClick={onDismiss} + />
-
-
{/* placeholder */}
+
+ + No desktop app? + + Click to download + + . + +
+
+ +
- -
-
- -
{t.t('com.affine.open-in-app.card.remember')}
-
-
- -
-
- -
{t.t('com.affine.open-in-app.card.download')}
-
-
); }; diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 7ff09941c2e0f..271bfd23c3ad4 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1029,10 +1029,11 @@ "com.affine.setting.appearance.open-in-app.open-in-desktop-app": "Open links in desktop app", "com.affine.setting.appearance.open-in-app.open-in-web": "Open links in browser", "com.affine.setting.appearance.open-in-app.title": "Open AFFiNE links", - "com.affine.open-in-app.card.title": "Open this page in app?", + "com.affine.open-in-app.card.title": "Open this page in AFFiNE app", + "com.affine.open-in-app.card.subtitle": "No desktop app? <1>Click to download.", "com.affine.open-in-app.card.button.open": "Open in app", "com.affine.open-in-app.card.button.dismiss": "Dismiss", - "com.affine.open-in-app.card.remember": "Remember my choice", + "com.affine.open-in-app.card.remember": "Remember choice", "com.affine.open-in-app.card.download": "Download desktop app", "com.affine.settings.auto-check-description": "If enabled, it will automatically check for new versions at regular intervals.", "com.affine.settings.auto-download-description": "If enabled, new versions will be automatically downloaded to the current device.",