toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-24 04:06:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: new pop message on details page (#1392)

Browse Source 
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Alberto de la Cruz 2023-03-08 20:24:56 +01:00 committed by GitHub
parent 0db7868a6a
commit 7f77619515
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx
View File

@ -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 (

46
apps/web/src/components/blocksuite/header/header-right-items/EditorOptionMenu.tsx
View File

@ -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);
}}
/>
</>
); );
}; };