From eb1d4fe1f6c17e41198380864ee24b8061875dbc Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Wed, 15 Feb 2023 15:21:29 +0800 Subject: [PATCH] feat: interaction change (#788) --- apps/web/src/components/help-island/index.tsx | 1 + .../components/page-list/OperationCell.tsx | 72 ++++++++------- .../src/components/shortcuts-modal/index.tsx | 87 ++++++++++--------- .../workspace/[workspaceId]/favorite.tsx | 1 + .../Welcome-to-AFFiNE-Alpha-Downhills.md | 30 +++---- packages/component/src/ui/mui.ts | 11 ++- tests/contact-us.spec.ts | 8 +- tests/shortcuts.spec.ts | 6 +- 8 files changed, 119 insertions(+), 97 deletions(-) diff --git a/apps/web/src/components/help-island/index.tsx b/apps/web/src/components/help-island/index.tsx index ff27b390b..2312416a3 100644 --- a/apps/web/src/components/help-island/index.tsx +++ b/apps/web/src/components/help-island/index.tsx @@ -40,6 +40,7 @@ export const HelpIsland = ({ return ( { setShowSpread(!spread); }} diff --git a/apps/web/src/components/page-list/OperationCell.tsx b/apps/web/src/components/page-list/OperationCell.tsx index 6bc758944..9b62b684e 100644 --- a/apps/web/src/components/page-list/OperationCell.tsx +++ b/apps/web/src/components/page-list/OperationCell.tsx @@ -1,8 +1,13 @@ import { useConfirm } from '@/providers/ConfirmProvider'; import { PageMeta } from '@/providers/app-state-provider'; -import { Menu, MenuItem } from '@affine/component'; -import { FlexWrapper } from '@affine/component'; -import { IconButton } from '@affine/component'; +import { + Menu, + MenuItem, + Tooltip, + FlexWrapper, + IconButton, +} from '@affine/component'; + import { MoreVerticalIcon, RestoreIcon, @@ -15,6 +20,7 @@ import { import { toast } from '@affine/component'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useTranslation } from '@affine/i18n'; + export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { const { id, favorite } = pageMeta; const { openPage } = usePageHelper(); @@ -81,33 +87,39 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { const { t } = useTranslation(); return ( - { - toggleDeletePage(id); - toast(t('restored', { title: getPageMeta(id)?.title || 'Untitled' })); - openPage(id); - }} - > - - - { - confirm({ - title: t('Delete permanently?'), - content: t("Once deleted, you can't undo this action."), - confirmText: t('Delete'), - confirmType: 'danger', - }).then(confirm => { - confirm && permanentlyDeletePage(id); - toast(t('Permanently deleted')); - }); - }} - > - - + + { + toggleDeletePage(id); + toast( + t('restored', { title: getPageMeta(id)?.title || 'Untitled' }) + ); + openPage(id); + }} + > + + + + + { + confirm({ + title: t('Delete permanently?'), + content: t("Once deleted, you can't undo this action."), + confirmText: t('Delete'), + confirmType: 'danger', + }).then(confirm => { + confirm && permanentlyDeletePage(id); + toast(t('Permanently deleted')); + }); + }} + > + + + ); }; diff --git a/apps/web/src/components/shortcuts-modal/index.tsx b/apps/web/src/components/shortcuts-modal/index.tsx index bfe6c75a7..ce436c98a 100644 --- a/apps/web/src/components/shortcuts-modal/index.tsx +++ b/apps/web/src/components/shortcuts-modal/index.tsx @@ -13,8 +13,11 @@ import { useWindowsKeyboardShortcuts, useWinMarkdownShortcuts, } from '@/components/shortcuts-modal/config'; -import { MuiSlide } from '@affine/component'; -import { ModalCloseButton } from '@affine/component'; +import { + MuiSlide, + MuiClickAwayListener, + ModalCloseButton, +} from '@affine/component'; import { getUaHelper } from '@/utils'; import { useTranslation } from '@affine/i18n'; type ModalProps = { @@ -42,44 +45,50 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => { return createPortal( - <> - - - - {t('Shortcuts')} - + { + onClose(); + }} + > +
+ + + + {t('Shortcuts')} + - { - onClose(); - }} - /> - - - {t('Keyboard Shortcuts')} - - {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => { - return ( - - {title} - {shortcuts} - - ); - })} - {t('Markdown Syntax')} - {Object.entries(markdownShortcuts).map(([title, shortcuts]) => { - return ( - - {title} - {shortcuts} - - ); - })} - + { + onClose(); + }} + /> + + + {t('Keyboard Shortcuts')} + + {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => { + return ( + + {title} + {shortcuts} + + ); + })} + {t('Markdown Syntax')} + {Object.entries(markdownShortcuts).map(([title, shortcuts]) => { + return ( + + {title} + {shortcuts} + + ); + })} +
+ , document.body diff --git a/apps/web/src/pages/workspace/[workspaceId]/favorite.tsx b/apps/web/src/pages/workspace/[workspaceId]/favorite.tsx index 8714857a5..ebab1134f 100644 --- a/apps/web/src/pages/workspace/[workspaceId]/favorite.tsx +++ b/apps/web/src/pages/workspace/[workspaceId]/favorite.tsx @@ -19,6 +19,7 @@ export const Favorite = () => { p.favorite && !p.trash)} + showFavoriteTag={true} listType="favorite" /> diff --git a/apps/web/src/templates/Welcome-to-AFFiNE-Alpha-Downhills.md b/apps/web/src/templates/Welcome-to-AFFiNE-Alpha-Downhills.md index 00b449ffa..958234176 100644 --- a/apps/web/src/templates/Welcome-to-AFFiNE-Alpha-Downhills.md +++ b/apps/web/src/templates/Welcome-to-AFFiNE-Alpha-Downhills.md @@ -10,18 +10,18 @@ There are common styling options from such as **bold**, _italics,_ underline< Or maybe we can list the latest features: -* Drag Handle - * Easily select, drag and rearrange your blocks. - * Find the `⬦` to the left of your blocks and interact with it! -* Block Hub - * A convenient home for all blocks that can empower your doc. - * Find it in the lower right, look for the `□+`. -* Slash Menu - * Want a convenient way to edit and empower your doc without the mouse? - * Try activating this feature with just the `/` key. -* Workspaces - * Further improved, with cloud support, collaboration and publishing. - * Explore more features from the `Settings` in the sidebar. +- Drag Handle + - Easily select, drag and rearrange your blocks. + - Find the `⬦` to the left of your blocks and interact with it! +- Block Hub + - A convenient home for all blocks that can empower your doc. + - Find it in the lower right, look for the `□+`. +- Slash Menu + - Want a convenient way to edit and empower your doc without the mouse? + - Try activating this feature with just the `/` key. +- Workspaces + - Further improved, with cloud support, collaboration and publishing. + - Explore more features from the `Settings` in the sidebar. Let's explore how to collaborate with an image: @@ -36,6 +36,6 @@ let scrambled = "V2VsY29tZSB0byBBRkZpTkU=" And for some future features and updates, let's make a to-do list: -* [ ] Database Block -* [ ] Desktop and mobile clients -* [ ] Edgeless update (whiteboard mode) +- [ ] Database Block +- [ ] Desktop and mobile clients +- [ ] Edgeless update (whiteboard mode) diff --git a/packages/component/src/ui/mui.ts b/packages/component/src/ui/mui.ts index 3d8281e38..5e144cc5a 100644 --- a/packages/component/src/ui/mui.ts +++ b/packages/component/src/ui/mui.ts @@ -3,6 +3,15 @@ import MuiCollapse from '@mui/material/Collapse'; import MuiSlide from '@mui/material/Slide'; import MuiAvatar from '@mui/material/Avatar'; import MuiGrow from '@mui/material/Grow'; +import MuiClickAwayListener from '@mui/base/ClickAwayListener'; import MuiFade from '@mui/material/Fade'; -export { MuiBreadcrumbs, MuiCollapse, MuiSlide, MuiAvatar, MuiGrow, MuiFade }; +export { + MuiBreadcrumbs, + MuiCollapse, + MuiSlide, + MuiAvatar, + MuiGrow, + MuiFade, + MuiClickAwayListener, +}; diff --git a/tests/contact-us.spec.ts b/tests/contact-us.spec.ts index c4fcfacb7..c815eeb50 100644 --- a/tests/contact-us.spec.ts +++ b/tests/contact-us.spec.ts @@ -6,13 +6,7 @@ loadPage(); test.describe('Open contact us', () => { test('Click right-bottom corner contact icon', async ({ page }) => { - const faqIcon = page.locator('[data-testid=faq-icon]'); - const box = await faqIcon.boundingBox(); - expect(box?.x).not.toBeUndefined(); - await faqIcon.click(); - - await page.mouse.move((box?.x ?? 0) + 10, (box?.y ?? 0) + 10); - await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5); + await page.locator('[data-testid=help-island]').click(); const rightBottomContactUs = page.locator( '[data-testid=right-bottom-contact-us-icon]' ); diff --git a/tests/shortcuts.spec.ts b/tests/shortcuts.spec.ts index c46f9834f..a74366489 100644 --- a/tests/shortcuts.spec.ts +++ b/tests/shortcuts.spec.ts @@ -6,11 +6,7 @@ loadPage(); test.describe('Shortcuts Modal', () => { test('Open shortcuts modal', async ({ page }) => { - const faqIcon = page.locator('[data-testid=faq-icon]'); - const box = await faqIcon.boundingBox(); - expect(box?.x).not.toBeUndefined(); - await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5); - await faqIcon.click(); + await page.locator('[data-testid=help-island]').click(); const shortcutsIcon = page.locator('[data-testid=shortcuts-icon]'); expect(await shortcutsIcon.isVisible()).toEqual(true);