From 0b1ba6bf43438f3d5b990e662ed06851ee91d215 Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Wed, 13 Sep 2023 16:05:19 +0800 Subject: [PATCH] feat: replace modal with new design (#4324) Co-authored-by: Peng Xiao --- apps/core/package.json | 2 +- .../affine/create-workspace-modal/index.tsx | 39 ++-- .../enable-affine-cloud-modal/index.tsx | 74 +++--- .../affine/enable-affine-cloud-modal/style.ts | 35 --- .../delete-leave-workspace/delete/index.tsx | 130 +++++------ .../delete-leave-workspace/delete/style.ts | 37 --- .../delete-leave-workspace/index.tsx | 22 +- .../new-workspace-setting-detail/publish.tsx | 11 +- .../components/affine/onboarding-modal.tsx | 14 +- .../components/affine/setting-modal/index.tsx | 34 +-- .../affine/share-page-modal/index.tsx | 4 +- .../tmp-disable-affine-cloud-modal/index.tsx | 106 ++++----- .../tmp-disable-affine-cloud-modal/style.ts | 8 +- .../index.tsx | 58 ----- .../style.ts | 41 ---- .../operation-menu.tsx | 4 +- .../pure/quick-search-modal/index.tsx | 151 ++++++------ .../components/pure/shortcuts-modal/index.tsx | 26 +-- .../pure/trash-button-group/index.tsx | 20 +- .../pure/workspace-list-modal/index.tsx | 2 + .../collections/add-collection-button.tsx | 6 +- .../collections/collections-list.tsx | 6 +- .../src/components/root-app-sidebar/index.tsx | 4 +- apps/core/src/providers/modal-provider.tsx | 8 +- .../src/stories/onboarding-modal.stories.tsx | 2 +- .../src/stories/share-menu.stories.tsx | 4 +- .../app-sidebar/menu-item/index.tsx | 31 ++- .../components/auth-components/auth-input.tsx | 7 +- .../src/components/auth-components/modal.tsx | 33 +-- .../src/components/import-page/index.tsx | 15 +- .../member-components/invite-modal.tsx | 80 +++---- .../components/page-list/operation-cell.tsx | 34 ++- .../operation-menu-items/move-to-trash.tsx | 26 ++- .../page-list/view/collection-bar.tsx | 11 +- .../page-list/view/collection-list.tsx | 20 +- .../page-list/view/create-collection.tsx | 71 +++--- .../components/setting-components/index.tsx | 1 - .../components/setting-components/modal.tsx | 43 ---- .../share-menu/disable-public-link/index.tsx | 69 ++---- .../share-menu/disable-public-link/style.ts | 35 --- .../src/components/share-menu/share-page.tsx | 17 +- .../src/components/tour-modal/index.css.ts | 1 - .../src/components/tour-modal/tour-modal.tsx | 215 +++++++++--------- packages/component/src/index.ts | 2 - packages/component/src/ui/confirm/confirm.tsx | 110 --------- packages/component/src/ui/confirm/index.ts | 1 - packages/component/src/ui/confirm/styles.ts | 46 ---- .../component/src/ui/modal/confirm-modal.tsx | 72 ------ packages/component/src/ui/modal/index.tsx | 8 - .../src/ui/modal/modal-close-button.tsx | 39 ---- .../component/src/ui/modal/modal-wrapper.tsx | 22 -- packages/component/src/ui/modal/modal.tsx | 59 ----- packages/component/src/ui/modal/styles.ts | 65 ------ plugins/copilot/package.json | 2 +- plugins/hello-world/package.json | 2 +- plugins/image-preview/package.json | 2 +- plugins/outline/package.json | 2 +- yarn.lock | 52 ++++- 58 files changed, 637 insertions(+), 1404 deletions(-) delete mode 100644 apps/core/src/components/affine/enable-affine-cloud-modal/style.ts delete mode 100644 apps/core/src/components/affine/transform-workspace-to-affine-modal/index.tsx delete mode 100644 apps/core/src/components/affine/transform-workspace-to-affine-modal/style.ts delete mode 100644 packages/component/src/components/setting-components/modal.tsx delete mode 100644 packages/component/src/components/share-menu/disable-public-link/style.ts delete mode 100644 packages/component/src/ui/confirm/confirm.tsx delete mode 100644 packages/component/src/ui/confirm/index.ts delete mode 100644 packages/component/src/ui/confirm/styles.ts delete mode 100644 packages/component/src/ui/modal/confirm-modal.tsx delete mode 100644 packages/component/src/ui/modal/index.tsx delete mode 100644 packages/component/src/ui/modal/modal-close-button.tsx delete mode 100644 packages/component/src/ui/modal/modal-wrapper.tsx delete mode 100644 packages/component/src/ui/modal/modal.tsx delete mode 100644 packages/component/src/ui/modal/styles.ts diff --git a/apps/core/package.json b/apps/core/package.json index e5262b0412..c843486415 100644 --- a/apps/core/package.json +++ b/apps/core/package.json @@ -39,7 +39,7 @@ "@mui/material": "^5.14.7", "@radix-ui/react-select": "^1.2.2", "@react-hookz/web": "^23.1.0", - "@toeverything/components": "^0.0.34", + "@toeverything/components": "^0.0.38", "async-call-rpc": "^6.3.1", "cmdk": "^0.2.0", "css-spring": "^4.1.0", diff --git a/apps/core/src/components/affine/create-workspace-modal/index.tsx b/apps/core/src/components/affine/create-workspace-modal/index.tsx index 871159be1b..4ffc2a7f07 100644 --- a/apps/core/src/components/affine/create-workspace-modal/index.tsx +++ b/apps/core/src/components/affine/create-workspace-modal/index.tsx @@ -1,14 +1,9 @@ -import { - Input, - Modal, - ModalCloseButton, - ModalWrapper, - toast, -} from '@affine/component'; +import { Input, toast } from '@affine/component'; import { DebugLogger } from '@affine/debug'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { HelpIcon } from '@blocksuite/icons'; import { Button } from '@toeverything/components/button'; +import { Modal } from '@toeverything/components/modal'; import { Tooltip } from '@toeverything/components/tooltip'; import type { LoadDBFileResult, @@ -386,16 +381,28 @@ export const CreateWorkspaceModal = ({ /> ) : null; + const onOpenChange = useCallback( + (open: boolean) => { + if (!open) { + onClose(); + } + }, + [onClose] + ); + return ( - - -
- -
- {nameWorkspaceNode} - {setDBLocationNode} - {setSyncingModeNode} - + +
+ {nameWorkspaceNode} + {setDBLocationNode} + {setSyncingModeNode} ); }; diff --git a/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx b/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx index 4f81ad6d2d..7b32dd857e 100644 --- a/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx +++ b/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx @@ -1,33 +1,26 @@ -import { Modal, ModalWrapper } from '@affine/component'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { CloseIcon } from '@blocksuite/icons'; -import { Button, IconButton } from '@toeverything/components/button'; +import { + ConfirmModal, + type ConfirmModalProps, +} from '@toeverything/components/modal'; import { useSetAtom } from 'jotai'; import { useCallback } from 'react'; import { authAtom } from '../../../atoms'; import { setOnceSignedInEventAtom } from '../../../atoms/event'; import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status'; -import { ButtonContainer, Content, Header, StyleTips, Title } from './style'; - -interface EnableAffineCloudModalProps { - open: boolean; - onConfirm: () => void; - onClose: () => void; -} export const EnableAffineCloudModal = ({ onConfirm: propsOnConfirm, - open, - onClose, -}: EnableAffineCloudModalProps) => { + ...props +}: ConfirmModalProps) => { const t = useAFFiNEI18N(); const loginStatus = useCurrentLoginStatus(); const setAuthAtom = useSetAtom(authAtom); const setOnceSignedInEvent = useSetAtom(setOnceSignedInEventAtom); const confirm = useCallback(async () => { - return propsOnConfirm(); + return propsOnConfirm?.(); }, [propsOnConfirm]); const onConfirm = useCallback(() => { @@ -39,42 +32,29 @@ export const EnableAffineCloudModal = ({ setOnceSignedInEvent(confirm); } if (loginStatus === 'authenticated') { - return propsOnConfirm(); + return propsOnConfirm?.(); } }, [confirm, loginStatus, propsOnConfirm, setAuthAtom, setOnceSignedInEvent]); return ( - - -
- {t['Enable AFFiNE Cloud']()} - - - -
- - {t['Enable AFFiNE Cloud Description']()} - -
- -
-
- -
- - - - + ); }; diff --git a/apps/core/src/components/affine/enable-affine-cloud-modal/style.ts b/apps/core/src/components/affine/enable-affine-cloud-modal/style.ts deleted file mode 100644 index 40fe762b7a..0000000000 --- a/apps/core/src/components/affine/enable-affine-cloud-modal/style.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { styled } from '@affine/component'; - -export const Header = styled('div')({ - display: 'flex', - justifyContent: 'space-between', - paddingRight: '20px', - paddingTop: '20px', - paddingLeft: '24px', - alignItems: 'center', -}); - -export const Content = styled('div')({ - padding: '12px 24px 20px 24px', -}); - -export const Title = styled('div')({ - fontSize: 'var(--affine-font-h6)', - lineHeight: '26px', - fontWeight: 600, -}); - -export const StyleTips = styled('div')(() => { - return { - userSelect: 'none', - marginBottom: '20px', - }; -}); -export const ButtonContainer = styled('div')(() => { - return { - display: 'flex', - justifyContent: 'flex-end', - gap: '20px', - paddingTop: '20px', - }; -}); diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx index a9b4469e92..b7390c8c10 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx +++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx @@ -1,33 +1,24 @@ -import { Input, Modal, ModalCloseButton } from '@affine/component'; +import { Input } from '@affine/component'; import type { AffineOfficialWorkspace } from '@affine/env/workspace'; import { WorkspaceFlavour } from '@affine/env/workspace'; import { Trans } from '@affine/i18n'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { Button } from '@toeverything/components/button'; +import { + ConfirmModal, + type ConfirmModalProps, +} from '@toeverything/components/modal'; import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name'; import { useState } from 'react'; -import { - StyledButtonContent, - StyledInputContent, - StyledModalHeader, - StyledModalWrapper, - StyledTextContent, - StyledWorkspaceName, -} from './style'; +import { StyledInputContent, StyledWorkspaceName } from './style'; -interface WorkspaceDeleteProps { - open: boolean; - onClose: () => void; +interface WorkspaceDeleteProps extends ConfirmModalProps { workspace: AffineOfficialWorkspace; - onConfirm: () => void; } export const WorkspaceDeleteModal = ({ - open, - onClose, - onConfirm, workspace, + ...props }: WorkspaceDeleteProps) => { const [workspaceName] = useBlockSuiteWorkspaceName( workspace.blockSuiteWorkspace @@ -37,65 +28,50 @@ export const WorkspaceDeleteModal = ({ const t = useAFFiNEI18N(); return ( - - - - - {t['com.affine.workspaceDelete.title']()}? - - {workspace.flavour === WorkspaceFlavour.LOCAL ? ( - - - Deleting ( - - {{ workspace: workspaceName } as any} - - ) cannot be undone, please proceed with caution. All contents will - be lost. - - - ) : ( - - - Deleting ( - - {{ workspace: workspaceName } as any} - - ) will delete both local and cloud data, this operation cannot be - undone, please proceed with caution. - - - )} - - { - if (ref) { - window.setTimeout(() => ref.focus(), 0); - } - }} - onChange={setDeleteStr} - data-testid="delete-workspace-input" - placeholder={t['com.affine.workspaceDelete.placeholder']()} - width={315} - height={42} - /> - - - - - - - + + {workspace.flavour === WorkspaceFlavour.LOCAL ? ( + + Deleting ( + + {{ workspace: workspaceName } as any} + + ) cannot be undone, please proceed with caution. All contents will be + lost. + + ) : ( + + Deleting ( + + {{ workspace: workspaceName } as any} + + ) will delete both local and cloud data, this operation cannot be + undone, please proceed with caution. + + )} + + { + if (ref) { + window.setTimeout(() => ref.focus(), 0); + } + }} + onChange={setDeleteStr} + data-testid="delete-workspace-input" + placeholder={t['com.affine.workspaceDelete.placeholder']()} + width={315} + height={42} + /> + + ); }; diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts index dc144a6046..4a20d28c8e 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts +++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts @@ -21,20 +21,6 @@ export const StyledModalHeader = styled('div')(() => { }; }); -// export const StyledModalContent = styled('div')(({ theme }) => {}); - -export const StyledTextContent = styled('div')(() => { - return { - margin: 'auto', - width: '425px', - fontStyle: 'normal', - fontWeight: '400', - fontSize: '18px', - lineHeight: '26px', - textAlign: 'left', - }; -}); - export const StyledInputContent = styled('div')(() => { return { display: 'flex', @@ -45,31 +31,8 @@ export const StyledInputContent = styled('div')(() => { }; }); -export const StyledButtonContent = styled('div')(() => { - return { - marginBottom: '42px', - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - }; -}); - export const StyledWorkspaceName = styled('span')(() => { return { fontWeight: '600', }; }); - -// export const StyledCancelButton = styled(Button)(({ theme }) => { -// return { -// width: '100px', -// justifyContent: 'center', -// }; -// }); - -// export const StyledDeleteButton = styled(Button)(({ theme }) => { -// return { -// width: '100px', -// justifyContent: 'center', -// }; -// }); diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx index 48f9dbe003..86cd3ce6ac 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx +++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx @@ -1,9 +1,9 @@ -import { ConfirmModal } from '@affine/component'; import { SettingRow } from '@affine/component/setting-components'; import type { AffineOfficialWorkspace } from '@affine/env/workspace'; import { WorkspaceFlavour } from '@affine/env/workspace'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { ArrowRightSmallIcon } from '@blocksuite/icons'; +import { ConfirmModal } from '@toeverything/components/modal'; import { useCallback, useState } from 'react'; import type { WorkspaceSettingDetailProps } from '../types'; @@ -33,10 +33,6 @@ export const DeleteLeaveWorkspace = ({ } }, [isOwner]); - const onCloseLeaveModal = useCallback(() => { - setShowLeave(false); - }, []); - const onLeaveConfirm = useCallback(() => { return onLeaveWorkspace(); }, [onLeaveWorkspace]); @@ -71,21 +67,21 @@ export const DeleteLeaveWorkspace = ({ { - setShowDelete(false); - }} + onOpenChange={setShowDelete} workspace={workspace} /> ) : ( )} diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx index 4b632e4232..29ec364b81 100644 --- a/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx +++ b/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx @@ -142,9 +142,7 @@ const PublishPanelLocal = ({ {runtimeConfig.enableCloud ? ( { - setOpen(false); - }} + onOpenChange={setOpen} onConfirm={() => { onTransferWorkspace( WorkspaceFlavour.LOCAL, @@ -155,12 +153,7 @@ const PublishPanelLocal = ({ }} /> ) : ( - { - setOpen(false); - }} - /> + )} ); diff --git a/apps/core/src/components/affine/onboarding-modal.tsx b/apps/core/src/components/affine/onboarding-modal.tsx index 6bfabc1147..5fc6abe6ff 100644 --- a/apps/core/src/components/affine/onboarding-modal.tsx +++ b/apps/core/src/components/affine/onboarding-modal.tsx @@ -8,12 +8,16 @@ import { guideOnboardingAtom } from '../../atoms/guide'; export const OnboardingModal = memo(function OnboardingModal() { const [open, setOpen] = useAtom(openOnboardingModalAtom); const [guideOpen, setShowOnboarding] = useAtom(guideOnboardingAtom); - const onCloseTourModal = useCallback(() => { - setShowOnboarding(false); - setOpen(false); - }, [setOpen, setShowOnboarding]); + const onOpenChange = useCallback( + (open: boolean) => { + if (open) return; + setShowOnboarding(false); + setOpen(false); + }, + [setOpen, setShowOnboarding] + ); return ( - + ); }); diff --git a/apps/core/src/components/affine/setting-modal/index.tsx b/apps/core/src/components/affine/setting-modal/index.tsx index 157db489a0..8a37faee1a 100644 --- a/apps/core/src/components/affine/setting-modal/index.tsx +++ b/apps/core/src/components/affine/setting-modal/index.tsx @@ -1,10 +1,7 @@ -import { - SettingModal as SettingModalBase, - type SettingModalProps as SettingModalBaseProps, - WorkspaceDetailSkeleton, -} from '@affine/component/setting-components'; +import { WorkspaceDetailSkeleton } from '@affine/component/setting-components'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { ContactWithUsIcon } from '@blocksuite/icons'; +import { Modal, type ModalProps } from '@toeverything/components/modal'; import { Suspense, useCallback } from 'react'; import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status'; @@ -20,7 +17,7 @@ import { WorkspaceSetting } from './workspace-setting'; type ActiveTab = GeneralSettingKeys | 'workspace' | 'account'; -export interface SettingProps { +export interface SettingProps extends ModalProps { activeTab: ActiveTab; workspaceId: string | null; onSettingClick: (params: { @@ -29,15 +26,12 @@ export interface SettingProps { }) => void; } -type SettingModalProps = SettingModalBaseProps & SettingProps; - export const SettingModal = ({ - open, - setOpen, activeTab = 'appearance', workspaceId = null, onSettingClick, -}: SettingModalProps) => { + ...modalProps +}: SettingProps) => { const t = useAFFiNEI18N(); const loginStatus = useCurrentLoginStatus(); @@ -66,7 +60,21 @@ export const SettingModal = ({ }, [onSettingClick]); return ( - + - + ); }; diff --git a/apps/core/src/components/affine/share-page-modal/index.tsx b/apps/core/src/components/affine/share-page-modal/index.tsx index 7a270c7520..55517842c4 100644 --- a/apps/core/src/components/affine/share-page-modal/index.tsx +++ b/apps/core/src/components/affine/share-page-modal/index.tsx @@ -30,9 +30,7 @@ export const SharePageModal = ({ workspace, page }: SharePageModalProps) => { {workspace.flavour === WorkspaceFlavour.LOCAL ? ( { - setOpen(false); - }} + onOpenChange={setOpen} onConfirm={() => { onTransformWorkspace( WorkspaceFlavour.LOCAL, diff --git a/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx b/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx index fbb94f2c73..f581d23dab 100644 --- a/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx +++ b/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx @@ -1,79 +1,61 @@ -import { Empty, Modal, ModalWrapper } from '@affine/component'; +import { Empty } from '@affine/component'; import { Trans } from '@affine/i18n'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { CloseIcon } from '@blocksuite/icons'; -import { IconButton } from '@toeverything/components/button'; +import { Modal, type ModalProps } from '@toeverything/components/modal'; +import { useCallback } from 'react'; import { - Content, - ContentTitle, - Header, StyleButton, StyleButtonContainer, StyleImage, StyleTips, } from './style'; -interface TmpDisableAffineCloudModalProps { - open: boolean; - onClose: () => void; -} - -export const TmpDisableAffineCloudModal = ({ - open, - onClose, -}: TmpDisableAffineCloudModalProps) => { +export const TmpDisableAffineCloudModal = (props: ModalProps) => { const t = useAFFiNEI18N(); - + const onClose = useCallback(() => { + props.onOpenChange?.(false); + }, [props]); return ( - -
- - - -
- - - {t['com.affine.cloudTempDisable.title']()} - - - - We are upgrading the AFFiNE Cloud service and it is temporarily - unavailable on the client side. If you wish to stay updated on the - progress and be notified on availability, you can fill out the - - AFFiNE Cloud Signup - - . - - - - - - - - {t['Got it']()} - - - - + + + We are upgrading the AFFiNE Cloud service and it is temporarily + unavailable on the client side. If you wish to stay updated on the + progress and be notified on availability, you can fill out the + + AFFiNE Cloud Signup + + . + + + + + + + + {t['Got it']()} + + ); }; diff --git a/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/style.ts b/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/style.ts index f51e4b2f52..24f4adde04 100644 --- a/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/style.ts +++ b/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/style.ts @@ -16,6 +16,7 @@ export const Content = styled('div')({ export const ContentTitle = styled('h1')(() => { return { + marginTop: 44, fontSize: 'var(--affine-font-h6)', lineHeight: '28px', fontWeight: 600, @@ -24,8 +25,7 @@ export const ContentTitle = styled('h1')(() => { export const StyleTips = styled('div')(() => { return { - userSelect: 'none', - margin: '20px 0', + margin: '0 0 20px 0', a: { color: 'var(--affine-primary-color)', }, @@ -35,7 +35,6 @@ export const StyleTips = styled('div')(() => { export const StyleButton = styled(Button)(() => { return { textAlign: 'center', - margin: '20px 0', borderRadius: '8px', backgroundColor: 'var(--affine-primary-color)', span: { @@ -46,11 +45,12 @@ export const StyleButton = styled(Button)(() => { export const StyleButtonContainer = styled('div')(() => { return { width: '100%', + marginTop: 20, ...displayFlex('flex-end', 'center'), }; }); export const StyleImage = styled('div')(() => { return { - width: '100%', + ...displayFlex('center', 'center'), }; }); diff --git a/apps/core/src/components/affine/transform-workspace-to-affine-modal/index.tsx b/apps/core/src/components/affine/transform-workspace-to-affine-modal/index.tsx deleted file mode 100644 index 26661320ed..0000000000 --- a/apps/core/src/components/affine/transform-workspace-to-affine-modal/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { Modal, ModalWrapper } from '@affine/component'; -import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { CloseIcon } from '@blocksuite/icons'; -import { IconButton } from '@toeverything/components/button'; - -import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style'; - -export interface TransformWorkspaceToAffineModalProps { - open: boolean; - onClose: () => void; - onConform: () => void; -} - -export const TransformWorkspaceToAffineModal = ({ - open, - onClose, - onConform, -}: TransformWorkspaceToAffineModalProps) => { - const t = useAFFiNEI18N(); - - return ( - - -
- - - -
- - {t['Enable AFFiNE Cloud']()}? - {t['Enable AFFiNE Cloud Description']()} - {/* {t('Retain cached cloud data')} */} -
- - {t['Sign in and Enable']()} - - { - onClose(); - }} - > - {t['Not now']()} - -
- - - - ); -}; diff --git a/apps/core/src/components/affine/transform-workspace-to-affine-modal/style.ts b/apps/core/src/components/affine/transform-workspace-to-affine-modal/style.ts deleted file mode 100644 index 449effb2c3..0000000000 --- a/apps/core/src/components/affine/transform-workspace-to-affine-modal/style.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { styled } from '@affine/component'; -import { Button } from '@toeverything/components/button'; - -export const Header = styled('div')({ - height: '44px', - display: 'flex', - flexDirection: 'row-reverse', - paddingRight: '10px', - paddingTop: '10px', - flexShrink: 0, -}); - -export const Content = styled('div')({ - textAlign: 'center', -}); - -export const ContentTitle = styled('h1')({ - fontSize: '20px', - lineHeight: '28px', - fontWeight: 600, - textAlign: 'center', -}); - -export const StyleTips = styled('div')(() => { - return { - userSelect: 'none', - width: '400px', - margin: 'auto', - marginBottom: '32px', - marginTop: '12px', - }; -}); - -export const StyleButton = styled(Button)(() => { - return { - width: '284px', - display: 'block', - margin: 'auto', - marginTop: '16px', - }; -}); diff --git a/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx b/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx index 8df5c83161..0a686827d1 100644 --- a/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx +++ b/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx @@ -225,9 +225,7 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => { open={openConfirm} title={pageMeta.title} onConfirm={handleOnConfirm} - onCancel={() => { - setOpenConfirm(false); - }} + onOpenChange={setOpenConfirm} /> diff --git a/apps/core/src/components/pure/quick-search-modal/index.tsx b/apps/core/src/components/pure/quick-search-modal/index.tsx index f5e656f994..89236c443f 100644 --- a/apps/core/src/components/pure/quick-search-modal/index.tsx +++ b/apps/core/src/components/pure/quick-search-modal/index.tsx @@ -1,5 +1,5 @@ -import { Modal, ModalWrapper } from '@affine/component'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { Modal } from '@toeverything/components/modal'; import { Command } from 'cmdk'; import { startTransition, Suspense } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; @@ -75,93 +75,86 @@ export const QuickSearchModal = ({ return ( - + { + if ( + e.key === 'ArrowDown' || + e.key === 'ArrowUp' || + e.key === 'ArrowLeft' || + e.key === 'ArrowRight' + ) { + e.stopPropagation(); + } }} > - {/* { - setOpen(false); - }} - /> */} - { - if ( - e.key === 'ArrowDown' || - e.key === 'ArrowUp' || - e.key === 'ArrowLeft' || - e.key === 'ArrowRight' - ) { - e.stopPropagation(); - } - }} - > - - { - setQuery(value); - }} - onKeyDown={e => { - // Avoid triggering the cmdk onSelect event when the input method is in use - if (e.nativeEvent.isComposing) { - e.stopPropagation(); - return; - } - }} - placeholder={t['Quick search placeholder']()} - /> - - {environment.isBrowser && environment.isMacOs - ? '⌘ + K' - : 'Ctrl + K'} - - - - - - - {t['com.affine.loading']()} - - } - > - + { + setQuery(value); + }} + onKeyDown={e => { + // Avoid triggering the cmdk onSelect event when the input method is in use + if (e.nativeEvent.isComposing) { + e.stopPropagation(); + return; + } + }} + placeholder={t['Quick search placeholder']()} + /> + + {environment.isBrowser && environment.isMacOs + ? '⌘ + K' + : 'Ctrl + K'} + + + + + + + {t['com.affine.loading']()} + + } + > + + + + {showCreatePage ? ( + <> + + +