From 5df128f134758e0bdc9e07578c90fc9521a0f741 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Fri, 28 Apr 2023 15:14:21 +1200 Subject: [PATCH] use SettingsTab and SettingsSubsection in room settings --- res/css/views/settings/tabs/_SettingsTab.pcss | 2 +- .../tabs/room/_RolesRoomSettingsTab.pcss | 2 +- .../tabs/room/_SecurityRoomSettingsTab.pcss | 16 +- .../tabs/room/AdvancedRoomSettingsTab.tsx | 48 +-- .../settings/tabs/room/BridgeSettingsTab.tsx | 9 +- .../tabs/room/NotificationSettingsTab.tsx | 282 +++++++++--------- .../tabs/room/RolesRoomSettingsTab.tsx | 41 +-- .../tabs/room/SecurityRoomSettingsTab.tsx | 85 +++--- .../AdvancedRoomSettingsTab-test.tsx.snap | 100 ++++--- .../BridgeSettingsTab-test.tsx.snap | 178 ++++++----- .../RolesRoomSettingsTab-test.tsx.snap | 4 +- 11 files changed, 411 insertions(+), 356 deletions(-) diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index 4f240109c18d..fac189e8587e 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 5d0a8ed1423b..ce8dff9f0c2e 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 cf3e16bc0444..339b5d2590e0 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_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 index e8ce957c3b5e..a7068ea1cfad 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 8731cee0a6a1..04b75cb4cc6d 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/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx index d8232210fa85..f1304d44ed77 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("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("Notification sound")}: {this.state.currentSound} + +
+ + {_t("Reset")} +
- - {_t("Reset")} - -
-
-

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

-
-
- -
- - {currentUploadedFile} +
+

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

+
+
+ +
+ + {currentUploadedFile} +
+ + + {_t("Browse")} + + + + {_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 3f2c6d65fe0a..0ed44cf173c2 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 aad1535505a4..71afe65d98bd 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} - - - {this.renderJoinRule()} - - {advanced} - {historySection} -
+ + + + + {encryptionSettings} + + + {this.renderJoinRule()} + {historySection} + + + //
+ //
{_t("Security & Privacy")}
+ + //
); } } 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 fa0aa0338e98..f8ec32b7f3a7 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 c38e07d15f80..ed78d3834cb0 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. - - -

-
    +

    -
  • -
    -
    -
    -
    +
    +
    +

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

    +
      -

      - protocol-test -

      -

      - +

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

      + protocol-test +

      +

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

      -
        - -
      • - - This bridge is managed by - . - -
        • -
      -
      - -
    +

    +
      + +
    • + + 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 d771a152d2ab..aea48398946c 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 -
    +