imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use browser's font size instead of hardcoded 16px as root font size (#12246)

Browse source 
* WIP Use browser font size instead of hardcoded 16px

* Add font migration to v3

* Remove custom font size input

* Use a dropdown instead of a slider

* Add margin to the font size dropdown

* Fix `UpdateFontSizeDelta` action typo

* Fix `fontScale`in `Call.ts`

* Rename `baseFontSizeV3` to `fontSizeDelta`

* Update playwright test

* Add `default` next to the browser font size

* Remove remaining `TODO`

* Remove falsy `private`

* Improve doc

* Update snapshots after develop merge

* Remove commented import
This commit is contained in:
Florian Duros 2024-02-21 12:23:07 +01:00 • committed by GitHub
parent 36a8d503df
commit 6d55ce0217
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 453 additions and 366 deletions
Download patch file Download diff file Expand all files Collapse all files

44
playwright/e2e/settings/appearance-user-settings-tab.spec.ts
View file

@ -73,48 +73,18 @@ test.describe("Appearance user settings tab", () => {
await expect(page.locator(".mx_RoomView_body[data-layout='bubble']")).toBeVisible();
});
test("should support changing font size by clicking the font slider", async ({ page, app, user }) => {
test("should support changing font size by using the font size dropdown", async ({ page, app, user }) => {
await app.settings.openUserSettings("Appearance");
const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
const fontSliderSection = tab.locator(".mx_FontScalingPanel_fontSlider");
const fontDropdown = tab.locator(".mx_FontScalingPanel_Dropdown");
await expect(fontDropdown.getByLabel("Font size")).toBeVisible();
await expect(fontSliderSection.getByLabel("Font size")).toBeVisible();
// Default browser font size is 16px and the select value is 0
// -4 value is 12px
await fontDropdown.getByLabel("Font size").selectOption({ value: "-4" });
const slider = fontSliderSection.getByRole("slider");
// Click the left position of the slider
await slider.click({ position: { x: 0, y: 10 } });
const MIN_FONT_SIZE = 11;
// Assert that the smallest font size is selected
await expect(fontSliderSection.locator(`input[value='${MIN_FONT_SIZE}']`)).toBeVisible();
await expect(
fontSliderSection.locator("output .mx_Slider_selection_label", { hasText: String(MIN_FONT_SIZE) }),
).toBeVisible();
await expect(fontSliderSection).toMatchScreenshot(`font-slider-${MIN_FONT_SIZE}.png`);
// Click the right position of the slider
await slider.click({ position: { x: 572, y: 10 } });
const MAX_FONT_SIZE = 21;
// Assert that the largest font size is selected
await expect(fontSliderSection.locator(`input[value='${MAX_FONT_SIZE}']`)).toBeVisible();
await expect(
fontSliderSection.locator("output .mx_Slider_selection_label", { hasText: String(MAX_FONT_SIZE) }),
).toBeVisible();
await expect(fontSliderSection).toMatchScreenshot(`font-slider-${MAX_FONT_SIZE}.png`);
});
test("should disable font size slider when custom font size is used", async ({ page, app, user }) => {
await app.settings.openUserSettings("Appearance");
const panel = page.getByTestId("mx_FontScalingPanel");
await panel.locator("label", { hasText: "Use custom size" }).click();
// Assert that the font slider is disabled
await expect(panel.locator(".mx_FontScalingPanel_fontSlider input[disabled]")).toBeVisible();
await expect(page).toMatchScreenshot("window-12px.png");
});
test("should support enabling compact group (modern) layout", async ({ page, app, user }) => {