From 7163ea6c4b4029ed6daeb15fd7429ceb54482b67 Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Wed, 22 Feb 2023 11:12:34 +0800 Subject: [PATCH] fix: detail reduction of UI (#1131) --- apps/desktop/package.json | 2 +- apps/web/package.json | 2 +- .../components/header/QuickSearchButton.tsx | 4 +- .../header-right-items/EditorOptionMenu.tsx | 14 ++--- .../web/src/components/page-list/DateCell.tsx | 8 +-- .../components/page-list/OperationCell.tsx | 27 ++++++---- apps/web/src/components/page-list/index.tsx | 52 +++++++++---------- .../web/src/components/quick-search/config.ts | 12 ++--- apps/web/src/components/quick-search/style.ts | 2 +- .../workspace-modal/SelectLanguageMenu.tsx | 4 +- .../src/components/workspace-modal/styles.ts | 2 +- .../workspace-setting/ExportPage.tsx | 2 + .../general/delete/Delete.tsx | 1 + .../member/InviteMemberModal.tsx | 6 +-- .../workspace-setting/member/MembersPage.tsx | 9 +++- .../components/workspace-slider-bar/index.tsx | 16 +++--- .../src/pages/workspace/[workspaceId]/all.tsx | 4 +- .../workspace/[workspaceId]/favorite.tsx | 6 +-- .../pages/workspace/[workspaceId]/trash.tsx | 6 ++- packages/component/src/styles/theme.ts | 2 +- packages/component/src/ui/popper/Popper.tsx | 2 +- packages/component/src/ui/table/TableCell.tsx | 9 +--- packages/component/src/ui/table/index.ts | 1 + packages/component/src/ui/table/interface.ts | 5 +- packages/i18n/src/resources/de.json | 2 +- packages/i18n/src/resources/en.json | 2 +- packages/i18n/src/resources/fr.json | 2 +- packages/i18n/src/resources/ru.json | 2 +- packages/i18n/src/resources/zh-Hans.json | 2 +- pnpm-lock.yaml | 18 +++++-- 30 files changed, 122 insertions(+), 104 deletions(-) diff --git a/apps/desktop/package.json b/apps/desktop/package.json index e2528bd7dd..e5fcb2a0c6 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -16,7 +16,7 @@ "dependencies": { "@blocksuite/blocks": "0.4.1", "@blocksuite/editor": "0.4.1", - "@blocksuite/icons": "2.0.12", + "@blocksuite/icons": "2.0.17", "@blocksuite/store": "0.4.1", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", diff --git a/apps/web/package.json b/apps/web/package.json index 769410c8b8..9dc55990c9 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -16,7 +16,7 @@ "@blocksuite/blocks": "0.4.1", "@blocksuite/editor": "0.4.1", "@blocksuite/global": "0.4.1", - "@blocksuite/icons": "2.0.12", + "@blocksuite/icons": "2.0.17", "@blocksuite/store": "0.4.1", "@emotion/css": "^11.10.6", "@emotion/react": "^11.10.6", diff --git a/apps/web/src/components/header/QuickSearchButton.tsx b/apps/web/src/components/header/QuickSearchButton.tsx index 122ff6666e..80aa353122 100644 --- a/apps/web/src/components/header/QuickSearchButton.tsx +++ b/apps/web/src/components/header/QuickSearchButton.tsx @@ -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(); }} > - + ); }; diff --git a/apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx b/apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx index 87d23eecfa..07534f6c96 100644 --- a/apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx +++ b/apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx @@ -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 ? : } + icon={favorite ? : } > - {favorite ? t('Remove from favorites') : t('Add to favorites')} + {favorite ? t('Remove from favorites') : t('Add to Favorites')} : } @@ -97,7 +97,7 @@ const PopoverContent = () => { confirm && toast(t('Moved to Trash')); }); }} - icon={} + icon={} > {t('Delete')} @@ -107,7 +107,7 @@ const PopoverContent = () => { export const EditorOptionMenu = () => { return ( - } placement="bottom-end"> + } placement="bottom-end" trigger="click"> diff --git a/apps/web/src/components/page-list/DateCell.tsx b/apps/web/src/components/page-list/DateCell.tsx index acd184286d..13c80c2c5b 100644 --- a/apps/web/src/components/page-list/DateCell.tsx +++ b/apps/web/src/components/page-list/DateCell.tsx @@ -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) => { const value = pageMeta[dateKey] ?? pageMeta[backupKey]; return ( - + {value ? dayjs(value as string).format('YYYY-MM-DD HH:mm') : '--'} ); diff --git a/apps/web/src/components/page-list/OperationCell.tsx b/apps/web/src/components/page-list/OperationCell.tsx index b70fec319e..82f476bcef 100644 --- a/apps/web/src/components/page-list/OperationCell.tsx +++ b/apps/web/src/components/page-list/OperationCell.tsx @@ -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 ? : } + icon={favorite ? : } > - {favorite ? t('Remove from favorites') : t('Add to favorites')} + {favorite ? t('Remove from favorites') : t('Add to Favorites')} { @@ -62,7 +62,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { confirm && toast(t('Moved to Trash')); }); }} - icon={} + icon={} > {t('Delete')} @@ -70,7 +70,12 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { ); return ( - + @@ -99,7 +104,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { openPage(id); }} > - + @@ -117,7 +122,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { }); }} > - + diff --git a/apps/web/src/components/page-list/index.tsx b/apps/web/src/components/page-list/index.tsx index bcaeecaa05..eeb30c505e 100644 --- a/apps/web/src/components/page-list/index.tsx +++ b/apps/web/src/components/page-list/index.tsx @@ -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 ? ( - + ) : ( - + )} @@ -108,23 +105,24 @@ export const PageList = ({ {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 ( { - if (isPublic) { - router.push( - `/public-workspace/${router.query.workspaceId}/${pageMeta.id}` - ); - } else { - router.push( - `/workspace/${currentWorkspace?.id}/${pageMeta.id}` - ); - } - }} > - + {pageMeta.mode === 'edgeless' ? ( @@ -139,19 +137,21 @@ export const PageList = ({ {showFavoriteTag && } - + - {!isPublic ? ( + {!isPublic && ( { - e.stopPropagation(); - }} > {isTrash ? ( @@ -159,7 +159,7 @@ export const PageList = ({ )} - ) : null} + )} ); })} diff --git a/apps/web/src/components/quick-search/config.ts b/apps/web/src/components/quick-search/config.ts index 71068f7c16..a8281aa228 100644 --- a/apps/web/src/components/quick-search/config.ts +++ b/apps/web/src/components/quick-search/config.ts @@ -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, }, ]; }; diff --git a/apps/web/src/components/quick-search/style.ts b/apps/web/src/components/quick-search/style.ts index 6e39cd0fad..e2dfa13a1a 100644 --- a/apps/web/src/components/quick-search/style.ts +++ b/apps/web/src/components/quick-search/style.ts @@ -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', }; }); diff --git a/apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx b/apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx index 888bf9ea0b..2b6a5e7bb9 100644 --- a/apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx +++ b/apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx @@ -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} >