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
matrix-org · May 2, 2023 · 4736f0e · 4736f0e
1 parent e7f5261
commit 4736f0e
Show file tree

Hide file tree

Showing 12 changed files with 440 additions and 381 deletions.
diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -103,5 +103,5 @@ limitations under the License.
     grid-template-columns: 1fr;
     grid-gap: $spacing-32;
 
-    padding: $spacing-16 0;
+    padding-bottom: $spacing-16;
 }
diff --git a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss
@@ -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;
 }
 

diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
@@ -14,14 +14,12 @@ 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 {
-        display: flex;
-        align-items: center;
-        column-gap: $spacing-4;
-    }
+.mx_SecurityRoomSettingsTab_warning {
+    display: flex;
+    align-items: center;
+    column-gap: $spacing-4;
 }
diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
@@ -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,30 +157,27 @@ 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>
-                    <div>
-                        <span>{_t("Internal room ID")}</span>
-                        <CopyableText getTextToCopy={() => this.props.room.roomId}>
-                            {this.props.room.roomId}
-                        </CopyableText>
-                    </div>
-                    {unfederatableSection}
-                </div>
-                <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
-                    <span className="mx_SettingsTab_subheading">{_t("Room version")}</span>
-                    <div>
-                        <span>{_t("Room version:")}</span>&nbsp;
-                        {room.getVersion()}
-                    </div>
-                    {oldRoomLink}
-                    {roomUpgradeButton}
-                </div>
-            </div>
+            <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}>
+                                {this.props.room.roomId}
+                            </CopyableText>
+                        </div>
+                        {unfederatableSection}
+                    </SettingsSubsection>
+                    <SettingsSubsection heading={_t("Room version")}>
+                        <div>
+                            <span>{_t("Room version:")}</span>&nbsp;
+                            {room.getVersion()}
+                        </div>
+                        {oldRoomLink}
+                        {roomUpgradeButton}
+                    </SettingsSubsection>
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx b/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
@@ -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>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
@@ -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">
-                        <AccessibleButton kind="danger" onClick={this.onLeaveClick}>
-                            {_t("Leave room")}
-                        </AccessibleButton>
-                    </div>
-                </>
+                <SettingsSubsection heading={_t("Leave room")}>
+                    <AccessibleButton kind="danger" onClick={this.onLeaveClick}>
+                        {_t("Leave room")}
+                    </AccessibleButton>
+                </SettingsSubsection>
             );
         }
 
         return (
-            <div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("General")}</div>
-                <div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
-                    <RoomProfileSettings roomId={room.roomId} />
-                </div>
-
-                <div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div>
-                <AliasSettings
-                    roomId={room.roomId}
-                    canSetCanonicalAlias={canSetCanonical}
-                    canSetAliases={canSetAliases}
-                    canonicalAliasEvent={canonicalAliasEv}
-                />
-                <div className="mx_SettingsTab_heading">{_t("Other")}</div>
-                {urlPreviewSettings}
-                {leaveSection}
-            </div>
+            <SettingsTab>
+                <SettingsSection heading={_t("General")}>
+                    <div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
+                        <RoomProfileSettings roomId={room.roomId} />
+                    </div>
+                </SettingsSection>
+
+                <SettingsSection heading={_t("Room Addresses")}>
+                    <AliasSettings
+                        roomId={room.roomId}
+                        canSetCanonicalAlias={canSetCanonical}
+                        canSetAliases={canSetAliases}
+                        canonicalAliasEvent={canonicalAliasEv}
+                    />
+                </SettingsSection>
+
+                <SettingsSection heading={_t("Other")}>
+                    {urlPreviewSettings}
+                    {leaveSection}
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }