Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-16 17:46:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: a series of bugs

Browse Source
This commit is contained in:
QiShaoXuan
2022-12-19 17:06:14 +08:00
parent 0c7aa70645
commit 0c68c00bd6
11 changed files with 163 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/header/header.tsx
+44 -3
View File
@@ -13,6 +13,9 @@ import {
ExportToHtmlIcon,
ExportToMarkdownIcon,
MoreVerticalIcon,
FavouritesIcon,
FavouritedIcon,
TrashIcon,
} from '@blocksuite/icons';
import { useEditor } from '@/providers/editor-provider';
import ThemeModeSwitch from '@/components/theme-mode-switch';
@@ -22,15 +25,37 @@ import { getWarningMessage, shouldShowWarning } from './utils';
import { Menu, MenuItem } from '@/ui/menu';
import { useRouter } from 'next/router';
import { useConfirm } from '@/providers/confirm-provider';
import { useModal } from '@/providers/global-modal-provider';
import { useAppState } from '@/providers/app-state-provider';
import { SyncIcon } from './sync-icon';
import { toast } from '@/components/toast';
const PopoverContent = () => {
const { editor, mode, setMode } = useEditor();
const {
editor,
mode,
setMode,
getPageMeta,
page,
toggleFavoritePage,
toggleDeletePage,
} = useEditor();
const { confirm } = useConfirm();
const { id, favorite, title } = getPageMeta(page?.id) ?? {
id: '',
favorite: false,
title: '',
};
return (
<>
<MenuItem
onClick={() => {
toggleFavoritePage(id);
}}
icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
>
{favorite ? 'Remove' : 'Add'} to favourites
</MenuItem>
<MenuItem
icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
onClick={() => {
@@ -66,6 +91,22 @@ const PopoverContent = () => {
Export
</MenuItem>
</Menu>
<MenuItem
onClick={() => {
confirm({
title: 'Delete page?',
content: `${title || 'Untitled'} will be moved to Trash`,
confirmText: 'Delete',
confirmType: 'danger',
}).then(confirm => {
confirm && toggleDeletePage(id);
toast('Moved to Trash');
});
}}
icon={<TrashIcon />}
>
Delete
</MenuItem>
</>
);
};
packages/app/src/components/page-list/index.tsx
+39 -17
View File
@@ -6,7 +6,6 @@ import {
EdgelessIcon,
} from '@blocksuite/icons';
import {
StyledFavoriteButton,
StyledTableContainer,
StyledTableRow,
StyledTitleLink,
@@ -18,19 +17,31 @@ import Empty from './empty';
import { Content } from '@/ui/layout';
import React from 'react';
import DateCell from '@/components/page-list/date-cell';
const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => {
import { IconButton } from '@/ui/button';
import { Tooltip } from '@/ui/tooltip';
import { router } from 'next/client';
const FavoriteTag = ({
pageMeta: { favorite, id },
}: {
pageMeta: PageMeta;
}) => {
const { toggleFavoritePage } = useEditor();
return (
<StyledFavoriteButton
className="favorite-button"
favorite={pageMeta.favorite}
onClick={() => {
toggleFavoritePage(pageMeta.id);
}}
<Tooltip
content={favorite ? 'Favourited' : 'Favourite'}
placement="top-start"
>
{pageMeta.favorite ? <FavouritedIcon /> : <FavouritesIcon />}
</StyledFavoriteButton>
<IconButton
darker={true}
iconSize={[20, 20]}
onClick={e => {
e.stopPropagation();
toggleFavoritePage(id);
}}
>
{favorite ? <FavouritedIcon /> : <FavouritesIcon />}
</IconButton>
</Tooltip>
);
};
@@ -52,7 +63,7 @@ export const PageList = ({
<Table>
<TableHead>
<TableRow>
<TableCell proportion={0.5}>Documents</TableCell>
<TableCell proportion={0.5}>Title</TableCell>
<TableCell proportion={0.2}>Created</TableCell>
<TableCell proportion={0.2}>
{isTrash ? 'Moved to Trash' : 'Updated'}
@@ -63,12 +74,18 @@ export const PageList = ({
<TableBody>
{pageList.map((pageMeta, index) => {
return (
<StyledTableRow key={`${pageMeta.id}-${index}`}>
<StyledTableRow
key={`${pageMeta.id}-${index}`}
onClick={() => {
router.push({
pathname: '/',
query: { pageId: pageMeta.id },
});
}}
>
<TableCell>
<StyledTitleWrapper>
<StyledTitleLink
href={{ pathname: '/', query: { pageId: pageMeta.id } }}
>
<StyledTitleLink>
{pageMeta.mode === 'edgeless' ? (
<EdgelessIcon />
) : (
@@ -87,7 +104,12 @@ export const PageList = ({
dateKey={isTrash ? 'trashDate' : 'updatedDate'}
backupKey={isTrash ? 'trashDate' : 'createDate'}
/>
<TableCell style={{ padding: 0 }}>
<TableCell
style={{ padding: 0 }}
onClick={e => {
e.stopPropagation();
}}
>
{isTrash ? (
<TrashOperationCell pageMeta={pageMeta} />
) : (
packages/app/src/components/page-list/operation-cell.tsx
+13 -9
View File
@@ -12,7 +12,7 @@ import {
OpenInNewIcon,
TrashIcon,
} from '@blocksuite/icons';
import React from 'react';
import { toast } from '@/components/toast';
export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
const { id, favorite } = pageMeta;
@@ -41,11 +41,12 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
onClick={() => {
confirm({
title: 'Delete page?',
content: `${pageMeta.title} will be moved to Trash`,
content: `${pageMeta.title || 'Untitled'} will be moved to Trash`,
confirmText: 'Delete',
confirmType: 'danger',
}).then(confirm => {
confirm && toggleDeletePage(id);
toast('Moved to Trash');
});
}}
icon={<TrashIcon />}
@@ -57,7 +58,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
return (
<Wrapper alignItems="center" justifyContent="center">
<Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
<IconButton hoverBackground="#E0E6FF">
<IconButton darker={true}>
<MoreVerticalIcon />
</IconButton>
</Menu>
@@ -67,31 +68,34 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
const { id } = pageMeta;
const { permanentlyDeletePage, toggleDeletePage } = useEditor();
const { permanentlyDeletePage, toggleDeletePage, openPage, getPageMeta } =
useEditor();
const { confirm } = useConfirm();
return (
<Wrapper>
<IconButton
hoverBackground="#E0E6FF"
darker={true}
style={{ marginRight: '12px' }}
onClick={() => {
toggleDeletePage(id);
toast(`${getPageMeta(id)?.title || 'Untitled'} restored`);
openPage(id);
}}
>
<RestoreIcon />
</IconButton>
<IconButton
hoverBackground="#E0E6FF"
darker={true}
onClick={() => {
confirm({
title: 'Permanently delete',
content:
"Once deleted, you can't undo this action. Do you confirm?",
title: 'Delete permanently?',
content: "Once deleted, you can't undo this action.",
confirmText: 'Delete',
confirmType: 'danger',
}).then(confirm => {
confirm && permanentlyDeletePage(id);
toast('Permanently deleted');
});
}}
>
packages/app/src/components/page-list/styles.ts
+3 -22
View File
@@ -23,7 +23,7 @@ export const StyledTitleWrapper = styled.div(({ theme }) => {
},
};
});
export const StyledTitleLink = styled(Link)(({ theme }) => {
export const StyledTitleLink = styled.div(({ theme }) => {
return {
maxWidth: '80%',
marginRight: '18px',
@@ -34,31 +34,12 @@ export const StyledTitleLink = styled(Link)(({ theme }) => {
marginRight: '12px',
color: theme.colors.iconColor,
},
':hover': {
color: theme.colors.textColor,
'>svg': {
color: theme.colors.primaryColor,
},
},
};
});
export const StyledFavoriteButton = styled.button<{ favorite: boolean }>(
({ theme, favorite }) => {
return {
width: '32px',
height: '32px',
justifyContent: 'center',
alignItems: 'center',
display: 'none',
color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
'&:hover': {
color: theme.colors.primaryColor,
},
};
}
);
export const StyledTableRow = styled(TableRow)(({ theme }) => {
return {
cursor: 'pointer',
'&:hover': {
'.favorite-button': {
display: 'flex',
packages/app/src/components/workspace-slider-bar/index.tsx
+12 -8
View File
@@ -19,6 +19,7 @@ import {
ImportIcon,
TrashIcon,
AddIcon,
FavouritedIcon,
} from '@blocksuite/icons';
import Link from 'next/link';
import { Tooltip } from '@/ui/tooltip';
@@ -93,7 +94,7 @@ export const WorkSpaceSliderBar = () => {
Favourites
</StyledLink>
<IconButton
hoverBackground="#E0E6FF"
darker={true}
onClick={() => {
setShowSubFavorite(!showSubFavorite);
}}
@@ -107,13 +108,16 @@ export const WorkSpaceSliderBar = () => {
</StyledListItem>
<FavoriteList showList={showSubFavorite} />
<StyledListItem
onClick={() => {
triggerImportModal();
}}
>
<ImportIcon /> Import
</StyledListItem>
<Tooltip content="Coming soon" placement="right-start" zIndex={9999}>
<StyledListItem
disabled={true}
onClick={() => {
// triggerImportModal();
}}
>
<ImportIcon /> Import
</StyledListItem>
</Tooltip>
<Link href={{ pathname: '/page-list/trash' }}>
<StyledListItem active={router.pathname === '/page-list/trash'}>
packages/app/src/components/workspace-slider-bar/style.ts
+27 -23
View File
@@ -43,29 +43,33 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>(
}
);
export const StyledListItem = styled.button<{ active?: boolean }>(
({ theme, active }) => {
return {
width: '296px',
height: '32px',
marginTop: '12px',
fontSize: theme.font.sm,
color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
backgroundColor: active ? theme.colors.hoverBackground : 'unset',
paddingLeft: '12px',
borderRadius: '5px',
...displayFlex('flex-start', 'center'),
'>svg': {
fontSize: '20px',
marginRight: '12px',
},
':hover': {
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
},
};
}
);
export const StyledListItem = styled.button<{
active?: boolean;
disabled?: boolean;
}>(({ theme, active, disabled }) => {
return {
width: '296px',
height: '32px',
marginTop: '12px',
fontSize: theme.font.sm,
color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
paddingLeft: '12px',
borderRadius: '5px',
...displayFlex('flex-start', 'center'),
...(disabled
? { cursor: 'not-allowed', color: theme.colors.borderColor }
: {}),
'>svg': {
fontSize: '20px',
marginRight: '12px',
},
':hover:not([disabled])': {
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
},
};
});
export const StyledListItemForWorkspace = styled(StyledListItem)({
height: '52px',
packages/app/src/pages/page-list/favorite.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export const Favorite = () => {
const { pageList: allPageList } = useEditor();
return (
<>
<PageListHeader icon={<FavouritesIcon />}>Favorites</PageListHeader>
<PageListHeader icon={<FavouritesIcon />}>Favourites</PageListHeader>
<PageList pageList={allPageList.filter(p => p.favorite && !p.trash)} />
</>
);
packages/app/src/providers/editor-provider/interface.ts
+1 -1
View File
@@ -31,7 +31,7 @@ export type EditorHandlers = {
pageId: string,
query?: { [key: string]: string }
) => Promise<boolean>;
getPageMeta: (pageId?: string) => PageMeta | void;
getPageMeta: (pageId?: string) => PageMeta;
toggleDeletePage: (pageId: string) => void;
toggleFavoritePage: (pageId: string) => void;
permanentlyDeletePage: (pageId: string) => void;
packages/app/src/ui/button/icon-button.tsx
+1
View File
@@ -43,6 +43,7 @@ export type IconButtonProps = {
hoverColor?: string;
hoverStyle?: CSSProperties;
children: ReactElement<HTMLAttributes<SVGElement>, 'svg'>;
darker?: boolean;
} & HTMLAttributes<HTMLButtonElement>;
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
packages/app/src/ui/button/styles.ts
+15 -4
View File
@@ -14,6 +14,7 @@ export const StyledIconButton = styled('button', {
'hoverBackground',
'hoverColor',
'hoverStyle',
'darker',
].includes(prop);
},
})<{
@@ -24,6 +25,8 @@ export const StyledIconButton = styled('button', {
hoverBackground?: CSSProperties['background'];
hoverColor?: string;
hoverStyle?: CSSProperties;
// In some cases, button is in a normal hover status, it should be darkened
darker?: boolean;
}>(
({
theme,
@@ -33,6 +36,7 @@ export const StyledIconButton = styled('button', {
hoverBackground,
hoverColor,
hoverStyle,
darker = false,
}) => {
return {
width,
@@ -40,7 +44,7 @@ export const StyledIconButton = styled('button', {
color: theme.colors.iconColor,
...displayInlineFlex('center', 'center'),
position: 'relative',
...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
...(disabled ? { cursor: 'not-allowed' } : {}),
transition: 'background .15s',
// TODO: we need to add @emotion/babel-plugin
@@ -61,7 +65,10 @@ export const StyledIconButton = styled('button', {
':hover': {
color: hoverColor ?? theme.colors.primaryColor,
'::after': {
background: hoverBackground ?? theme.colors.hoverBackground,
background:
hoverBackground ?? darker
? theme.colors.innerHoverBackground
: theme.colors.hoverBackground,
},
...(hoverStyle ?? {}),
},
@@ -116,7 +123,7 @@ export const StyledTextButton = styled('button', {
paddingRight: padding,
...displayInlineFlex('flex-start', 'center'),
position: 'relative',
...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
...(disabled ? { cursor: 'not-allowed' } : {}),
transition: 'background .15s',
// TODO: Implement circle shape
borderRadius: shape === 'default' ? borderRadius : height / 2,
@@ -171,7 +178,10 @@ export const StyledButton = styled('button', {
border: '1px solid',
...displayInlineFlex('flex-start', 'center'),
position: 'relative',
...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
// TODO: disabled color is not decided
...(disabled
? { cursor: 'not-allowed', color: theme.colors.borderColor }
: {}),
transition: 'background .15s',
// TODO: Implement circle shape
borderRadius: shape === 'default' ? borderRadius : height / 2,
@@ -190,6 +200,7 @@ export const StyledButton = styled('button', {
hoverStyle,
}),
// TODO: disabled hover should be implemented
//
// ':hover': {
// color: hoverColor ?? theme.colors.primaryColor,
packages/app/src/ui/table/styles.ts
+7
View File
@@ -40,6 +40,13 @@ export const StyledTableCell = styled.td<
export const StyledTableHead = styled.thead(({ theme }) => {
return {
fontWeight: 500,
tr: {
':hover': {
td: {
background: 'unset',
},
},
},
};
});