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

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
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", () => { it("should be rendered properly", () => {
cy.openUserSettings("Preferences"); cy.openUserSettings("Preferences");
cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").within(() => { cy.findByTestId("mx_PreferencesUserSettingsTab").within(() => {
// Assert that the top heading is rendered // 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( cy.findByTestId("mx_PreferencesUserSettingsTab").percySnapshotElement("User settings tab - Preferences", {
"User settings tab - Preferences",
{
// Emulate TabbedView's actual min and max widths // Emulate TabbedView's actual min and max widths
// 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width // 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
// 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right) // 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
widths: [580, 796], 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/_HelpUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.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/_SecurityUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.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> Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License"); 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 { Action } from "../../../../../dispatcher/actions";
import SdkConfig from "../../../../../SdkConfig"; import SdkConfig from "../../../../../SdkConfig";
import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage"; import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage";
import SettingsSubsection from "../../shared/SettingsSubsection";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
interface IProps { interface IProps {
closeSettingsFn(success: boolean): void; closeSettingsFn(success: boolean): void;
@ -143,27 +146,21 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
.filter((it) => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase)); .filter((it) => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase));
return ( return (
<div className="mx_SettingsTab mx_PreferencesUserSettingsTab"> <SettingsTab data-testid="mx_PreferencesUserSettingsTab">
<div className="mx_SettingsTab_heading" data-testid="preferences"> <SettingsSection heading={_t("Preferences")}>
{_t("Preferences")}
</div>
{roomListSettings.length > 0 && ( {roomListSettings.length > 0 && (
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Room list")}>
<span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
{this.renderGroup(roomListSettings)} {this.renderGroup(roomListSettings)}
</div> </SettingsSubsection>
)} )}
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Spaces")}>
<span className="mx_SettingsTab_subheading">{_t("Spaces")}</span>
{this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)} {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection
<span className="mx_SettingsTab_subheading">{_t("Keyboard shortcuts")}</span> heading={_t("Keyboard shortcuts")}
<div className="mx_SettingsFlag"> description={_t(
{_t(
"To view all keyboard shortcuts, <a>click here</a>.", "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)} {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Displaying time")}>
<span className="mx_SettingsTab_subheading">{_t("Displaying time")}</span>
{this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)} {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection
<span className="mx_SettingsTab_subheading">{_t("Presence")}</span> heading={_t("Presence")}
<span className="mx_SettingsTab_subsectionText"> description={_t("Share your activity and status with others.")}
{_t("Share your activity and status with others.")} >
</span>
{this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)} {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Composer")}>
<span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
{this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)} {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Code blocks")}>
<span className="mx_SettingsTab_subheading">{_t("Code blocks")}</span>
{this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)} {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Images, GIFs and videos")}>
<span className="mx_SettingsTab_subheading">{_t("Images, GIFs and videos")}</span>
{this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)} {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Timeline")}>
<span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
{this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)} {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Room directory")}>
<span className="mx_SettingsTab_subheading">{_t("Room directory")}</span>
{this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)} {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("General")} stretchContent>
<span className="mx_SettingsTab_subheading">{_t("General")}</span>
{this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)} {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
<SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet /> <SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
@ -251,8 +240,9 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
value={this.state.readMarkerOutOfViewThresholdMs} value={this.state.readMarkerOutOfViewThresholdMs}
onChange={this.onReadMarkerOutOfViewThresholdMs} onChange={this.onReadMarkerOutOfViewThresholdMs}
/> />
</div> </SettingsSubsection>
</div> </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`] = ` exports[`PreferencesUserSettingsTab should render 1`] = `
<DocumentFragment> <DocumentFragment>
<div <div
class="mx_SettingsTab mx_PreferencesUserSettingsTab" class="mx_SettingsTab"
data-testid="mx_PreferencesUserSettingsTab"
> >
<div <div
class="mx_SettingsTab_heading" class="mx_SettingsTab_sections"
data-testid="preferences" >
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
> >
Preferences Preferences
</div> </h2>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSection_subSections"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Room list Room list
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -45,14 +61,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Spaces Spaces
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -84,16 +108,24 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Keyboard shortcuts Keyboard shortcuts
</span> </h3>
</div>
<div <div
class="mx_SettingsFlag" class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
> >
<span> <span>
To view all keyboard shortcuts, To view all keyboard shortcuts,
@ -107,6 +139,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
. .
</span> </span>
</div> </div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -133,14 +169,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Displaying time Displaying time
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -192,19 +236,31 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Presence Presence
</span> </h3>
<span </div>
class="mx_SettingsTab_subsectionText" <div
class="mx_SettingsSubsection_description"
>
<div
class="mx_SettingsSubsection_text"
> >
Share your activity and status with others. Share your activity and status with others.
</span> </div>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -256,14 +312,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Composer Composer
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -451,14 +515,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Code blocks Code blocks
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -535,14 +607,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Images, GIFs and videos Images, GIFs and videos
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -644,14 +724,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Timeline Timeline
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -928,14 +1016,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Room directory Room directory
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -962,14 +1058,22 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
General General
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div <div
class="mx_SettingsFlag" class="mx_SettingsFlag"
> >
@ -1045,5 +1149,9 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</DocumentFragment> </DocumentFragment>
`; `;