Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-09-22 11:43:44 +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:34 +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/tests-legacy/utils/actions/edgeless.ts
+14 -7
View File
@@ -1,6 +1,10 @@
import '../declare-test-window.js';
import type { NoteBlockModel, NoteDisplayMode } from '@blocks/index.js';
import {
type NoteBlockModel,
type NoteDisplayMode,
ShapeFillColor,
} from '@blocks/index.js';
import type { IPoint, IVec } from '@blocksuite/global/utils';
import { assertExists, sleep } from '@blocksuite/global/utils';
import type { Locator, Page } from '@playwright/test';
@@ -646,9 +650,10 @@ export async function rotateElementByHandle(
}
export async function selectBrushColor(page: Page, color: string) {
const colorButton = page.locator(
`edgeless-brush-menu .color-unit[aria-label="${color.toLowerCase()}"]`
);
const colorButton = page
.locator('edgeless-brush-menu')
.locator('edgeless-color-panel')
.locator(`.color-unit[aria-label="${color}"]`);
await colorButton.click();
}
@@ -1375,6 +1380,7 @@ export async function triggerComponentToolbarAction(
export async function changeEdgelessNoteBackground(page: Page, color: string) {
const colorButton = page
.locator('edgeless-change-note-button')
.locator('edgeless-color-panel')
.locator(`.color-unit[aria-label="${color}"]`);
await colorButton.click();
}
@@ -1410,6 +1416,7 @@ export async function changeShapeStrokeColor(page: Page, color: string) {
const colorButton = page
.locator('edgeless-change-shape-button')
.locator('edgeless-color-picker-button.border-style')
.locator('edgeless-color-panel')
.locator(`.color-unit[aria-label="${color}"]`);
await colorButton.click();
}
@@ -1535,7 +1542,7 @@ export async function initThreeOverlapFilledShapes(page: Page) {
await addBasicRectShapeElement(page, rect0.start, rect0.end);
await page.mouse.click(rect0.start.x + 5, rect0.start.y + 5);
await triggerComponentToolbarAction(page, 'changeShapeFillColor');
await changeShapeFillColor(page, '--affine-palette-shape-teal');
await changeShapeFillColor(page, ShapeFillColor.Green);
const rect1 = {
start: { x: 130, y: 130 },
@@ -1544,7 +1551,7 @@ export async function initThreeOverlapFilledShapes(page: Page) {
await addBasicRectShapeElement(page, rect1.start, rect1.end);
await page.mouse.click(rect1.start.x + 5, rect1.start.y + 5);
await triggerComponentToolbarAction(page, 'changeShapeFillColor');
await changeShapeFillColor(page, '--affine-palette-shape-black');
await changeShapeFillColor(page, ShapeFillColor.Black);
const rect2 = {
start: { x: 160, y: 160 },
@@ -1553,7 +1560,7 @@ export async function initThreeOverlapFilledShapes(page: Page) {
await addBasicRectShapeElement(page, rect2.start, rect2.end);
await page.mouse.click(rect2.start.x + 5, rect2.start.y + 5);
await triggerComponentToolbarAction(page, 'changeShapeFillColor');
await changeShapeFillColor(page, '--affine-palette-shape-white');
await changeShapeFillColor(page, ShapeFillColor.White);
}
export async function initThreeOverlapNotes(page: Page, x = 130, y = 140) {
blocksuite/tests-legacy/utils/asserts.ts
+2 -1
View File
@@ -7,6 +7,7 @@ import type {
RootBlockModel,
} from '@blocks/index.js';
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
DEFAULT_NOTE_HEIGHT,
DEFAULT_NOTE_WIDTH,
} from '@blocksuite/affine-model';
@@ -112,7 +113,7 @@ export const defaultStore = {
'sys:children': ['2'],
'sys:version': 1,
'prop:xywh': `[0,0,${DEFAULT_NOTE_WIDTH}, ${DEFAULT_NOTE_HEIGHT}]`,
'prop:background': '--affine-note-background-white',
'prop:background': DEFAULT_NOTE_BACKGROUND_COLOR,
'prop:index': 'a0',
'prop:hidden': false,
'prop:displayMode': 'both',