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

Commit 4736f0e

Browse files
author
Kerry
authored
Use semantic headings for room settings content (#10734)
* split SettingsSection out of SettingsTab, replace usage * correct copyright * use semantic headings in GeneralRoomSettingsTab * use SettingsTab and SettingsSubsection in room settings * fix VoipRoomSettingsTab
1 parent e7f5261 commit 4736f0e

File tree

12 files changed

+440
-381
lines changed

12 files changed

+440
-381
lines changed

‎res/css/views/settings/tabs/_SettingsTab.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,5 +103,5 @@ limitations under the License.
103103
grid-template-columns: 1fr;
104104
grid-gap: $spacing-32;
105105

106-
padding: $spacing-16 0;
106+
padding-bottom: $spacing-16;
107107
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_RolesRoomSettingsTab ul {
17+
.mx_RolesRoomSettingsTab_bannedList {
1818
margin-bottom: 0;
1919
}
2020

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_SecurityRoomSettingsTab {
18-
.mx_SettingsTab_showAdvanced {
19-
margin-bottom: $spacing-16;
20-
}
17+
.mx_SecurityRoomSettingsTab_advancedSection {
18+
margin-top: $spacing-16;
19+
}
2120

22-
.mx_SecurityRoomSettingsTab_warning {
23-
display: flex;
24-
align-items: center;
25-
column-gap: $spacing-4;
26-
}
21+
.mx_SecurityRoomSettingsTab_warning {
22+
display: flex;
23+
align-items: center;
24+
column-gap: $spacing-4;
2725
}

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ import { Action } from "../../../../../dispatcher/actions";
2727
import CopyableText from "../../../elements/CopyableText";
2828
import { ViewRoomPayload } from "../../../../../dispatcher/payloads/ViewRoomPayload";
2929
import SettingsStore from "../../../../../settings/SettingsStore";
30+
import SettingsTab from "../SettingsTab";
31+
import { SettingsSection } from "../../shared/SettingsSection";
32+
import SettingsSubsection from "../../shared/SettingsSubsection";
3033

3134
interface IProps {
3235
room: Room;
@@ -154,30 +157,27 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
154157
}
155158

156159
return (
157-
<div className="mx_SettingsTab">
158-
<div className="mx_SettingsTab_heading">{_t("Advanced")}</div>
159-
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
160-
<span className="mx_SettingsTab_subheading">
161-
{room.isSpaceRoom() ? _t("Space information") : _t("Room information")}
162-
</span>
163-
<div>
164-
<span>{_t("Internal room ID")}</span>
165-
<CopyableText getTextToCopy={() => this.props.room.roomId}>
166-
{this.props.room.roomId}
167-
</CopyableText>
168-
</div>
169-
{unfederatableSection}
170-
</div>
171-
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
172-
<span className="mx_SettingsTab_subheading">{_t("Room version")}</span>
173-
<div>
174-
<span>{_t("Room version:")}</span>&nbsp;
175-
{room.getVersion()}
176-
</div>
177-
{oldRoomLink}
178-
{roomUpgradeButton}
179-
</div>
180-
</div>
160+
<SettingsTab>
161+
<SettingsSection heading={_t("Advanced")}>
162+
<SettingsSubsection heading={room.isSpaceRoom() ? _t("Space information") : _t("Room information")}>
163+
<div>
164+
<span>{_t("Internal room ID")}</span>
165+
<CopyableText getTextToCopy={() => this.props.room.roomId}>
166+
{this.props.room.roomId}
167+
</CopyableText>
168+
</div>
169+
{unfederatableSection}
170+
</SettingsSubsection>
171+
<SettingsSubsection heading={_t("Room version")}>
172+
<div>
173+
<span>{_t("Room version:")}</span>&nbsp;
174+
{room.getVersion()}
175+
</div>
176+
{oldRoomLink}
177+
{roomUpgradeButton}
178+
</SettingsSubsection>
179+
</SettingsSection>
180+
</SettingsTab>
181181
);
182182
}
183183
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
2121
import { _t } from "../../../../../languageHandler";
2222
import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
2323
import BridgeTile from "../../BridgeTile";
24+
import SettingsTab from "../SettingsTab";
25+
import { SettingsSection } from "../../shared/SettingsSection";
2426

2527
const BRIDGE_EVENT_TYPES = [
2628
"uk.half-shot.bridge",
@@ -99,10 +101,9 @@ export default class BridgeSettingsTab extends React.Component<IProps> {
99101
}
100102

101103
return (
102-
<div className="mx_SettingsTab">
103-
<div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
104-
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">{content}</div>
105-
</div>
104+
<SettingsTab>
105+
<SettingsSection heading={_t("Bridges")}>{content}</SettingsSection>
106+
</SettingsTab>
106107
);
107108
}
108109
}

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

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ import { UIFeature } from "../../../../../settings/UIFeature";
2727
import UrlPreviewSettings from "../../../room_settings/UrlPreviewSettings";
2828
import AliasSettings from "../../../room_settings/AliasSettings";
2929
import PosthogTrackers from "../../../../../PosthogTrackers";
30+
import SettingsSubsection from "../../shared/SettingsSubsection";
31+
import SettingsTab from "../SettingsTab";
32+
import { SettingsSection } from "../../shared/SettingsSection";
3033

3134
interface IProps {
3235
room: Room;
@@ -72,35 +75,36 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
7275
let leaveSection;
7376
if (room.getMyMembership() === "join") {
7477
leaveSection = (
75-
<>
76-
<span className="mx_SettingsTab_subheading">{_t("Leave room")}</span>
77-
<div className="mx_SettingsTab_section">
78-
<AccessibleButton kind="danger" onClick={this.onLeaveClick}>
79-
{_t("Leave room")}
80-
</AccessibleButton>
81-
</div>
82-
</>
78+
<SettingsSubsection heading={_t("Leave room")}>
79+
<AccessibleButton kind="danger" onClick={this.onLeaveClick}>
80+
{_t("Leave room")}
81+
</AccessibleButton>
82+
</SettingsSubsection>
8383
);
8484
}
8585

8686
return (
87-
<div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
88-
<div className="mx_SettingsTab_heading">{_t("General")}</div>
89-
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
90-
<RoomProfileSettings roomId={room.roomId} />
91-
</div>
92-
93-
<div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div>
94-
<AliasSettings
95-
roomId={room.roomId}
96-
canSetCanonicalAlias={canSetCanonical}
97-
canSetAliases={canSetAliases}
98-
canonicalAliasEvent={canonicalAliasEv}
99-
/>
100-
<div className="mx_SettingsTab_heading">{_t("Other")}</div>
101-
{urlPreviewSettings}
102-
{leaveSection}
103-
</div>
87+
<SettingsTab>
88+
<SettingsSection heading={_t("General")}>
89+
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
90+
<RoomProfileSettings roomId={room.roomId} />
91+
</div>
92+
</SettingsSection>
93+
94+
<SettingsSection heading={_t("Room Addresses")}>
95+
<AliasSettings
96+
roomId={room.roomId}
97+
canSetCanonicalAlias={canSetCanonical}
98+
canSetAliases={canSetAliases}
99+
canonicalAliasEvent={canonicalAliasEv}
100+
/>
101+
</SettingsSection>
102+
103+
<SettingsSection heading={_t("Other")}>
104+
{urlPreviewSettings}
105+
{leaveSection}
106+
</SettingsSection>
107+
</SettingsTab>
104108
);
105109
}
106110
}

0 commit comments

Comments
 (0)