style: move trash button group to page bottom (#3352)

2026-02-11 20:08:37 +00:00 · 2023-07-25 13:21:16 +08:00
parent be81e63eed
commit e3f66d7e22
12 changed files with 136 additions and 103 deletions
--- a/apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx
@@ -43,6 +43,9 @@ export const EditorModeSwitch = ({
  assertExists(pageMeta);
  const { trash } = pageMeta;
  useEffect(() => {
+    if (trash) {
+      return;
+    }
    const keydown = (e: KeyboardEvent) => {
      if (
        !environment.isServer && environment.isMacOs
@@ -64,7 +67,7 @@ export const EditorModeSwitch = ({
    document.addEventListener('keydown', keydown, { capture: true });
    return () =>
      document.removeEventListener('keydown', keydown, { capture: true });
-  }, [setSetting, t]);
+  }, [setSetting, t, trash]);

  return (
    <Tooltip content={<TooltipContent />}>
@@ -77,6 +80,7 @@ export const EditorModeSwitch = ({
          data-testid="switch-page-mode-button"
          active={currentMode === 'page'}
          hide={trash && currentMode !== 'page'}
+          trash={trash}
          onClick={() => {
            setSetting(setting => {
              if (setting?.mode !== 'page') {
@@ -90,6 +94,7 @@ export const EditorModeSwitch = ({
          data-testid="switch-edgeless-mode-button"
          active={currentMode === 'edgeless'}
          hide={trash && currentMode !== 'edgeless'}
+          trash={trash}
          onClick={() => {
            setSetting(setting => {
              if (setting?.mode !== 'edgeless') {
--- a/apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
+++ b/apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
@@ -34,14 +34,19 @@ export const StyledEditorModeSwitch = styled('div')<{
 export const StyledSwitchItem = styled('button')<{
  active?: boolean;
  hide?: boolean;
-}>(({ active = false, hide = false }) => {
+  trash?: boolean;
+}>(({ active = false, hide = false, trash = false }) => {
  return {
    width: '24px',
    height: '24px',
    borderRadius: '8px',
    WebkitAppRegion: 'no-drag',
    boxShadow: active ? 'var(--affine-shadow-1)' : 'none',
-    color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
+    color: active
+      ? trash
+        ? 'var(--affine-error-color)'
+        : 'var(--affine-primary-color)'
+      : 'var(--affine-icon-color)',
    display: hide ? 'none' : 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
--- a/apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/switch-items.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/switch-items.tsx
@@ -8,12 +8,14 @@ import { StyledSwitchItem } from './style';
 type HoverAnimateControllerProps = {
  active?: boolean;
  hide?: boolean;
+  trash?: boolean;
  children: React.ReactElement;
 } & HTMLAttributes<HTMLButtonElement>;

 const HoverAnimateController = ({
  active,
  hide,
+  trash,
  children,
  ...props
 }: HoverAnimateControllerProps) => {
@@ -22,6 +24,7 @@ const HoverAnimateController = ({
    <StyledSwitchItem
      hide={hide}
      active={active}
+      trash={trash}
      onMouseEnter={() => {
        setStartAnimate(true);
      }}
--- a/apps/core/src/components/blocksuite/workspace-header/header-right-items/styles.css.ts
+++ b/apps/core/src/components/blocksuite/workspace-header/header-right-items/styles.css.ts
@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css';
+
+export const group = style({
+  width: '100%',
+  position: 'absolute',
+  bottom: '100px',
+  left: '0',
+  display: 'flex',
+  gap: '24px',
+  justifyContent: 'center',
+});
+export const buttonContainer = style({
+  boxShadow: 'var(--affine-float-button-shadow-2)',
+  borderRadius: '8px',
+});
--- a/apps/core/src/components/blocksuite/workspace-header/header-right-items/trash-button-group.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/header-right-items/trash-button-group.tsx
@@ -10,7 +10,7 @@ import { useCallback, useState } from 'react';
 import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../../../../hooks/use-navigate-helper';
-
+import { buttonContainer, group } from './styles.css';
 export const TrashButtonGroup = () => {
  // fixme(himself65): remove these hooks ASAP
  const [workspace] = useCurrentWorkspace();
@@ -29,25 +29,29 @@ export const TrashButtonGroup = () => {
  const [open, setOpen] = useState(false);

  return (
-    <>
-      <Button
-        shape="round"
-        style={{ marginRight: '24px' }}
-        onClick={() => {
-          restoreFromTrash(pageId);
-        }}
-      >
-        {t['Restore it']()}
-      </Button>
-      <Button
-        shape="round"
-        type="error"
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
-        {t['Delete permanently']()}
-      </Button>
+    <div className={group}>
+      <div className={buttonContainer}>
+        <Button
+          type="processing"
+          onClick={() => {
+            restoreFromTrash(pageId);
+          }}
+          size="large"
+        >
+          {t['Restore it']()}
+        </Button>
+      </div>
+      <div className={buttonContainer}>
+        <Button
+          type="error"
+          onClick={() => {
+            setOpen(true);
+          }}
+          size="large"
+        >
+          {t['Delete permanently']()}
+        </Button>
+      </div>
      <Confirm
        title={t['TrashButtonGroupTitle']()}
        content={t['TrashButtonGroupDescription']()}
@@ -65,7 +69,7 @@ export const TrashButtonGroup = () => {
          setOpen(false);
        }}
      />
-    </>
+    </div>
  );
 };

--- a/apps/core/src/components/blocksuite/workspace-header/header.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/header.tsx
@@ -23,7 +23,6 @@ import { currentModeAtom } from '../../../atoms/mode';
 import type { AffineOfficialWorkspace } from '../../../shared';
 import DownloadClientTip from './download-tips';
 import { EditorOptionMenu } from './header-right-items/editor-option-menu';
-import TrashButtonGroup from './header-right-items/trash-button-group';
 import * as styles from './styles.css';
 import { OSWarningMessage, shouldShowWarning } from './utils';

@@ -38,7 +37,6 @@ export type BaseHeaderProps<

 export enum HeaderRightItemName {
  EditorOptionMenu = 'editorOptionMenu',
-  TrashButtonGroup = 'trashButtonGroup',
  // some windows only items
  WindowsAppControls = 'windowsAppControls',
 }
@@ -56,16 +54,10 @@ type HeaderItem = {
 };

 const HeaderRightItems: Record<HeaderRightItemName, HeaderItem> = {
-  [HeaderRightItemName.TrashButtonGroup]: {
-    Component: TrashButtonGroup,
-    availableWhen: (_, currentPage) => {
-      return currentPage?.meta.trash === true;
-    },
-  },
  [HeaderRightItemName.EditorOptionMenu]: {
    Component: EditorOptionMenu,
    availableWhen: (_, currentPage, { isPublic }) => {
-      return !isPublic;
+      return !isPublic && currentPage?.meta.trash !== true;
    },
  },
  [HeaderRightItemName.WindowsAppControls]: {
--- a/apps/core/src/components/page-detail-editor.tsx
+++ b/apps/core/src/components/page-detail-editor.tsx
@@ -25,6 +25,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { pageSettingFamily } from '../atoms';
 import { fontStyleOptions, useAppSetting } from '../atoms/settings';
 import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
+import TrashButtonGroup from './blocksuite/workspace-header/header-right-items/trash-button-group';
 import * as styles from './page-detail-editor.css';
 import { pluginContainer } from './page-detail-editor.css';

@@ -67,62 +68,65 @@ const EditorWrapper = memo(function EditorWrapper({
  }, [appSettings.fontStyle]);

  return (
-    <Editor
-      className={clsx(styles.editor, {
-        'full-screen': appSettings.fullWidthLayout,
-      })}
-      style={
-        {
-          '--affine-font-family': value,
-        } as CSSProperties
-      }
-      key={`${workspace.id}-${pageId}`}
-      mode={isPublic ? 'page' : currentMode}
-      page={page}
-      onInit={useCallback(
-        (page: Page, editor: Readonly<EditorContainer>) => {
-          onInit(page, editor);
-        },
-        [onInit]
-      )}
-      setBlockHub={setBlockHub}
-      onLoad={useCallback(
-        (page: Page, editor: EditorContainer) => {
-          page.workspace.setPageMeta(page.id, {
-            updatedDate: Date.now(),
-          });
-          localStorage.setItem('last_page_id', page.id);
-          let dispose = () => {};
-          if (onLoad) {
-            dispose = onLoad(page, editor);
-          }
-          const editorItems = rootStore.get(editorItemsAtom);
-          let disposes: (() => void)[] = [];
-          const renderTimeout = setTimeout(() => {
-            disposes = Object.entries(editorItems).map(([id, editorItem]) => {
-              const div = document.createElement('div');
-              div.setAttribute('plugin-id', id);
-              const cleanup = editorItem(div, editor);
-              assertExists(parent);
-              document.body.appendChild(div);
-              return () => {
-                cleanup();
-                document.body.removeChild(div);
-              };
+    <>
+      <Editor
+        className={clsx(styles.editor, {
+          'full-screen': appSettings.fullWidthLayout,
+        })}
+        style={
+          {
+            '--affine-font-family': value,
+          } as CSSProperties
+        }
+        key={`${workspace.id}-${pageId}`}
+        mode={isPublic ? 'page' : currentMode}
+        page={page}
+        onInit={useCallback(
+          (page: Page, editor: Readonly<EditorContainer>) => {
+            onInit(page, editor);
+          },
+          [onInit]
+        )}
+        setBlockHub={setBlockHub}
+        onLoad={useCallback(
+          (page: Page, editor: EditorContainer) => {
+            page.workspace.setPageMeta(page.id, {
+              updatedDate: Date.now(),
+            });
+            localStorage.setItem('last_page_id', page.id);
+            let dispose = () => {};
+            if (onLoad) {
+              dispose = onLoad(page, editor);
+            }
+            const editorItems = rootStore.get(editorItemsAtom);
+            let disposes: (() => void)[] = [];
+            const renderTimeout = setTimeout(() => {
+              disposes = Object.entries(editorItems).map(([id, editorItem]) => {
+                const div = document.createElement('div');
+                div.setAttribute('plugin-id', id);
+                const cleanup = editorItem(div, editor);
+                assertExists(parent);
+                document.body.appendChild(div);
+                return () => {
+                  cleanup();
+                  document.body.removeChild(div);
+                };
+              });
            });
-          });

-          return () => {
-            dispose();
-            clearTimeout(renderTimeout);
-            setTimeout(() => {
-              disposes.forEach(dispose => dispose());
-            });
-          };
-        },
-        [onLoad]
-      )}
-    />
+            return () => {
+              dispose();
+              clearTimeout(renderTimeout);
+              setTimeout(() => {
+                disposes.forEach(dispose => dispose());
+              });
+            };
+          },
+          [onLoad]
+        )}
+      />
+      {meta.trash && <TrashButtonGroup />}
+    </>
  );
 });