Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-27 02:42:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): update edgeless color palette (#9243)

Browse Source 
Closes: [BS-1475](https://linear.app/affine-design/issue/BS-1475/颜色主题更新) [BS-1803](https://linear.app/affine-design/issue/BS-1803/fill-color色板影响的yuan素) [BS-1804](https://linear.app/affine-design/issue/BS-1804/border-color色板影响的yuan素) [BS-1815](https://linear.app/affine-design/issue/BS-1815/连线文字配色略瞎)

### What's Changed

* refactor `EdgelessLineWidthPanel` component, the previous width is fixed and cannot be used in the new design
* refactor `EdgelessColorPanel` and `EdgelessColorButton` components, make them simple and reusable
* delete redundant `EdgelessOneRowColorPanel` component
* unity and update color palette, if the previously set color is not in the latest color palette, the custom color button will be selected
This commit is contained in:
fundon
2024-12-30 03:36:33 +00:00
parent 6b1865ff92
commit a5641ae608
250 changed files with 952 additions and 964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/core/package.json
View File

@@ -37,7 +37,7 @@
"@radix-ui/react-toolbar": "^1.1.1",
"@sentry/react": "^8.44.0",
"@toeverything/pdf-viewer": "^0.1.1",
"@toeverything/theme": "^1.1.2",
"@toeverything/theme": "^1.1.3",
"@vanilla-extract/dynamic": "^2.1.2",
"animejs": "^3.2.2",
"bytes": "^3.1.2",

12
packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/connector.tsx
View File

@@ -14,9 +14,9 @@ import {
FontFamilyMap,
FontStyle,
FontWeightMap,
LineColor,
LineColorMap,
PointStyle,
StrokeColor,
StrokeColorMap,
StrokeStyle,
TextAlign,
} from '@blocksuite/affine/blocks';
@@ -152,12 +152,12 @@ export const ConnectorSettings = () => {
const currentColor = useMemo(() => {
const color = settings.connector.stroke;
return getColorFromMap(color, LineColorMap);
return getColorFromMap(color, StrokeColorMap);
}, [getColorFromMap, settings.connector.stroke]);
const colorItems = useMemo(() => {
const { stroke } = settings.connector;
return Object.entries(LineColor).map(([name, value]) => {
return Object.entries(StrokeColor).map(([name, value]) => {
const handler = () => {
editorSetting.set('connector', { stroke: value });
};
@@ -322,7 +322,7 @@ export const ConnectorSettings = () => {
const textColorItems = useMemo(() => {
const { color } = settings.connector.labelStyle;
return Object.entries(LineColor).map(([name, value]) => {
return Object.entries(StrokeColor).map(([name, value]) => {
const handler = () => {
editorSetting.set('connector', {
labelStyle: {
@@ -346,7 +346,7 @@ export const ConnectorSettings = () => {
const textColor = useMemo(() => {
const { color } = settings.connector.labelStyle;
return getColorFromMap(color, LineColorMap);
return getColorFromMap(color, StrokeColorMap);
}, [getColorFromMap, settings]);
const getElements = useCallback((doc: Doc) => {

6
packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/pen.tsx
View File

@@ -2,7 +2,7 @@ import { MenuItem, MenuTrigger, Slider } from '@affine/component';
import { SettingRow } from '@affine/component/setting-components';
import { EditorSettingService } from '@affine/core/modules/editor-setting';
import { useI18n } from '@affine/i18n';
import { LineColor, LineColorMap } from '@blocksuite/affine/blocks';
import { StrokeColor, StrokeColorMap } from '@blocksuite/affine/blocks';
import type { Doc } from '@blocksuite/affine/store';
import { useFramework, useLiveData } from '@toeverything/infra';
import { useCallback, useMemo } from 'react';
@@ -22,12 +22,12 @@ export const PenSettings = () => {
const getColorFromMap = useColor();
const currentColor = useMemo(() => {
return getColorFromMap(settings.brush.color, LineColorMap);
return getColorFromMap(settings.brush.color, StrokeColorMap);
}, [getColorFromMap, settings.brush.color]);
const colorItems = useMemo(() => {
const { color } = settings.brush;
return Object.entries(LineColor).map(([name, value]) => {
return Object.entries(StrokeColor).map(([name, value]) => {
const handler = () => {
editorSetting.set('brush', { color: value });
};

12
packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/shape.tsx
View File

@@ -21,11 +21,11 @@ import {
FontStyle,
FontWeightMap,
getShapeName,
LineColor,
LineColorMap,
ShapeFillColor,
ShapeStyle,
ShapeType,
StrokeColor,
StrokeColorMap,
StrokeStyle,
TextAlign,
} from '@blocksuite/affine/blocks';
@@ -226,7 +226,7 @@ export const ShapeSettings = () => {
const borderColorItems = useMemo(() => {
const { strokeColor } = settings[`shape:${currentShape}`];
return Object.entries(LineColor).map(([name, value]) => {
return Object.entries(StrokeColor).map(([name, value]) => {
const handler = () => {
editorSetting.set(`shape:${currentShape}`, { strokeColor: value });
};
@@ -316,7 +316,7 @@ export const ShapeSettings = () => {
const textColorItems = useMemo(() => {
const { color } = settings[`shape:${currentShape}`];
return Object.entries(LineColor).map(([name, value]) => {
return Object.entries(StrokeColor).map(([name, value]) => {
const handler = () => {
editorSetting.set(`shape:${currentShape}`, { color: value });
};
@@ -375,12 +375,12 @@ export const ShapeSettings = () => {
const borderColor = useMemo(() => {
const color = settings[`shape:${currentShape}`].strokeColor;
return getColorFromMap(color, LineColorMap);
return getColorFromMap(color, StrokeColorMap);
}, [currentShape, getColorFromMap, settings]);
const textColor = useMemo(() => {
const color = settings[`shape:${currentShape}`].color;
return getColorFromMap(color, LineColorMap);
return getColorFromMap(color, StrokeColorMap);
}, [currentShape, getColorFromMap, settings]);
const height = currentDoc === 'flow' ? 456 : 180;

8
packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/text.tsx
View File

@@ -12,8 +12,8 @@ import {
FontFamilyMap,
FontStyle,
FontWeightMap,
LineColor,
LineColorMap,
StrokeColor,
StrokeColorMap,
TextAlign,
} from '@blocksuite/affine/blocks';
import type { Doc } from '@blocksuite/affine/store';
@@ -72,7 +72,7 @@ export const TextSettings = () => {
const colorItems = useMemo(() => {
const { color } = settings['affine:edgeless-text'];
return Object.entries(LineColor).map(([name, value]) => {
return Object.entries(StrokeColor).map(([name, value]) => {
const handler = () => {
editorSetting.set('affine:edgeless-text', { color: value });
};
@@ -137,7 +137,7 @@ export const TextSettings = () => {
const currentColor = useMemo(() => {
const { color } = settings['affine:edgeless-text'];
return getColorFromMap(color, LineColorMap);
return getColorFromMap(color, StrokeColorMap);
}, [getColorFromMap, settings]);
const getElements = useCallback((doc: Doc) => {