mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-24 04:06:09 +03:00
feat: new pop message on details page (#1392)
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
parent
0db7868a6a
commit
7f77619515
@ -26,6 +26,7 @@ export type OperationCellProps = {
|
|||||||
onToggleFavoritePage: (pageId: string) => void;
|
onToggleFavoritePage: (pageId: string) => void;
|
||||||
onToggleTrashPage: (pageId: string) => void;
|
onToggleTrashPage: (pageId: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const OperationCell: React.FC<OperationCellProps> = ({
|
export const OperationCell: React.FC<OperationCellProps> = ({
|
||||||
pageMeta,
|
pageMeta,
|
||||||
onOpenPageInNewTab,
|
onOpenPageInNewTab,
|
||||||
@ -119,9 +120,6 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
|
|||||||
onOpenPage,
|
onOpenPage,
|
||||||
}) => {
|
}) => {
|
||||||
const { id, title } = pageMeta;
|
const { id, title } = pageMeta;
|
||||||
// const { openPage, getPageMeta } = usePageHelper();
|
|
||||||
// const { toggleDeletePage, permanentlyDeletePage } = usePageHelper();
|
|
||||||
// const confirm = useConfirm(store => store.confirm);
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
return (
|
return (
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
// fixme(himself65): refactor this file
|
// fixme(himself65): refactor this file
|
||||||
import { Menu, MenuItem } from '@affine/component';
|
import { Confirm, FlexWrapper, Menu, MenuItem } from '@affine/component';
|
||||||
import { IconButton } from '@affine/component';
|
import { IconButton } from '@affine/component';
|
||||||
import { toast } from '@affine/component';
|
import { toast } from '@affine/component';
|
||||||
import { useTranslation } from '@affine/i18n';
|
import { useTranslation } from '@affine/i18n';
|
||||||
@ -14,6 +14,7 @@ import {
|
|||||||
} from '@blocksuite/icons';
|
} from '@blocksuite/icons';
|
||||||
import { assertExists } from '@blocksuite/store';
|
import { assertExists } from '@blocksuite/store';
|
||||||
import { useTheme } from '@mui/material';
|
import { useTheme } from '@mui/material';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
|
import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
|
||||||
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
|
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
|
||||||
@ -23,7 +24,7 @@ import {
|
|||||||
} from '../../../../hooks/use-page-meta';
|
} from '../../../../hooks/use-page-meta';
|
||||||
import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/Icons';
|
import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/Icons';
|
||||||
|
|
||||||
const PopoverContent = () => {
|
export const EditorOptionMenu = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
@ -39,9 +40,9 @@ const PopoverContent = () => {
|
|||||||
assertExists(pageMeta);
|
assertExists(pageMeta);
|
||||||
const { mode = 'page', favorite, trash } = pageMeta;
|
const { mode = 'page', favorite, trash } = pageMeta;
|
||||||
const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
|
const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
|
||||||
//
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
const EditMenu = (
|
||||||
<>
|
<>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
data-testid="editor-option-menu-favorite"
|
data-testid="editor-option-menu-favorite"
|
||||||
@ -105,9 +106,7 @@ const PopoverContent = () => {
|
|||||||
<MenuItem
|
<MenuItem
|
||||||
data-testid="editor-option-menu-delete"
|
data-testid="editor-option-menu-delete"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// fixme(himself65): regression that don't have conform dialog
|
setOpen(true);
|
||||||
setPageMeta(pageId, { trash: !trash, trashDate: +new Date() });
|
|
||||||
toast(t('Moved to Trash'));
|
|
||||||
}}
|
}}
|
||||||
icon={<DeleteTemporarilyIcon />}
|
icon={<DeleteTemporarilyIcon />}
|
||||||
>
|
>
|
||||||
@ -115,14 +114,41 @@ const PopoverContent = () => {
|
|||||||
</MenuItem>
|
</MenuItem>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export const EditorOptionMenu = () => {
|
|
||||||
return (
|
return (
|
||||||
<Menu content={<PopoverContent />} placement="bottom-end" trigger="click">
|
<>
|
||||||
|
<FlexWrapper alignItems="center" justifyContent="center">
|
||||||
|
<Menu
|
||||||
|
content={EditMenu}
|
||||||
|
placement="bottom-end"
|
||||||
|
disablePortal={true}
|
||||||
|
trigger="click"
|
||||||
|
>
|
||||||
<IconButton data-testid="editor-option-menu" iconSize={[20, 20]}>
|
<IconButton data-testid="editor-option-menu" iconSize={[20, 20]}>
|
||||||
<MoreVerticalIcon />
|
<MoreVerticalIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Menu>
|
</Menu>
|
||||||
|
</FlexWrapper>
|
||||||
|
<Confirm
|
||||||
|
title={t('Delete page?')}
|
||||||
|
content={t('will be moved to Trash', {
|
||||||
|
title: pageMeta.title || 'Untitled',
|
||||||
|
})}
|
||||||
|
confirmText={t('Delete')}
|
||||||
|
confirmType="danger"
|
||||||
|
open={open}
|
||||||
|
onConfirm={() => {
|
||||||
|
toast(t('Moved to Trash'));
|
||||||
|
setOpen(false);
|
||||||
|
setPageMeta(pageId, { trash: !trash, trashDate: +new Date() });
|
||||||
|
}}
|
||||||
|
onClose={() => {
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user