From 9ab9c0c70d6c33a88a46f4b6f248abcec79ae8fe Mon Sep 17 00:00:00 2001 From: danielchim Date: Thu, 17 Aug 2023 06:18:43 +0800 Subject: [PATCH] feat: new workspace switch dropdown design (#3700) Co-authored-by: Alex Yang --- .../pure/workspace-list-modal/index.tsx | 369 +++++++++++------- .../pure/workspace-list-modal/styles.ts | 65 ++- .../WorkspaceSelector/workspace-selector.tsx | 2 + apps/core/src/providers/modal-provider.tsx | 15 +- apps/storybook/src/stories/core.stories.tsx | 36 +- .../components/card/workspace-card/index.tsx | 31 +- .../components/card/workspace-card/styles.ts | 24 +- packages/i18n/src/resources/en.json | 6 + tests/affine-local/e2e/image-preview.spec.ts | 2 +- .../e2e/local-first-workspace-list.spec.ts | 4 +- tests/kit/utils/workspace.ts | 6 +- 11 files changed, 368 insertions(+), 192 deletions(-) diff --git a/apps/core/src/components/pure/workspace-list-modal/index.tsx b/apps/core/src/components/pure/workspace-list-modal/index.tsx index 47b345cc63..ec929e4a5b 100644 --- a/apps/core/src/components/pure/workspace-list-modal/index.tsx +++ b/apps/core/src/components/pure/workspace-list-modal/index.tsx @@ -1,11 +1,4 @@ -import { - Menu, - MenuItem, - Modal, - ModalCloseButton, - ModalWrapper, - Tooltip, -} from '@affine/component'; +import { Menu, MenuItem, Tooltip } from '@affine/component'; import { ScrollableContainer } from '@affine/component'; import { WorkspaceList } from '@affine/component/workspace-list'; import type { @@ -15,28 +8,38 @@ import type { import { WorkspaceFlavour } from '@affine/env/workspace'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import type { RootWorkspaceMetadata } from '@affine/workspace/atom'; -import { HelpIcon, ImportIcon, PlusIcon } from '@blocksuite/icons'; -import type { DragEndEvent } from '@dnd-kit/core'; -import { useCallback, useRef } from 'react'; - -import type { AllWorkspace } from '../../../shared'; -import { Footer } from '../footer'; import { - StyledCreateWorkspaceCard, + CloudWorkspaceIcon, + HelpIcon, + ImportIcon, + MoreHorizontalIcon, + PlusIcon, +} from '@blocksuite/icons'; +import type { DragEndEvent } from '@dnd-kit/core'; +import { Popover } from '@mui/material'; +import { IconButton } from '@toeverything/components/button'; +import { Divider } from '@toeverything/components/divider'; +import { useSetAtom } from 'jotai'; +import { useCallback } from 'react'; + +import { openDisableCloudAlertModalAtom } from '../../../atoms'; +import type { AllWorkspace } from '../../../shared'; +import { StyledCreateWorkspaceCardPill, - StyledCreateWorkspaceCardPillContainer, StyledCreateWorkspaceCardPillContent, StyledCreateWorkspaceCardPillIcon, - StyledCreateWorkspaceCardPillTextSecondary, StyledHelperContainer, + StyledImportWorkspaceCardPill, + StyledModalBody, StyledModalContent, StyledModalHeader, StyledModalHeaderLeft, StyledModalTitle, StyledOperationWrapper, - StyleWorkspaceAdd, - StyleWorkspaceInfo, - StyleWorkspaceTitle, + StyledSignInCardPill, + StyledSignInCardPillTextCotainer, + StyledSignInCardPillTextPrimary, + StyledSignInCardPillTextSecondary, } from './styles'; interface WorkspaceModalProps { @@ -52,105 +55,94 @@ interface WorkspaceModalProps { onMoveWorkspace: (activeId: string, overId: string) => void; } -const CreateWorkspaceCard = ({ - onNewWorkspace, - onAddWorkspace, -}: { - onNewWorkspace: () => void; - onAddWorkspace: () => void; -}) => { +const AccountMenu = () => { const t = useAFFiNEI18N(); - const anchorEL = useRef(null); + return ( +
+
Unlimted
+ + } data-testid="editor-option-menu-import"> + {t['com.affine.workspace.cloud.join']()} + + } data-testid="editor-option-menu-import"> + {t['com.affine.workspace.cloud.account.settings']()} + + + } data-testid="editor-option-menu-import"> + {t['com.affine.workspace.cloud.account.logout']()} + +
+ ); +}; - if (runtimeConfig.enableSQLiteProvider && environment.isDesktop) { - return ( - - - - -
-

{t['New Workspace']()}

- -

{t['Create your own workspace']()}

- -
- - - - - - - - - -
-

{t['Add Workspace']()}

- -

{t['Add Workspace Hint']()}

- -
- - - - - - - - } - > - - - - +const CloudWorkSpaceList = ({ + disabled, + workspaces, + onClickWorkspace, + onClickWorkspaceSetting, + currentWorkspaceId, + onMoveWorkspace, +}: WorkspaceModalProps) => { + const t = useAFFiNEI18N(); - - {t['New Workspace']()} -

{t['Create Or Import']()}

- - - - ); - } else { - return ( -
- - - - + return ( + <> + + + + {t['com.affine.workspace.cloud.sync']()} + + + + + + + - - {t['New Workspace']()} -

{t['Create Or Import']()}

- - -
- ); - } + + } + zIndex={1000} + > + } + type="plain" + /> + + + + + flavour !== WorkspaceFlavour.PUBLIC + ) as (AffineCloudWorkspace | LocalWorkspace)[] + } + currentWorkspaceId={currentWorkspaceId} + onClick={onClickWorkspace} + onSettingClick={onClickWorkspaceSetting} + onDragEnd={useCallback( + (event: DragEndEvent) => { + const { active, over } = event; + if (active.id !== over?.id) { + onMoveWorkspace(active.id as string, over?.id as string); + } + }, + [onMoveWorkspace] + )} + /> + + + + ); }; export const WorkspaceListModal = ({ @@ -166,19 +158,77 @@ export const WorkspaceListModal = ({ onMoveWorkspace, }: WorkspaceModalProps) => { const t = useAFFiNEI18N(); + const setOpen = useSetAtom(openDisableCloudAlertModalAtom); + // TODO: AFFiNE Cloud support + const isLoggedIn = false; + const anchorEl = document.getElementById('current-workspace'); + return ( - - - - - {t['My Workspaces']()} + + + + {isLoggedIn ? ( + + ) : ( + <> + + + { + if (!runtimeConfig.enableCloud) { + setOpen(true); + } + }} + data-testid="cloud-signin-button" + > + + + + + + + {t['com.affine.workspace.cloud.auth']()} + + + Sync with AFFiNE Cloud + + + + + + + + + )} + + {t['Local Workspace']()} - - - - { - onClose(); - }} - absolute={false} - /> - - - + - + + + {runtimeConfig.enableSQLiteProvider && environment.isDesktop ? ( + + + + + + +
+

{t['com.affine.workspace.local.import']()}

+
+ + + + ) : null} + + + + + + +
+

{t['New Workspace']()}

+
+ + + -