From e7a7796ef3432dd63514d68ee1b9a890a7aa9e13 Mon Sep 17 00:00:00 2001 From: JimmFly <447268514@qq.com> Date: Mon, 11 Dec 2023 06:30:09 +0000 Subject: [PATCH] feat(core): adjust empty collection style (#5239) image --- .../share-menu/share-menu.tsx | 14 ++---- .../collections/add-collection-button.tsx | 45 ++++--------------- .../collections/collections-list.tsx | 38 ++++++++++------ .../collections/styles.css.ts | 42 +++++++++++++++++ .../pure/workspace-slider-bar/index.tsx | 1 + .../src/components/root-app-sidebar/index.tsx | 37 +++++++++++++-- packages/frontend/i18n/src/resources/en.json | 2 + 7 files changed, 114 insertions(+), 65 deletions(-) diff --git a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx index b4492cfec6..a545341caf 100644 --- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx +++ b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx @@ -87,17 +87,9 @@ const CloudShareMenu = (props: ShareMenuProps) => { }} > ); diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx index 9dfc4ee386..de36f070b4 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx @@ -1,46 +1,19 @@ -import { - createEmptyCollection, - useCollectionManager, - useEditCollectionName, -} from '@affine/component/page-list'; import { IconButton } from '@affine/component/ui/button'; -import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { PlusIcon } from '@blocksuite/icons'; -import { nanoid } from 'nanoid'; -import { useCallback } from 'react'; +import type { ReactElement } from 'react'; -import { collectionsCRUDAtom } from '../../../../atoms/collections'; -import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace'; -import { useNavigateHelper } from '../../../../hooks/use-navigate-helper'; - -export const AddCollectionButton = () => { - const setting = useCollectionManager(collectionsCRUDAtom); - const t = useAFFiNEI18N(); - const { node, open } = useEditCollectionName({ - title: t['com.affine.editCollection.createCollection'](), - showTips: true, - }); - const navigateHelper = useNavigateHelper(); - const [workspace] = useCurrentWorkspace(); - const handleClick = useCallback(() => { - open('') - .then(name => { - const id = nanoid(); - return setting - .createCollection(createEmptyCollection(id, { name })) - .then(() => { - navigateHelper.jumpToCollection(workspace.id, id); - }); - }) - .catch(err => { - console.error(err); - }); - }, [navigateHelper, open, setting, workspace.id]); +export const AddCollectionButton = ({ + node, + onClick, +}: { + node: ReactElement | null; + onClick: () => void; +}) => { return ( <> diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx index 277531876e..01d168df0f 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx @@ -1,8 +1,5 @@ import { AnimatedCollectionsIcon, toast } from '@affine/component'; -import { - MenuItem as SidebarMenuItem, - MenuLinkItem as SidebarMenuLinkItem, -} from '@affine/component/app-sidebar'; +import { MenuLinkItem as SidebarMenuLinkItem } from '@affine/component/app-sidebar'; import { CollectionOperations, filterPage, @@ -10,10 +7,10 @@ import { useCollectionManager, useSavedCollections, } from '@affine/component/page-list'; -import { IconButton } from '@affine/component/ui/button'; +import { Button, IconButton } from '@affine/component/ui/button'; import type { Collection, DeleteCollectionInfo } from '@affine/env/filter'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { InformationIcon, MoreHorizontalIcon } from '@blocksuite/icons'; +import { MoreHorizontalIcon, ViewLayersIcon } from '@blocksuite/icons'; import type { PageMeta, Workspace } from '@blocksuite/store'; import type { DragEndEvent } from '@dnd-kit/core'; import { useDroppable } from '@dnd-kit/core'; @@ -155,19 +152,32 @@ const CollectionRenderer = ({ ); }; -export const CollectionsList = ({ workspace, info }: CollectionsListProps) => { +export const CollectionsList = ({ + workspace, + info, + onCreate, +}: CollectionsListProps) => { const metas = useBlockSuitePageMeta(workspace); const { collections } = useSavedCollections(collectionsCRUDAtom); const t = useAFFiNEI18N(); if (collections.length === 0) { return ( - } - disabled - > - {t['Create a collection']()} - +
+
+
+ +
+
+ {t['com.affine.collections.empty.message']()} +
+
+ +
); } return ( 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 cbb2a4aeda..5598ba21ee 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 @@ -87,3 +87,45 @@ export const collapsibleContent = style({ }, }, }); + +export const emptyCollectionWrapper = style({ + padding: '9px 0', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: 8, +}); + +export const emptyCollectionContent = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: 6, +}); + +export const emptyCollectionIconWrapper = style({ + width: 36, + height: 36, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: '50%', + backgroundColor: 'var(--affine-background-secondary-color)', +}); + +export const emptyCollectionIcon = style({ + fontSize: 20, + color: 'var(--affine-icon-secondary)', +}); + +export const emptyCollectionMessage = style({ + fontSize: 'var(--affine-font-sm)', + textAlign: 'center', + color: 'var(--affine-text-secondary-color)', +}); + +export const emptyCollectionNewButton = style({ + padding: '0 8px', + height: '30px', + fontSize: 'var(--affine-font-sm)', +}); diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/index.tsx index 43726869db..3227b08fd2 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/index.tsx +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/index.tsx @@ -8,4 +8,5 @@ export type FavoriteListProps = { export type CollectionsListProps = { workspace: Workspace; info: DeleteCollectionInfo; + onCreate?: () => void; }; diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx index 5956f64a1f..ea4e0e9572 100644 --- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx +++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx @@ -12,15 +12,22 @@ import { SidebarContainer, SidebarScrollableContainer, } from '@affine/component/app-sidebar'; -import { MoveToTrash } from '@affine/component/page-list'; +import { + createEmptyCollection, + MoveToTrash, + useCollectionManager, + useEditCollectionName, +} from '@affine/component/page-list'; import { Menu } from '@affine/component/ui/menu'; +import { collectionsCRUDAtom } from '@affine/core/atoms/collections'; import { WorkspaceSubPath } from '@affine/env/workspace'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { FolderIcon, SettingsIcon } from '@blocksuite/icons'; -import type { Page } from '@blocksuite/store'; +import { type Page } from '@blocksuite/store'; import { useDroppable } from '@dnd-kit/core'; import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks'; import { useAtom, useAtomValue } from 'jotai'; +import { nanoid } from 'nanoid'; import type { HTMLAttributes, ReactElement } from 'react'; import { forwardRef, useCallback, useEffect, useMemo } from 'react'; @@ -171,6 +178,24 @@ export const RootAppSidebar = ({ }, [setOpenUserWorkspaceList]); useRegisterBrowserHistoryCommands(router.back, router.forward); const userInfo = useDeleteCollectionInfo(); + + const setting = useCollectionManager(collectionsCRUDAtom); + const { node, open } = useEditCollectionName({ + title: t['com.affine.editCollection.createCollection'](), + showTips: true, + }); + const handleCreateCollection = useCallback(() => { + open('') + .then(async name => { + const id = nanoid(); + await setting.createCollection(createEmptyCollection(id, { name })); + navigateHelper.jumpToCollection(blockSuiteWorkspace.id, id); + }) + .catch(err => { + console.error(err); + }); + }, [blockSuiteWorkspace.id, navigateHelper, open, setting]); + return ( - + - + {/* fixme: remove the following spacer */}
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 8d2e58c3fc..1cfacda972 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -553,6 +553,8 @@ "com.affine.collection.menu.rename": "Rename", "com.affine.collectionBar.backToAll": "Back to all", "com.affine.collections.header": "Collections", + "com.affine.collections.empty.message": "No collections", + "com.affine.collections.empty.new-collection-button": "New collection", "com.affine.confirmModal.button.cancel": "Cancel", "com.affine.currentYear": "Current Year", "com.affine.deleteLeaveWorkspace.description": "Delete workspace from this device and optionally delete all data.",