toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-26 00:21:46 +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

39
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,7 +46,8 @@ const AllPagesHead = ({
propertiesMeta: PropertiesMeta; propertiesMeta: PropertiesMeta;
}) => { }) => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
const titleList = [ const titleList = useMemo(
() => [
{ {
key: 'title', key: 'title',
content: t['Title'](), content: t['Title'](),
@ -78,21 +79,34 @@ const AllPagesHead = ({
), ),
showWhen: () => !isPublicWorkspace, showWhen: () => !isPublicWorkspace,
sortable: false, sortable: false,
tableCellStyle: {
minWidth: '130px',
} satisfies CSSProperties,
styles: { styles: {
justifyContent: 'flex-end', justifyContent: 'flex-end',
} satisfies CSSProperties, } satisfies CSSProperties,
}, },
]; ],
return ( [createNewEdgeless, createNewPage, importFile, isPublicWorkspace, t]
<TableHead> );
<TableHeadRow> const tableItem = useMemo(
{titleList () =>
titleList
.filter(({ showWhen = () => true }) => showWhen()) .filter(({ showWhen = () => true }) => showWhen())
.map(({ key, content, proportion, sortable = true, styles }) => ( .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}