fix(core): adapt new database chip color scheme (#8697)

fix AF-1609
This commit is contained in:
pengx17 2024-11-05 08:33:57 +00:00
parent aae71a23eb
commit 684b676028
No known key found for this signature in database
GPG Key ID: 23F23D9E8B3971ED
4 changed files with 78 additions and 23 deletions

View File

@ -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,

View File

@ -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());

View File

@ -1,25 +1,60 @@
import { cssVar } from '@toeverything/theme';
import { cssVarV2 } from '@toeverything/theme/v2';
const tagToPaletteLineMap: Record<string, string> = {
'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<string, string> = 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<string, string> = {
[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<string, string> = 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<string, string> = Object.fromEntries(
Object.entries(chipToTagColorMap).map(([chip, tag]) => [
chip,
tagToPaletteLineMap[tag],
])
);
const paletteLineToChipMap: Record<string, string> = 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;
};

View File

@ -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';