feat(editor): group configuration of note styles to panel from toolbar (#12230)

Close [BS-3401](https://linear.app/affine-design/issue/BS-3401/note-style-需要合并同类项)

![CleanShot 2025-05-12 at 14.23.01.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/ddf8623f-aa9c-491e-a7bf-90419fb19848.png)
This commit is contained in:
L-Sun
2025-05-12 09:42:52 +00:00
parent f3ca17fcb3
commit 42ae6e6e40
17 changed files with 685 additions and 462 deletions
+1 -1
View File
@@ -499,7 +499,7 @@ test(scoped`paste note block with background`, async ({ page }) => {
await switchEditorMode(page);
await selectNoteInEdgeless(page, ids.noteId);
await triggerComponentToolbarAction(page, 'changeNoteColor');
await triggerComponentToolbarAction(page, 'changeNoteStyle');
await changeEdgelessNoteBackground(page, 'White');
await assertEdgelessNoteBackground(
page,
@@ -191,7 +191,7 @@ test.describe('auto-complete', () => {
await page.mouse.click(rect.x + rect.width / 2, rect.y + rect.height / 2);
await waitNextFrame(page);
await triggerComponentToolbarAction(page, 'changeNoteColor');
await triggerComponentToolbarAction(page, 'changeNoteStyle');
await changeEdgelessNoteBackground(page, 'Red');
// move to arrow icon
@@ -57,7 +57,7 @@ test('tooltip should be hidden after clicking on button', async ({ page }) => {
await expect(page.locator('note-display-mode-panel')).toBeVisible();
const colorBtn = toolbar.getByRole('button', {
name: 'Background',
name: 'Note Style',
});
await colorBtn.hover();
@@ -317,7 +317,7 @@ test('change note color', async ({ page }) => {
);
await selectNoteInEdgeless(page, noteId);
await triggerComponentToolbarAction(page, 'changeNoteColor');
await triggerComponentToolbarAction(page, 'changeNoteStyle');
await changeEdgelessNoteBackground(page, 'Green');
await assertEdgelessNoteBackground(
page,
@@ -1057,7 +1057,7 @@ type Action =
| 'sendBackward'
| 'sendToBack'
| 'copyAsPng'
| 'changeNoteColor'
| 'changeNoteStyle'
| 'changeShapeStyle'
| 'changeShapeColor'
| 'changeShapeFillColor'
@@ -1253,10 +1253,10 @@ export async function triggerComponentToolbarAction(
await button.click();
break;
}
case 'changeNoteColor': {
const button = locatorComponentToolbar(page).getByRole('button', {
name: 'Background',
});
case 'changeNoteStyle': {
const button = locatorComponentToolbar(page).locator(
'edgeless-note-style-panel'
);
await button.click();
break;
}
@@ -1373,7 +1373,7 @@ export async function triggerComponentToolbarAction(
export async function changeEdgelessNoteBackground(page: Page, label: string) {
const colorButton = page
.locator('edgeless-color-picker-button')
.locator('edgeless-note-style-panel')
.locator('edgeless-color-panel')
.locator(`.color-unit[aria-label="${label}"]`);
await colorButton.click();