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

Commit 5a73d8e

Browse files
author
Kerry
authored
Use semantic headings in space settings (#10751)
* 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
1 parent ede2132 commit 5a73d8e

File tree

8 files changed

+218
-236
lines changed

8 files changed

+218
-236
lines changed

‎res/css/_components.pcss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,6 @@
341341
@import "./views/settings/_UpdateCheckButton.pcss";
342342
@import "./views/settings/tabs/_SettingsSection.pcss";
343343
@import "./views/settings/tabs/_SettingsTab.pcss";
344-
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.pcss";
345344
@import "./views/settings/tabs/room/_NotificationSettingsTab.pcss";
346345
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss";
347346
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss";

‎res/css/views/room_settings/_AliasSettings.pcss‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,14 @@ limitations under the License.
2727
box-shadow: none;
2828
}
2929

30-
.mx_AliasSettings {
31-
summary {
32-
cursor: pointer;
33-
color: $accent;
34-
font-weight: var(--font-semi-bold);
35-
list-style: none;
36-
37-
/* list-style doesn't do it for webkit */
38-
&::-webkit-details-marker {
39-
display: none;
40-
}
41-
}
42-
43-
.mx_AliasSettings_localAliasHeader {
44-
margin-top: 35px;
30+
.mx_AliasSettings_localAddresses {
31+
cursor: pointer;
32+
color: $accent;
33+
font-weight: var(--font-semi-bold);
34+
list-style: none;
35+
36+
/* list-style doesn't do it for webkit */
37+
&::-webkit-details-marker {
38+
display: none;
4539
}
4640
}

‎res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components/views/room_settings/AliasSettings.tsx‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2016 - 2021 The Matrix.org Foundation C.I.C.
2+
Copyright 2016 - 2023 The Matrix.org Foundation C.I.C.
33
44
Licensed under the Apache License, Version 2.0 (the "License");
55
you may not use this file except in compliance with the License.
@@ -402,7 +402,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
402402
}
403403

404404
return (
405-
<div className="mx_AliasSettings">
405+
<>
406406
<SettingsFieldset
407407
data-testid="published-address-fieldset"
408408
legend={_t("Published Addresses")}
@@ -416,15 +416,6 @@ export default class AliasSettings extends React.Component<IProps, IState> {
416416
</>
417417
}
418418
>
419-
{/*
420-
<span className='mx_SettingsTab_subheading'>{ _t("Published Addresses") }</span>
421-
<p>
422-
{ isSpaceRoom
423-
? _t("Published addresses can be used by anyone on any server to join your space.")
424-
: _t("Published addresses can be used by anyone on any server to join your room.") }
425-
&nbsp;
426-
{ _t("To publish an address, it needs to be set as a local address first.") }
427-
</p> */}
428419
{canonicalAliasSection}
429420
{this.props.hidePublishSetting ? null : (
430421
<RoomPublishSetting
@@ -472,11 +463,13 @@ export default class AliasSettings extends React.Component<IProps, IState> {
472463
}
473464
>
474465
<details onToggle={this.onLocalAliasesToggled} open={this.state.detailsOpen}>
475-
<summary>{this.state.detailsOpen ? _t("Show less") : _t("Show more")}</summary>
466+
<summary className="mx_AliasSettings_localAddresses">
467+
{this.state.detailsOpen ? _t("Show less") : _t("Show more")}
468+
</summary>
476469
{localAliasesList}
477470
</details>
478471
</SettingsFieldset>
479-
</div>
472+
</>
480473
);
481474
}
482475
}

‎src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,7 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
8686
return (
8787
<SettingsTab>
8888
<SettingsSection heading={_t("General")}>
89-
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
90-
<RoomProfileSettings roomId={room.roomId} />
91-
</div>
89+
<RoomProfileSettings roomId={room.roomId} />
9290
</SettingsSection>
9391

9492
<SettingsSection heading={_t("Room Addresses")}>

‎src/components/views/spaces/SpaceSettingsGeneralTab.tsx‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ import { avatarUrlForRoom } from "../../../Avatar";
2727
import { htmlSerializeFromMdIfNeeded } from "../../../editor/serialize";
2828
import { leaveSpace } from "../../../utils/leave-behaviour";
2929
import { getTopic } from "../../../hooks/room/useTopic";
30+
import SettingsTab from "../settings/tabs/SettingsTab";
31+
import { SettingsSection } from "../settings/shared/SettingsSection";
32+
import SettingsSubsection from "../settings/shared/SettingsSubsection";
3033

3134
interface IProps {
3235
matrixClient: MatrixClient;
@@ -94,50 +97,49 @@ const SpaceSettingsGeneralTab: React.FC<IProps> = ({ matrixClient: cli, space })
9497
};
9598

9699
return (
97-
<div className="mx_SettingsTab">
98-
<div className="mx_SettingsTab_heading">{_t("General")}</div>
99-
100-
<div>{_t("Edit settings relating to your space.")}</div>
101-
102-
{error && <div className="mx_SpaceRoomView_errorText">{error}</div>}
103-
104-
<div className="mx_SettingsTab_section">
105-
<SpaceBasicSettings
106-
avatarUrl={avatarUrlForRoom(space, 80, 80, "crop") ?? undefined}
107-
avatarDisabled={busy || !canSetAvatar}
108-
setAvatar={setNewAvatar}
109-
name={name}
110-
nameDisabled={busy || !canSetName}
111-
setName={setName}
112-
topic={topic}
113-
topicDisabled={busy || !canSetTopic}
114-
setTopic={setTopic}
115-
/>
116-
117-
<AccessibleButton
118-
onClick={onCancel}
119-
disabled={busy || !(avatarChanged || nameChanged || topicChanged)}
120-
kind="link"
121-
>
122-
{_t("Cancel")}
123-
</AccessibleButton>
124-
<AccessibleButton onClick={onSave} disabled={busy} kind="primary">
125-
{busy ? _t("Saving…") : _t("Save Changes")}
126-
</AccessibleButton>
127-
</div>
128-
129-
<span className="mx_SettingsTab_subheading">{_t("Leave Space")}</span>
130-
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
131-
<AccessibleButton
132-
kind="danger"
133-
onClick={() => {
134-
leaveSpace(space);
135-
}}
136-
>
137-
{_t("Leave Space")}
138-
</AccessibleButton>
139-
</div>
140-
</div>
100+
<SettingsTab>
101+
<SettingsSection heading={_t("General")}>
102+
<div>
103+
<div>{_t("Edit settings relating to your space.")}</div>
104+
105+
{error && <div className="mx_SpaceRoomView_errorText">{error}</div>}
106+
107+
<SpaceBasicSettings
108+
avatarUrl={avatarUrlForRoom(space, 80, 80, "crop") ?? undefined}
109+
avatarDisabled={busy || !canSetAvatar}
110+
setAvatar={setNewAvatar}
111+
name={name}
112+
nameDisabled={busy || !canSetName}
113+
setName={setName}
114+
topic={topic}
115+
topicDisabled={busy || !canSetTopic}
116+
setTopic={setTopic}
117+
/>
118+
119+
<AccessibleButton
120+
onClick={onCancel}
121+
disabled={busy || !(avatarChanged || nameChanged || topicChanged)}
122+
kind="link"
123+
>
124+
{_t("Cancel")}
125+
</AccessibleButton>
126+
<AccessibleButton onClick={onSave} disabled={busy} kind="primary">
127+
{busy ? _t("Saving…") : _t("Save Changes")}
128+
</AccessibleButton>
129+
</div>
130+
131+
<SettingsSubsection heading={_t("Leave Space")}>
132+
<AccessibleButton
133+
kind="danger"
134+
onClick={() => {
135+
leaveSpace(space);
136+
}}
137+
>
138+
{_t("Leave Space")}
139+
</AccessibleButton>
140+
</SettingsSubsection>
141+
</SettingsSection>
142+
</SettingsTab>
141143
);
142144
};
143145

‎src/components/views/spaces/SpaceSettingsVisibilityTab.tsx‎

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2021 The Matrix.org Foundation C.I.C.
2+
Copyright 2021-2023 The Matrix.org Foundation C.I.C.
33
44
Licensed under the Apache License, Version 2.0 (the "License");
55
you may not use this file except in compliance with the License.
@@ -30,6 +30,8 @@ import JoinRuleSettings from "../settings/JoinRuleSettings";
3030
import { useRoomState } from "../../../hooks/useRoomState";
3131
import SettingsFieldset from "../settings/SettingsFieldset";
3232
import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
33+
import { SettingsSection } from "../settings/shared/SettingsSection";
34+
import SettingsTab from "../settings/tabs/SettingsTab";
3335

3436
interface IProps {
3537
matrixClient: MatrixClient;
@@ -124,59 +126,60 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
124126
let addressesSection: JSX.Element | undefined;
125127
if (space.getJoinRule() === JoinRule.Public) {
126128
addressesSection = (
127-
<>
128-
<span className="mx_SettingsTab_subheading">{_t("Address")}</span>
129+
<SettingsSection heading={_t("Address")}>
129130
<AliasSettings
130131
roomId={space.roomId}
131132
canSetCanonicalAlias={canSetCanonical}
132133
canSetAliases={true}
133134
canonicalAliasEvent={canonicalAliasEv ?? undefined}
134135
hidePublishSetting={!serverSupportsExploringSpaces}
135136
/>
136-
</>
137+
</SettingsSection>
137138
);
138139
}
139140

140141
return (
141-
<div className="mx_SettingsTab">
142-
<div className="mx_SettingsTab_heading">{_t("Visibility")}</div>
143-
144-
{error && (
145-
<div data-testid="space-settings-error" className="mx_SpaceRoomView_errorText">
146-
{error}
147-
</div>
148-
)}
149-
150-
<SettingsFieldset
151-
data-testid="access-fieldset"
152-
legend={_t("Access")}
153-
description={_t("Decide who can view and join %(spaceName)s.", { spaceName: space.name })}
154-
>
155-
<JoinRuleSettings
156-
room={space}
157-
onError={(): void => setError(_t("Failed to update the visibility of this space"))}
158-
closeSettingsFn={closeSettingsFn}
159-
/>
160-
{advancedSection}
161-
<div className="mx_SettingsTab_toggleWithDescription">
162-
<LabelledToggleSwitch
163-
value={historyVisibility === HistoryVisibility.WorldReadable}
164-
onChange={(checked: boolean): void => {
165-
setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared);
166-
}}
167-
disabled={!canSetHistoryVisibility}
168-
label={_t("Preview Space")}
142+
<SettingsTab>
143+
<SettingsSection heading={_t("Visibility")}>
144+
{error && (
145+
<div data-testid="space-settings-error" className="mx_SpaceRoomView_errorText">
146+
{error}
147+
</div>
148+
)}
149+
150+
<SettingsFieldset
151+
data-testid="access-fieldset"
152+
legend={_t("Access")}
153+
description={_t("Decide who can view and join %(spaceName)s.", { spaceName: space.name })}
154+
>
155+
<JoinRuleSettings
156+
room={space}
157+
onError={(): void => setError(_t("Failed to update the visibility of this space"))}
158+
closeSettingsFn={closeSettingsFn}
169159
/>
170-
<p>
171-
{_t("Allow people to preview your space before they join.")}
172-
<br />
173-
<b>{_t("Recommended for public spaces.")}</b>
174-
</p>
175-
</div>
176-
</SettingsFieldset>
177-
178-
{addressesSection}
179-
</div>
160+
{advancedSection}
161+
<div className="mx_SettingsTab_toggleWithDescription">
162+
<LabelledToggleSwitch
163+
value={historyVisibility === HistoryVisibility.WorldReadable}
164+
onChange={(checked: boolean): void => {
165+
setHistoryVisibility(
166+
checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared,
167+
);
168+
}}
169+
disabled={!canSetHistoryVisibility}
170+
label={_t("Preview Space")}
171+
/>
172+
<p>
173+
{_t("Allow people to preview your space before they join.")}
174+
<br />
175+
<b>{_t("Recommended for public spaces.")}</b>
176+
</p>
177+
</div>
178+
</SettingsFieldset>
179+
180+
{addressesSection}
181+
</SettingsSection>
182+
</SettingsTab>
180183
);
181184
};
182185

0 commit comments

Comments
 (0)