From 684b676028503b16c8c34e410a6523ea8f60a267 Mon Sep 17 00:00:00 2001 From: pengx17 Date: Tue, 5 Nov 2024 08:33:57 +0000 Subject: [PATCH] fix(core): adapt new database chip color scheme (#8697) fix AF-1609 --- .../database-properties/cells/select.tsx | 21 +++++- .../core/src/modules/tag/entities/tag.ts | 6 +- .../core/src/modules/tag/entities/utils.ts | 69 ++++++++++++++----- .../frontend/core/src/modules/tag/index.ts | 5 +- 4 files changed, 78 insertions(+), 23 deletions(-) diff --git a/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/select.tsx b/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/select.tsx index d670b6c57..d317dcaad 100644 --- a/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/select.tsx +++ b/packages/frontend/core/src/modules/doc-info/views/database-properties/cells/select.tsx @@ -2,7 +2,11 @@ import { PropertyValue } from '@affine/component'; import { type TagLike, TagsInlineEditor } from '@affine/component/ui/tags'; -import { paletteLineToTag, TagService } from '@affine/core/modules/tag'; +import { TagService } from '@affine/core/modules/tag'; +import { + affineLabelToDatabaseTagColor, + databaseTagColorToV2, +} from '@affine/core/modules/tag/entities/utils'; import type { DatabaseBlockDataSource } from '@blocksuite/affine/blocks'; import type { SelectTag } from '@blocksuite/data-view'; import { LiveData, useLiveData, useService } from '@toeverything/infra'; @@ -147,7 +151,15 @@ const BlocksuiteDatabaseSelector = ({ const tagService = useService(TagService); const selectCell = cell as any as SingleSelectCell | MultiSelectCell; const selectedIds = useLiveData(adapter.getSelectedIds$(selectCell)); - const tagOptions = useLiveData(adapter.getTagOptions$(selectCell)); + let tagOptions = useLiveData(adapter.getTagOptions$(selectCell)); + + // adapt bs database old tag color to new tag color + tagOptions = useMemo(() => { + return tagOptions.map(tag => ({ + ...tag, + color: databaseTagColorToV2(tag.color), + })); + }, [tagOptions]); const onCreateTag = useCallback( (name: string, color: string) => { @@ -185,7 +197,7 @@ const BlocksuiteDatabaseSelector = ({ const tagColors = useMemo(() => { return tagService.tagColors.map(([name, color]) => ({ id: name, - value: paletteLineToTag(color), // map from palette line to tag color + value: affineLabelToDatabaseTagColor(color), name, })); }, [tagService.tagColors]); @@ -193,6 +205,9 @@ const BlocksuiteDatabaseSelector = ({ const onTagChange = useCallback( (tagId: string, property: string, value: string) => { adapter.updateTag(selectCell, dataSource, tagId, old => { + if (property === 'color') { + value = affineLabelToDatabaseTagColor(value); + } return { ...old, [property]: value, diff --git a/packages/frontend/core/src/modules/tag/entities/tag.ts b/packages/frontend/core/src/modules/tag/entities/tag.ts index a198d6525..3c1076a1e 100644 --- a/packages/frontend/core/src/modules/tag/entities/tag.ts +++ b/packages/frontend/core/src/modules/tag/entities/tag.ts @@ -2,7 +2,7 @@ import type { DocsService } from '@toeverything/infra'; import { Entity, LiveData } from '@toeverything/infra'; import type { TagStore } from '../stores/tag'; -import { tagToPaletteLine } from './utils'; +import { databaseTagColorToAffineLabel } from './utils'; export class Tag extends Entity<{ id: string }> { id = this.props.id; @@ -20,7 +20,9 @@ export class Tag extends Entity<{ id: string }> { value$ = this.tagOption$.map(tag => tag?.value || ''); - color$ = this.tagOption$.map(tag => tagToPaletteLine(tag?.color ?? '') || ''); + color$ = this.tagOption$.map( + tag => databaseTagColorToAffineLabel(tag?.color ?? '') || '' + ); createDate$ = this.tagOption$.map(tag => tag?.createDate || Date.now()); diff --git a/packages/frontend/core/src/modules/tag/entities/utils.ts b/packages/frontend/core/src/modules/tag/entities/utils.ts index f61582a8d..115530519 100644 --- a/packages/frontend/core/src/modules/tag/entities/utils.ts +++ b/packages/frontend/core/src/modules/tag/entities/utils.ts @@ -1,25 +1,60 @@ +import { cssVar } from '@toeverything/theme'; +import { cssVarV2 } from '@toeverything/theme/v2'; + const tagToPaletteLineMap: Record = { - 'var(--affine-tag-red)': 'var(--affine-palette-line-red)', - 'var(--affine-tag-teal)': 'var(--affine-palette-line-green)', - 'var(--affine-tag-blue)': 'var(--affine-palette-line-blue)', - 'var(--affine-tag-yellow)': 'var(--affine-palette-line-yellow)', - 'var(--affine-tag-pink)': 'var(--affine-palette-line-magenta)', - 'var(--affine-tag-white)': 'var(--affine-palette-line-grey)', - 'var(--affine-tag-gray)': 'var(--affine-palette-line-grey)', - 'var(--affine-tag-orange)': 'var(--affine-palette-line-orange)', - 'var(--affine-tag-purple)': 'var(--affine-palette-line-purple)', - 'var(--affine-tag-green)': 'var(--affine-palette-line-green)', + [cssVar('tagRed')]: cssVar('paletteLineRed'), + [cssVar('tagTeal')]: cssVar('paletteLineTeal'), + [cssVar('tagBlue')]: cssVar('paletteLineBlue'), + [cssVar('tagYellow')]: cssVar('paletteLineYellow'), + [cssVar('tagPink')]: cssVar('paletteLineMagenta'), + [cssVar('tagWhite')]: cssVar('paletteLineWhite'), + [cssVar('tagGray')]: cssVar('paletteLineGrey'), + [cssVar('tagOrange')]: cssVar('paletteLineOrange'), + [cssVar('tagPurple')]: cssVar('paletteLinePurple'), + [cssVar('tagGreen')]: cssVar('paletteLineGreen'), }; -const paletteLineToTagMap: Record = Object.fromEntries( - Object.entries(tagToPaletteLineMap).map(([key, value]) => [value, key]) +// map var(--affine-tag-xxx) colors to var(--affine-chip-label-xxx) +const tagToChipColorMap: Record = { + [cssVar('tagRed')]: cssVarV2('chip/label/red'), + [cssVar('tagTeal')]: cssVarV2('chip/label/teal'), + [cssVar('tagBlue')]: cssVarV2('chip/label/blue'), + [cssVar('tagYellow')]: cssVarV2('chip/label/yellow'), + [cssVar('tagPink')]: cssVarV2('chip/label/magenta'), + [cssVar('tagWhite')]: cssVarV2('chip/label/white'), + [cssVar('tagGray')]: cssVarV2('chip/label/grey'), + [cssVar('tagOrange')]: cssVarV2('chip/label/orange'), + [cssVar('tagPurple')]: cssVarV2('chip/label/purple'), + [cssVar('tagGreen')]: cssVarV2('chip/label/green'), +}; + +const chipToTagColorMap: Record = Object.fromEntries( + Object.entries(tagToChipColorMap).map(([key, value]) => [value, key]) ); -// hack: map var(--affine-tag-xxx) colors to var(--affine-palette-line-xxx) -export const tagToPaletteLine = (color: string) => { - return tagToPaletteLineMap[color] || color; +const chipToPaletteLineMap: Record = Object.fromEntries( + Object.entries(chipToTagColorMap).map(([chip, tag]) => [ + chip, + tagToPaletteLineMap[tag], + ]) +); + +const paletteLineToChipMap: Record = Object.fromEntries( + Object.entries(chipToPaletteLineMap).map(([chip, paletteLine]) => [ + paletteLine, + chip, + ]) +); + +// hack: map var(--affine-tag-xxx)/var(--affine-chip-label-xxx) colors to var(--affine-palette-line-xxx) +export const databaseTagColorToAffineLabel = (color: string) => { + return chipToPaletteLineMap[color] || tagToPaletteLineMap[color] || color; }; -export const paletteLineToTag = (color: string) => { - return paletteLineToTagMap[color] || color; +export const databaseTagColorToV2 = (color: string) => { + return tagToChipColorMap[color] || color; +}; + +export const affineLabelToDatabaseTagColor = (color: string) => { + return paletteLineToChipMap[color] || color; }; diff --git a/packages/frontend/core/src/modules/tag/index.ts b/packages/frontend/core/src/modules/tag/index.ts index 56e4a73bb..5874b8072 100644 --- a/packages/frontend/core/src/modules/tag/index.ts +++ b/packages/frontend/core/src/modules/tag/index.ts @@ -1,5 +1,8 @@ export { Tag } from './entities/tag'; -export { paletteLineToTag, tagToPaletteLine } from './entities/utils'; +export { + affineLabelToDatabaseTagColor, + databaseTagColorToAffineLabel, +} from './entities/utils'; export { TagService } from './service/tag'; export { useDeleteTagConfirmModal } from './view/delete-tag-modal';