fix: open in app card style (#8667)

2026-02-25 18:26:05 +08:00 · 2024-11-01 18:42:09 +08:00
parent 7e71395c8e
commit ecbf5a95fa
8 changed files with 149 additions and 92 deletions
--- 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',
      }}
    >
-      <MenuTrigger
-        style={{ textTransform: 'capitalize', fontWeight: 600, width: '250px' }}
-        block={true}
-      >
+      <MenuTrigger style={{ fontWeight: 600, width: '250px' }} block={true}>
        {options.find(option => option.value === currentOpenInAppMode)?.label}
      </MenuTrigger>
    </Menu>
--- 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 (
    <div className={styles.browserAppViewContainer}>
+      <OpenInAppCard />
      <RootAppSidebar />
      <MainContainer>{children}</MainContainer>
    </div>
--- 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 => {
        </div>
      </SidebarScrollableContainer>
      <SidebarContainer>
-        {BUILD_CONFIG.isElectron ? <UpdaterButton /> : <OpenInAppCard />}
+        {BUILD_CONFIG.isElectron ? <UpdaterButton /> : <AppDownloadButton />}
      </SidebarContainer>
    </AppSidebar>
  );
--- 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',
-});
--- 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}
          <SharePageFooter />
        </div>
-        <OpenInAppCard className={styles.shareCard} />
+        <OpenInAppCard />
      </div>
    </MainContainer>
  );
--- 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 icon = style({
+export const subtitleRow = style({
+  fontSize: cssVar('fontXs'),
+  color: cssVarV2('text/primary'),
+  marginTop: 4,
+});
+
+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',
 });
--- 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,34 +35,48 @@ 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 (
-    <div className={clsx(styles.root, className)}>
-      <div className={styles.pane}>
-        <div className={styles.primaryRow}>
-          <LocalWorkspaceIcon className={styles.icon} />
-          <div>{t.t('com.affine.open-in-app.card.title')}</div>
+    <div className={styles.root} data-hidden={!show}>
+      <div className={styles.appIconCol}>
+        <img src={appIcon} alt="app icon" width={48} height={48} />
+      </div>
+      <div className={styles.contentCol}>
+        <div className={styles.titleRow}>
+          {t.t('com.affine.open-in-app.card.title')}
+          <div className={styles.spacer} />
+          <IconButton
+            className={styles.closeButton}
+            icon={<CloseIcon />}
+            onClick={onDismiss}
+          />
        </div>
-        <div className={styles.row}>
-          <div className={styles.icon}>{/* placeholder */}</div>
-          <div className={styles.buttonGroup}>
-            <Button
-              variant="primary"
-              size="custom"
-              className={styles.button}
-              onClick={onOpen}
+        <div className={styles.subtitleRow}>
+          <Trans i18nKey="com.affine.open-in-app.card.subtitle">
+            No desktop app?
+            <a
+              href="https://affine.pro/download"
+              target="_blank"
+              rel="noreferrer"
+              className={styles.link}
            >
-              {t.t('com.affine.open-in-app.card.button.open')}
-            </Button>
+              Click to download
+            </a>
+            .
+          </Trans>
+        </div>
+        <div className={styles.controlsRow}>
+          <label className={styles.rememberLabel}>
+            <Checkbox
+              className={styles.rememberCheckbox}
+              checked={remember}
+              onChange={onToggleRemember}
+            />
+            {t.t('com.affine.open-in-app.card.remember')}
+          </label>
+          <div className={styles.spacer} />
+          <div className={styles.buttonGroup}>
            <Button
              variant="secondary"
              size="custom"
@@ -72,23 +85,17 @@ export const OpenInAppCard = ({ className }: { className?: string }) => {
            >
              {t.t('com.affine.open-in-app.card.button.dismiss')}
            </Button>
+            <Button
+              variant="primary"
+              size="custom"
+              className={styles.button}
+              onClick={onOpen}
+            >
+              {t.t('com.affine.open-in-app.card.button.open')}
+            </Button>
          </div>
        </div>
      </div>
-
-      <div className={styles.pane}>
-        <div className={styles.clickableRow} onClick={onToggleRemember}>
-          <Checkbox className={styles.icon} checked={remember} />
-          <div>{t.t('com.affine.open-in-app.card.remember')}</div>
-        </div>
-      </div>
-
-      <div className={styles.pane}>
-        <div className={styles.clickableRow} onClick={handleDownload}>
-          <DownloadIcon className={styles.icon} />
-          <div>{t.t('com.affine.open-in-app.card.download')}</div>
-        </div>
-      </div>
    </div>
  );
 };