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 { PropertyValue } from '@affine/component';
import { type TagLike, TagsInlineEditor } from '@affine/component/ui/tags'; 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 { DatabaseBlockDataSource } from '@blocksuite/affine/blocks';
import type { SelectTag } from '@blocksuite/data-view'; import type { SelectTag } from '@blocksuite/data-view';
import { LiveData, useLiveData, useService } from '@toeverything/infra'; import { LiveData, useLiveData, useService } from '@toeverything/infra';
@ -147,7 +151,15 @@ const BlocksuiteDatabaseSelector = ({
const tagService = useService(TagService); const tagService = useService(TagService);
const selectCell = cell as any as SingleSelectCell | MultiSelectCell; const selectCell = cell as any as SingleSelectCell | MultiSelectCell;
const selectedIds = useLiveData(adapter.getSelectedIds$(selectCell)); 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( const onCreateTag = useCallback(
(name: string, color: string) => { (name: string, color: string) => {
@ -185,7 +197,7 @@ const BlocksuiteDatabaseSelector = ({
const tagColors = useMemo(() => { const tagColors = useMemo(() => {
return tagService.tagColors.map(([name, color]) => ({ return tagService.tagColors.map(([name, color]) => ({
id: name, id: name,
value: paletteLineToTag(color), // map from palette line to tag color value: affineLabelToDatabaseTagColor(color),
name, name,
})); }));
}, [tagService.tagColors]); }, [tagService.tagColors]);
@ -193,6 +205,9 @@ const BlocksuiteDatabaseSelector = ({
const onTagChange = useCallback( const onTagChange = useCallback(
(tagId: string, property: string, value: string) => { (tagId: string, property: string, value: string) => {
adapter.updateTag(selectCell, dataSource, tagId, old => { adapter.updateTag(selectCell, dataSource, tagId, old => {
if (property === 'color') {
value = affineLabelToDatabaseTagColor(value);
}
return { return {
...old, ...old,
[property]: value, [property]: value,

View File

@ -2,7 +2,7 @@ import type { DocsService } from '@toeverything/infra';
import { Entity, LiveData } from '@toeverything/infra'; import { Entity, LiveData } from '@toeverything/infra';
import type { TagStore } from '../stores/tag'; import type { TagStore } from '../stores/tag';
import { tagToPaletteLine } from './utils'; import { databaseTagColorToAffineLabel } from './utils';
export class Tag extends Entity<{ id: string }> { export class Tag extends Entity<{ id: string }> {
id = this.props.id; id = this.props.id;
@ -20,7 +20,9 @@ export class Tag extends Entity<{ id: string }> {
value$ = this.tagOption$.map(tag => tag?.value || ''); 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()); 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> = { const tagToPaletteLineMap: Record<string, string> = {
'var(--affine-tag-red)': 'var(--affine-palette-line-red)', [cssVar('tagRed')]: cssVar('paletteLineRed'),
'var(--affine-tag-teal)': 'var(--affine-palette-line-green)', [cssVar('tagTeal')]: cssVar('paletteLineTeal'),
'var(--affine-tag-blue)': 'var(--affine-palette-line-blue)', [cssVar('tagBlue')]: cssVar('paletteLineBlue'),
'var(--affine-tag-yellow)': 'var(--affine-palette-line-yellow)', [cssVar('tagYellow')]: cssVar('paletteLineYellow'),
'var(--affine-tag-pink)': 'var(--affine-palette-line-magenta)', [cssVar('tagPink')]: cssVar('paletteLineMagenta'),
'var(--affine-tag-white)': 'var(--affine-palette-line-grey)', [cssVar('tagWhite')]: cssVar('paletteLineWhite'),
'var(--affine-tag-gray)': 'var(--affine-palette-line-grey)', [cssVar('tagGray')]: cssVar('paletteLineGrey'),
'var(--affine-tag-orange)': 'var(--affine-palette-line-orange)', [cssVar('tagOrange')]: cssVar('paletteLineOrange'),
'var(--affine-tag-purple)': 'var(--affine-palette-line-purple)', [cssVar('tagPurple')]: cssVar('paletteLinePurple'),
'var(--affine-tag-green)': 'var(--affine-palette-line-green)', [cssVar('tagGreen')]: cssVar('paletteLineGreen'),
}; };
const paletteLineToTagMap: Record<string, string> = Object.fromEntries( // map var(--affine-tag-xxx) colors to var(--affine-chip-label-xxx)
Object.entries(tagToPaletteLineMap).map(([key, value]) => [value, key]) 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) const chipToPaletteLineMap: Record<string, string> = Object.fromEntries(
export const tagToPaletteLine = (color: string) => { Object.entries(chipToTagColorMap).map(([chip, tag]) => [
return tagToPaletteLineMap[color] || color; 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) => { export const databaseTagColorToV2 = (color: string) => {
return paletteLineToTagMap[color] || color; 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 { Tag } from './entities/tag';
export { paletteLineToTag, tagToPaletteLine } from './entities/utils'; export {
affineLabelToDatabaseTagColor,
databaseTagColorToAffineLabel,
} from './entities/utils';
export { TagService } from './service/tag'; export { TagService } from './service/tag';
export { useDeleteTagConfirmModal } from './view/delete-tag-modal'; export { useDeleteTagConfirmModal } from './view/delete-tag-modal';