From d1f2facf75fb804e7b987a4e1c986ea341ba0556 Mon Sep 17 00:00:00 2001 From: alt0 Date: Mon, 19 Dec 2022 15:44:08 +0800 Subject: [PATCH 1/7] feat: workspace router --- .../WorkspaceItem/WorkspaceItem.tsx | 11 ++++++-- .../WorkspaceSelector/WorkspaceSelector.tsx | 1 + .../workspace/[workspaceId]/[pageId].tsx | 27 +++++++++++++++++++ .../pages/workspace/[workspaceId]/index.tsx | 5 ++++ .../editor-provider/editor-provider.tsx | 20 ++++++++++++-- .../editor-provider/editor-reactor.tsx | 14 +++++----- 6 files changed, 67 insertions(+), 11 deletions(-) create mode 100644 packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx create mode 100644 packages/app/src/pages/workspace/[workspaceId]/index.tsx diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx index 9f0e6d735e..717bd2919c 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx @@ -1,3 +1,4 @@ +import { useRouter } from 'next/router'; import { styled } from '@/styles'; import { WorkspaceItemAvatar, @@ -13,9 +14,15 @@ interface WorkspaceItemProps { icon: string; } -export const WorkspaceItem = ({ name, icon }: WorkspaceItemProps) => { +export const WorkspaceItem = ({ id, name, icon }: WorkspaceItemProps) => { + const router = useRouter(); + return ( - + { + router.push(`/workspace/${id}`); + }} + > {name.charAt(0)} diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx index b6bd822717..94e4514fce 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx @@ -8,6 +8,7 @@ export const WorkspaceSelector = () => { content={} zIndex={1000} placement="bottom-start" + trigger="hover" > diff --git a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx new file mode 100644 index 0000000000..fcc7770e04 --- /dev/null +++ b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx @@ -0,0 +1,27 @@ +import type { NextPage } from 'next'; +import { styled } from '@/styles'; +import { EditorHeader } from '@/components/header'; +import EdgelessToolbar from '@/components/edgeless-toolbar'; +import MobileModal from '@/components/mobile-modal'; +import Editor from '@/components/editor'; + +const StyledEditorContainer = styled('div')(({ theme }) => { + return { + height: 'calc(100vh - 60px)', + }; +}); + +const Home: NextPage = () => { + return ( + <> + + + + + + + + ); +}; + +export default Home; diff --git a/packages/app/src/pages/workspace/[workspaceId]/index.tsx b/packages/app/src/pages/workspace/[workspaceId]/index.tsx new file mode 100644 index 0000000000..ef0a603c9e --- /dev/null +++ b/packages/app/src/pages/workspace/[workspaceId]/index.tsx @@ -0,0 +1,5 @@ +const Page = () => { + return
Hello, there is [pageId]/index
; +}; + +export default Page; diff --git a/packages/app/src/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx index 9dc473966b..cd66e0e74a 100644 --- a/packages/app/src/providers/editor-provider/editor-provider.tsx +++ b/packages/app/src/providers/editor-provider/editor-provider.tsx @@ -1,6 +1,13 @@ import type { EditorContainer } from '@blocksuite/editor'; -import { createContext, useContext, useEffect, useState } from 'react'; +import { + createContext, + useContext, + useEffect, + useState, + useCallback, +} from 'react'; import type { PropsWithChildren } from 'react'; +import { useRouter } from 'next/router'; import dynamic from 'next/dynamic'; import Loading from './loading'; import { Page, Workspace } from '@blocksuite/store'; @@ -35,8 +42,17 @@ export const useEditor = () => useContext(EditorContext); export const EditorProvider = ({ children, }: PropsWithChildren) => { + const router = useRouter(); const [workspace, setWorkspace] = useState(); - const [page, setPage] = useState(); + const [page, _setPage] = useState(); + const workspaceId = router.query.workspaceId as string; + const setPage = useCallback( + (page: Page) => { + _setPage(page); + router.push(`/workspace/${workspaceId}/${page.id.replace('space:', '')}`); + }, + [_setPage, workspaceId] + ); const [pageList, setPageList] = useState([]); const [editor, setEditor] = useState(); diff --git a/packages/app/src/providers/editor-provider/editor-reactor.tsx b/packages/app/src/providers/editor-provider/editor-reactor.tsx index e2fdb5c981..1deb6ca9e8 100644 --- a/packages/app/src/providers/editor-provider/editor-reactor.tsx +++ b/packages/app/src/providers/editor-provider/editor-reactor.tsx @@ -19,13 +19,13 @@ import { import { useRouter } from 'next/router'; import { createPage } from '@/providers/editor-provider/utils'; -const getEditorParams = () => { +const getEditorParams = (workspaceId: string) => { const providers = []; const params = new URLSearchParams(location.search); - const room = params.get('room') ?? 'AFFINE-pathfinder'; + // const room = params.get('room') ?? 'AFFINE-pathfinder'; if (params.get('syncMode') === 'websocket') { const WebsocketDocProvider = createWebsocketDocProvider( - 'ws://127.0.0.1:3000/collaboration/AFFiNE' + `ws://${window.location.host}/collaboration/` ); providers.push(WebsocketDocProvider); } @@ -33,7 +33,7 @@ const getEditorParams = () => { providers.push(IndexedDBDocProvider); return { - room, + room: workspaceId, providers, }; }; @@ -53,12 +53,12 @@ const EditorReactor = ({ }) => { const shouldInitIntroduction = useRef(false); const { - query: { pageId: routerPageId }, + query: { pageId: routerPageId, workspaceId }, } = useRouter(); useEffect(() => { const workspace = new Workspace({ - ...getEditorParams(), + ...getEditorParams(workspaceId as string), }).register(BlockSchema); //@ts-ignore window.workspace = workspace; @@ -72,7 +72,7 @@ const EditorReactor = ({ } else { setWorkspace(workspace); } - }, [setWorkspace]); + }, [setWorkspace, workspaceId]); useEffect(() => { if (!workspace) { From b8e9da07bd7e48e6d64a7b77450034a55084a42b Mon Sep 17 00:00:00 2001 From: JimmFly Date: Mon, 19 Dec 2022 16:16:06 +0800 Subject: [PATCH 2/7] chore: update variable name --- packages/app/src/components/header/quick-search-button.tsx | 3 ++- packages/app/src/components/quick-search/results.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/app/src/components/header/quick-search-button.tsx b/packages/app/src/components/header/quick-search-button.tsx index 6c5a484a70..a08c61bf65 100644 --- a/packages/app/src/components/header/quick-search-button.tsx +++ b/packages/app/src/components/header/quick-search-button.tsx @@ -11,8 +11,9 @@ export const QuickSearchButton = ({ const { triggerQuickSearchModal } = useModal(); return ( - + { onClick?.(e); diff --git a/packages/app/src/components/quick-search/results.tsx b/packages/app/src/components/quick-search/results.tsx index d011b6c8ed..c87a5d08b2 100644 --- a/packages/app/src/components/quick-search/results.tsx +++ b/packages/app/src/components/quick-search/results.tsx @@ -70,7 +70,7 @@ export const Results = (props: { ) ) : ( - + {List.map(link => { return ( Date: Mon, 19 Dec 2022 16:34:28 +0800 Subject: [PATCH 3/7] feat: reset api method --- packages/data-services/src/sdks/workspace.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/data-services/src/sdks/workspace.ts b/packages/data-services/src/sdks/workspace.ts index 23796dea9a..76c4680d03 100644 --- a/packages/data-services/src/sdks/workspace.ts +++ b/packages/data-services/src/sdks/workspace.ts @@ -44,7 +44,7 @@ export async function getWorkspaceDetail( ): Promise { const data = await request({ url: `/api/workspace/${params.id}`, - method: 'PUT', + method: 'GET', }); return data.data; From 21e82939d99507e193b630ea6abf0427473dae34 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Mon, 19 Dec 2022 16:43:04 +0800 Subject: [PATCH 4/7] chore: update style of quick search --- packages/app/src/components/quick-search/style.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts index ed931cad50..700a6d3c06 100644 --- a/packages/app/src/components/quick-search/style.ts +++ b/packages/app/src/components/quick-search/style.ts @@ -37,10 +37,10 @@ export const StyledJumpTo = styled('div')(({ theme }) => { }); export const StyledNotFound = styled('div')(({ theme }) => { return { - width: '620px', + width: '612px', ...displayFlex('center', 'center'), flexDirection: 'column', - padding: '10px 16px', + padding: '5px 16px', fontSize: theme.font.sm, span: { width: '100%', From 0c7aa70645483dfbef3ebaf07b9c7766a0b54665 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Mon, 19 Dec 2022 16:43:37 +0800 Subject: [PATCH 5/7] test: add test case for quick search --- .../src/components/quick-search/footer.tsx | 1 + .../app/src/components/quick-search/index.tsx | 7 +- .../components/workspace-slider-bar/index.tsx | 18 ++-- tests/libs/keyboard.ts | 82 +++++++++++++++++++ tests/quick-search.spec.ts | 66 +++++++++++++++ 5 files changed, 164 insertions(+), 10 deletions(-) create mode 100644 tests/libs/keyboard.ts create mode 100644 tests/quick-search.spec.ts diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx index eea6dee2c4..05229bbf55 100644 --- a/packages/app/src/components/quick-search/footer.tsx +++ b/packages/app/src/components/quick-search/footer.tsx @@ -12,6 +12,7 @@ export const Footer = (props: { query: string }) => { return ( { const page = await createPage({ title: query }); openPage(page.id); diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index f99b029e39..d10c1e42e4 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/packages/app/src/components/quick-search/index.tsx @@ -48,7 +48,12 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { }, [open, triggerQuickSearchModal]); return ( - + { - - { - triggerQuickSearchModal(); - }} - > - Quick search - - + { + triggerQuickSearchModal(); + }} + > + Quick search + All pages @@ -136,6 +135,7 @@ export const WorkSpaceSliderBar = () => { visible={showTip} > { setShow(!show); diff --git a/tests/libs/keyboard.ts b/tests/libs/keyboard.ts new file mode 100644 index 0000000000..0c7e94a576 --- /dev/null +++ b/tests/libs/keyboard.ts @@ -0,0 +1,82 @@ +import type { Page } from '@playwright/test'; + +const IS_MAC = process.platform === 'darwin'; +// const IS_WINDOWS = process.platform === 'win32'; +// const IS_LINUX = !IS_MAC && !IS_WINDOWS; + +async function keyDownCtrlOrMeta(page: Page) { + if (IS_MAC) { + await page.keyboard.down('Meta'); + } else { + await page.keyboard.down('Control'); + } +} + +async function keyUpCtrlOrMeta(page: Page) { + if (IS_MAC) { + await page.keyboard.up('Meta'); + } else { + await page.keyboard.up('Control'); + } +} +async function keyDownOptionMeta(page: Page) { + if (IS_MAC) { + await page.keyboard.down('Alt'); + } else { + await page.keyboard.down('Shift'); + } +} + +async function keyUpOptionMeta(page: Page) { + if (IS_MAC) { + await page.keyboard.up('Alt'); + } else { + await page.keyboard.up('Shift'); + } +} + +// It's not good enough, but better than calling keyDownCtrlOrMeta and keyUpCtrlOrMeta separately +export const withCtrlOrMeta = async (page: Page, fn: () => Promise) => { + await keyDownCtrlOrMeta(page); + await fn(); + await keyUpCtrlOrMeta(page); +}; + +export async function pressEnter(page: Page) { + // avoid flaky test by simulate real user input + await page.keyboard.press('Enter', { delay: 50 }); +} + +export async function pressTab(page: Page) { + await page.keyboard.press('Tab', { delay: 50 }); +} + +export async function pressShiftTab(page: Page) { + await page.keyboard.down('Shift'); + await page.keyboard.press('Tab', { delay: 50 }); + await page.keyboard.up('Shift'); +} + +export async function pressShiftEnter(page: Page) { + await page.keyboard.down('Shift'); + await page.keyboard.press('Enter', { delay: 50 }); + await page.keyboard.up('Shift'); +} + +export async function copyByKeyboard(page: Page) { + await keyDownCtrlOrMeta(page); + await page.keyboard.press('c', { delay: 50 }); + await keyUpCtrlOrMeta(page); +} + +export async function cutByKeyboard(page: Page) { + await keyDownCtrlOrMeta(page); + await page.keyboard.press('x', { delay: 50 }); + await keyUpCtrlOrMeta(page); +} + +export async function pasteByKeyboard(page: Page) { + await keyDownCtrlOrMeta(page); + await page.keyboard.press('v', { delay: 50 }); + await keyUpCtrlOrMeta(page); +} diff --git a/tests/quick-search.spec.ts b/tests/quick-search.spec.ts new file mode 100644 index 0000000000..5aff46f67c --- /dev/null +++ b/tests/quick-search.spec.ts @@ -0,0 +1,66 @@ +import { test, expect, type Page } from '@playwright/test'; +import { loadPage } from './libs/load-page'; +import { withCtrlOrMeta } from './libs/keyboard'; + +loadPage(); +const IS_MAC = process.platform === 'darwin'; +// const IS_WINDOWS = process.platform === 'win32'; +// const IS_LINUX = !IS_MAC && !IS_WINDOWS; + +const openQuickSearchByShortcut = async (page: Page) => + await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 })); + +async function assertTitleTexts( + page: Page, + texts: string[], + option?: { delay: number } +) { + await page.mouse.move(100, 100); // move mouse for focus + const actual = await page + .locator('[class=affine-default-page-block-title]') + .allInnerTexts(); + setTimeout(() => { + expect(actual).toEqual(texts); + }, option?.delay); +} + +test.describe('Open quick search', () => { + test('Click slider bar button', async ({ page }) => { + const quickSearchButton = page.locator( + '[data-testid=sliderBar-quickSearchButton]' + ); + await quickSearchButton.click(); + const quickSearch = page.locator('[data-testid=quickSearch]'); + expect(quickSearch.isVisible()).toEqual(true); + }); + test('Click arrowDown icon after title', async ({ page }) => { + //header-quickSearchButton + const quickSearchButton = page.locator( + '[data-testid=header-quickSearchButton]' + ); + await quickSearchButton.click(); + const quickSearch = page.locator('[data-testid=quickSearch]'); + expect(quickSearch.isVisible()).toEqual(true); + }); + test('Press the shortcut key cmd+k', async ({ page }) => { + await openQuickSearchByShortcut(page); + const quickSearch = page.locator('[data-testid=quickSearch]'); + expect(quickSearch.isVisible()).toEqual(true); + }); +}); + +test.describe('Add new page in quick search', () => { + test('Create a new page without keyword', async ({ page }) => { + await openQuickSearchByShortcut(page); + const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]'); + await addNewPage.click(); + await assertTitleTexts(page, [''], { delay: 50 }); + }); + test('Create a new page with keyword', async ({ page }) => { + await openQuickSearchByShortcut(page); + await page.keyboard.insertText('test'); + const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]'); + await addNewPage.click(); + await assertTitleTexts(page, ['test'], { delay: 50 }); + }); +}); From 0c68c00bd6ad7f21677e10d23a700f01cda3f3cd Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 19 Dec 2022 17:06:14 +0800 Subject: [PATCH 6/7] fix: a series of bugs --- packages/app/src/components/header/header.tsx | 47 +++++++++++++++- .../app/src/components/page-list/index.tsx | 56 +++++++++++++------ .../components/page-list/operation-cell.tsx | 22 +++++--- .../app/src/components/page-list/styles.ts | 25 +-------- .../components/workspace-slider-bar/index.tsx | 20 ++++--- .../components/workspace-slider-bar/style.ts | 50 +++++++++-------- packages/app/src/pages/page-list/favorite.tsx | 2 +- .../providers/editor-provider/interface.ts | 2 +- packages/app/src/ui/button/icon-button.tsx | 1 + packages/app/src/ui/button/styles.ts | 19 +++++-- packages/app/src/ui/table/styles.ts | 7 +++ 11 files changed, 163 insertions(+), 88 deletions(-) diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx index 331f9bfd3d..1efc6ac042 100644 --- a/packages/app/src/components/header/header.tsx +++ b/packages/app/src/components/header/header.tsx @@ -13,6 +13,9 @@ import { ExportToHtmlIcon, ExportToMarkdownIcon, MoreVerticalIcon, + FavouritesIcon, + FavouritedIcon, + TrashIcon, } from '@blocksuite/icons'; import { useEditor } from '@/providers/editor-provider'; import ThemeModeSwitch from '@/components/theme-mode-switch'; @@ -22,15 +25,37 @@ import { getWarningMessage, shouldShowWarning } from './utils'; import { Menu, MenuItem } from '@/ui/menu'; import { useRouter } from 'next/router'; import { useConfirm } from '@/providers/confirm-provider'; -import { useModal } from '@/providers/global-modal-provider'; -import { useAppState } from '@/providers/app-state-provider'; import { SyncIcon } from './sync-icon'; +import { toast } from '@/components/toast'; const PopoverContent = () => { - const { editor, mode, setMode } = useEditor(); + const { + editor, + mode, + setMode, + getPageMeta, + page, + toggleFavoritePage, + toggleDeletePage, + } = useEditor(); + const { confirm } = useConfirm(); + + const { id, favorite, title } = getPageMeta(page?.id) ?? { + id: '', + favorite: false, + title: '', + }; return ( <> + { + toggleFavoritePage(id); + }} + icon={favorite ? : } + > + {favorite ? 'Remove' : 'Add'} to favourites + : } onClick={() => { @@ -66,6 +91,22 @@ const PopoverContent = () => { Export + { + confirm({ + title: 'Delete page?', + content: `${title || 'Untitled'} will be moved to Trash`, + confirmText: 'Delete', + confirmType: 'danger', + }).then(confirm => { + confirm && toggleDeletePage(id); + toast('Moved to Trash'); + }); + }} + icon={} + > + Delete + ); }; diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx index 5fbba9d98e..08d8987bc3 100644 --- a/packages/app/src/components/page-list/index.tsx +++ b/packages/app/src/components/page-list/index.tsx @@ -6,7 +6,6 @@ import { EdgelessIcon, } from '@blocksuite/icons'; import { - StyledFavoriteButton, StyledTableContainer, StyledTableRow, StyledTitleLink, @@ -18,19 +17,31 @@ import Empty from './empty'; import { Content } from '@/ui/layout'; import React from 'react'; import DateCell from '@/components/page-list/date-cell'; -const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => { +import { IconButton } from '@/ui/button'; +import { Tooltip } from '@/ui/tooltip'; +import { router } from 'next/client'; +const FavoriteTag = ({ + pageMeta: { favorite, id }, +}: { + pageMeta: PageMeta; +}) => { const { toggleFavoritePage } = useEditor(); - return ( - { - toggleFavoritePage(pageMeta.id); - }} + - {pageMeta.favorite ? : } - + { + e.stopPropagation(); + toggleFavoritePage(id); + }} + > + {favorite ? : } + + ); }; @@ -52,7 +63,7 @@ export const PageList = ({ - Documents + Title Created {isTrash ? 'Moved to Trash' : 'Updated'} @@ -63,12 +74,18 @@ export const PageList = ({ {pageList.map((pageMeta, index) => { return ( - + { + router.push({ + pathname: '/', + query: { pageId: pageMeta.id }, + }); + }} + > - + {pageMeta.mode === 'edgeless' ? ( ) : ( @@ -87,7 +104,12 @@ export const PageList = ({ dateKey={isTrash ? 'trashDate' : 'updatedDate'} backupKey={isTrash ? 'trashDate' : 'createDate'} /> - + { + e.stopPropagation(); + }} + > {isTrash ? ( ) : ( diff --git a/packages/app/src/components/page-list/operation-cell.tsx b/packages/app/src/components/page-list/operation-cell.tsx index 4f306e6d83..94ce303512 100644 --- a/packages/app/src/components/page-list/operation-cell.tsx +++ b/packages/app/src/components/page-list/operation-cell.tsx @@ -12,7 +12,7 @@ import { OpenInNewIcon, TrashIcon, } from '@blocksuite/icons'; -import React from 'react'; +import { toast } from '@/components/toast'; export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { const { id, favorite } = pageMeta; @@ -41,11 +41,12 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { onClick={() => { confirm({ title: 'Delete page?', - content: `${pageMeta.title} will be moved to Trash`, + content: `${pageMeta.title || 'Untitled'} will be moved to Trash`, confirmText: 'Delete', confirmType: 'danger', }).then(confirm => { confirm && toggleDeletePage(id); + toast('Moved to Trash'); }); }} icon={} @@ -57,7 +58,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { return ( - + @@ -67,31 +68,34 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { const { id } = pageMeta; - const { permanentlyDeletePage, toggleDeletePage } = useEditor(); + const { permanentlyDeletePage, toggleDeletePage, openPage, getPageMeta } = + useEditor(); const { confirm } = useConfirm(); return ( { toggleDeletePage(id); + toast(`${getPageMeta(id)?.title || 'Untitled'} restored`); + openPage(id); }} > { confirm({ - title: 'Permanently delete', - content: - "Once deleted, you can't undo this action. Do you confirm?", + title: 'Delete permanently?', + content: "Once deleted, you can't undo this action.", confirmText: 'Delete', confirmType: 'danger', }).then(confirm => { confirm && permanentlyDeletePage(id); + toast('Permanently deleted'); }); }} > diff --git a/packages/app/src/components/page-list/styles.ts b/packages/app/src/components/page-list/styles.ts index 629f0ffbfc..68f849c6ac 100644 --- a/packages/app/src/components/page-list/styles.ts +++ b/packages/app/src/components/page-list/styles.ts @@ -23,7 +23,7 @@ export const StyledTitleWrapper = styled.div(({ theme }) => { }, }; }); -export const StyledTitleLink = styled(Link)(({ theme }) => { +export const StyledTitleLink = styled.div(({ theme }) => { return { maxWidth: '80%', marginRight: '18px', @@ -34,31 +34,12 @@ export const StyledTitleLink = styled(Link)(({ theme }) => { marginRight: '12px', color: theme.colors.iconColor, }, - ':hover': { - color: theme.colors.textColor, - '>svg': { - color: theme.colors.primaryColor, - }, - }, }; }); -export const StyledFavoriteButton = styled.button<{ favorite: boolean }>( - ({ theme, favorite }) => { - return { - width: '32px', - height: '32px', - justifyContent: 'center', - alignItems: 'center', - display: 'none', - color: favorite ? theme.colors.primaryColor : theme.colors.iconColor, - '&:hover': { - color: theme.colors.primaryColor, - }, - }; - } -); + export const StyledTableRow = styled(TableRow)(({ theme }) => { return { + cursor: 'pointer', '&:hover': { '.favorite-button': { display: 'flex', diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 1c08ed90c6..be3c82b278 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -19,6 +19,7 @@ import { ImportIcon, TrashIcon, AddIcon, + FavouritedIcon, } from '@blocksuite/icons'; import Link from 'next/link'; import { Tooltip } from '@/ui/tooltip'; @@ -93,7 +94,7 @@ export const WorkSpaceSliderBar = () => { Favourites { setShowSubFavorite(!showSubFavorite); }} @@ -107,13 +108,16 @@ export const WorkSpaceSliderBar = () => { - { - triggerImportModal(); - }} - > - Import - + + { + // triggerImportModal(); + }} + > + Import + + diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts index 08c32092ec..e32c01e86d 100644 --- a/packages/app/src/components/workspace-slider-bar/style.ts +++ b/packages/app/src/components/workspace-slider-bar/style.ts @@ -43,29 +43,33 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>( } ); -export const StyledListItem = styled.button<{ active?: boolean }>( - ({ theme, active }) => { - return { - width: '296px', - height: '32px', - marginTop: '12px', - fontSize: theme.font.sm, - color: active ? theme.colors.primaryColor : theme.colors.popoverColor, - backgroundColor: active ? theme.colors.hoverBackground : 'unset', - paddingLeft: '12px', - borderRadius: '5px', - ...displayFlex('flex-start', 'center'), - '>svg': { - fontSize: '20px', - marginRight: '12px', - }, - ':hover': { - color: theme.colors.primaryColor, - backgroundColor: theme.colors.hoverBackground, - }, - }; - } -); +export const StyledListItem = styled.button<{ + active?: boolean; + disabled?: boolean; +}>(({ theme, active, disabled }) => { + return { + width: '296px', + height: '32px', + marginTop: '12px', + fontSize: theme.font.sm, + color: active ? theme.colors.primaryColor : theme.colors.popoverColor, + paddingLeft: '12px', + borderRadius: '5px', + ...displayFlex('flex-start', 'center'), + ...(disabled + ? { cursor: 'not-allowed', color: theme.colors.borderColor } + : {}), + + '>svg': { + fontSize: '20px', + marginRight: '12px', + }, + ':hover:not([disabled])': { + color: theme.colors.primaryColor, + backgroundColor: theme.colors.hoverBackground, + }, + }; +}); export const StyledListItemForWorkspace = styled(StyledListItem)({ height: '52px', diff --git a/packages/app/src/pages/page-list/favorite.tsx b/packages/app/src/pages/page-list/favorite.tsx index 400c7692da..c29687e3b8 100644 --- a/packages/app/src/pages/page-list/favorite.tsx +++ b/packages/app/src/pages/page-list/favorite.tsx @@ -7,7 +7,7 @@ export const Favorite = () => { const { pageList: allPageList } = useEditor(); return ( <> - }>Favorites + }>Favourites p.favorite && !p.trash)} /> ); diff --git a/packages/app/src/providers/editor-provider/interface.ts b/packages/app/src/providers/editor-provider/interface.ts index afb96d1442..1fafdf56ff 100644 --- a/packages/app/src/providers/editor-provider/interface.ts +++ b/packages/app/src/providers/editor-provider/interface.ts @@ -31,7 +31,7 @@ export type EditorHandlers = { pageId: string, query?: { [key: string]: string } ) => Promise; - getPageMeta: (pageId?: string) => PageMeta | void; + getPageMeta: (pageId?: string) => PageMeta; toggleDeletePage: (pageId: string) => void; toggleFavoritePage: (pageId: string) => void; permanentlyDeletePage: (pageId: string) => void; diff --git a/packages/app/src/ui/button/icon-button.tsx b/packages/app/src/ui/button/icon-button.tsx index 79c3c48834..5166af1a3e 100644 --- a/packages/app/src/ui/button/icon-button.tsx +++ b/packages/app/src/ui/button/icon-button.tsx @@ -43,6 +43,7 @@ export type IconButtonProps = { hoverColor?: string; hoverStyle?: CSSProperties; children: ReactElement, 'svg'>; + darker?: boolean; } & HTMLAttributes; export const IconButton = forwardRef( diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts index 9604266baa..efa6d2edda 100644 --- a/packages/app/src/ui/button/styles.ts +++ b/packages/app/src/ui/button/styles.ts @@ -14,6 +14,7 @@ export const StyledIconButton = styled('button', { 'hoverBackground', 'hoverColor', 'hoverStyle', + 'darker', ].includes(prop); }, })<{ @@ -24,6 +25,8 @@ export const StyledIconButton = styled('button', { hoverBackground?: CSSProperties['background']; hoverColor?: string; hoverStyle?: CSSProperties; + // In some cases, button is in a normal hover status, it should be darkened + darker?: boolean; }>( ({ theme, @@ -33,6 +36,7 @@ export const StyledIconButton = styled('button', { hoverBackground, hoverColor, hoverStyle, + darker = false, }) => { return { width, @@ -40,7 +44,7 @@ export const StyledIconButton = styled('button', { color: theme.colors.iconColor, ...displayInlineFlex('center', 'center'), position: 'relative', - ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}), + ...(disabled ? { cursor: 'not-allowed' } : {}), transition: 'background .15s', // TODO: we need to add @emotion/babel-plugin @@ -61,7 +65,10 @@ export const StyledIconButton = styled('button', { ':hover': { color: hoverColor ?? theme.colors.primaryColor, '::after': { - background: hoverBackground ?? theme.colors.hoverBackground, + background: + hoverBackground ?? darker + ? theme.colors.innerHoverBackground + : theme.colors.hoverBackground, }, ...(hoverStyle ?? {}), }, @@ -116,7 +123,7 @@ export const StyledTextButton = styled('button', { paddingRight: padding, ...displayInlineFlex('flex-start', 'center'), position: 'relative', - ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}), + ...(disabled ? { cursor: 'not-allowed' } : {}), transition: 'background .15s', // TODO: Implement circle shape borderRadius: shape === 'default' ? borderRadius : height / 2, @@ -171,7 +178,10 @@ export const StyledButton = styled('button', { border: '1px solid', ...displayInlineFlex('flex-start', 'center'), position: 'relative', - ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}), + // TODO: disabled color is not decided + ...(disabled + ? { cursor: 'not-allowed', color: theme.colors.borderColor } + : {}), transition: 'background .15s', // TODO: Implement circle shape borderRadius: shape === 'default' ? borderRadius : height / 2, @@ -190,6 +200,7 @@ export const StyledButton = styled('button', { hoverStyle, }), + // TODO: disabled hover should be implemented // // ':hover': { // color: hoverColor ?? theme.colors.primaryColor, diff --git a/packages/app/src/ui/table/styles.ts b/packages/app/src/ui/table/styles.ts index c954e1b424..9850bc8b43 100644 --- a/packages/app/src/ui/table/styles.ts +++ b/packages/app/src/ui/table/styles.ts @@ -40,6 +40,13 @@ export const StyledTableCell = styled.td< export const StyledTableHead = styled.thead(({ theme }) => { return { fontWeight: 500, + tr: { + ':hover': { + td: { + background: 'unset', + }, + }, + }, }; }); From def2f0285e237d379b34e1dda18fc03ee0e114da Mon Sep 17 00:00:00 2001 From: MingLiang Wang Date: Mon, 19 Dec 2022 17:36:50 +0800 Subject: [PATCH 7/7] feat: upgrade icon version --- packages/app/package.json | 6 ++--- pnpm-lock.yaml | 48 +++++++++++++++++---------------------- 2 files changed, 24 insertions(+), 30 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 8b3646ec5e..de00e514a1 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -11,7 +11,7 @@ "dependencies": { "@blocksuite/blocks": "0.3.0-alpha.10", "@blocksuite/editor": "0.3.0-alpha.10", - "@blocksuite/icons": "^2.0.0", + "@blocksuite/icons": "^2.0.2", "@blocksuite/store": "0.3.0-alpha.10", "@emotion/css": "^11.10.0", "@emotion/react": "^11.10.4", @@ -22,11 +22,12 @@ "@mui/base": "^5.0.0-alpha.87", "@mui/icons-material": "^5.10.9", "@mui/material": "^5.8.6", - "@toeverything/pathfinder-logger": "workspace:@pathfinder/logger@*", "@pathfinder/data-services": "workspace:@pathfinder/data-services@*", + "@toeverything/pathfinder-logger": "workspace:@pathfinder/logger@*", "cmdk": "^0.1.20", "css-spring": "^4.1.0", "dayjs": "^1.11.7", + "i18next": "^21.9.1", "lit": "^2.3.1", "next": "13.0.1", "prettier": "^2.7.1", @@ -34,7 +35,6 @@ "quill-cursors": "^4.0.0", "react": "18.2.0", "react-dom": "18.2.0", - "i18next": "^21.9.1", "react-i18next": "^11.18.4" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 76e94ee371..ef44a2258d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,10 +30,10 @@ importers: packages/app: specifiers: - '@blocksuite/blocks': 0.3.0-alpha.11 - '@blocksuite/editor': 0.3.0-alpha.11 - '@blocksuite/icons': ^2.0.0 - '@blocksuite/store': 0.3.0-alpha.11 + '@blocksuite/blocks': 0.3.0-alpha.10 + '@blocksuite/editor': 0.3.0-alpha.10 + '@blocksuite/icons': ^2.0.2 + '@blocksuite/store': 0.3.0-alpha.10 '@emotion/css': ^11.10.0 '@emotion/react': ^11.10.4 '@emotion/server': ^11.10.0 @@ -66,10 +66,10 @@ importers: react-i18next: ^11.18.4 typescript: 4.8.3 dependencies: - '@blocksuite/blocks': 0.3.0-alpha.11 - '@blocksuite/editor': 0.3.0-alpha.11 - '@blocksuite/icons': 2.0.0_w5j4k42lgipnm43s3brx6h3c34 - '@blocksuite/store': 0.3.0-alpha.11 + '@blocksuite/blocks': 0.3.0-alpha.10 + '@blocksuite/editor': 0.3.0-alpha.10 + '@blocksuite/icons': 2.0.2_w5j4k42lgipnm43s3brx6h3c34 + '@blocksuite/store': 0.3.0-alpha.10 '@emotion/css': 11.10.0 '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34 '@emotion/server': 11.10.0_@emotion+css@11.10.0 @@ -499,13 +499,12 @@ packages: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true - /@blocksuite/blocks/0.3.0-alpha.11: - resolution: {integrity: sha512-SwOTu9Ph5zsxczzPL0RoSfQKZLrrgEPhXiZycbv+tvsaXSwHq27JALJFh+G+HHP0uJvt/vSYfXzHck+3J1m+4Q==} + /@blocksuite/blocks/0.3.0-alpha.10: + resolution: {integrity: sha512-tW6AMQTQIkBg4uob+6naAtnNWEgxtX/kBFpV/L1hGW3OHGF6JwpyM/AfzuuS9KooDJvADpb2xeQnNcifJTWGHA==} dependencies: - '@blocksuite/store': 0.3.0-alpha.11 + '@blocksuite/store': 0.3.0-alpha.10 '@tldraw/intersect': 1.8.0 '@tldraw/vec': 1.8.0 - highlight.js: 11.7.0 hotkeys-js: 3.10.0 lit: 2.4.0 perfect-freehand: 1.2.0 @@ -517,11 +516,11 @@ packages: - utf-8-validate dev: false - /@blocksuite/editor/0.3.0-alpha.11: - resolution: {integrity: sha512-oEcc70bn0lYIhJo7DTHO+4Xx+iLjaLvRYfoQdkImJrgmEZ6WoFafENKRv4rpuFQKa9HFDS1Zf6V349ykATbHzw==} + /@blocksuite/editor/0.3.0-alpha.10: + resolution: {integrity: sha512-P5PcrYGRmnOeNTdqGDncWjUn5BwCm4j5JvJkjOw80VbvWNcVtWhr2ViBCsgD00m4ZIybxV6o00GOqDNNej2mEQ==} dependencies: - '@blocksuite/blocks': 0.3.0-alpha.11 - '@blocksuite/store': 0.3.0-alpha.11 + '@blocksuite/blocks': 0.3.0-alpha.10 + '@blocksuite/store': 0.3.0-alpha.10 lit: 2.4.0 marked: 4.1.1 turndown: 7.1.1 @@ -531,8 +530,8 @@ packages: - utf-8-validate dev: false - /@blocksuite/icons/2.0.0_w5j4k42lgipnm43s3brx6h3c34: - resolution: {integrity: sha512-r+wpkHGol85dOKkvbAZoXfZFVzGtI2YXT4qqwb76ekSAHlfIcVi+Gs6eVDpH8fZl8vvr6FquDiQWMEbYaN4BEA==} + /@blocksuite/icons/2.0.2_w5j4k42lgipnm43s3brx6h3c34: + resolution: {integrity: sha512-NuPDSKmj3GFZEVSbWuHTtlfwDRPqgbaj/tJTd6VnLsV7wEVjB8Roo5Kqdq9G69Uul2Vc00cpwe4taNhusI/9Ww==} peerDependencies: '@types/react': ^18.0.25 react: ^18.2.0 @@ -541,8 +540,8 @@ packages: react: 18.2.0 dev: false - /@blocksuite/store/0.3.0-alpha.11: - resolution: {integrity: sha512-udcXVB83Tq3Q2vglAvWb3oPeKTceKIArtG2gSf05ugIbJ2oIlM8h7IpY9DZKofK/Du+5fE3pNxRb8ZhSyI9Apw==} + /@blocksuite/store/0.3.0-alpha.10: + resolution: {integrity: sha512-KP88oFu5qAZA1mYbfLZ6D8S90bw8x3d19HhfoOqME0MOHyY6r462NF7wxQh9jlGDsCmyJMf3ZY+z/PxsJIufxQ==} dependencies: buffer: 6.0.3 flexsearch: 0.7.21 @@ -3351,7 +3350,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_tg6quxtr5dyl3tikvj7rwonxxi + '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm debug: 3.2.7 eslint: 8.22.0 eslint-import-resolver-node: 0.3.6 @@ -3370,7 +3369,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_tg6quxtr5dyl3tikvj7rwonxxi + '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm array-includes: 3.1.5 array.prototype.flat: 1.3.0 debug: 2.6.9 @@ -3944,11 +3943,6 @@ packages: dependencies: function-bind: 1.1.1 - /highlight.js/11.7.0: - resolution: {integrity: sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==} - engines: {node: '>=12.0.0'} - dev: false - /hoist-non-react-statics/3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} dependencies: