From 32c7a135f4c73a663a4d50f13607bcc46f75d1bb Mon Sep 17 00:00:00 2001 From: EYHN Date: Tue, 27 May 2025 05:41:11 +0000 Subject: [PATCH] feat(core): adjust pinned collections edit button (#12533) ## Summary by CodeRabbit - **New Features** - Added a centralized "Edit collection rules" button in the pinned collections footer, enabling users to edit collection rules via a dialog. - **Style** - Removed hover effects and visual styling from the edit icon button in pinned collections. - **Bug Fixes** - Removed per-item edit buttons to streamline the editing process. - **Documentation** - Added a new localized label for the edit collection rules action. --- .../pages/workspace/all-page/all-page.tsx | 16 +------- .../all-page/pinned-collections.css.ts | 20 +-------- .../workspace/all-page/pinned-collections.tsx | 41 +++++++++++-------- packages/frontend/i18n/src/i18n.gen.ts | 4 ++ packages/frontend/i18n/src/resources/en.json | 1 + 5 files changed, 32 insertions(+), 50 deletions(-) diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx b/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx index 1d4d910706..39eeb10eb8 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx @@ -122,7 +122,7 @@ export const AllPage = () => { .watch( selectedCollectionInfo ? { - filters: tempFilters ?? selectedCollectionInfo.rules.filters, + filters: selectedCollectionInfo.rules.filters, groupBy, orderBy, extraAllowList: selectedCollectionInfo.allowList, @@ -221,19 +221,6 @@ export const AllPage = () => { setTempFilters(null); }, []); - const handleEditCollection = useCallback( - (collectionId: string) => { - const collection = collectionService.collection$(collectionId).value; - if (!collection) { - return; - } - setSelectedCollectionId(collectionId); - setTempFilters(collection.info$.value.rules.filters); - setTempFiltersInitial(null); - }, - [collectionService] - ); - const handleSaveFilters = useCallback(() => { if (selectedCollectionId) { collectionService.updateCollection(selectedCollectionId, { @@ -312,7 +299,6 @@ export const AllPage = () => { onActiveAll={handleSelectAll} onActiveCollection={handleSelectCollection} onAddFilter={handleNewTempFilter} - onEditCollection={handleEditCollection} hiddenAdd={tempFilters !== null} /> diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.css.ts b/packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.css.ts index 8cfeb4422f..b75f2a8125 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.css.ts +++ b/packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.css.ts @@ -35,27 +35,9 @@ export const itemContent = style({ textAlign: 'center', maxWidth: '128px', minWidth: '32px', - - selectors: { - [`${item}:hover > &`]: { - mask: - 'linear-gradient(#fff) left / calc(100% - 32px) no-repeat,' + - 'linear-gradient(90deg,#fff 0%,transparent 50%,transparent 100%) right / 32px no-repeat', - }, - }, }); -export const editIconButton = style({ - opacity: 0, - marginLeft: -16, - backgroundColor: cssVarV2('layer/background/hoverOverlay'), - - selectors: { - [`${item}:hover > &`]: { - opacity: 1, - }, - }, -}); +export const editIconButton = style({}); export const closeButton = style({}); diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.tsx b/packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.tsx index 21fd1be04b..77e360bdeb 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.tsx @@ -1,4 +1,10 @@ -import { Divider, IconButton, Menu, MenuItem } from '@affine/component'; +import { + Divider, + IconButton, + Menu, + MenuItem, + Tooltip, +} from '@affine/component'; import { AddFilterMenu } from '@affine/core/components/filter/add-filter'; import { CollectionService, @@ -6,6 +12,7 @@ import { PinnedCollectionService, } from '@affine/core/modules/collection'; import type { FilterParams } from '@affine/core/modules/collection-rules'; +import { WorkspaceDialogService } from '@affine/core/modules/dialogs'; import { useI18n } from '@affine/i18n'; import { CloseIcon, @@ -24,13 +31,11 @@ export const PinnedCollectionItem = ({ isActive, onClick, onClickRemove, - onClickEdit, }: { record: PinnedCollectionRecord; onClickRemove: () => void; isActive: boolean; onClick: () => void; - onClickEdit: () => void; }) => { const t = useI18n(); const collectionService = useService(CollectionService); @@ -49,16 +54,6 @@ export const PinnedCollectionItem = ({ onClick={onClick} > {name ?? t['Untitled']()} - { - e.stopPropagation(); - onClickEdit(); - }} - > - - {isActive && ( void; onActiveCollection: (collectionId: string) => void; onAddFilter: (params: FilterParams) => void; - onEditCollection: (collectionId: string) => void; hiddenAdd?: boolean; }) => { const t = useI18n(); + const workspaceDialogService = useService(WorkspaceDialogService); const pinnedCollectionService = useService(PinnedCollectionService); const pinnedCollections = useLiveData( pinnedCollectionService.sortedPinnedCollections$ @@ -127,7 +121,6 @@ export const PinnedCollections = ({ ? onActiveCollection(record.collectionId) : undefined } - onClickEdit={() => onEditCollection(record.collectionId)} onClickRemove={() => { const nextCollectionId = pinnedCollections[index - 1]?.collectionId; if (nextCollectionId) { @@ -145,6 +138,22 @@ export const PinnedCollections = ({ onAddFilter={onAddFilter} /> )} +
+ {activeCollectionId && ( + + + workspaceDialogService.open('collection-editor', { + collectionId: activeCollectionId, + }) + } + > + + + + )} ); }; diff --git a/packages/frontend/i18n/src/i18n.gen.ts b/packages/frontend/i18n/src/i18n.gen.ts index c02a1f3176..4f35b0688a 100644 --- a/packages/frontend/i18n/src/i18n.gen.ts +++ b/packages/frontend/i18n/src/i18n.gen.ts @@ -7172,6 +7172,10 @@ export function useAFFiNEI18N(): { * `All` */ ["com.affine.all-docs.pinned-collection.all"](): string; + /** + * `Edit collection rules` + */ + ["com.affine.all-docs.pinned-collection.edit"](): string; /** * `Template` */ diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 49d84ed98a..d472bcb789 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1792,6 +1792,7 @@ "com.affine.all-docs.quick-action.delete-permanently": "Delete permanently", "com.affine.all-docs.quick-action.restore": "Restore", "com.affine.all-docs.pinned-collection.all": "All", + "com.affine.all-docs.pinned-collection.edit": "Edit collection rules", "com.affine.all-docs.group.is-template": "Template", "com.affine.all-docs.group.is-not-template": "Not Template", "com.affine.all-docs.group.is-journal": "Journal",