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

fix(component): all page list UI padding (#3046)

Browse Source 
Co-authored-by: Alex Yang <himself65@outlook.com>
This commit is contained in:
Pratik Kumar 2023-07-06 11:26:08 +05:30 committed by GitHub
parent 2e0f410978
commit 95c2e20cb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 65 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
packages/component/src/components/page-list/all-page.tsx
View File

@ -6,7 +6,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { ArrowDownBigIcon, ArrowUpBigIcon } from '@blocksuite/icons'; import { ArrowDownBigIcon, ArrowUpBigIcon } from '@blocksuite/icons';
import { useMediaQuery, useTheme } from '@mui/material'; import { useMediaQuery, useTheme } from '@mui/material';
import type React from 'react'; import type React from 'react';
import { type CSSProperties } from 'react'; import { type CSSProperties, useMemo } from 'react';
import { import {
ScrollableContainer, ScrollableContainer,
@ -46,53 +46,67 @@ const AllPagesHead = ({
propertiesMeta: PropertiesMeta; propertiesMeta: PropertiesMeta;
}) => { }) => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
const titleList = [ const titleList = useMemo(
{ () => [
key: 'title', {
content: t['Title'](), key: 'title',
proportion: 0.5, content: t['Title'](),
}, proportion: 0.5,
{ },
key: 'tags', {
content: t['Tags'](), key: 'tags',
proportion: 0.2, content: t['Tags'](),
}, proportion: 0.2,
{ },
key: 'createDate', {
content: t['Created'](), key: 'createDate',
proportion: 0.1, content: t['Created'](),
}, proportion: 0.1,
{ },
key: 'updatedDate', {
content: t['Updated'](), key: 'updatedDate',
proportion: 0.1, content: t['Updated'](),
}, proportion: 0.1,
{ },
key: 'unsortable_action', {
content: ( key: 'unsortable_action',
<NewPageButton content: (
createNewPage={createNewPage} <NewPageButton
createNewEdgeless={createNewEdgeless} createNewPage={createNewPage}
importFile={importFile} createNewEdgeless={createNewEdgeless}
/> importFile={importFile}
), />
showWhen: () => !isPublicWorkspace, ),
sortable: false, showWhen: () => !isPublicWorkspace,
styles: { sortable: false,
justifyContent: 'flex-end', tableCellStyle: {
} satisfies CSSProperties, minWidth: '130px',
}, } satisfies CSSProperties,
]; styles: {
return ( justifyContent: 'flex-end',
<TableHead> } satisfies CSSProperties,
<TableHeadRow> },
{titleList ],
.filter(({ showWhen = () => true }) => showWhen()) [createNewEdgeless, createNewPage, importFile, isPublicWorkspace, t]
.map(({ key, content, proportion, sortable = true, styles }) => ( );
const tableItem = useMemo(
() =>
titleList
.filter(({ showWhen = () => true }) => showWhen())
.map(
({
key,
content,
proportion,
sortable = true,
styles,
tableCellStyle,
}) => (
<TableCell <TableCell
key={key} key={key}
proportion={proportion} proportion={proportion}
active={sorter.key === key} active={sorter.key === key}
style={tableCellStyle}
onClick={ onClick={
sortable sortable
? () => sorter.shiftOrder(key as keyof ListData) ? () => sorter.shiftOrder(key as keyof ListData)
@ -115,8 +129,13 @@ const AllPagesHead = ({
))} ))}
</div> </div>
</TableCell> </TableCell>
))} )
</TableHeadRow> ),
[sorter, titleList]
);
return (
<TableHead>
<TableHeadRow>{tableItem}</TableHeadRow>
<CollectionBar <CollectionBar
columnsCount={titleList.length} columnsCount={titleList.length}
getPageInfo={getPageInfo} getPageInfo={getPageInfo}