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

Merge branch 'develop' into feat/quick-search

Browse Source
This commit is contained in:
JimmFly
2022-12-13 18:04:02 +08:00
parent 32d24d322a 47c3c7192c
commit a7438936a5
22 changed files with 175 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/package.json
+1
View File
@@ -25,6 +25,7 @@
"@toeverything/pathfinder-logger": "workspace:@pathfinder/logger@*",
"cmdk": "^0.1.20",
"css-spring": "^4.1.0",
"dayjs": "^1.11.7",
"lit": "^2.3.1",
"next": "13.0.1",
"prettier": "^2.7.1",
packages/app/src/components/edgeless-toolbar/index.tsx
+11 -9
View File
@@ -75,16 +75,18 @@ const toolbarList2 = [
const UndoRedo = () => {
const [canUndo, setCanUndo] = useState(false);
const [canRedo, setCanRedo] = useState(false);
const { editor } = useEditor();
const { currentPage } = useEditor();
useEffect(() => {
if (!editor) return;
const { space } = editor;
if (!currentPage) return;
space.signals.historyUpdated.on(() => {
setCanUndo(space.canUndo);
setCanRedo(space.canRedo);
currentPage.signals.historyUpdated.on(() => {
setCanUndo(currentPage.canUndo);
setCanRedo(currentPage.canRedo);
});
}, [editor]);
return () => {
currentPage.signals.historyUpdated.dispose();
};
}, [currentPage]);
return (
<StyledToolbarWrapper>
@@ -92,7 +94,7 @@ const UndoRedo = () => {
<StyledToolbarItem
disable={!canUndo}
onClick={() => {
editor?.space?.undo();
currentPage?.undo();
}}
>
<UndoIcon />
@@ -102,7 +104,7 @@ const UndoRedo = () => {
<StyledToolbarItem
disable={!canRedo}
onClick={() => {
editor?.space?.redo();
currentPage?.redo();
}}
>
<RedoIcon />
packages/app/src/components/header/index.tsx
+1
View File
@@ -1,2 +1,3 @@
export * from './header';
export * from './page-header';
export { StyledTitle as HeaderWrapper } from './styles';
packages/app/src/components/import/index.tsx
+13 -7
View File
@@ -1,7 +1,7 @@
import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
import { StyledButtonWrapper, StyledTitle } from './styles';
import { Button } from '@/ui/button';
import { Wrapper } from '@/ui/layout';
import { Wrapper, Content } from '@/ui/layout';
import { Loading } from '@/components/loading';
import { useEffect, useState } from 'react';
type ImportModalProps = {
@@ -9,21 +9,19 @@ type ImportModalProps = {
onClose: () => void;
};
export const ImportModal = ({ open, onClose }: ImportModalProps) => {
const [status, setStatus] = useState<'unImported' | 'importing'>(
'unImported'
);
const [status, setStatus] = useState<'unImported' | 'importing'>('importing');
useEffect(() => {
if (status === 'importing') {
setTimeout(() => {
setStatus('unImported');
}, 3000);
}, 1500);
}
}, [status]);
return (
<Modal open={open} onClose={onClose}>
<ModalWrapper width={460} height={240}>
<ModalWrapper width={460} minHeight={240}>
<ModalCloseButton onClick={onClose} />
<StyledTitle>Import</StyledTitle>
@@ -47,8 +45,16 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
)}
{status === 'importing' && (
<Wrapper justifyContent="center" style={{ marginTop: 22 }}>
<Wrapper
wrap={true}
justifyContent="center"
style={{ marginTop: 22, paddingBottom: '32px' }}
>
<Loading size={25}></Loading>
<Content align="center" weight="500">
OOOOPS! Sorry forgot to remind you that we are working on the
import function
</Content>
</Wrapper>
)}
</ModalWrapper>
packages/app/src/components/import/styles.ts
-5
View File
@@ -23,8 +23,3 @@ export const StyledButtonWrapper = styled.div(() => {
},
};
});
export const StyledLoadingWrapper = styled.div(() => {
return {
}
})
packages/app/src/components/page-list/date-cell.tsx
+24
View File
@@ -0,0 +1,24 @@
import localizedFormat from 'dayjs/plugin/localizedFormat';
import dayjs from 'dayjs';
import { PageMeta } from '@/providers/editor-provider';
import { TableCell } from '@/ui/table';
import React from 'react';
dayjs.extend(localizedFormat);
export const DateCell = ({
pageMeta,
dateKey,
}: {
pageMeta: PageMeta;
dateKey: keyof PageMeta;
}) => {
// dayjs().format('L LT');
return (
<TableCell ellipsis={true}>
{dayjs(pageMeta[dateKey] as string).format('YYYY-MM-DD HH:MM')}
</TableCell>
);
};
export default DateCell;
packages/app/src/components/page-list/index.tsx
+9 -4
View File
@@ -12,6 +12,7 @@ import { OperationCell, TrashOperationCell } from './operation-cell';
import Empty from './empty';
import Link from 'next/link';
import React from 'react';
import DateCell from '@/components/page-list/date-cell';
const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => {
const { toggleFavoritePage } = useEditor();
@@ -40,6 +41,7 @@ export const PageList = ({
if (pageList.length === 0) {
return <Empty />;
}
return (
<StyledTableContainer>
<Table>
@@ -48,7 +50,7 @@ export const PageList = ({
<TableCell proportion={0.5}>Documents</TableCell>
<TableCell proportion={0.2}>Created</TableCell>
<TableCell proportion={0.2}>
{isTrash ? 'Uploaded' : 'Moved to Trash'}
{isTrash ? 'Moved to Trash' : 'Uploaded'}
</TableCell>
<TableCell proportion={0.1}></TableCell>
</TableRow>
@@ -69,9 +71,12 @@ export const PageList = ({
{showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}
</StyledTitleWrapper>
</TableCell>
<TableCell ellipsis={true}>{pageMeta.createDate}</TableCell>
<TableCell ellipsis={true}>{pageMeta.createDate}</TableCell>
<TableCell>
<DateCell pageMeta={pageMeta} dateKey="createDate" />
<DateCell
pageMeta={pageMeta}
dateKey={isTrash ? 'trashDate' : 'createDate'}
/>
<TableCell style={{ padding: 0 }}>
{isTrash ? (
<TrashOperationCell pageMeta={pageMeta} />
) : (
packages/app/src/components/page-list/operation-cell.tsx
+12 -1
View File
@@ -3,7 +3,15 @@ import { useConfirm } from '@/providers/confirm-provider';
import { Menu, MenuItem } from '@/ui/menu';
import { Wrapper } from '@/ui/layout';
import { IconButton } from '@/ui/button';
import { MoreVerticalIcon, RestoreIcon, DeleteIcon } from '@blocksuite/icons';
import {
MoreVerticalIcon,
RestoreIcon,
DeleteIcon,
FavouritesIcon,
FavouritedIcon,
OpenInNewIcon,
TrashIcon,
} from '@blocksuite/icons';
import React from 'react';
export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
@@ -17,6 +25,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
onClick={() => {
toggleFavoritePage(id);
}}
icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
>
{favorite ? 'Remove' : 'Add'} to favourites
</MenuItem>
@@ -24,6 +33,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
onClick={() => {
openPage(id);
}}
icon={<OpenInNewIcon />}
>
Open in new tab
</MenuItem>
@@ -39,6 +49,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
confirm && toggleDeletePage(id);
});
}}
icon={<TrashIcon />}
>
Delete
</MenuItem>
packages/app/src/components/quick-search/content/searchResult/NotFound.tsx
+4 -1
View File
@@ -1,8 +1,11 @@
import React from 'react';
import { Command, useCommandState } from 'cmdk';
const NoResult = (props: { query: string }) => {
const NoResult = () => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const search = useCommandState(state => state.search);
// eslint-disable-next-line react/no-unescaped-entities
return <Command.Empty>No results found for "{search}".</Command.Empty>;
};
packages/app/src/components/quick-search/index.tsx
+1 -2
View File
@@ -22,7 +22,6 @@ const isMac = () => {
export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
const [query, setQuery] = useState('');
const { triggerQuickSearchModal } = useModal();
useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === 'k' && e.metaKey) {
@@ -38,7 +37,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
};
document.addEventListener('keydown', down);
return () => document.removeEventListener('keydown', down);
}, [open]);
}, [open, triggerQuickSearchModal]);
return (
<Modal open={open} onClose={onClose} wrapperPosition={['top', 'center']}>
<ModalWrapper
packages/app/src/components/workspace-slider-bar/index.tsx
+19 -12
View File
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { useRouter } from 'next/router';
import {
StyledArrowButton,
StyledLink,
StyledListItem,
StyledNewPageButton,
StyledSliderBar,
@@ -9,7 +10,15 @@ import {
} from './style';
import { Arrow } from './icons';
import Collapse from '@mui/material/Collapse';
import { ArrowDownIcon } from '@blocksuite/icons';
import {
ArrowDownIcon,
SearchIcon,
AllPagesIcon,
FavouritesIcon,
ImportIcon,
TrashIcon,
AddIcon,
} from '@blocksuite/icons';
import Link from 'next/link';
import { useEditor } from '@/providers/editor-provider';
import { useModal } from '@/providers/global-modal-provider';
@@ -20,7 +29,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
const { pageList, openPage } = useEditor();
const router = useRouter();
const favoriteList = pageList.filter(p => p.favorite);
const favoriteList = pageList.filter(p => p.favorite && !p.trash);
return (
<Collapse in={showList}>
{favoriteList.map((pageMeta, index) => {
@@ -61,20 +70,18 @@ export const WorkSpaceSliderBar = () => {
triggerQuickSearchModal();
}}
>
Quick search
<SearchIcon /> Quick search
</StyledListItem>
<Link href={{ pathname: '/page-list/all' }}>
<StyledListItem active={router.pathname === '/page-list/all'}>
All pages
<AllPagesIcon /> All pages
</StyledListItem>
</Link>
<StyledListItem active={router.pathname === '/page-list/favorite'}>
<Link
href={{ pathname: '/page-list/favorite' }}
style={{ flexGrow: 1, textAlign: 'left', color: 'inherit' }}
>
<StyledLink href={{ pathname: '/page-list/favorite' }}>
<FavouritesIcon />
Favourites
</Link>
</StyledLink>
<IconButton
hoverBackground="#E0E6FF"
onClick={() => {
@@ -95,12 +102,12 @@ export const WorkSpaceSliderBar = () => {
triggerImportModal();
}}
>
Import
<ImportIcon /> Import
</StyledListItem>
<Link href={{ pathname: '/page-list/trash' }}>
<StyledListItem active={router.pathname === '/page-list/trash'}>
Trash
<TrashIcon /> Trash
</StyledListItem>
</Link>
<StyledNewPageButton
@@ -110,7 +117,7 @@ export const WorkSpaceSliderBar = () => {
pageMeta && openPage(pageMeta.id);
}}
>
New Page
<AddIcon /> New Page
</StyledNewPageButton>
</StyledSliderBar>
<StyledArrowButton
packages/app/src/components/workspace-slider-bar/style.ts
+20
View File
@@ -1,4 +1,5 @@
import { displayFlex, styled, textEllipsis } from '@/styles';
import Link from 'next/link';
export const StyledSliderBar = styled.div<{ show: boolean }>(
({ theme, show }) => {
@@ -54,6 +55,10 @@ export const StyledListItem = styled.button<{ active?: boolean }>(
paddingLeft: '12px',
borderRadius: '5px',
...displayFlex('flex-start', 'center'),
'>svg': {
fontSize: '20px',
marginRight: '12px',
},
':hover': {
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
@@ -62,6 +67,21 @@ export const StyledListItem = styled.button<{ active?: boolean }>(
}
);
export const StyledLink = styled(Link)(({ theme }) => {
return {
flexGrow: 1,
textAlign: 'left',
color: 'inherit',
...displayFlex('flex-start', 'center'),
':visited': {
color: 'inherit',
},
'>svg': {
fontSize: '20px',
marginRight: '12px',
},
};
});
export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => {
return {
position: 'absolute',
packages/app/src/pages/page-list/all.tsx
+8 -1
View File
@@ -1,12 +1,19 @@
import { Header } from '@/components/header';
import { useEditor } from '@/providers/editor-provider';
import { PageList } from '@/components/page-list';
import { StyledWrapper } from '@/pages/page-list/styles';
import { AllPagesIcon } from '@blocksuite/icons';
export const All = () => {
const { pageList: allPageList } = useEditor();
return (
<>
<Header />
<Header>
<StyledWrapper>
<AllPagesIcon />
All Pages
</StyledWrapper>
</Header>
<PageList
pageList={allPageList.filter(p => !p.trash)}
showFavoriteTag={true}
packages/app/src/pages/page-list/favorite.tsx
+8 -1
View File
@@ -1,12 +1,19 @@
import { Header } from '@/components/header';
import { useEditor } from '@/providers/editor-provider';
import { PageList } from '@/components/page-list';
import { StyledWrapper } from '@/pages/page-list/styles';
import { FavouritesIcon } from '@blocksuite/icons';
export const Favorite = () => {
const { pageList: allPageList } = useEditor();
return (
<>
<Header />
<Header>
<StyledWrapper>
<FavouritesIcon />
Favorites
</StyledWrapper>
</Header>
<PageList pageList={allPageList.filter(p => p.favorite && !p.trash)} />
</>
);
packages/app/src/pages/page-list/styles.ts
+13
View File
@@ -0,0 +1,13 @@
import { HeaderWrapper } from '@/components/header';
import { styled } from '@/styles';
export const StyledWrapper = styled(HeaderWrapper)(({ theme }) => {
return {
fontSize: theme.font.sm,
color: theme.colors.textColor,
'>svg': {
fontSize: '20px',
marginRight: '12px',
},
};
});
packages/app/src/pages/page-list/trash.tsx
+8 -2
View File
@@ -1,12 +1,18 @@
import { Header } from '@/components/header';
import { useEditor } from '@/providers/editor-provider';
import { PageList } from '@/components/page-list';
import { StyledWrapper } from './styles';
import { TrashIcon } from '@blocksuite/icons';
export const Trash = () => {
const { pageList: allPageList } = useEditor();
return (
<>
<Header />
<Header>
<StyledWrapper>
<TrashIcon />
Trash
</StyledWrapper>
</Header>
<PageList pageList={allPageList.filter(p => p.trash)} isTrash={true} />
</>
);
packages/app/src/providers/editor-provider/interface.ts
-2
View File
@@ -17,8 +17,6 @@ export type EditorHandlers = {
query?: { [key: string]: string }
) => Promise<boolean>;
getPageMeta: (pageId: string) => PageMeta | void;
deletePage: (pageId: string) => void;
recyclePage: (pageId: string) => void;
toggleDeletePage: (pageId: string) => void;
favoritePage: (pageId: string) => void;
unFavoritePage: (pageId: string) => void;
packages/app/src/providers/editor-provider/useEditorHandler.ts
+1 -6
View File
@@ -26,15 +26,10 @@ export const useEditorHandler = (workspace?: Workspace): EditorHandlers => {
},
});
},
deletePage: pageId => {
workspace!.setPageMeta(pageId, { trash: true });
},
recyclePage: pageId => {
workspace!.setPageMeta(pageId, { trash: false });
},
toggleDeletePage: pageId => {
const pageMeta = workspace!.meta.pageMetas.find(p => p.id === pageId);
if (pageMeta) {
workspace!.meta.setPage(pageId, { trashDate: new Date().getTime() });
workspace!.setPageMeta(pageId, { trash: !pageMeta.trash });
}
},
packages/app/src/ui/layout/content.tsx
+6 -3
View File
@@ -5,9 +5,10 @@ import { styled, textEllipsis } from '@/styles';
export type ContentProps = {
width?: CSSProperties['width'];
maxWidth?: CSSProperties['maxWidth'];
align?: CSSProperties['textAlign'];
color?: CSSProperties['color'];
fontSize?: CSSProperties['fontSize'];
fontWeight?: CSSProperties['fontWeight'];
weight?: CSSProperties['fontWeight'];
lineHeight?: CSSProperties['lineHeight'];
ellipsis?: boolean;
lineNum?: number;
@@ -19,20 +20,22 @@ export const Content = styled.div<ContentProps>(
theme,
color,
fontSize,
fontWeight,
weight,
lineHeight,
ellipsis,
lineNum,
width,
maxWidth,
align,
}) => {
return {
width,
maxWidth,
textAlign: align,
display: 'inline-block',
color: color ?? theme.colors.textColor,
fontSize: fontSize ?? theme.font.base,
fontWeight: fontWeight ?? 400,
fontWeight: weight ?? 400,
lineHeight: lineHeight ?? 1.5,
...(ellipsis ? textEllipsis(lineNum) : {}),
};
packages/app/src/ui/layout/wrapper.tsx
+5 -5
View File
@@ -6,19 +6,19 @@ export type WrapperProps = {
flexDirection?: CSSProperties['flexDirection'];
justifyContent?: CSSProperties['justifyContent'];
alignItems?: CSSProperties['alignItems'];
flexWrap?: CSSProperties['flexWrap'];
wrap?: boolean;
flexShrink?: CSSProperties['flexShrink'];
flexGrow?: CSSProperties['flexGrow'];
};
// Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
export const Wrapper = styled('button', {
export const Wrapper = styled('div', {
shouldForwardProp: prop => {
return ![
'display',
'justifyContent',
'alignItems',
'flexWrap',
'wrap',
'flexDirection',
'flexShrink',
'flexGrow',
@@ -29,7 +29,7 @@ export const Wrapper = styled('button', {
display = 'flex',
justifyContent = 'flex-start',
alignItems = 'center',
flexWrap = 'nowrap',
wrap = false,
flexDirection = 'row',
flexShrink = '0',
flexGrow = '0',
@@ -38,7 +38,7 @@ export const Wrapper = styled('button', {
display,
justifyContent,
alignItems,
flexWrap,
flexWrap: wrap ? 'wrap' : 'nowrap',
flexDirection,
flexShrink,
flexGrow,
packages/app/src/ui/modal/modal-wrapper.tsx
+3 -1
View File
@@ -4,10 +4,12 @@ import { styled } from '@/styles';
export const ModalWrapper = styled.div<{
width?: CSSProperties['width'];
height?: CSSProperties['height'];
}>(({ theme, width, height }) => {
minHeight?: CSSProperties['minHeight'];
}>(({ theme, width, height, minHeight }) => {
return {
width,
height,
minHeight,
backgroundColor: theme.colors.popoverBackground,
borderRadius: '12px',
position: 'relative',
pnpm-lock.yaml
Generated
+8 -2
View File
@@ -41,6 +41,7 @@ importers:
'@types/react-dom': 18.0.6
cmdk: ^0.1.20
css-spring: ^4.1.0
dayjs: ^1.11.7
eslint: 8.22.0
eslint-config-next: 12.3.1
eslint-config-prettier: ^8.5.0
@@ -70,6 +71,7 @@ importers:
'@toeverything/pathfinder-logger': link:../logger
cmdk: 0.1.20_7ey2zzynotv32rpkwno45fsx4e
css-spring: 4.1.0
dayjs: 1.11.7
lit: 2.4.0
next: 13.0.1_biqbaboplfbrettd7655fr4n2y
prettier: 2.7.1
@@ -1579,6 +1581,10 @@ packages:
resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
dev: true
/dayjs/1.11.7:
resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
dev: false
/debug/2.6.9:
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
peerDependencies:
@@ -1877,7 +1883,7 @@ packages:
eslint-import-resolver-webpack:
optional: true
dependencies:
'@typescript-eslint/parser': 5.38.0_eslint@8.22.0
'@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
debug: 3.2.7
eslint: 8.22.0
eslint-import-resolver-node: 0.3.6
@@ -1896,7 +1902,7 @@ packages:
'@typescript-eslint/parser':
optional: true
dependencies:
'@typescript-eslint/parser': 5.38.0_eslint@8.22.0
'@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
array-includes: 3.1.5
array.prototype.flat: 1.3.0
debug: 2.6.9