Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-24 18:02:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update breakpoint in all page (#2602)

Browse Source
This commit is contained in:
Whitewater
2023-05-30 03:27:42 -07:00
committed by GitHub
parent e11326f05f
commit 31d552ab7e
4 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,7 @@ import { TrashOperationCell } from './operation-cell';
import { StyledTableContainer, StyledTableRow } from './styles'; import { StyledTableContainer, StyledTableRow } from './styles';
import type { ListData, PageListProps, TrashListData } from './type'; import type { ListData, PageListProps, TrashListData } from './type';
import { useSorter } from './use-sorter'; import { useSorter } from './use-sorter';
import { formatDate } from './utils'; import { formatDate, useIsSmallDevices } from './utils';
const AllPagesHead = ({ const AllPagesHead = ({
isPublicWorkspace, isPublicWorkspace,
@@ -121,8 +121,7 @@ export const PageList = ({
order: 'desc', order: 'desc',
}); });
const theme = useTheme(); const isSmallDevices = useIsSmallDevices();
const isSmallDevices = useMediaQuery(theme.breakpoints.down('sm'));
if (isSmallDevices) { if (isSmallDevices) {
return ( return (
<AllPageListMobileView <AllPageListMobileView
@@ -217,10 +216,8 @@ export const PageListTrashView: React.FC<{
text={title || t['Untitled']()} text={title || t['Untitled']()}
onClick={onClickPage} onClick={onClickPage}
/> />
<TableCell ellipsis={true} onClick={onClickPage}> <TableCell onClick={onClickPage}>{formatDate(createDate)}</TableCell>
{formatDate(createDate)} <TableCell onClick={onClickPage}>
</TableCell>
<TableCell ellipsis={true} onClick={onClickPage}>
{trashDate ? formatDate(trashDate) : '--'} {trashDate ? formatDate(trashDate) : '--'}
</TableCell> </TableCell>
<TableCell <TableCell

6
packages/component/src/components/page-list/all-pages-body.tsx
View File

@@ -1,7 +1,6 @@
import { styled, TableBody, TableCell } from '@affine/component'; import { styled, TableBody, TableCell } from '@affine/component';
import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { useDraggable } from '@dnd-kit/core'; import { useDraggable } from '@dnd-kit/core';
import { useMediaQuery, useTheme } from '@mui/material';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { Fragment } from 'react'; import { Fragment } from 'react';
@@ -11,7 +10,7 @@ import { OperationCell } from './operation-cell';
import { StyledTableRow } from './styles'; import { StyledTableRow } from './styles';
import type { DateKey, DraggableTitleCellData, ListData } from './type'; import type { DateKey, DraggableTitleCellData, ListData } from './type';
import { useDateGroup } from './use-date-group'; import { useDateGroup } from './use-date-group';
import { formatDate } from './utils'; import { formatDate, useIsSmallDevices } from './utils';
export const GroupRow = ({ children }: { children: ReactNode }) => { export const GroupRow = ({ children }: { children: ReactNode }) => {
return ( return (
@@ -40,8 +39,7 @@ export const AllPagesBody = ({
groupKey?: DateKey; groupKey?: DateKey;
}) => { }) => {
const t = useAFFiNEI18N(); const t = useAFFiNEI18N();
const theme = useTheme(); const isSmallDevices = useIsSmallDevices();
const isSmallDevices = useMediaQuery(theme.breakpoints.down('sm'));
const dataWithGroup = useDateGroup({ data, key: groupKey }); const dataWithGroup = useDateGroup({ data, key: groupKey });
return ( return (
<TableBody> <TableBody>

8
packages/component/src/components/page-list/utils.tsx
View File

@@ -1,3 +1,11 @@
import { useMediaQuery, useTheme } from '@mui/material';
export const useIsSmallDevices = () => {
const theme = useTheme();
const isSmallDevices = useMediaQuery(theme.breakpoints.down(900));
return isSmallDevices;
};
export function isToday(date: Date): boolean { export function isToday(date: Date): boolean {
const today = new Date(); const today = new Date();
return ( return (

2
packages/component/src/ui/table/styles.ts
View File

@@ -39,7 +39,7 @@ export const StyledTableCell = styled('td')<
boxSizing: 'border-box', boxSizing: 'border-box',
textAlign: align, textAlign: align,
verticalAlign: 'middle', verticalAlign: 'middle',
overflowWrap: 'break-word', whiteSpace: 'nowrap',
userSelect: 'none', userSelect: 'none',
fontSize: 'var(--affine-font-sm)', fontSize: 'var(--affine-font-sm)',
...(active ? { color: 'var(--affine-text-primary-color)' } : {}), ...(active ? { color: 'var(--affine-text-primary-color)' } : {}),