Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Use semantic headings in user settings Appearance (#10827)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
Kerry authored May 21, 2023
1 parent e652177 commit b3b03e5
Show file tree
Hide file tree
Showing 18 changed files with 732 additions and 737 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/audio-player/audio-player.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
53 changes: 21 additions & 32 deletions cypress/e2e/settings/appearance-user-settings-tab.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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");
Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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");
});
Expand Down Expand Up @@ -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
Expand All @@ -167,24 +166,16 @@ 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");
});

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");
Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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", '""');
Expand All @@ -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");
Expand All @@ -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");

Expand All @@ -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");
Expand Down Expand Up @@ -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

Expand Down
1 change: 0 additions & 1 deletion res/css/_components.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
21 changes: 0 additions & 21 deletions res/css/views/elements/_EventTilePreview.pcss
View file

This file was deleted.

83 changes: 34 additions & 49 deletions res/css/views/settings/_FontScalingPanel.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

.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 */
}
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_EventTile_msgOption {
display: none;
}
&.mx_IRCLayout {
padding-top: 9px; /* 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_EventTile[data-layout="bubble"] {
margin-top: 30px; /* TODO: Use a spacing variable */
}

.mx_FontScalingPanel_fontSlider_smallText,
.mx_FontScalingPanel_fontSlider_largeText {
font-weight: 500;
}
.mx_EventTile_msgOption {
display: none;
}
}

.mx_FontScalingPanel_fontSlider_smallText {
font-size: $font-15px;
padding-inline-end: $spacing-20;
}
.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_largeText {
font-size: $font-18px;
padding-inline-start: $spacing-20;
}
.mx_FontScalingPanel_fontSlider_smallText {
font-size: $font-15px;
padding-inline-end: $spacing-20;
}

.mx_FontScalingPanel_customFontSizeField {
margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
.mx_FontScalingPanel_fontSlider_largeText {
font-size: $font-18px;
padding-inline-start: $spacing-20;
}
}
47 changes: 22 additions & 25 deletions res/css/views/settings/_ImageSizePanel.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
margin-top: 16px; /* move away from header a bit */
.mx_ImageSizePanel_radios {
display: flex;
flex-direction: row;
gap: $spacing-16;

> 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");
}
}
}
Loading

0 comments on commit b3b03e5

Please sign in to comment.