diff --git a/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx b/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx index a767254336..4c145ccf57 100644 --- a/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx +++ b/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx @@ -16,7 +16,7 @@ import { } from '@toeverything/hooks/use-block-suite-page-meta'; import { currentPageIdAtom } from '@toeverything/plugin-infra/atom'; import { useAtom, useAtomValue } from 'jotai'; -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import { useParams } from 'react-router-dom'; import { pageSettingFamily } from '../../../../atoms'; @@ -24,7 +24,6 @@ import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suit import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace'; import { toast } from '../../../../utils'; import { MenuThemeModeSwitch } from '../header-right-items/theme-mode-switch'; -import * as styles from '../styles.css'; import { LanguageMenu } from './language-menu'; const CommonMenu = () => { const content = ( @@ -71,61 +70,56 @@ const PageMenu = () => { const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace); const [openConfirm, setOpenConfirm] = useState(false); const { removeToTrash } = useBlockSuiteMetaHelper(blockSuiteWorkspace); + const handleFavorite = useCallback(() => { + setPageMeta(pageId, { favorite: !favorite }); + toast(favorite ? t['Removed from Favorites']() : t['Added to Favorites']()); + }, [favorite, pageId, setPageMeta, t]); + const handleSwitchMode = useCallback(() => { + setSetting(setting => ({ + mode: setting?.mode === 'page' ? 'edgeless' : 'page', + })); + toast( + mode === 'page' + ? t['com.affine.edgelessMode']() + : t['com.affine.pageMode']() + ); + }, [mode, setSetting, t]); + const handleOnConfirm = useCallback(() => { + removeToTrash(pageMeta.id); + toast(t['Moved to Trash']()); + setOpenConfirm(false); + }, [pageMeta.id, removeToTrash, t]); + const EditMenu = ( <> - <> - { - setPageMeta(pageId, { favorite: !favorite }); - toast( - favorite - ? t['Removed from Favorites']() - : t['Added to Favorites']() - ); - }} - icon={ - favorite ? ( - - ) : ( - - ) - } - > - {favorite ? t['Remove from favorites']() : t['Add to Favorites']()} - - : } - data-testid="editor-option-menu-edgeless" - onClick={() => { - setSetting(setting => ({ - mode: setting?.mode === 'page' ? 'edgeless' : 'page', - })); - }} - > - {t['Convert to ']()} - {mode === 'page' ? t['Edgeless']() : t['Page']()} - - - { - setOpenConfirm(true); - }} - /> -
-
-
- - -
{ - e.stopPropagation(); - }} + + ) : ( + + ) + } > - - -
+ {favorite ? t['Remove from favorites']() : t['Add to Favorites']()} + + : } + data-testid="editor-option-menu-edgeless" + onClick={handleSwitchMode} + > + {t['Convert to ']()} + {mode === 'page' ? t['Edgeless']() : t['Page']()} + + + { + setOpenConfirm(true); + }} + /> ); @@ -145,11 +139,7 @@ const PageMenu = () => { { - removeToTrash(pageMeta.id); - toast(t['Moved to Trash']()); - setOpenConfirm(false); - }} + onConfirm={handleOnConfirm} onCancel={() => { setOpenConfirm(false); }} diff --git a/apps/core/src/components/blocksuite/workspace-header/header.tsx b/apps/core/src/components/blocksuite/workspace-header/header.tsx index 9416f00160..67cdcae9d3 100644 --- a/apps/core/src/components/blocksuite/workspace-header/header.tsx +++ b/apps/core/src/components/blocksuite/workspace-header/header.tsx @@ -57,7 +57,9 @@ const HeaderRightItems: Record = { [HeaderRightItemName.EditorOptionMenu]: { Component: EditorOptionMenu, availableWhen: (_, currentPage, { isPublic }) => { - return !isPublic && currentPage?.meta.trash !== true; + return ( + !isPublic && currentPage?.meta.trash !== true && currentPage !== null + ); }, }, [HeaderRightItemName.WindowsAppControls]: { diff --git a/apps/electron/e2e/basic.spec.ts b/apps/electron/e2e/basic.spec.ts index c7fa125cc1..10d34e5f4c 100644 --- a/apps/electron/e2e/basic.spec.ts +++ b/apps/electron/e2e/basic.spec.ts @@ -96,9 +96,10 @@ test('app theme', async ({ page, electronApp }) => { } { - await page.getByTestId('editor-option-menu').click(); - await page.getByTestId('change-theme-dark').click(); + await page.getByTestId('settings-modal-trigger').click(); + await page.getByTestId('appearance-panel-trigger').click(); await page.waitForTimeout(50); + await page.getByTestId('dark-theme-trigger').click(); const themeMode = await root.evaluate(element => element.getAttribute('data-theme') ); diff --git a/tests/affine-local/e2e/local-first-workspace.spec.ts b/tests/affine-local/e2e/local-first-workspace.spec.ts index 446af6ac0e..af602c8e99 100644 --- a/tests/affine-local/e2e/local-first-workspace.spec.ts +++ b/tests/affine-local/e2e/local-first-workspace.spec.ts @@ -13,18 +13,3 @@ test('preset workspace name', async ({ page, workspace }) => { expect(currentWorkspace.flavour).toContain('local'); }); - -test('Open language switch menu', async ({ page, workspace }) => { - await openHomePage(page); - await waitEditorLoad(page); - const editorOptionMenuButton = page.getByTestId('editor-option-menu'); - await expect(editorOptionMenuButton).toBeVisible(); - await editorOptionMenuButton.click(); - const languageMenuButton = page.getByTestId('language-menu-button'); - await expect(languageMenuButton).toBeVisible(); - const actual = await languageMenuButton.innerText(); - expect(actual).toEqual('English'); - const currentWorkspace = await workspace.current(); - - expect(currentWorkspace.flavour).toContain('local'); -}); diff --git a/tests/affine-local/e2e/theme.spec.ts b/tests/affine-local/e2e/theme.spec.ts index 23c1cc09ca..f74be753af 100644 --- a/tests/affine-local/e2e/theme.spec.ts +++ b/tests/affine-local/e2e/theme.spec.ts @@ -21,9 +21,14 @@ test('default white', async ({ browser }) => { await page.screenshot({ path: resolve(testResultDir, 'affine-light-theme.png'), }); - await page.getByTestId('editor-option-menu').click(); - await page.getByTestId('change-theme-dark').click(); + await page.getByTestId('settings-modal-trigger').click(); + await page.getByTestId('appearance-panel-trigger').click(); await page.waitForTimeout(50); + await page.getByTestId('dark-theme-trigger').click(); + const darkMode = await root.evaluate(element => + element.getAttribute('data-theme') + ); + expect(darkMode).toBe('dark'); await page.screenshot({ path: resolve(testResultDir, 'affine-dark-theme.png'), });