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

Use semantic headings for room settings content (#10734)

Browse source 
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab
This commit is contained in:
Kerry 2023-05-03 09:14:36 +12:00 • committed by GitHub
parent e7f5261eda
commit 4736f0e44c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 439 additions and 380 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/views/settings/tabs/_SettingsTab.pcss
View file

@ -103,5 +103,5 @@ limitations under the License.
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: $spacing-32; grid-gap: $spacing-32;
padding: $spacing-16 0; padding-bottom: $spacing-16;
} }

2
res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_RolesRoomSettingsTab ul { .mx_RolesRoomSettingsTab_bannedList {
margin-bottom: 0; margin-bottom: 0;
} }

10
res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
View file

@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_SecurityRoomSettingsTab { .mx_SecurityRoomSettingsTab_advancedSection {
.mx_SettingsTab_showAdvanced { margin-top: $spacing-16;
margin-bottom: $spacing-16; }
}
.mx_SecurityRoomSettingsTab_warning { .mx_SecurityRoomSettingsTab_warning {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: $spacing-4; column-gap: $spacing-4;
}
} }

22
src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
View file

@ -27,6 +27,9 @@ import { Action } from "../../../../../dispatcher/actions";
import CopyableText from "../../../elements/CopyableText"; import CopyableText from "../../../elements/CopyableText";
import { ViewRoomPayload } from "../../../../../dispatcher/payloads/ViewRoomPayload"; import { ViewRoomPayload } from "../../../../../dispatcher/payloads/ViewRoomPayload";
import SettingsStore from "../../../../../settings/SettingsStore"; import SettingsStore from "../../../../../settings/SettingsStore";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
interface IProps { interface IProps {
room: Room; room: Room;
@ -154,12 +157,9 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
} }
return ( return (
<div className="mx_SettingsTab"> <SettingsTab>
<div className="mx_SettingsTab_heading">{_t("Advanced")}</div> <SettingsSection heading={_t("Advanced")}>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText"> <SettingsSubsection heading={room.isSpaceRoom() ? _t("Space information") : _t("Room information")}>
<span className="mx_SettingsTab_subheading">
{room.isSpaceRoom() ? _t("Space information") : _t("Room information")}
</span>
<div> <div>
<span>{_t("Internal room ID")}</span> <span>{_t("Internal room ID")}</span>
<CopyableText getTextToCopy={() => this.props.room.roomId}> <CopyableText getTextToCopy={() => this.props.room.roomId}>
@ -167,17 +167,17 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
</CopyableText> </CopyableText>
</div> </div>
{unfederatableSection} {unfederatableSection}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText"> <SettingsSubsection heading={_t("Room version")}>
<span className="mx_SettingsTab_subheading">{_t("Room version")}</span>
<div> <div>
<span>{_t("Room version:")}</span>&nbsp; <span>{_t("Room version:")}</span>&nbsp;
{room.getVersion()} {room.getVersion()}
</div> </div>
{oldRoomLink} {oldRoomLink}
{roomUpgradeButton} {roomUpgradeButton}
</div> </SettingsSubsection>
</div> </SettingsSection>
</SettingsTab>
); );
} }
} }

9
src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
View file

@ -21,6 +21,8 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from "../../../../../languageHandler"; import { _t } from "../../../../../languageHandler";
import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
import BridgeTile from "../../BridgeTile"; import BridgeTile from "../../BridgeTile";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
const BRIDGE_EVENT_TYPES = [ const BRIDGE_EVENT_TYPES = [
"uk.half-shot.bridge", "uk.half-shot.bridge",
@ -99,10 +101,9 @@ export default class BridgeSettingsTab extends React.Component<IProps> {
} }
return ( return (
<div className="mx_SettingsTab"> <SettingsTab>
<div className="mx_SettingsTab_heading">{_t("Bridges")}</div> <SettingsSection heading={_t("Bridges")}>{content}</SettingsSection>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">{content}</div> </SettingsTab>
</div>
); );
} }
} }

24
src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
View file

@ -27,6 +27,9 @@ import { UIFeature } from "../../../../../settings/UIFeature";
import UrlPreviewSettings from "../../../room_settings/UrlPreviewSettings"; import UrlPreviewSettings from "../../../room_settings/UrlPreviewSettings";
import AliasSettings from "../../../room_settings/AliasSettings"; import AliasSettings from "../../../room_settings/AliasSettings";
import PosthogTrackers from "../../../../../PosthogTrackers"; import PosthogTrackers from "../../../../../PosthogTrackers";
import SettingsSubsection from "../../shared/SettingsSubsection";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
interface IProps { interface IProps {
room: Room; room: Room;
@ -72,35 +75,36 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
let leaveSection; let leaveSection;
if (room.getMyMembership() === "join") { if (room.getMyMembership() === "join") {
leaveSection = ( leaveSection = (
<> <SettingsSubsection heading={_t("Leave room")}>
<span className="mx_SettingsTab_subheading">{_t("Leave room")}</span>
<div className="mx_SettingsTab_section">
<AccessibleButton kind="danger" onClick={this.onLeaveClick}> <AccessibleButton kind="danger" onClick={this.onLeaveClick}>
{_t("Leave room")} {_t("Leave room")}
</AccessibleButton> </AccessibleButton>
</div> </SettingsSubsection>
</>
); );
} }
return ( return (
<div className="mx_SettingsTab mx_GeneralRoomSettingsTab"> <SettingsTab>
<div className="mx_SettingsTab_heading">{_t("General")}</div> <SettingsSection heading={_t("General")}>
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection"> <div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
<RoomProfileSettings roomId={room.roomId} /> <RoomProfileSettings roomId={room.roomId} />
</div> </div>
</SettingsSection>
<div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div> <SettingsSection heading={_t("Room Addresses")}>
<AliasSettings <AliasSettings
roomId={room.roomId} roomId={room.roomId}
canSetCanonicalAlias={canSetCanonical} canSetCanonicalAlias={canSetCanonical}
canSetAliases={canSetAliases} canSetAliases={canSetAliases}
canonicalAliasEvent={canonicalAliasEv} canonicalAliasEvent={canonicalAliasEv}
/> />
<div className="mx_SettingsTab_heading">{_t("Other")}</div> </SettingsSection>
<SettingsSection heading={_t("Other")}>
{urlPreviewSettings} {urlPreviewSettings}
{leaveSection} {leaveSection}
</div> </SettingsSection>
</SettingsTab>
); );
} }
} }

20
src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
View file

@ -32,6 +32,9 @@ import defaultDispatcher from "../../../../../dispatcher/dispatcher";
import { Action } from "../../../../../dispatcher/actions"; import { Action } from "../../../../../dispatcher/actions";
import { UserTab } from "../../../dialogs/UserTab"; import { UserTab } from "../../../dialogs/UserTab";
import { chromeFileInputFix } from "../../../../../utils/BrowserWorkarounds"; import { chromeFileInputFix } from "../../../../../utils/BrowserWorkarounds";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
interface IProps { interface IProps {
roomId: string; roomId: string;
@ -168,10 +171,9 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
} }
return ( return (
<div className="mx_SettingsTab"> <SettingsTab>
<div className="mx_SettingsTab_heading">{_t("Notifications")}</div> <SettingsSection heading={_t("Notifications")}>
<div className="mx_NotificationSettingsTab_notificationsSection">
<div className="mx_SettingsTab_section mx_NotificationSettingsTab_notificationsSection">
<StyledRadioGroup <StyledRadioGroup
name="roomNotificationSetting" name="roomNotificationSetting"
definitions={[ definitions={[
@ -256,8 +258,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
/> />
</div> </div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText"> <SettingsSubsection heading={_t("Sounds")}>
<span className="mx_SettingsTab_subheading">{_t("Sounds")}</span>
<div> <div>
<div className="mx_SettingsTab_subsectionText"> <div className="mx_SettingsTab_subsectionText">
<span> <span>
@ -274,7 +275,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
</AccessibleButton> </AccessibleButton>
</div> </div>
<div> <div>
<h3>{_t("Set a new custom sound")}</h3> <h4>{_t("Set a new custom sound")}</h4>
<div className="mx_SettingsFlag"> <div className="mx_SettingsFlag">
<form autoComplete="off" noValidate={true}> <form autoComplete="off" noValidate={true}>
<input <input
@ -309,8 +310,9 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
</AccessibleButton> </AccessibleButton>
<br /> <br />
</div> </div>
</div> </SettingsSubsection>
</div> </SettingsSection>
</SettingsTab>
); );
} }
} }

11
src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
View file

@ -36,6 +36,8 @@ import { VoiceBroadcastInfoEventType } from "../../../../../voice-broadcast";
import { ElementCall } from "../../../../../models/Call"; import { ElementCall } from "../../../../../models/Call";
import SdkConfig, { DEFAULTS } from "../../../../../SdkConfig"; import SdkConfig, { DEFAULTS } from "../../../../../SdkConfig";
import { AddPrivilegedUsers } from "../../AddPrivilegedUsers"; import { AddPrivilegedUsers } from "../../AddPrivilegedUsers";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
interface IEventShowOpts { interface IEventShowOpts {
isState?: boolean; isState?: boolean;
@ -399,7 +401,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
const canBanUsers = currentUserLevel >= banLevel; const canBanUsers = currentUserLevel >= banLevel;
bannedUsersSection = ( bannedUsersSection = (
<SettingsFieldset legend={_t("Banned users")}> <SettingsFieldset legend={_t("Banned users")}>
<ul> <ul className="mx_RolesRoomSettingsTab_bannedList">
{banned.map((member) => { {banned.map((member) => {
const banEvent = member.events.member?.getContent(); const banEvent = member.events.member?.getContent();
const bannedById = member.events.member?.getSender(); const bannedById = member.events.member?.getSender();
@ -479,8 +481,8 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
.filter(Boolean); .filter(Boolean);
return ( return (
<div className="mx_SettingsTab mx_RolesRoomSettingsTab"> <SettingsTab>
<div className="mx_SettingsTab_heading">{_t("Roles & Permissions")}</div> <SettingsSection heading={_t("Roles & Permissions")}>
{privilegedUsersSection} {privilegedUsersSection}
{canChangeLevels && <AddPrivilegedUsers room={room} defaultUserLevel={defaultUserLevel} />} {canChangeLevels && <AddPrivilegedUsers room={room} defaultUserLevel={defaultUserLevel} />}
{mutedUsersSection} {mutedUsersSection}
@ -496,7 +498,8 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
{powerSelectors} {powerSelectors}
{eventPowerSelectors} {eventPowerSelectors}
</SettingsFieldset> </SettingsFieldset>
</div> </SettingsSection>
</SettingsTab>
); );
} }
} }

55
src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
View file

@ -41,6 +41,8 @@ import SettingsFieldset from "../../SettingsFieldset";
import ExternalLink from "../../../elements/ExternalLink"; import ExternalLink from "../../../elements/ExternalLink";
import PosthogTrackers from "../../../../../PosthogTrackers"; import PosthogTrackers from "../../../../../PosthogTrackers";
import MatrixClientContext from "../../../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsTab from "../SettingsTab";
interface IProps { interface IProps {
room: Room; room: Room;
@ -265,6 +267,23 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
roomName: room.name, roomName: room.name,
}); });
let advanced: JSX.Element | undefined;
if (room.getJoinRule() === JoinRule.Public) {
advanced = (
<div>
<AccessibleButton
onClick={this.toggleAdvancedSection}
kind="link"
className="mx_SettingsTab_showAdvanced"
aria-expanded={this.state.showAdvancedSection}
>
{this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")}
</AccessibleButton>
{this.state.showAdvancedSection && this.renderAdvanced()}
</div>
);
}
return ( return (
<SettingsFieldset legend={_t("Access")} description={description}> <SettingsFieldset legend={_t("Access")} description={description}>
<JoinRuleSettings <JoinRuleSettings
@ -275,6 +294,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
promptUpgrade={true} promptUpgrade={true}
aliasWarning={aliasWarning} aliasWarning={aliasWarning}
/> />
{advanced}
</SettingsFieldset> </SettingsFieldset>
); );
} }
@ -399,7 +419,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const canSetGuestAccess = state?.mayClientSendStateEvent(EventType.RoomGuestAccess, client); const canSetGuestAccess = state?.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
return ( return (
<> <div className="mx_SecurityRoomSettingsTab_advancedSection">
<LabelledToggleSwitch <LabelledToggleSwitch
value={guestAccess === GuestAccess.CanJoin} value={guestAccess === GuestAccess.CanJoin}
onChange={this.onGuestAccessChange} onChange={this.onGuestAccessChange}
@ -412,7 +432,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
"the room without having a registered account.", "the room without having a registered account.",
)} )}
</p> </p>
</> </div>
); );
} }
@ -437,27 +457,9 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const historySection = this.renderHistory(); const historySection = this.renderHistory();
let advanced: JSX.Element | undefined;
if (room.getJoinRule() === JoinRule.Public) {
advanced = (
<div className="mx_SettingsTab_section">
<AccessibleButton
onClick={this.toggleAdvancedSection}
kind="link"
className="mx_SettingsTab_showAdvanced"
aria-expanded={this.state.showAdvancedSection}
>
{this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")}
</AccessibleButton>
{this.state.showAdvancedSection && this.renderAdvanced()}
</div>
);
}
return ( return (
<div className="mx_SettingsTab mx_SecurityRoomSettingsTab"> <SettingsTab>
<div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div> <SettingsSection heading={_t("Security & Privacy")}>
<SettingsFieldset <SettingsFieldset
legend={_t("Encryption")} legend={_t("Encryption")}
description={_t("Once enabled, encryption cannot be disabled.")} description={_t("Once enabled, encryption cannot be disabled.")}
@ -472,10 +474,13 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
</SettingsFieldset> </SettingsFieldset>
{this.renderJoinRule()} {this.renderJoinRule()}
{advanced}
{historySection} {historySection}
</div> </SettingsSection>
</SettingsTab>
// <div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
// <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
// </div>
); );
} }
} }

48
test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
View file

@ -6,18 +6,34 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
class="mx_SettingsTab" class="mx_SettingsTab"
> >
<div <div
class="mx_SettingsTab_heading" class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
> >
Advanced Advanced
</div> </h2>
<div <div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText" 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 information Room information
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div> <div>
<span> <span>
Internal room ID Internal room ID
@ -35,14 +51,22 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText" class="mx_SettingsSubsection"
> >
<span <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Room version Room version
</span> </h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div> <div>
<span> <span>
Room version: Room version:
@ -51,5 +75,9 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</DocumentFragment> </DocumentFragment>
`; `;

28
test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap
View file

@ -6,12 +6,18 @@ exports[`<BridgeSettingsTab /> renders when room is bridging messages 1`] = `
class="mx_SettingsTab" class="mx_SettingsTab"
> >
<div <div
class="mx_SettingsTab_heading" class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
> >
Bridges Bridges
</div> </h2>
<div <div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText" class="mx_SettingsSection_subSections"
> >
<div> <div>
<p> <p>
@ -78,6 +84,8 @@ exports[`<BridgeSettingsTab /> renders when room is bridging messages 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
`; `;
@ -87,12 +95,18 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
class="mx_SettingsTab" class="mx_SettingsTab"
> >
<div <div
class="mx_SettingsTab_heading" class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
> >
Bridges Bridges
</div> </h2>
<div <div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText" class="mx_SettingsSection_subSections"
> >
<p> <p>
<span> <span>
@ -108,5 +122,7 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
</p> </p>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
`; `;

4
test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap
View file

@ -9,7 +9,9 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = `
> >
Banned users Banned users
</legend> </legend>
<ul> <ul
class="mx_RolesRoomSettingsTab_bannedList"
>
<li> <li>
<span <span
title="Banned by @alice:server.org" title="Banned by @alice:server.org"