diff --git a/packages/frontend/core/src/components/page-list/collections/collection-list-header.css.ts b/packages/frontend/core/src/components/page-list/collections/collection-list-header.css.ts index 76467cb8de..bac339dec9 100644 --- a/packages/frontend/core/src/components/page-list/collections/collection-list-header.css.ts +++ b/packages/frontend/core/src/components/page-list/collections/collection-list-header.css.ts @@ -22,7 +22,7 @@ export const newCollectionButton = style({ padding: '6px 10px', borderRadius: '8px', background: cssVar('backgroundPrimaryColor'), - fontSize: cssVar('fontSm'), - fontWeight: 600, - height: '32px', + fontSize: cssVar('fontXs'), + fontWeight: 500, + height: '28px', }); diff --git a/packages/frontend/core/src/components/page-list/components/new-page-button.tsx b/packages/frontend/core/src/components/page-list/components/new-page-button.tsx index 7a35480693..3a5f042464 100644 --- a/packages/frontend/core/src/components/page-list/components/new-page-button.tsx +++ b/packages/frontend/core/src/components/page-list/components/new-page-button.tsx @@ -10,7 +10,7 @@ import { menuContent } from './new-page-button.css'; type NewPageButtonProps = { createNewPage: () => void; createNewEdgeless: () => void; - importFile: () => void; + importFile?: () => void; size?: 'small' | 'default'; }; @@ -43,13 +43,15 @@ export const CreateNewPagePopup = ({ onClick={createNewEdgeless} data-testid="new-edgeless-button-in-all-page" /> - } - onClick={importFile} - data-testid="import-button-in-all-page" - /> + {importFile ? ( + } + onClick={importFile} + data-testid="import-button-in-all-page" + /> + ) : null} {/* TODO Import */} ); @@ -63,22 +65,29 @@ export const NewPageButton = ({ children, }: PropsWithChildren) => { const [open, setOpen] = useState(false); + + const handleCreateNewPage = useCallback(() => { + createNewPage(); + setOpen(false); + }, [createNewPage]); + + const handleCreateNewEdgeless = useCallback(() => { + createNewEdgeless(); + setOpen(false); + }, [createNewEdgeless]); + + const handleImportFile = useCallback(() => { + importFile?.(); + setOpen(false); + }, [importFile]); + return ( { - createNewPage(); - setOpen(false); - }, [createNewPage])} - createNewEdgeless={useCallback(() => { - createNewEdgeless(); - setOpen(false); - }, [createNewEdgeless])} - importFile={useCallback(() => { - importFile(); - setOpen(false); - }, [importFile])} + createNewPage={handleCreateNewPage} + createNewEdgeless={handleCreateNewEdgeless} + importFile={importFile ? handleImportFile : undefined} /> } rootOptions={{ diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-header.css.ts b/packages/frontend/core/src/components/page-list/docs/page-list-header.css.ts index b00cf43bc3..ff4c349574 100644 --- a/packages/frontend/core/src/components/page-list/docs/page-list-header.css.ts +++ b/packages/frontend/core/src/components/page-list/docs/page-list-header.css.ts @@ -31,9 +31,9 @@ export const addPageButton = style({ padding: '6px 10px', borderRadius: '8px', background: cssVar('backgroundPrimaryColor'), - fontSize: cssVar('fontSm'), - fontWeight: 600, - height: '32px', + fontSize: cssVar('fontXs'), + fontWeight: 500, + height: '28px', }); export const tagSticky = style({ display: 'flex', @@ -162,3 +162,16 @@ export const tagSelectorItemText = style({ textOverflow: 'ellipsis', whiteSpace: 'nowrap', }); + +export const rightButtonGroup = style({ + display: 'flex', + gap: '12px', + alignItems: 'center', + justifyContent: 'center', +}); + +export const buttonText = style({ + fontSize: cssVar('fontXs'), + fontWeight: 500, + color: cssVar('textPrimaryColor'), +}); diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx b/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx index f435da93e9..dc614a1f20 100644 --- a/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx +++ b/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx @@ -10,13 +10,14 @@ import { SearchIcon, ViewLayersIcon, } from '@blocksuite/icons'; -import { useLiveData, useService } from '@toeverything/infra'; +import { useLiveData, useService, Workspace } from '@toeverything/infra'; import clsx from 'clsx'; import { nanoid } from 'nanoid'; import { useCallback, useMemo, useState } from 'react'; import { Link } from 'react-router-dom'; import { CollectionService } from '../../../modules/collection'; +import { usePageHelper } from '../../blocksuite/block-suite-page-list/utils'; import { createTagFilter } from '../filter/utils'; import { createEmptyCollection } from '../use-collection-manager'; import type { AllPageListConfig } from '../view/edit-collection/edit-collection'; @@ -29,6 +30,10 @@ import { PageListNewPageButton } from './page-list-new-page-button'; export const PageListHeader = () => { const t = useAFFiNEI18N(); + const workspace = useService(Workspace); + const { importFile, createEdgeless, createPage } = usePageHelper( + workspace.docCollection + ); const title = useMemo(() => { return t['com.affine.all-pages.header'](); @@ -37,8 +42,14 @@ export const PageListHeader = () => { return (
{title}
- - {t['New Page']()} + +
{t['New Page']()}
); @@ -62,11 +73,23 @@ export const CollectionPageListHeader = ({ const collectionService = useService(CollectionService); const { node, open } = useEditCollection(config); - const handleAddPage = useAsyncCallback(async () => { + const handleEdit = useAsyncCallback(async () => { const ret = await open({ ...collection }, 'page'); collectionService.updateCollection(collection.id, () => ret); }, [collection, collectionService, open]); + const workspace = useService(Workspace); + const { createEdgeless, createPage } = usePageHelper(workspace.docCollection); + + const handleCreateEdgeless = useCallback(() => { + const newDoc = createEdgeless(); + collectionService.addPageToCollection(collection.id, newDoc.id); + }, [collection.id, collectionService, createEdgeless]); + const handleCreatePage = useCallback(() => { + const newDoc = createPage(); + collectionService.addPageToCollection(collection.id, newDoc.id); + }, [collection.id, collectionService, createPage]); + return ( <> {node} @@ -80,9 +103,19 @@ export const CollectionPageListHeader = ({
{collection.name}
- +
+ + +
{t['New Page']()}
+ +
); diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts b/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts index 8d1a821466..3a328f869f 100644 --- a/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts +++ b/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts @@ -133,7 +133,7 @@ export const dateCell = style({ display: 'flex', alignItems: 'center', fontSize: cssVar('fontXs'), - color: cssVar('textSecondaryColor'), + color: cssVar('textPrimaryColor'), flexShrink: 0, flexWrap: 'nowrap', padding: '0 8px', diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.tsx b/packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.tsx index fb2f847bf2..7d76d29b9c 100644 --- a/packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.tsx +++ b/packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.tsx @@ -1,7 +1,5 @@ -import { useService, Workspace } from '@toeverything/infra'; import type { PropsWithChildren } from 'react'; -import { usePageHelper } from '../../blocksuite/block-suite-page-list/utils'; import { NewPageButton } from '../components/new-page-button'; import * as styles from './page-list-new-page-button.css'; @@ -10,22 +8,24 @@ export const PageListNewPageButton = ({ children, size, testId, + onCreatePage, + onCreateEdgeless, + onImportFile, }: PropsWithChildren<{ className?: string; size?: 'small' | 'default'; testId?: string; + onCreatePage: () => void; + onCreateEdgeless: () => void; + onImportFile?: () => void; }>) => { - const currentWorkspace = useService(Workspace); - const { importFile, createEdgeless, createPage } = usePageHelper( - currentWorkspace.docCollection - ); return (
{children}
 diff --git a/packages/frontend/core/src/components/page-list/tags/tag-list-header.css.ts b/packages/frontend/core/src/components/page-list/tags/tag-list-header.css.ts index 76f8ec7c40..e9616ec4e5 100644 --- a/packages/frontend/core/src/components/page-list/tags/tag-list-header.css.ts +++ b/packages/frontend/core/src/components/page-list/tags/tag-list-header.css.ts @@ -22,7 +22,7 @@ export const newTagButton = style({ padding: '6px 10px', borderRadius: '8px', background: cssVar('backgroundPrimaryColor'), - fontSize: cssVar('fontSm'), - fontWeight: 600, - height: '32px', + fontSize: cssVar('fontXs'), + fontWeight: 500, + height: '28px', }); diff --git a/packages/frontend/core/src/components/page-list/view/save-as-collection-button.css.ts b/packages/frontend/core/src/components/page-list/view/save-as-collection-button.css.ts new file mode 100644 index 0000000000..d53b83b301 --- /dev/null +++ b/packages/frontend/core/src/components/page-list/view/save-as-collection-button.css.ts @@ -0,0 +1,10 @@ +import { cssVar } from '@toeverything/theme'; +import { style } from '@vanilla-extract/css'; +export const button = style({ + padding: '6px 10px', + borderRadius: '8px', + background: cssVar('backgroundPrimaryColor'), + fontSize: cssVar('fontXs'), + fontWeight: 500, + height: '28px', +}); diff --git a/packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx b/packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx index 187308ba88..91045c6815 100644 --- a/packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx +++ b/packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx @@ -6,6 +6,7 @@ import { nanoid } from 'nanoid'; import { useCallback } from 'react'; import { createEmptyCollection } from '../use-collection-manager'; +import * as styles from './save-as-collection-button.css'; import { useEditCollectionName } from './use-edit-collection'; interface SaveAsCollectionButtonProps { @@ -35,8 +36,7 @@ export const SaveAsCollectionButton = ({ onClick={handleClick} data-testid="save-as-collection" icon={} - size="large" - style={{ padding: '7px 8px' }} + className={styles.button} > {t['com.affine.editCollection.saveCollection']()} diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts index 0ed2dd8a56..24d16682a0 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts @@ -147,6 +147,6 @@ export const emptyCollectionMessage = style({ }); export const emptyCollectionNewButton = style({ padding: '0 8px', - height: '30px', - fontSize: cssVar('fontSm'), + height: '28px', + fontSize: cssVar('fontXs'), }); diff --git a/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx b/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx index 02ef46a25f..de65cb6070 100644 --- a/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx +++ b/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx @@ -1,3 +1,4 @@ +import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils'; import { AllPageListOperationsMenu, PageDisplayMenu, @@ -22,7 +23,9 @@ export const AllPageHeader = ({ onChangeFilters: (filters: Filter[]) => void; }) => { const workspace = useService(Workspace); - + const { importFile, createEdgeless, createPage } = usePageHelper( + workspace.docCollection + ); return (
diff --git a/packages/frontend/i18n/src/resources/zh-Hans.json b/packages/frontend/i18n/src/resources/zh-Hans.json index 388638a274..d037f030a9 100644 --- a/packages/frontend/i18n/src/resources/zh-Hans.json +++ b/packages/frontend/i18n/src/resources/zh-Hans.json @@ -892,7 +892,7 @@ "com.affine.payment.member-limit.pro.confirm": "知道了", "com.affine.payment.member-limit.pro.description": "每个 {{planName}} 用户最多可以邀请 {{quota}} 个成员加入他们的工作区。 如果您想继续添加协作成员，可以创建新的工作区。", "com.affine.payment.member-limit.title": "成员数量已达到极限", - "com.affine.payment.member.description": "在此处管理成员。{{planName}} 用户可以邀请最多 {{memberLimit}} 人。", + "com.affine.payment.member.description": "在此处管理成员。{{planName}} 用户可以邀请最多 {{memberLimit}} 人", "com.affine.payment.member.description.go-upgrade": "前往升级", "com.affine.payment.modal.change.cancel": "取消", "com.affine.payment.modal.change.confirm": "更改",