diff --git 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 index 0c6ca2522d..84113b6269 100644 --- 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 ( }> @@ -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') { diff --git 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 index 361b9b9492..122d4aba79 100644 --- 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', diff --git 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 index fced11a0bd..cef19bd4f7 100644 --- 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; const HoverAnimateController = ({ active, hide, + trash, children, ...props }: HoverAnimateControllerProps) => { @@ -22,6 +24,7 @@ const HoverAnimateController = ({ { setStartAnimate(true); }} diff --git 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 new file mode 100644 index 0000000000..29160566d2 --- /dev/null +++ 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', +}); diff --git 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 index 76c10227cf..801345811e 100644 --- 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 ( - <> - - +
+
+ +
+
+ +
{ setOpen(false); }} /> - +
); }; diff --git a/apps/core/src/components/blocksuite/workspace-header/header.tsx b/apps/core/src/components/blocksuite/workspace-header/header.tsx index e7f197dcfc..dcbd1967fa 100644 --- 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.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]: { diff --git a/apps/core/src/components/page-detail-editor.tsx b/apps/core/src/components/page-detail-editor.tsx index 9da3611b7e..bfe1605df7 100644 --- 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 ( - ) => { - 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); - }; + <> + ) => { + 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 && } + ); }); diff --git a/packages/component/package.json b/packages/component/package.json index 45f3841ecc..d1c64e4acc 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -37,7 +37,7 @@ "@radix-ui/react-toast": "^1.1.4", "@toeverything/hooks": "workspace:*", "@toeverything/plugin-infra": "workspace:*", - "@toeverything/theme": "^0.7.7", + "@toeverything/theme": "^0.7.9", "@vanilla-extract/dynamic": "^2.0.3", "clsx": "^2.0.0", "dayjs": "^1.11.9", diff --git a/packages/component/src/ui/button/style.css.ts b/packages/component/src/ui/button/style.css.ts index e2f405e510..d70f58e389 100644 --- a/packages/component/src/ui/button/style.css.ts +++ b/packages/component/src/ui/button/style.css.ts @@ -70,7 +70,7 @@ export const button = style({ color: 'var(--affine-white)', background: 'var(--affine-primary-color)', borderColor: 'var(--affine-black-10)', - boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', + boxShadow: 'var(--affine-button-inner-shadow)', }, '&.primary:hover': { background: @@ -85,10 +85,10 @@ export const button = style({ }, '&.error': { - color: 'var(--affine-white)', + color: 'var(--affine-pure-white)', background: 'var(--affine-error-color)', borderColor: 'var(--affine-black-10)', - boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', + boxShadow: 'var(--affine-button-inner-shadow)', }, '&.error:hover': { background: @@ -106,7 +106,7 @@ export const button = style({ color: 'var(--affine-white)', background: 'var(--affine-warning-color)', borderColor: 'var(--affine-black-10)', - boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', + boxShadow: 'var(--affine-button-inner-shadow)', }, '&.warning:hover': { background: @@ -121,10 +121,10 @@ export const button = style({ }, '&.success': { - color: 'var(--affine-white)', + color: 'var(--affine-pure-white)', background: 'var(--affine-success-color)', borderColor: 'var(--affine-black-10)', - boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', + boxShadow: 'var(--affine-button-inner-shadow)', }, '&.success:hover': { background: @@ -139,10 +139,10 @@ export const button = style({ }, '&.processing': { - color: 'var(--affine-white)', + color: 'var(--affine-pure-white)', background: 'var(--affine-processing-color)', borderColor: 'var(--affine-black-10)', - boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', + boxShadow: 'var(--affine-button-inner-shadow)', }, '&.processing:hover': { background: diff --git a/packages/component/src/ui/confirm/confirm.tsx b/packages/component/src/ui/confirm/confirm.tsx index b9189f1760..77645894da 100644 --- a/packages/component/src/ui/confirm/confirm.tsx +++ b/packages/component/src/ui/confirm/confirm.tsx @@ -52,10 +52,10 @@ export const Confirm = ({ {buttonDirection === 'row' ? (