mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 01:05:42 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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-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.
*/
.mx_RolesRoomSettingsTab ul {
.mx_RolesRoomSettingsTab_bannedList {
margin-bottom: 0;
}

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

@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SecurityRoomSettingsTab {
.mx_SettingsTab_showAdvanced {
margin-bottom: $spacing-16;
.mx_SecurityRoomSettingsTab_advancedSection {
margin-top: $spacing-16;
}
.mx_SecurityRoomSettingsTab_warning {
@ -24,4 +23,3 @@ limitations under the License.
align-items: center;
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 { ViewRoomPayload } from "../../../../../dispatcher/payloads/ViewRoomPayload";
import SettingsStore from "../../../../../settings/SettingsStore";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
interface IProps {
room: Room;
@ -154,12 +157,9 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
}
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Advanced")}</div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
<span className="mx_SettingsTab_subheading">
{room.isSpaceRoom() ? _t("Space information") : _t("Room information")}
</span>
<SettingsTab>
<SettingsSection heading={_t("Advanced")}>
<SettingsSubsection heading={room.isSpaceRoom() ? _t("Space information") : _t("Room information")}>
<div>
<span>{_t("Internal room ID")}</span>
<CopyableText getTextToCopy={() => this.props.room.roomId}>
@ -167,17 +167,17 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
</CopyableText>
</div>
{unfederatableSection}
</div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
<span className="mx_SettingsTab_subheading">{_t("Room version")}</span>
</SettingsSubsection>
<SettingsSubsection heading={_t("Room version")}>
<div>
<span>{_t("Room version:")}</span>&nbsp;
{room.getVersion()}
</div>
{oldRoomLink}
{roomUpgradeButton}
</div>
</div>
</SettingsSubsection>
</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 { MatrixClientPeg } from "../../../../../MatrixClientPeg";
import BridgeTile from "../../BridgeTile";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
const BRIDGE_EVENT_TYPES = [
"uk.half-shot.bridge",
@ -99,10 +101,9 @@ export default class BridgeSettingsTab extends React.Component<IProps> {
}
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">{content}</div>
</div>
<SettingsTab>
<SettingsSection heading={_t("Bridges")}>{content}</SettingsSection>
</SettingsTab>
);
}
}

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 AliasSettings from "../../../room_settings/AliasSettings";
import PosthogTrackers from "../../../../../PosthogTrackers";
import SettingsSubsection from "../../shared/SettingsSubsection";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
interface IProps {
room: Room;
@ -72,35 +75,36 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
let leaveSection;
if (room.getMyMembership() === "join") {
leaveSection = (
<>
<span className="mx_SettingsTab_subheading">{_t("Leave room")}</span>
<div className="mx_SettingsTab_section">
<SettingsSubsection heading={_t("Leave room")}>
<AccessibleButton kind="danger" onClick={this.onLeaveClick}>
{_t("Leave room")}
</AccessibleButton>
</div>
</>
</SettingsSubsection>
);
}
return (
<div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
<div className="mx_SettingsTab_heading">{_t("General")}</div>
<SettingsTab>
<SettingsSection heading={_t("General")}>
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
<RoomProfileSettings roomId={room.roomId} />
</div>
</SettingsSection>
<div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div>
<SettingsSection heading={_t("Room Addresses")}>
<AliasSettings
roomId={room.roomId}
canSetCanonicalAlias={canSetCanonical}
canSetAliases={canSetAliases}
canonicalAliasEvent={canonicalAliasEv}
/>
<div className="mx_SettingsTab_heading">{_t("Other")}</div>
</SettingsSection>
<SettingsSection heading={_t("Other")}>
{urlPreviewSettings}
{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 { UserTab } from "../../../dialogs/UserTab";
import { chromeFileInputFix } from "../../../../../utils/BrowserWorkarounds";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
interface IProps {
roomId: string;
@ -168,10 +171,9 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
}
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Notifications")}</div>
<div className="mx_SettingsTab_section mx_NotificationSettingsTab_notificationsSection">
<SettingsTab>
<SettingsSection heading={_t("Notifications")}>
<div className="mx_NotificationSettingsTab_notificationsSection">
<StyledRadioGroup
name="roomNotificationSetting"
definitions={[
@ -256,8 +258,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
/>
</div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
<span className="mx_SettingsTab_subheading">{_t("Sounds")}</span>
<SettingsSubsection heading={_t("Sounds")}>
<div>
<div className="mx_SettingsTab_subsectionText">
<span>
@ -274,7 +275,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
</AccessibleButton>
</div>
<div>
<h3>{_t("Set a new custom sound")}</h3>
<h4>{_t("Set a new custom sound")}</h4>
<div className="mx_SettingsFlag">
<form autoComplete="off" noValidate={true}>
<input
@ -309,8 +310,9 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
</AccessibleButton>
<br />
</div>
</div>
</div>
</SettingsSubsection>
</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 SdkConfig, { DEFAULTS } from "../../../../../SdkConfig";
import { AddPrivilegedUsers } from "../../AddPrivilegedUsers";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
interface IEventShowOpts {
isState?: boolean;
@ -399,7 +401,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
const canBanUsers = currentUserLevel >= banLevel;
bannedUsersSection = (
<SettingsFieldset legend={_t("Banned users")}>
<ul>
<ul className="mx_RolesRoomSettingsTab_bannedList">
{banned.map((member) => {
const banEvent = member.events.member?.getContent();
const bannedById = member.events.member?.getSender();
@ -479,8 +481,8 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
.filter(Boolean);
return (
<div className="mx_SettingsTab mx_RolesRoomSettingsTab">
<div className="mx_SettingsTab_heading">{_t("Roles & Permissions")}</div>
<SettingsTab>
<SettingsSection heading={_t("Roles & Permissions")}>
{privilegedUsersSection}
{canChangeLevels && <AddPrivilegedUsers room={room} defaultUserLevel={defaultUserLevel} />}
{mutedUsersSection}
@ -496,7 +498,8 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
{powerSelectors}
{eventPowerSelectors}
</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 PosthogTrackers from "../../../../../PosthogTrackers";
import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsTab from "../SettingsTab";
interface IProps {
room: Room;
@ -265,6 +267,23 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
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 (
<SettingsFieldset legend={_t("Access")} description={description}>
<JoinRuleSettings
@ -275,6 +294,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
promptUpgrade={true}
aliasWarning={aliasWarning}
/>
{advanced}
</SettingsFieldset>
);
}
@ -399,7 +419,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const canSetGuestAccess = state?.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
return (
<>
<div className="mx_SecurityRoomSettingsTab_advancedSection">
<LabelledToggleSwitch
value={guestAccess === GuestAccess.CanJoin}
onChange={this.onGuestAccessChange}
@ -412,7 +432,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
"the room without having a registered account.",
)}
</p>
</>
</div>
);
}
@ -437,27 +457,9 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
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 (
<div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
<div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
<SettingsTab>
<SettingsSection heading={_t("Security & Privacy")}>
<SettingsFieldset
legend={_t("Encryption")}
description={_t("Once enabled, encryption cannot be disabled.")}
@ -472,10 +474,13 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
</SettingsFieldset>
{this.renderJoinRule()}
{advanced}
{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"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
Advanced
</div>
</h2>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
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 information
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div>
<span>
Internal room ID
@ -35,14 +51,22 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Room version
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div>
<span>
Room version:
@ -51,5 +75,9 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
Bridges
</div>
</h2>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
class="mx_SettingsSection_subSections"
>
<div>
<p>
@ -79,6 +85,8 @@ exports[`<BridgeSettingsTab /> renders when room is bridging messages 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any platform 1`] = `
@ -87,12 +95,18 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
class="mx_SettingsTab"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
Bridges
</div>
</h2>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
class="mx_SettingsSection_subSections"
>
<p>
<span>
@ -109,4 +123,6 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
</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
</legend>
<ul>
<ul
class="mx_RolesRoomSettingsTab_bannedList"
>
<li>
<span
title="Banned by @alice:server.org"