mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-22 04:26:23 +08:00
fundon
4d6a3731a3
Closes: [BS-3506](https://linear.app/affine-design/issue/BS-3506/edgeless-text-默认改为黑色) ### Dark <img width="691" alt="Screenshot 2025-05-19 at 19 32 52" src="https://github.com/user-attachments/assets/2927d13b-0300-4293-8f8f-7891fd87a680" /> ### Light <img width="639" alt="Screenshot 2025-05-19 at 19 33 05" src="https://github.com/user-attachments/assets/4429f6f9-b374-4b17-87f4-ae09204f1538" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Improved edgeless text block styling to support theme-based color, font, and alignment settings. - **Style** - Updated the default text color in edgeless text blocks to black, with support for separate dark and light mode colors. - **Bug Fixes** - Ensured the color picker and block rendering reflect the updated default color. - **Tests** - Adjusted tests and snapshots to expect the new default color and theme-based color structure. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
import { test } from '@affine-test/kit/playwright';
|
|
import {
|
|
clickEdgelessModeButton,
|
|
locateEditorContainer,
|
|
locateToolbar,
|
|
} from '@affine-test/kit/utils/editor';
|
|
import { openHomePage } from '@affine-test/kit/utils/load-page';
|
|
import {
|
|
clickNewPageButton,
|
|
type,
|
|
waitForEditorLoad,
|
|
} from '@affine-test/kit/utils/page-logic';
|
|
import { expect, type Locator } from '@playwright/test';
|
|
|
|
function getEdgelessTextColor(text: Locator) {
|
|
return text
|
|
.locator('.affine-block-children-container')
|
|
.first()
|
|
.evaluate(e => e.style.getPropertyValue('--edgeless-text-color'));
|
|
}
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await openHomePage(page);
|
|
await waitForEditorLoad(page);
|
|
await clickNewPageButton(page);
|
|
await clickEdgelessModeButton(page);
|
|
const container = locateEditorContainer(page);
|
|
await container.click();
|
|
});
|
|
|
|
test('should update color of edgeless text when switching theme', async ({
|
|
page,
|
|
}) => {
|
|
const container = locateEditorContainer(page);
|
|
await container.dblclick();
|
|
|
|
await page.waitForSelector('affine-edgeless-text');
|
|
|
|
await type(page, 'text color');
|
|
|
|
await page.keyboard.press('Escape');
|
|
await page.keyboard.press('Escape');
|
|
|
|
const text = page.locator('affine-edgeless-text');
|
|
|
|
await text.click();
|
|
|
|
const toolbar = locateToolbar(page);
|
|
|
|
await expect(toolbar).toBeVisible();
|
|
|
|
const colorPicker = toolbar.locator('edgeless-color-picker-button');
|
|
const colorButton = toolbar.getByLabel('Text color');
|
|
|
|
await colorButton.click();
|
|
|
|
const pickedColorButton = colorPicker.locator(
|
|
'edgeless-color-button[active]'
|
|
);
|
|
|
|
let pickedColor = await pickedColorButton.locator('svg').getAttribute('fill');
|
|
let textColor = await getEdgelessTextColor(text);
|
|
|
|
await expect(pickedColorButton.getByLabel('Black')).toHaveCount(1);
|
|
expect(pickedColor).toBe(textColor);
|
|
|
|
const blackColorButton = colorPicker
|
|
.locator('edgeless-color-button')
|
|
.filter({
|
|
has: page.locator('.color-unit'),
|
|
})
|
|
.filter({
|
|
has: page.getByLabel('Black'),
|
|
});
|
|
await blackColorButton.click();
|
|
|
|
pickedColor = await blackColorButton.locator('svg').getAttribute('fill');
|
|
textColor = await getEdgelessTextColor(text);
|
|
|
|
expect(pickedColor).toBe(textColor);
|
|
expect(pickedColor).toBe('#000000');
|
|
|
|
await page.getByTestId('header-info-button').click();
|
|
|
|
await page
|
|
.locator('[data-info-id="edgelessTheme"]')
|
|
.locator('[data-property-value="true"]')
|
|
.locator('button[value="dark"]')
|
|
.click();
|
|
|
|
await page.keyboard.press('Escape');
|
|
|
|
await expect(page.getByTestId('property-collapsible-section')).toBeHidden();
|
|
|
|
await colorButton.click();
|
|
|
|
pickedColor = await blackColorButton.locator('svg').getAttribute('fill');
|
|
textColor = await getEdgelessTextColor(text);
|
|
|
|
expect(pickedColor).toBe(textColor);
|
|
expect(pickedColor).toBe('#ffffff');
|
|
});
|