OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use semantic headings in user settings Appearance (#10827) 

* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* use semantic headings in User settings appearance tab

* update selectors in tests

* tidy
pull/28788/head^2
Kerry 2023-05-22 09:12:11 +12:00 committed by GitHub
parent e652177706
commit b3b03e5dcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 765 additions and 770 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/e2e/audio-player/audio-player.spec.ts
View File

@ -176,7 +176,7 @@ describe("Audio player", () => {
// Enable high contrast manually
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.findByLabelText("Use high contrast")
.click({ force: true }); // force click because the size of the checkbox is zero

53
cypress/e2e/settings/appearance-user-settings-tab.spec.ts
View File

@ -36,12 +36,11 @@ describe("Appearance user settings tab", () => {
it("should be rendered properly", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
// Assert that the top heading is rendered
cy.findByTestId("appearance").should("have.text", "Customise your appearance").should("be.visible");
cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
cy.get("h2").should("have.text", "Customise your appearance").should("be.visible");
});
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
"User settings tab - Appearance (advanced options collapsed)",
{
// Emulate TabbedView's actual min and max widths
@ -57,7 +56,7 @@ describe("Appearance user settings tab", () => {
// Assert that "Hide advanced" link button is rendered
cy.findByRole("button", { name: "Hide advanced" }).should("exist");
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
"User settings tab - Appearance (advanced options expanded)",
{
// Emulate TabbedView's actual min and max widths
@ -74,7 +73,7 @@ describe("Appearance user settings tab", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Assert that the layout selected by default is "Modern"
cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
cy.findByLabelText("Modern").should("exist");
@ -84,7 +83,7 @@ describe("Appearance user settings tab", () => {
// Assert that the room layout is set to group (modern) layout
cy.get(".mx_RoomView_body[data-layout='group']").should("exist");
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the first layout
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
@ -97,7 +96,7 @@ describe("Appearance user settings tab", () => {
// Assert that the room layout is set to IRC layout
cy.get(".mx_RoomView_body[data-layout='irc']").should("exist");
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the last layout
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
@ -114,7 +113,7 @@ describe("Appearance user settings tab", () => {
it("should support changing font size by clicking the font slider", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
cy.get(".mx_FontScalingPanel_fontSlider").within(() => {
cy.findByLabelText("Font size").should("exist");
});
@ -150,7 +149,7 @@ describe("Appearance user settings tab", () => {
it("should disable font size slider when custom font size is used", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_FontScalingPanel").within(() => {
cy.findByTestId("mx_FontScalingPanel").within(() => {
cy.findByLabelText("Use custom size").click({ force: true }); // force click as checkbox size is zero
// Assert that the font slider is disabled
@ -167,10 +166,8 @@ describe("Appearance user settings tab", () => {
// Click "Show advanced" link button
cy.findByRole("button", { name: "Show advanced" }).click();
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
// force click as checkbox size is zero
cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true });
});
// force click as checkbox size is zero
cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true });
// Assert that the room layout is set to compact group (modern) layout
cy.get("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout").should("exist");
@ -178,13 +175,7 @@ describe("Appearance user settings tab", () => {
it("should disable compact group (modern) layout option on IRC layout and bubble layout", () => {
const checkDisabled = () => {
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
cy.get(".mx_Checkbox")
.first()
.within(() => {
cy.get("input[type='checkbox'][disabled]").should("exist");
});
});
cy.findByLabelText("Use a more compact 'Modern' layout").should("be.disabled");
};
cy.openUserSettings("Appearance");
@ -193,7 +184,7 @@ describe("Appearance user settings tab", () => {
cy.findByRole("button", { name: "Show advanced" }).click();
// Enable IRC layout
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the first layout
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
@ -206,7 +197,7 @@ describe("Appearance user settings tab", () => {
checkDisabled();
// Enable bubble layout
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the first layout
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
@ -225,10 +216,8 @@ describe("Appearance user settings tab", () => {
// Click "Show advanced" link button
cy.findByRole("button", { name: "Show advanced" }).click();
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
// force click as checkbox size is zero
cy.findByLabelText("Use a system font").click({ force: true });
});
// force click as checkbox size is zero
cy.findByLabelText("Use a system font").click({ force: true });
// Assert that the font-family value was removed
cy.get("body").should("have.css", "font-family", '""');
@ -242,7 +231,7 @@ describe("Appearance user settings tab", () => {
it("should be rendered with the light theme selected", () => {
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.within(() => {
cy.findByTestId("checkbox-use-system-theme").within(() => {
cy.findByText("Match system theme").should("be.visible");
@ -252,7 +241,7 @@ describe("Appearance user settings tab", () => {
cy.get(".mx_Checkbox_checkmark").should("not.be.visible");
});
cy.get(".mx_ThemeSelectors").within(() => {
cy.findByTestId("theme-choice-panel-selectors").within(() => {
cy.get(".mx_ThemeSelector_light").should("exist");
cy.get(".mx_ThemeSelector_dark").should("exist");
@ -274,11 +263,11 @@ describe("Appearance user settings tab", () => {
"the system theme is clicked",
() => {
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.findByLabelText("Match system theme")
.click({ force: true }); // force click because the size of the checkbox is zero
cy.get(".mx_ThemeChoicePanel").within(() => {
cy.findByTestId("mx_ThemeChoicePanel").within(() => {
// Assert that the labels for the light theme and dark theme are disabled
cy.get(".mx_ThemeSelector_light.mx_StyledRadioButton_disabled").should("exist");
cy.get(".mx_ThemeSelector_dark.mx_StyledRadioButton_disabled").should("exist");
@ -321,7 +310,7 @@ describe("Appearance user settings tab", () => {
});
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.findByLabelText("Use high contrast")
.click({ force: true }); // force click because the size of the checkbox is zero

1
res/css/_components.pcss
View File

@ -179,7 +179,6 @@
@import "./views/elements/_Dropdown.pcss";
@import "./views/elements/_EditableItemList.pcss";
@import "./views/elements/_ErrorBoundary.pcss";
@import "./views/elements/_EventTilePreview.pcss";
@import "./views/elements/_ExternalLink.pcss";
@import "./views/elements/_FacePile.pcss";
@import "./views/elements/_Field.pcss";

21
res/css/views/elements/_EventTilePreview.pcss
View File

@ -1,21 +0,0 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_FontScalingPanel {
.mx_FontScalingPanel_preview.mx_EventTilePreview_loader {
padding: var(--FontScalingPanel_preview-padding-block) 0;
}
}

91
res/css/views/settings/_FontScalingPanel.pcss
View File

@ -14,63 +14,48 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_FontScalingPanel {
color: $primary-content;
.mx_FontScalingPanel_preview {
--FontScalingPanel_preview-padding-block: 9px;
.mx_FontScalingPanel_preview,
.mx_FontScalingPanel_fontSlider {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
border: 1px solid $quinary-content;
border-radius: 10px;
padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
pointer-events: none;
display: flow-root;
&.mx_IRCLayout {
padding-top: 9px; /* TODO: Use a spacing variable */
}
.mx_FontScalingPanel_preview {
--FontScalingPanel_preview-padding-block: 9px;
border: 1px solid $quinary-content;
border-radius: 10px;
padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
pointer-events: none;
display: flow-root;
&.mx_IRCLayout {
padding-top: 9px; /* TODO: Use a spacing variable */
}
.mx_EventTile[data-layout="bubble"] {
margin-top: 30px; /* TODO: Use a spacing variable */
}
.mx_EventTile_msgOption {
display: none;
}
.mx_EventTile[data-layout="bubble"] {
margin-top: 30px; /* TODO: Use a spacing variable */
}
.mx_FontScalingPanel_fontSlider {
display: flex;
align-items: center;
padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
background: rgba($quinary-content, 0.2);
border-radius: 10px;
font-size: $font-10px;
margin-top: $spacing-24;
margin-bottom: $spacing-24;
.mx_FontScalingPanel_fontSlider_smallText,
.mx_FontScalingPanel_fontSlider_largeText {
font-weight: 500;
}
.mx_FontScalingPanel_fontSlider_smallText {
font-size: $font-15px;
padding-inline-end: $spacing-20;
}
.mx_FontScalingPanel_fontSlider_largeText {
font-size: $font-18px;
padding-inline-start: $spacing-20;
}
}
.mx_FontScalingPanel_customFontSizeField {
margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
.mx_EventTile_msgOption {
display: none;
}
}
.mx_FontScalingPanel_fontSlider {
display: flex;
align-items: center;
padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
background: rgba($quinary-content, 0.2);
border-radius: 10px;
font-size: $font-10px;
.mx_FontScalingPanel_fontSlider_smallText,
.mx_FontScalingPanel_fontSlider_largeText {
font-weight: 500;
}
.mx_FontScalingPanel_fontSlider_smallText {
font-size: $font-15px;
padding-inline-end: $spacing-20;
}
.mx_FontScalingPanel_fontSlider_largeText {
font-size: $font-18px;
padding-inline-start: $spacing-20;
}
}

45
res/css/views/settings/_ImageSizePanel.pcss
View File

@ -14,34 +14,31 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ImageSizePanel {
color: $primary-content;
.mx_ImageSizePanel_radios {
display: flex;
flex-direction: row;
gap: $spacing-16;
.mx_ImageSizePanel_radios {
display: flex;
margin-top: 16px; /* move away from header a bit */
> label {
margin-right: 68px; /* keep the boxes separate */
cursor: pointer;
}
> label {
margin-right: 68px; /* keep the boxes separate */
cursor: pointer;
.mx_ImageSizePanel_size {
background-color: $quinary-content;
mask-repeat: no-repeat;
mask-size: 221px;
mask-position: center;
width: 221px;
height: 148px;
margin-bottom: 14px; /* move radio button away from bottom edge a bit */
&.mx_ImageSizePanel_sizeDefault {
mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
}
.mx_ImageSizePanel_size {
background-color: $quinary-content;
mask-repeat: no-repeat;
mask-size: 221px;
mask-position: center;
width: 221px;
height: 148px;
margin-bottom: 14px; /* move radio button away from bottom edge a bit */
&.mx_ImageSizePanel_sizeDefault {
mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
}
&.mx_ImageSizePanel_sizeLarge {
mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
}
&.mx_ImageSizePanel_sizeLarge {
mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
}
}
}

116
res/css/views/settings/_LayoutSwitcher.pcss
View File

@ -15,79 +15,77 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_LayoutSwitcher {
.mx_LayoutSwitcher_RadioButtons {
.mx_LayoutSwitcher_RadioButtons {
display: flex;
flex-direction: row;
gap: 24px;
color: $primary-content;
> .mx_LayoutSwitcher_RadioButton {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: row;
gap: 24px;
flex-direction: column;
color: $primary-content;
flex-basis: 33%;
min-width: 0;
> .mx_LayoutSwitcher_RadioButton {
flex-grow: 0;
flex-shrink: 1;
border: 1px solid $quinary-content;
border-radius: 10px;
.mx_EventTile_msgOption,
.mx_MessageActionBar {
display: none;
}
.mx_LayoutSwitcher_RadioButton_preview {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
pointer-events: none;
width: 300px;
min-width: 0;
border: 1px solid $quinary-content;
border-radius: 10px;
.mx_EventTile_msgOption,
.mx_MessageActionBar {
display: none;
}
.mx_LayoutSwitcher_RadioButton_preview {
flex-grow: 1;
display: flex;
align-items: center;
padding: 10px;
pointer-events: none;
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
padding-right: 11px;
}
}
.mx_StyledRadioButton {
flex-grow: 0;
padding: 10px;
}
.mx_EventTile_content {
margin-right: 0;
}
&.mx_LayoutSwitcher_RadioButton_selected {
border-color: $accent;
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
padding-right: 11px;
}
}
.mx_StyledRadioButton {
border-top: 1px solid $quinary-content;
flex-grow: 0;
padding: 10px;
}
.mx_StyledRadioButton_checked {
background-color: rgba($accent, 0.08);
.mx_EventTile_content {
margin-right: 0;
}
.mx_EventTile {
margin: 0;
&[data-layout="bubble"] {
margin-right: 40px;
flex-shrink: 1;
}
&[data-layout="irc"] {
> a {
display: none;
}
}
.mx_EventTile_line {
max-width: 90%;
&.mx_LayoutSwitcher_RadioButton_selected {
border-color: $accent;
}
}
.mx_StyledRadioButton {
border-top: 1px solid $quinary-content;
}
.mx_StyledRadioButton_checked {
background-color: rgba($accent, 0.08);
}
.mx_EventTile {
margin: 0;
&[data-layout="bubble"] {
margin-right: 40px;
flex-shrink: 1;
}
&[data-layout="irc"] {
> a {
display: none;
}
}
.mx_EventTile_line {
max-width: 90%;
}
}
}

66
res/css/views/settings/_ThemeChoicePanel.pcss
View File

@ -14,53 +14,47 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ThemeChoicePanel {
.mx_ThemeChoicePanel_themeSelectors {
color: $primary-content;
display: flex;
flex-direction: row;
flex-wrap: wrap;
> .mx_ThemeSelectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
> .mx_StyledRadioButton {
padding: $font-16px;
box-sizing: border-box;
border-radius: 10px;
width: 180px;
margin-top: 4px;
margin-bottom: 30px;
background: $quinary-content;
opacity: 0.4;
> .mx_StyledRadioButton {
padding: $font-16px;
box-sizing: border-box;
border-radius: 10px;
width: 180px;
flex-shrink: 1;
flex-grow: 0;
background: $quinary-content;
opacity: 0.4;
margin-right: 15px;
margin-top: 10px;
flex-shrink: 1;
flex-grow: 0;
font-weight: var(--font-semi-bold);
margin-right: 15px;
margin-top: 10px;
> span {
justify-content: center;
}
}
font-weight: var(--font-semi-bold);
> .mx_StyledRadioButton_enabled {
opacity: 1;
> span {
justify-content: center;
}
/* These colors need to be hardcoded because they don't change with the theme */
&.mx_ThemeSelector_light {
background-color: #f3f8fd;
color: #2e2f32;
}
> .mx_StyledRadioButton_enabled {
opacity: 1;
/* These colors need to be hardcoded because they don't change with the theme */
&.mx_ThemeSelector_light {
background-color: #f3f8fd;
color: #2e2f32;
}
&.mx_ThemeSelector_dark {
/* 5% lightened version of 181b21 */
background-color: #25282e;
color: #f3f8fd;
}
&.mx_ThemeSelector_dark {
/* 5% lightened version of 181b21 */
background-color: #25282e;
color: #f3f8fd;
}
}
}

26
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
View File

@ -14,25 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AppearanceUserSettingsTab {
--AppearanceUserSettingsTab_Field-margin-inline-start: calc($font-16px + 10px);
.mx_SettingsTab_subsectionText {
margin-block: $spacing-12 $spacing-32;
color: $primary-content; /* Same as mx_SettingsTab */
}
.mx_Field {
width: 256px;
}
.mx_AppearanceUserSettingsTab_Advanced {
.mx_Checkbox {
margin-block: $spacing-16;
}
.mx_AppearanceUserSettingsTab_systemFont {
margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
}
}
.mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
width: 256px;
// matches checkbox box + padding
// to align with checkbox label
margin-inline-start: calc($font-16px + 10px);
}

4
res/themes/light-high-contrast/css/_light-high-contrast.pcss
View File

@ -82,11 +82,11 @@ $roomtopic-color: $secondary-content;
background-color: $panel-actions !important;
}
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
border-color: $primary-content;
}
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
color: $primary-content;
}

8
src/components/views/settings/FontScalingPanel.tsx
View File

@ -28,6 +28,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { SettingLevel } from "../../../settings/SettingLevel";
import { _t } from "../../../languageHandler";
import { clamp } from "../../../utils/numbers";
import SettingsSubsection from "./shared/SettingsSubsection";
interface IProps {}
@ -108,8 +109,7 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
const max = 18;
return (
<div className="mx_SettingsTab_section mx_FontScalingPanel">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<SettingsSubsection heading={_t("Font size")} stretchContent data-testid="mx_FontScalingPanel">
<EventTilePreview
className="mx_FontScalingPanel_preview"
message={this.MESSAGE_PREVIEW_TEXT}
@ -159,9 +159,9 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
onValidate={this.onValidateFontSize}
onChange={(value: ChangeEvent<HTMLInputElement>) => this.setState({ fontSize: value.target.value })}
disabled={!this.state.useCustomFontSize}
className="mx_FontScalingPanel_customFontSizeField"
className="mx_AppearanceUserSettingsTab_checkboxControlledField"
/>
</div>
</SettingsSubsection>
);
}
}

7
src/components/views/settings/ImageSizePanel.tsx
View File

@ -21,6 +21,7 @@ import StyledRadioButton from "../elements/StyledRadioButton";
import { _t } from "../../../languageHandler";
import { SettingLevel } from "../../../settings/SettingLevel";
import { ImageSize } from "../../../settings/enums/ImageSize";
import SettingsSubsection from "./shared/SettingsSubsection";
interface IProps {
// none
@ -49,9 +50,7 @@ export default class ImageSizePanel extends React.Component<IProps, IState> {
public render(): React.ReactNode {
return (
<div className="mx_SettingsTab_section mx_ImageSizePanel">
<span className="mx_SettingsTab_subheading">{_t("Image size in the timeline")}</span>
<SettingsSubsection heading={_t("Image size in the timeline")}>
<div className="mx_ImageSizePanel_radios">
<label>
<div className="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault" />
@ -76,7 +75,7 @@ export default class ImageSizePanel extends React.Component<IProps, IState> {
</StyledRadioButton>
</label>
</div>
</div>
</SettingsSubsection>
);
}
}

7
src/components/views/settings/LayoutSwitcher.tsx
View File

@ -25,6 +25,7 @@ import StyledRadioButton from "../elements/StyledRadioButton";
import { _t } from "../../../languageHandler";
import { Layout } from "../../../settings/enums/Layout";
import { SettingLevel } from "../../../settings/SettingLevel";
import SettingsSubsection from "./shared/SettingsSubsection";
interface IProps {
userId?: string;
@ -67,9 +68,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
});
return (
<div className="mx_SettingsTab_section mx_LayoutSwitcher">
<span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
<SettingsSubsection heading={_t("Message layout")}>
<div className="mx_LayoutSwitcher_RadioButtons">
<label className={ircClasses}>
<EventTilePreview
@ -126,7 +125,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
</StyledRadioButton>
</label>
</div>
</div>
</SettingsSubsection>
);
}
}

8
src/components/views/settings/ThemeChoicePanel.tsx
View File

@ -30,6 +30,7 @@ import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import { SettingLevel } from "../../../settings/SettingLevel";
import PosthogTrackers from "../../../PosthogTrackers";
import SettingsSubsection from "./shared/SettingsSubsection";
interface IProps {}
@ -245,10 +246,9 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
const orderedThemes = getOrderedThemes();
return (
<div className="mx_SettingsTab_section mx_ThemeChoicePanel">
<span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
<SettingsSubsection heading={_t("Theme")} data-testid="mx_ThemeChoicePanel">
{systemThemeSection}
<div className="mx_ThemeSelectors">
<div className="mx_ThemeChoicePanel_themeSelectors" data-testid="theme-choice-panel-selectors">
<StyledRadioGroup
name="theme"
definitions={orderedThemes.map((t) => ({
@ -264,7 +264,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
</div>
{this.renderHighContrastCheckbox()}
{customThemeForm}
</div>
</SettingsSubsection>
);
}

46
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View File

@ -31,6 +31,9 @@ import LayoutSwitcher from "../../LayoutSwitcher";
import FontScalingPanel from "../../FontScalingPanel";
import ThemeChoicePanel from "../../ThemeChoicePanel";
import ImageSizePanel from "../../ImageSizePanel";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
interface IProps {}
@ -115,7 +118,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
onChange={(checked) => this.setState({ useSystemFont: checked })}
/>
<Field
className="mx_AppearanceUserSettingsTab_systemFont"
className="mx_AppearanceUserSettingsTab_checkboxControlledField"
label={SettingsStore.getDisplayName("systemFont")!}
onChange={(value: ChangeEvent<HTMLInputElement>) => {
this.setState({
@ -133,10 +136,10 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
);
}
return (
<div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced">
<SettingsSubsection heading={<></>}>
{toggle}
{advanced}
</div>
</SettingsSubsection>
);
}
@ -144,25 +147,24 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
const brand = SdkConfig.get().brand;
return (
<div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
<div className="mx_SettingsTab_heading" data-testid="appearance">
{_t("Customise your appearance")}
</div>
<div className="mx_SettingsTab_subsectionText">
{_t("Appearance Settings only affect this %(brand)s session.", { brand })}
</div>
<ThemeChoicePanel />
<LayoutSwitcher
userId={this.state.userId}
displayName={this.state.displayName}
avatarUrl={this.state.avatarUrl}
messagePreviewText={this.MESSAGE_PREVIEW_TEXT}
onLayoutChanged={this.onLayoutChanged}
/>
<FontScalingPanel />
{this.renderAdvancedSection()}
<ImageSizePanel />
</div>
<SettingsTab data-testid="mx_AppearanceUserSettingsTab">
<SettingsSection heading={_t("Customise your appearance")}>
<SettingsSubsectionText>
{_t("Appearance Settings only affect this %(brand)s session.", { brand })}
</SettingsSubsectionText>
<ThemeChoicePanel />
<LayoutSwitcher
userId={this.state.userId}
displayName={this.state.displayName}
avatarUrl={this.state.avatarUrl}
messagePreviewText={this.MESSAGE_PREVIEW_TEXT}
onLayoutChanged={this.onLayoutChanged}
/>
<FontScalingPanel />
{this.renderAdvancedSection()}
<ImageSizePanel />
</SettingsSection>
</SettingsTab>
);
}
}

195
test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
View File

@ -3,104 +3,113 @@
exports[`FontScalingPanel renders the font scaling UI 1`] = `
<DocumentFragment>
<div
class="mx_SettingsTab_section mx_FontScalingPanel"
class="mx_SettingsSubsection"
data-testid="mx_FontScalingPanel"
>
<span
class="mx_SettingsTab_subheading"
>
Font size
</span>
<div
class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
class="mx_SettingsSubsectionHeading"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
<div
class="mx_FontScalingPanel_fontSlider"
>
<div
class="mx_FontScalingPanel_fontSlider_smallText"
>
Aa
</div>
<div
class="mx_Slider"
>
<input
aria-label="Font size"
autocomplete="off"
max="18"
min="13"
step="1"
type="range"
value="15"
/>
<output
class="mx_Slider_selection"
style="left: calc(2px + 40% + 1.2em - 0.96em);"
>
<span
class="mx_Slider_selection_label"
>
15
</span>
</output>
</div>
<div
class="mx_FontScalingPanel_fontSlider_largeText"
>
Aa
</div>
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="checkbox_abdefghi"
type="checkbox"
/>
<label
for="checkbox_abdefghi"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
<div>
Use custom size
</div>
</label>
</span>
<div
class="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
>
<input
autocomplete="off"
disabled=""
id="font_size_field"
label="Font size"
placeholder="15"
type="number"
value="15"
/>
<label
for="font_size_field"
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Font size
</label>
</h3>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
<div
class="mx_FontScalingPanel_fontSlider"
>
<div
class="mx_FontScalingPanel_fontSlider_smallText"
>
Aa
</div>
<div
class="mx_Slider"
>
<input
aria-label="Font size"
autocomplete="off"
max="18"
min="13"
step="1"
type="range"
value="15"
/>
<output
class="mx_Slider_selection"
style="left: calc(2px + 40% + 1.2em - 0.96em);"
>
<span
class="mx_Slider_selection_label"
>
15
</span>
</output>
</div>
<div
class="mx_FontScalingPanel_fontSlider_largeText"
>
Aa
</div>
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="checkbox_abdefghi"
type="checkbox"
/>
<label
for="checkbox_abdefghi"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
<div>
Use custom size
</div>
</label>
</span>
<div
class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
>
<input
autocomplete="off"
disabled=""
id="font_size_field"
label="Font size"
placeholder="15"
type="number"
value="15"
/>
<label
for="font_size_field"
>
Font size
</label>
</div>
</div>
</div>
</DocumentFragment>

106
test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
View File

@ -3,60 +3,70 @@
exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
<DocumentFragment>
<div
class="mx_SettingsTab_section mx_ThemeChoicePanel"
class="mx_SettingsSubsection"
data-testid="mx_ThemeChoicePanel"
>
<span
class="mx_SettingsTab_subheading"
>
Theme
</span>
<div
class="mx_ThemeSelectors"
class="mx_SettingsSubsectionHeading"
>
<label
class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
<input
disabled=""
id="theme-light"
name="theme"
type="radio"
value="light"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Light
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
Theme
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_ThemeChoicePanel_themeSelectors"
data-testid="theme-choice-panel-selectors"
>
<input
disabled=""
id="theme-dark"
name="theme"
type="radio"
value="dark"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
<label
class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
>
Dark
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<input
disabled=""
id="theme-light"
name="theme"
type="radio"
value="light"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Light
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
>
<input
disabled=""
id="theme-dark"
name="theme"
type="radio"
value="dark"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Dark
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</div>
</div>
</div>
</DocumentFragment>

733
test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
View File

@ -3,382 +3,433 @@
exports[`AppearanceUserSettingsTab should render 1`] = `
<DocumentFragment>
<div
class="mx_SettingsTab mx_AppearanceUserSettingsTab"
class="mx_SettingsTab"
data-testid="mx_AppearanceUserSettingsTab"
>
<div
class="mx_SettingsTab_heading"
data-testid="appearance"
class="mx_SettingsTab_sections"
>
Customise your appearance
</div>
<div
class="mx_SettingsTab_subsectionText"
>
Appearance Settings only affect this Element session.
</div>
<div
class="mx_SettingsTab_section mx_ThemeChoicePanel"
>
<span
class="mx_SettingsTab_subheading"
>
Theme
</span>
<div
class="mx_ThemeSelectors"
class="mx_SettingsSection"
>
<label
class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
<h2
class="mx_Heading_h2"
>
Customise your appearance
</h2>
<div
class="mx_SettingsSection_subSections"
>
<input
disabled=""
id="theme-light"
name="theme"
type="radio"
value="light"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
class="mx_SettingsSubsection_text"
>
Light
Appearance Settings only affect this Element session.
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
>
<input
disabled=""
id="theme-dark"
name="theme"
type="radio"
value="dark"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Dark
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</div>
</div>
<div
class="mx_SettingsTab_section mx_LayoutSwitcher"
>
<span
class="mx_SettingsTab_subheading"
>
Message layout
</span>
<div
class="mx_LayoutSwitcher_RadioButtons"
>
<label
class="mx_LayoutSwitcher_RadioButton"
>
<div
class="mx_LayoutSwitcher_RadioButton_preview mx_IRCLayout mx_EventTilePreview_loader"
class="mx_SettingsSubsection"
data-testid="mx_ThemeChoicePanel"
>
<div
class="mx_Spinner"
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
class="mx_ThemeChoicePanel_themeSelectors"
data-testid="theme-choice-panel-selectors"
>
<label
class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
>
<input
disabled=""
id="theme-light"
name="theme"
type="radio"
value="light"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Light
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
>
<input
disabled=""
id="theme-dark"
name="theme"
type="radio"
value="dark"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Dark
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</div>
</div>
</div>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
name="layout"
type="radio"
value="irc"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
IRC (Experimental)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
<label
class="mx_LayoutSwitcher_RadioButton mx_LayoutSwitcher_RadioButton_selected"
>
<div
class="mx_LayoutSwitcher_RadioButton_preview mx_EventTilePreview_loader"
class="mx_SettingsSubsection"
>
<div
class="mx_Spinner"
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Message layout
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
class="mx_LayoutSwitcher_RadioButtons"
>
<label
class="mx_LayoutSwitcher_RadioButton"
>
<div
class="mx_LayoutSwitcher_RadioButton_preview mx_IRCLayout mx_EventTilePreview_loader"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
name="layout"
type="radio"
value="irc"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
IRC (Experimental)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
<label
class="mx_LayoutSwitcher_RadioButton mx_LayoutSwitcher_RadioButton_selected"
>
<div
class="mx_LayoutSwitcher_RadioButton_preview mx_EventTilePreview_loader"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
>
<input
checked=""
name="layout"
type="radio"
value="group"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Modern
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
<label
class="mx_LayoutSwitcher_RadioButton"
>
<div
class="mx_LayoutSwitcher_RadioButton_preview mx_EventTilePreview_loader"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
name="layout"
type="radio"
value="bubble"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Message bubbles
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
</div>
</div>
</div>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
>
<input
checked=""
name="layout"
type="radio"
value="group"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Modern
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
<label
class="mx_LayoutSwitcher_RadioButton"
>
<div
class="mx_LayoutSwitcher_RadioButton_preview mx_EventTilePreview_loader"
class="mx_SettingsSubsection"
data-testid="mx_FontScalingPanel"
>
<div
class="mx_Spinner"
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Font size
</h3>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
<div
class="mx_FontScalingPanel_fontSlider"
>
<div
class="mx_FontScalingPanel_fontSlider_smallText"
>
Aa
</div>
<div
class="mx_Slider"
>
<input
aria-label="Font size"
autocomplete="off"
max="18"
min="13"
step="1"
type="range"
value="15"
/>
<output
class="mx_Slider_selection"
style="left: calc(2px + 40% + 1.2em - 0.96em);"
>
<span
class="mx_Slider_selection_label"
>
15
</span>
</output>
</div>
<div
class="mx_FontScalingPanel_fontSlider_largeText"
>
Aa
</div>
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="checkbox_abdefghi"
type="checkbox"
/>
<label
for="checkbox_abdefghi"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
<div>
Use custom size
</div>
</label>
</span>
<div
class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
>
<input
autocomplete="off"
disabled=""
id="font_size_field"
label="Font size"
placeholder="15"
type="number"
value="15"
/>
<label
for="font_size_field"
>
Font size
</label>
</div>
</div>
</div>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
name="layout"
type="radio"
value="bubble"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Message bubbles
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
</div>
</div>
<div
class="mx_SettingsTab_section mx_FontScalingPanel"
>
<span
class="mx_SettingsTab_subheading"
>
Font size
</span>
<div
class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
<div
class="mx_FontScalingPanel_fontSlider"
>
<div
class="mx_FontScalingPanel_fontSlider_smallText"
>
Aa
</div>
<div
class="mx_Slider"
>
<input
aria-label="Font size"
autocomplete="off"
max="18"
min="13"
step="1"
type="range"
value="15"
/>
<output
class="mx_Slider_selection"
style="left: calc(2px + 40% + 1.2em - 0.96em);"
>
<span
class="mx_Slider_selection_label"
>
15
</span>
</output>
</div>
<div
class="mx_FontScalingPanel_fontSlider_largeText"
>
Aa
</div>
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="checkbox_abdefghi"
type="checkbox"
/>
<label
for="checkbox_abdefghi"
>
<div
class="mx_Checkbox_background"
class="mx_SettingsSubsection"
>
<div
class="mx_Checkbox_checkmark"
/>
class="mx_SettingsSubsection_content"
>
<div
aria-expanded="false"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
role="button"
tabindex="0"
>
Show advanced
</div>
</div>
</div>
<div>
Use custom size
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Image size in the timeline
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_ImageSizePanel_radios"
>
<label>
<div
class="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault"
/>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
>
<input
checked=""
name="image_size"
type="radio"
value="normal"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Default
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
<label>
<div
class="mx_ImageSizePanel_size mx_ImageSizePanel_sizeLarge"
/>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
name="image_size"
type="radio"
value="large"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Large
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
</div>
</div>
</div>
</label>
</span>
<div
class="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
>
<input
autocomplete="off"
disabled=""
id="font_size_field"
label="Font size"
placeholder="15"
type="number"
value="15"
/>
<label
for="font_size_field"
>
Font size
</label>
</div>
</div>
<div
class="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced"
>
<div
aria-expanded="false"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
role="button"
tabindex="0"
>
Show advanced
</div>
</div>
<div
class="mx_SettingsTab_section mx_ImageSizePanel"
>
<span
class="mx_SettingsTab_subheading"
>
Image size in the timeline
</span>
<div
class="mx_ImageSizePanel_radios"
>
<label>
<div
class="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault"
/>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
>
<input
checked=""
name="image_size"
type="radio"
value="normal"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Default
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
<label>
<div
class="mx_ImageSizePanel_size mx_ImageSizePanel_sizeLarge"
/>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
name="image_size"
type="radio"
value="large"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Large
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</label>
</div>
</div>
</div>
</div>