PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use semantic headings in user settings Preferences (#10794)

Browse source 
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* use semantic headings in usersettingspreferences

* rethemendex

* put back margin var
This commit is contained in:
Kerry 2023-05-17 13:16:49 +12:00 committed by GitHub
parent 4cc6ab1187
commit 38ae8e98e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 1200 additions and 1131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
cypress/e2e/settings/preferences-user-settings-tab.spec.ts
View file

@ -35,19 +35,16 @@ describe("Preferences user settings tab", () => {
it("should be rendered properly", () => {
cy.openUserSettings("Preferences");
cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").within(() => {
cy.findByTestId("mx_PreferencesUserSettingsTab").within(() => {
// Assert that the top heading is rendered
cy.findByTestId("preferences").should("have.text", "Preferences").should("be.visible");
cy.contains("Preferences").should("be.visible");
});
cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").percySnapshotElement(
"User settings tab - Preferences",
{
cy.findByTestId("mx_PreferencesUserSettingsTab").percySnapshotElement("User settings tab - Preferences", {
// Emulate TabbedView's actual min and max widths
// 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
// 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
widths: [580, 796],
},
);
});
});
});

1
res/css/_components.pcss
View file

@ -346,7 +346,6 @@
@import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss";

25
res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss
View file

@ -1,25 +0,0 @@
/*
Copyright 2019 New Vector Ltd
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_PreferencesUserSettingsTab {
.mx_Field {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
}
.mx_SettingsTab_section {
margin-bottom: var(--SettingsTab_section-margin-bottom-preferences-labs);
}
}

82
src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2019-2021 The Matrix.org Foundation C.I.C.
Copyright 2019-2023 The Matrix.org Foundation C.I.C.
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
@ -30,6 +30,9 @@ import { OpenToTabPayload } from "../../../../../dispatcher/payloads/OpenToTabPa
import { Action } from "../../../../../dispatcher/actions";
import SdkConfig from "../../../../../SdkConfig";
import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage";
import SettingsSubsection from "../../shared/SettingsSubsection";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
interface IProps {
closeSettingsFn(success: boolean): void;
@ -143,27 +146,21 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
.filter((it) => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase));
return (
<div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
<div className="mx_SettingsTab_heading" data-testid="preferences">
{_t("Preferences")}
</div>
<SettingsTab data-testid="mx_PreferencesUserSettingsTab">
<SettingsSection heading={_t("Preferences")}>
{roomListSettings.length > 0 && (
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
<SettingsSubsection heading={_t("Room list")}>
{this.renderGroup(roomListSettings)}
</div>
</SettingsSubsection>
)}
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Spaces")}</span>
<SettingsSubsection heading={_t("Spaces")}>
{this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
</div>
</SettingsSubsection>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Keyboard shortcuts")}</span>
<div className="mx_SettingsFlag">
{_t(
<SettingsSubsection
heading={_t("Keyboard shortcuts")}
description={_t(
"To view all keyboard shortcuts, <a>click here</a>.",
{},
{
@ -174,50 +171,42 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
),
},
)}
</div>
>
{this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
</div>
</SettingsSubsection>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Displaying time")}</span>
<SettingsSubsection heading={_t("Displaying time")}>
{this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
</div>
</SettingsSubsection>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Presence")}</span>
<span className="mx_SettingsTab_subsectionText">
{_t("Share your activity and status with others.")}
</span>
<SettingsSubsection
heading={_t("Presence")}
description={_t("Share your activity and status with others.")}
>
{this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
</div>
</SettingsSubsection>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
<SettingsSubsection heading={_t("Composer")}>
{this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
</div>
</SettingsSubsection>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Code blocks")}</span>
<SettingsSubsection heading={_t("Code blocks")}>
{this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
</div>
</SettingsSubsection>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Images, GIFs and videos")}</span>
<SettingsSubsection heading={_t("Images, GIFs and videos")}>
{this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
</div>
</SettingsSubsection>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
<SettingsSubsection heading={_t("Timeline")}>
{this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
</div>
</SettingsSubsection>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Room directory")}</span>
<SettingsSubsection heading={_t("Room directory")}>
{this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
</div>
</SettingsSubsection>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("General")}</span>
<SettingsSubsection heading={_t("General")} stretchContent>
{this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
<SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
@ -251,8 +240,9 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
value={this.state.readMarkerOutOfViewThresholdMs}
onChange={this.onReadMarkerOutOfViewThresholdMs}
/>
</div>
</div>
</SettingsSubsection>
</SettingsSection>
</SettingsTab>
);
}
}

212
test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
View file

@ -3,22 +3,38 @@
exports[`PreferencesUserSettingsTab should render 1`] = `
<DocumentFragment>
<div
class="mx_SettingsTab mx_PreferencesUserSettingsTab"
class="mx_SettingsTab"
data-testid="mx_PreferencesUserSettingsTab"
>
<div
class="mx_SettingsTab_heading"
data-testid="preferences"
class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
Preferences
</div>
</h2>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSection_subSections"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Room list
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -45,14 +61,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Spaces
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -84,16 +108,24 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Keyboard shortcuts
</span>
</h3>
</div>
<div
class="mx_SettingsFlag"
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
>
<span>
To view all keyboard shortcuts,
@ -107,6 +139,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
.
</span>
</div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -133,14 +169,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Displaying time
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -192,19 +236,31 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Presence
</span>
<span
class="mx_SettingsTab_subsectionText"
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
>
Share your activity and status with others.
</span>
</div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -256,14 +312,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Composer
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -451,14 +515,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Code blocks
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -535,14 +607,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Images, GIFs and videos
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -644,14 +724,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Timeline
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -928,14 +1016,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Room directory
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_SettingsFlag"
>
@ -962,14 +1058,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
General
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_SettingsFlag"
>
@ -1045,5 +1149,9 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;