Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: detail reduction of UI (#1131)

Browse Source
This commit is contained in:
Qi
2023-02-22 11:12:34 +08:00
committed by GitHub
parent 0b072da346
commit 7163ea6c4b
30 changed files with 122 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/header/QuickSearchButton.tsx
View File

@@ -1,6 +1,6 @@
import { IconButton, IconButtonProps } from '@affine/component';
import { styled } from '@affine/component';
import { ArrowDownIcon } from '@blocksuite/icons';
import { ArrowDownSmallIcon } from '@blocksuite/icons';
import React from 'react';
import { useModal } from '@/store/globalModal';
@@ -34,7 +34,7 @@ export const QuickSearchButton = ({
triggerQuickSearchModal();
}}
>
<ArrowDownIcon />
<ArrowDownSmallIcon />
</StyledIconButtonWithAnimate>
);
};

14
apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx
View File

@@ -3,15 +3,15 @@ import { IconButton } from '@affine/component';
import { toast } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import {
DeleteTemporarilyIcon,
EdgelessIcon,
ExportIcon,
ExportToHtmlIcon,
ExportToMarkdownIcon,
FavouritedIcon,
FavouritesIcon,
FavoritedIcon,
FavoriteIcon,
MoreVerticalIcon,
PaperIcon,
TrashIcon,
} from '@blocksuite/icons';
import useCurrentPageMeta from '@/hooks/use-current-page-meta';
@@ -41,9 +41,9 @@ const PopoverContent = () => {
favorite ? t('Removed from Favorites') : t('Added to Favorites')
);
}}
icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
icon={favorite ? <FavoritedIcon /> : <FavoriteIcon />}
>
{favorite ? t('Remove from favorites') : t('Add to favorites')}
{favorite ? t('Remove from favorites') : t('Add to Favorites')}
</MenuItem>
<MenuItem
icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
@@ -97,7 +97,7 @@ const PopoverContent = () => {
confirm && toast(t('Moved to Trash'));
});
}}
icon={<TrashIcon />}
icon={<DeleteTemporarilyIcon />}
>
{t('Delete')}
</MenuItem>
@@ -107,7 +107,7 @@ const PopoverContent = () => {
export const EditorOptionMenu = () => {
return (
<Menu content={<PopoverContent />} placement="bottom-end">
<Menu content={<PopoverContent />} placement="bottom-end" trigger="click">
<IconButton>
<MoreVerticalIcon />
</IconButton>

8
apps/web/src/components/page-list/DateCell.tsx
View File

@@ -1,4 +1,4 @@
import { TableCell } from '@affine/component';
import { TableCell, TableCellProps } from '@affine/component';
import dayjs from 'dayjs';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import React from 'react';
@@ -11,15 +11,15 @@ export const DateCell = ({
pageMeta,
dateKey,
backupKey = '',
...props
}: {
pageMeta: PageMeta;
dateKey: keyof PageMeta;
backupKey?: keyof PageMeta;
}) => {
// dayjs().format('L LT');
} & Omit<TableCellProps, 'children'>) => {
const value = pageMeta[dateKey] ?? pageMeta[backupKey];
return (
<TableCell ellipsis={true}>
<TableCell ellipsis={true} {...props}>
{value ? dayjs(value as string).format('YYYY-MM-DD HH:mm') : '--'}
</TableCell>
);

27
apps/web/src/components/page-list/OperationCell.tsx
View File

@@ -8,13 +8,13 @@ import {
import { toast } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import {
DeleteForeverIcon,
FavouritedIcon,
FavouritesIcon,
DeletePermanentlyIcon,
DeleteTemporarilyIcon,
FavoritedIcon,
FavoriteIcon,
MoreVerticalIcon,
OpenInNewIcon,
RestoreIcon,
TrashIcon,
ResetIcon,
} from '@blocksuite/icons';
import { usePageHelper } from '@/hooks/use-page-helper';
@@ -36,9 +36,9 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
favorite ? t('Removed from Favorites') : t('Added to Favorites')
);
}}
icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
icon={favorite ? <FavoritedIcon /> : <FavoriteIcon />}
>
{favorite ? t('Remove from favorites') : t('Add to favorites')}
{favorite ? t('Remove from favorites') : t('Add to Favorites')}
</MenuItem>
<MenuItem
onClick={() => {
@@ -62,7 +62,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
confirm && toast(t('Moved to Trash'));
});
}}
icon={<TrashIcon />}
icon={<DeleteTemporarilyIcon />}
>
{t('Delete')}
</MenuItem>
@@ -70,7 +70,12 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
);
return (
<FlexWrapper alignItems="center" justifyContent="center">
<Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
<Menu
content={OperationMenu}
placement="bottom-end"
disablePortal={true}
trigger="click"
>
<IconButton darker={true}>
<MoreVerticalIcon />
</IconButton>
@@ -99,7 +104,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
openPage(id);
}}
>
<RestoreIcon />
<ResetIcon />
</IconButton>
</Tooltip>
<Tooltip content={t('Delete permanently')} placement="top-start">
@@ -117,7 +122,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
});
}}
>
<DeleteForeverIcon />
<DeletePermanentlyIcon />
</IconButton>
</Tooltip>
</FlexWrapper>

52
apps/web/src/components/page-list/index.tsx
View File

@@ -5,15 +5,12 @@ import {
TableHead,
TableRow,
} from '@affine/component';
import { Content } from '@affine/component';
import { IconButton } from '@affine/component';
import { Tooltip } from '@affine/component';
import { toast } from '@affine/component';
import { Content, IconButton, toast, Tooltip } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import {
EdgelessIcon,
FavouritedIcon,
FavouritesIcon,
FavoritedIcon,
FavoriteIcon,
PaperIcon,
} from '@blocksuite/icons';
import { useRouter } from 'next/router';
@@ -62,9 +59,9 @@ const FavoriteTag = ({
className={favorite ? '' : 'favorite-button'}
>
{favorite ? (
<FavouritedIcon data-testid="favorited-icon" />
<FavoritedIcon data-testid="favorited-icon" />
) : (
<FavouritesIcon />
<FavoriteIcon />
)}
</IconButton>
</Tooltip>
@@ -108,23 +105,24 @@ export const PageList = ({
</TableHead>
<TableBody>
{pageList.map((pageMeta, index) => {
// On click event must be set on the table cell, since the last operation cell is not clickable, and if set on the row, the menu will have bug on close.
const onClick = () => {
if (isPublic) {
router.push(
`/public-workspace/${router.query.workspaceId}/${pageMeta.id}`
);
} else {
router.push(
`/workspace/${currentWorkspace?.id}/${pageMeta.id}`
);
}
};
return (
<StyledTableRow
data-testid="page-list-item"
key={`${pageMeta.id}-${index}`}
onClick={() => {
if (isPublic) {
router.push(
`/public-workspace/${router.query.workspaceId}/${pageMeta.id}`
);
} else {
router.push(
`/workspace/${currentWorkspace?.id}/${pageMeta.id}`
);
}
}}
>
<TableCell>
<TableCell onClick={onClick}>
<StyledTitleWrapper>
<StyledTitleLink>
{pageMeta.mode === 'edgeless' ? (
@@ -139,19 +137,21 @@ export const PageList = ({
{showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}
</StyledTitleWrapper>
</TableCell>
<DateCell pageMeta={pageMeta} dateKey="createDate" />
<DateCell
pageMeta={pageMeta}
dateKey="createDate"
onClick={onClick}
/>
<DateCell
pageMeta={pageMeta}
dateKey={isTrash ? 'trashDate' : 'updatedDate'}
backupKey={isTrash ? 'trashDate' : 'createDate'}
onClick={onClick}
/>
{!isPublic ? (
{!isPublic && (
<TableCell
style={{ padding: 0 }}
data-testid={`more-actions-${pageMeta.id}`}
onClick={e => {
e.stopPropagation();
}}
>
{isTrash ? (
<TrashOperationCell pageMeta={pageMeta} />
@@ -159,7 +159,7 @@ export const PageList = ({
<OperationCell pageMeta={pageMeta} />
)}
</TableCell>
) : null}
)}
</StyledTableRow>
);
})}

12
apps/web/src/components/quick-search/config.ts
View File

@@ -1,9 +1,9 @@
import { useTranslation } from '@affine/i18n';
import {
AllPagesIcon,
FavouritesIcon,
DeleteTemporarilyIcon,
FavoriteIcon,
FolderIcon,
SettingsIcon,
TrashIcon,
} from '@blocksuite/icons';
import { FC, SVGProps } from 'react';
@@ -19,14 +19,14 @@ export const useSwitchToConfig = (
{
title: t('All pages'),
href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
icon: AllPagesIcon,
icon: FolderIcon,
},
{
title: t('Favorites'),
href: currentWorkspaceId
? `/workspace/${currentWorkspaceId}/favorite`
: '',
icon: FavouritesIcon,
icon: FavoriteIcon,
},
{
title: t('Workspace Settings'),
@@ -38,7 +38,7 @@ export const useSwitchToConfig = (
{
title: t('Trash'),
href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
icon: TrashIcon,
icon: DeleteTemporarilyIcon,
},
];
};

2
apps/web/src/components/quick-search/style.ts
View File

@@ -102,7 +102,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
height: '0',
margin: '6px 16px 6.5px 16px',
position: 'relative',
borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
borderTop: `0.5px solid ${theme.colors.borderColor}`,
transition: 'all 0.15s',
};
});

4
apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '@affine/component';
import { Menu, MenuItem } from '@affine/component';
import { LOCALES } from '@affine/i18n';
import { useTranslation } from '@affine/i18n';
import { ArrowDownIcon } from '@blocksuite/icons';
import { ArrowDownSmallIcon } from '@blocksuite/icons';
const LanguageMenuContent = () => {
const { i18n } = useTranslation();
@@ -41,7 +41,7 @@ export const LanguageMenu = () => {
disablePortal={true}
>
<Button
icon={<ArrowDownIcon />}
icon={<ArrowDownSmallIcon />}
iconPosition="end"
noBorder={true}
style={{ textTransform: 'capitalize' }}

2
apps/web/src/components/workspace-modal/styles.ts
View File

@@ -10,7 +10,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
return {
width: '1px',
height: '20px',
background: theme.colors.iconColor,
background: theme.colors.borderColor,
marginRight: '24px',
};
});

2
apps/web/src/components/workspace-setting/ExportPage.tsx
View File

@@ -3,6 +3,8 @@ import { Button } from '@affine/component';
import { WorkspaceUnit } from '@affine/datacenter';
import { useTranslation } from '@affine/i18n';
export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
console.log('workspace', workspace);
const { t } = useTranslation();
return (
<>

1
apps/web/src/components/workspace-setting/general/delete/Delete.tsx
View File

@@ -42,6 +42,7 @@ export const WorkspaceDelete = ({
onClose();
router.push(`/workspace`);
};
console.log('workspace', workspace);
return (
<Modal open={open} onClose={onClose}>

6
apps/web/src/components/workspace-setting/member/InviteMemberModal.tsx
View File

@@ -50,7 +50,7 @@ export const InviteMemberModal = ({
onInviteSuccess,
}: LoginModalProps) => {
const [email, setEmail] = useState<string>('');
const [showMember, setShowMember] = useState<boolean>(false);
const [showMember, setShowMember] = useState<boolean>(true);
const [showTip, setShowTip] = useState<boolean>(false);
const [userData, setUserData] = useState<User | null>(null);
const { inviteMember, getUserByEmail } = useMembers();
@@ -90,7 +90,7 @@ export const InviteMemberModal = ({
value={email}
onChange={inputChange}
onBlur={() => {
setShowMember(false);
// setShowMember(false);
}}
placeholder={t('Invite placeholder')}
></Input>
@@ -211,7 +211,6 @@ const MemberIcon = styled('div')(({ theme }) => {
borderRadius: '50%',
color: theme.colors.primaryColor,
background: '#F5F5F5',
marginRight: '8px',
textAlign: 'center',
lineHeight: '45px',
// icon size
@@ -231,5 +230,6 @@ const Email = styled('div')(({ theme }) => {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
marginLeft: '8px',
};
});

9
apps/web/src/components/workspace-setting/member/MembersPage.tsx
View File

@@ -5,7 +5,11 @@ import { toast } from '@affine/component';
import { FlexWrapper } from '@affine/component';
import { WorkspaceUnit } from '@affine/datacenter';
import { useTranslation } from '@affine/i18n';
import { EmailIcon, MoreVerticalIcon, TrashIcon } from '@blocksuite/icons';
import {
DeleteTemporarilyIcon,
EmailIcon,
MoreVerticalIcon,
} from '@blocksuite/icons';
import { useState } from 'react';
import Loading from '@/components/loading';
@@ -111,7 +115,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
})
);
}}
icon={<TrashIcon />}
icon={<DeleteTemporarilyIcon />}
>
{t('Remove from workspace')}
</MenuItem>
@@ -119,6 +123,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
}
placement="bottom-end"
disablePortal={true}
trigger="click"
>
<IconButton>
<MoreVerticalIcon />

16
apps/web/src/components/workspace-slider-bar/index.tsx
View File

@@ -3,13 +3,13 @@ import { Tooltip } from '@affine/component';
import { IconButton } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import {
AllPagesIcon,
ArrowDownIcon,
FavouritesIcon,
ArrowDownSmallIcon,
DeleteTemporarilyIcon,
FavoriteIcon,
FolderIcon,
PlusIcon,
SearchIcon,
SettingsIcon,
TrashIcon,
} from '@blocksuite/icons';
import Link from 'next/link';
import { useRouter } from 'next/router';
@@ -127,13 +127,13 @@ export const WorkSpaceSliderBar = () => {
</StyledListItem>
<Link href={{ pathname: paths.all }}>
<StyledListItem active={router.asPath === paths.all}>
<AllPagesIcon />
<FolderIcon />
<span data-testid="all-pages">{t('All pages')}</span>
</StyledListItem>
</Link>
<StyledListItem active={router.asPath === paths.favorite}>
<StyledLink href={{ pathname: paths.favorite }}>
<FavouritesIcon />
<FavoriteIcon />
{t('Favorites')}
</StyledLink>
<IconButton
@@ -142,7 +142,7 @@ export const WorkSpaceSliderBar = () => {
setShowSubFavorite(!showSubFavorite);
}}
>
<ArrowDownIcon
<ArrowDownSmallIcon
style={{
transform: `rotate(${showSubFavorite ? '180' : '0'}deg)`,
}}
@@ -174,7 +174,7 @@ export const WorkSpaceSliderBar = () => {
<Link href={{ pathname: paths.trash }}>
<StyledListItem active={router.asPath === paths.trash}>
<TrashIcon /> {t('Trash')}
<DeleteTemporarilyIcon /> {t('Trash')}
</StyledListItem>
</Link>
<StyledNewPageButton

4
apps/web/src/pages/workspace/[workspaceId]/all.tsx
View File

@@ -1,5 +1,5 @@
import { useTranslation } from '@affine/i18n';
import { AllPagesIcon } from '@blocksuite/icons';
import { FolderIcon } from '@blocksuite/icons';
import Head from 'next/head';
import { ReactElement, useCallback } from 'react';
@@ -18,7 +18,7 @@ const All = () => {
<Head>
<title>{t('All pages')} - AFFiNE</title>
</Head>
<PageListHeader icon={<AllPagesIcon />}>{t('All pages')}</PageListHeader>
<PageListHeader icon={<FolderIcon />}>{t('All pages')}</PageListHeader>
<PageList
pageList={pageList.filter(p => !p.trash)}
showFavoriteTag={true}

6
apps/web/src/pages/workspace/[workspaceId]/favorite.tsx
View File

@@ -1,5 +1,5 @@
import { useTranslation } from '@affine/i18n';
import { FavouritesIcon } from '@blocksuite/icons';
import { FavoriteIcon } from '@blocksuite/icons';
import Head from 'next/head';
import { ReactElement } from 'react';
@@ -16,9 +16,7 @@ export const Favorite = () => {
<Head>
<title>{t('Favorites')} - AFFiNE</title>
</Head>
<PageListHeader icon={<FavouritesIcon />}>
{t('Favorites')}
</PageListHeader>
<PageListHeader icon={<FavoriteIcon />}>{t('Favorites')}</PageListHeader>
<PageList
pageList={pageList.filter(p => p.favorite && !p.trash)}
showFavoriteTag={true}

6
apps/web/src/pages/workspace/[workspaceId]/trash.tsx
View File

@@ -1,5 +1,5 @@
import { useTranslation } from '@affine/i18n';
import { TrashIcon } from '@blocksuite/icons';
import { DeleteTemporarilyIcon } from '@blocksuite/icons';
import Head from 'next/head';
import { ReactElement, useCallback } from 'react';
@@ -18,7 +18,9 @@ export const Trash = () => {
<Head>
<title>{t('Trash')} - AFFiNE</title>
</Head>
<PageListHeader icon={<TrashIcon />}>{t('Trash')}</PageListHeader>
<PageListHeader icon={<DeleteTemporarilyIcon />}>
{t('Trash')}
</PageListHeader>
<PageList
pageList={pageList.filter(p => p.trash)}
isTrash={true}