Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-26 23:02:57 +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
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
+2 -2
View File
@@ -4,7 +4,7 @@ import type {
BrushProps,
ColorScheme,
} from '@blocksuite/affine-model';
import { LINE_COLORS, LineWidth } from '@blocksuite/affine-model';
import { LineWidth, PALETTES } from '@blocksuite/affine-model';
import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
import { html, LitElement, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
@@ -138,7 +138,7 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
.color=${selectedColor}
.colors=${colors}
.colorType=${type}
.palettes=${LINE_COLORS}
.palettes=${PALETTES}
>
</edgeless-color-picker-button>
`;
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
+2 -3
View File
@@ -28,8 +28,8 @@ import {
ConnectorMode,
DEFAULT_FRONT_END_POINT_STYLE,
DEFAULT_REAR_END_POINT_STYLE,
LINE_COLORS,
LineWidth,
PALETTES,
PointStyle,
StrokeStyle,
} from '@blocksuite/affine-model';
@@ -373,7 +373,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
.color=${selectedColor}
.colors=${colors}
.colorType=${type}
.palettes=${LINE_COLORS}
.palettes=${PALETTES}
.hollowCircle=${true}
>
<div
@@ -390,7 +390,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
selectedLineSize: selectedLineSize,
selectedLineStyle: selectedLineStyle,
onClick: (e: LineStyleEvent) => this._setConnectorStroke(e),
lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash],
})}
</div>
<editor-toolbar-separator
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
+4 -5
View File
@@ -9,9 +9,9 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
import {
type ColorScheme,
DEFAULT_NOTE_HEIGHT,
FRAME_BACKGROUND_COLORS,
type FrameBlockModel,
NoteDisplayMode,
PALETTES,
} from '@blocksuite/affine-model';
import { matchFlavours } from '@blocksuite/affine-shared/utils';
import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx';
@@ -130,8 +130,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
const len = frames.length;
const onlyOne = len === 1;
const colorScheme = this.edgeless.surface.renderer.getColorScheme();
const background =
getMostCommonColor(frames, colorScheme) ?? '--affine-palette-transparent';
const background = getMostCommonColor(frames, colorScheme) ?? 'transparent';
return join(
[
@@ -204,7 +203,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
.color=${background}
.colors=${colors}
.colorType=${type}
.palettes=${FRAME_BACKGROUND_COLORS}
.palettes=${PALETTES}
>
</edgeless-color-picker-button>
`;
@@ -225,7 +224,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
>
<edgeless-color-panel
.value=${background}
.options=${FRAME_BACKGROUND_COLORS}
.palettes=${PALETTES}
@select=${(e: ColorEvent) => this._setFrameBackground(e.detail)}
>
</edgeless-color-panel>
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
+3 -3
View File
@@ -15,7 +15,7 @@ import {
import {
type ColorScheme,
DEFAULT_NOTE_BACKGROUND_COLOR,
NOTE_BACKGROUND_COLORS,
NOTE_BACKGROUND_PALETTES,
type NoteBlockModel,
NoteDisplayMode,
type StrokeStyle,
@@ -319,7 +319,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
.color=${background}
.colorType=${type}
.colors=${colors}
.palettes=${NOTE_BACKGROUND_COLORS}
.palettes=${NOTE_BACKGROUND_PALETTES}
>
</edgeless-color-picker-button>
`;
@@ -340,7 +340,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
>
<edgeless-color-panel
.value=${background}
.options=${NOTE_BACKGROUND_COLORS}
.options=${NOTE_BACKGROUND_PALETTES}
@select=${(e: ColorEvent) => this._setBackground(e.detail)}
>
</edgeless-color-panel>
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
+5 -6
View File
@@ -21,8 +21,7 @@ import {
getShapeType,
LineWidth,
MindmapElementModel,
SHAPE_FILL_COLORS,
SHAPE_STROKE_COLORS,
PALETTES,
ShapeStyle,
StrokeStyle,
} from '@blocksuite/affine-model';
@@ -96,7 +95,7 @@ function getMostCommonFillColor(
? (ele.fillColor[colorScheme] ?? ele.fillColor.normal ?? null)
: ele.fillColor;
}
return '--affine-palette-transparent';
return 'transparent';
});
const max = maxBy(Object.entries(colors), ([_k, count]) => count);
return max ? (max[0] as string) : null;
@@ -345,7 +344,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
.color=${selectedFillColor}
.colors=${colors}
.colorType=${type}
.palettes=${SHAPE_FILL_COLORS}
.palettes=${PALETTES}
>
</edgeless-color-picker-button>
`;
@@ -368,7 +367,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
role="listbox"
aria-label="Fill colors"
.value=${selectedFillColor}
.options=${SHAPE_FILL_COLORS}
.palettes=${PALETTES}
@select=${(e: ColorEvent) => this._setShapeFillColor(e.detail)}
>
</edgeless-color-panel>
@@ -393,7 +392,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
.color=${selectedStrokeColor}
.colors=${colors}
.colorType=${type}
.palettes=${SHAPE_STROKE_COLORS}
.palettes=${PALETTES}
.hollowCircle=${true}
>
<div
blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
+3 -2
View File
@@ -18,7 +18,7 @@ import {
FontFamily,
FontStyle,
FontWeight,
LINE_COLORS,
PALETTES,
ShapeElementModel,
TextAlign,
TextElementModel,
@@ -391,7 +391,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
.color=${selectedColor}
.colors=${colors}
.colorType=${type}
.palettes=${LINE_COLORS}
.palettes=${PALETTES}
>
</edgeless-color-picker-button>
`;
@@ -412,6 +412,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
>
<edgeless-color-panel
.value=${selectedColor}
.palettes=${PALETTES}
@select=${this._setTextColor}
></edgeless-color-panel>
</editor-menu-button>