From 4736f0e44ccfabb53164b1cb636652f43234bc1f Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 3 May 2023 09:14:36 +1200 Subject: [PATCH] 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 --- res/css/views/settings/tabs/_SettingsTab.pcss | 2 +- .../tabs/room/_RolesRoomSettingsTab.pcss | 2 +- .../tabs/room/_SecurityRoomSettingsTab.pcss | 18 +- .../tabs/room/AdvancedRoomSettingsTab.tsx | 48 +-- .../settings/tabs/room/BridgeSettingsTab.tsx | 9 +- .../tabs/room/GeneralRoomSettingsTab.tsx | 52 ++-- .../tabs/room/NotificationSettingsTab.tsx | 278 +++++++++--------- .../tabs/room/RolesRoomSettingsTab.tsx | 41 +-- .../tabs/room/SecurityRoomSettingsTab.tsx | 81 ++--- .../AdvancedRoomSettingsTab-test.tsx.snap | 102 ++++--- .../BridgeSettingsTab-test.tsx.snap | 182 ++++++------ .../RolesRoomSettingsTab-test.tsx.snap | 4 +- 12 files changed, 439 insertions(+), 380 deletions(-) diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index 4f240109c1..fac189e858 100644 --- 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 index 5d0a8ed142..ce8dff9f0c 100644 --- 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 index cf3e16bc04..339b5d2590 100644 --- 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_warning { - display: flex; - align-items: center; - column-gap: $spacing-4; - } +.mx_SecurityRoomSettingsTab_advancedSection { + margin-top: $spacing-16; +} + +.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 index e8ce957c3b..a7068ea1cf 100644 --- 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 -
{_t("Advanced")}
-
- - {room.isSpaceRoom() ? _t("Space information") : _t("Room information")} - -
- {_t("Internal room ID")} - this.props.room.roomId}> - {this.props.room.roomId} - -
- {unfederatableSection} -
-
- {_t("Room version")} -
- {_t("Room version:")}  - {room.getVersion()} -
- {oldRoomLink} - {roomUpgradeButton} -
- + + + +
+ {_t("Internal room ID")} + this.props.room.roomId}> + {this.props.room.roomId} + +
+ {unfederatableSection} + + +
+ {_t("Room version:")}  + {room.getVersion()} +
+ {oldRoomLink} + {roomUpgradeButton} + + + ); } } diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx b/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx index 8731cee0a6..04b75cb4cc 100644 --- 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 { } return ( -
-
{_t("Bridges")}
-
{content}
-
+ + {content} + ); } } diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx index a915aa42e3..cc8db528a1 100644 --- 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 - {_t("Leave room")} -
- - {_t("Leave room")} - -
- + + + {_t("Leave room")} + + ); } return ( -
-
{_t("General")}
-
- -
+ + +
+ +
+ -
{_t("Room Addresses")}
- -
{_t("Other")}
- {urlPreviewSettings} - {leaveSection} -
+ + + + + + {urlPreviewSettings} + {leaveSection} + + ); } } diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx index d8232210fa..f1304d44ed 100644 --- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx @@ -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,149 +171,148 @@ export default class NotificationsSettingsTab extends React.Component -
{_t("Notifications")}
- -
- - {_t("Default")} -
- {_t( - "Get notifications as set up in your settings", - {}, - { - a: (sub) => ( - - {sub} - - ), - }, - )} -
- - ), - }, - { - value: RoomNotifState.AllMessagesLoud, - className: "mx_NotificationSettingsTab_allMessagesEntry", - label: ( - <> - {_t("All messages")} -
- {_t("Get notified for every message")} -
- - ), - }, - { - value: RoomNotifState.MentionsOnly, - className: "mx_NotificationSettingsTab_mentionsKeywordsEntry", - label: ( - <> - {_t("@mentions & keywords")} -
- {_t( - "Get notified only with mentions and keywords " + - "as set up in your settings", - {}, - { - a: (sub) => ( - - {sub} - - ), - }, - )} -
- - ), - }, - { - value: RoomNotifState.Mute, - className: "mx_NotificationSettingsTab_noneEntry", - label: ( - <> - {_t("Off")} -
- {_t("You won't get any notifications")} -
- - ), - }, - ]} - onChange={this.onRoomNotificationChange} - value={this.roomProps.notificationVolume} - /> -
- -
- {_t("Sounds")} -
-
- - {_t("Notification sound")}: {this.state.currentSound} - -
- - {_t("Reset")} - + + +
+ + {_t("Default")} +
+ {_t( + "Get notifications as set up in your settings", + {}, + { + a: (sub) => ( + + {sub} + + ), + }, + )} +
+ + ), + }, + { + value: RoomNotifState.AllMessagesLoud, + className: "mx_NotificationSettingsTab_allMessagesEntry", + label: ( + <> + {_t("All messages")} +
+ {_t("Get notified for every message")} +
+ + ), + }, + { + value: RoomNotifState.MentionsOnly, + className: "mx_NotificationSettingsTab_mentionsKeywordsEntry", + label: ( + <> + {_t("@mentions & keywords")} +
+ {_t( + "Get notified only with mentions and keywords " + + "as set up in your settings", + {}, + { + a: (sub) => ( + + {sub} + + ), + }, + )} +
+ + ), + }, + { + value: RoomNotifState.Mute, + className: "mx_NotificationSettingsTab_noneEntry", + label: ( + <> + {_t("Off")} +
+ {_t("You won't get any notifications")} +
+ + ), + }, + ]} + onChange={this.onRoomNotificationChange} + value={this.roomProps.notificationVolume} + />
-
-

{_t("Set a new custom sound")}

-
-
- -
- {currentUploadedFile} + +
+
+ + {_t("Notification sound")}: {this.state.currentSound} + +
+ + {_t("Reset")} +
+
+

{_t("Set a new custom sound")}

+
+
+ +
- - {_t("Browse")} - + {currentUploadedFile} +
- - {_t("Save")} - -
-
-
-
+ + {_t("Browse")} + + + + {_t("Save")} + +
+
+ + + ); } } diff --git a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx index 3f2c6d65fe..0ed44cf173 100644 --- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx @@ -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 { const canBanUsers = currentUserLevel >= banLevel; bannedUsersSection = ( -
    +
      {banned.map((member) => { const banEvent = member.events.member?.getContent(); const bannedById = member.events.member?.getSender(); @@ -479,24 +481,25 @@ export default class RolesRoomSettingsTab extends React.Component { .filter(Boolean); return ( -
      -
      {_t("Roles & Permissions")}
      - {privilegedUsersSection} - {canChangeLevels && } - {mutedUsersSection} - {bannedUsersSection} - - {powerSelectors} - {eventPowerSelectors} - -
      + + + {privilegedUsersSection} + {canChangeLevels && } + {mutedUsersSection} + {bannedUsersSection} + + {powerSelectors} + {eventPowerSelectors} + + + ); } } diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index aad1535505..71afe65d98 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -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 + + {this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")} + + {this.state.showAdvancedSection && this.renderAdvanced()} +
+ ); + } + return ( + {advanced} ); } @@ -399,7 +419,7 @@ export default class SecurityRoomSettingsTab extends React.Component +
- +
); } @@ -437,45 +457,30 @@ export default class SecurityRoomSettingsTab extends React.Component - - {this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")} - - {this.state.showAdvancedSection && this.renderAdvanced()} - - ); - } - return ( -
-
{_t("Security & Privacy")}
+ + + + + {encryptionSettings} + - - - {encryptionSettings} - + {this.renderJoinRule()} + {historySection} + + + //
+ //
{_t("Security & Privacy")}
- {this.renderJoinRule()} - - {advanced} - {historySection} -
+ //
); } } diff --git a/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap index fa0aa0338e..f8ec32b7f3 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap @@ -6,50 +6,78 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = ` class="mx_SettingsTab" >
- Advanced -
-
- - Room information - -
- - Internal room ID - -
+ Advanced + +
- !room:example.com
+ class="mx_SettingsSubsection" + > +
+

+ Room information +

+
+
+
+ + Internal room ID + +
+ !room:example.com +
+
+
+
+
+
+
+

+ Room version +

+
+
+
+ + Room version: + +  1 +
+
+
-
- - Room version - -
- - Room version: - -  1 -
-
`; diff --git a/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap index c38e07d15f..ed78d3834c 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap @@ -6,75 +6,83 @@ exports[` renders when room is bridging messages 1`] = ` class="mx_SettingsTab" >
- Bridges -
-
-
-

- - This room is bridging messages to the following platforms. - - Learn more. - - -

- +
+
+
+
+

+ protocol-test +

+

+ + + Channel: + + channel-test + + + +

+
    + +
  • + + This bridge is managed by + . + +
    • +
+
+ + +
+
@@ -87,25 +95,33 @@ exports[` renders when room is not bridging messages to any class="mx_SettingsTab" >
- Bridges -
-
-

- - This room isn't bridging messages to any platforms. - - Learn more. - - -

+
+

+ Bridges +

+
+

+ + This room isn't bridging messages to any platforms. + + Learn more. + + +

+
+
diff --git a/test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap index d771a152d2..aea4839894 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap @@ -9,7 +9,9 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = ` > Banned users -
    +