From 5a73d8e1b01c894839551037a955b3b9edd8073c Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 3 May 2023 13:55:55 +1200 Subject: [PATCH] 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 --- res/css/_components.pcss | 1 - .../views/room_settings/_AliasSettings.pcss | 22 +- .../tabs/room/_GeneralRoomSettingsTab.pcss | 19 -- .../views/room_settings/AliasSettings.tsx | 19 +- .../tabs/room/GeneralRoomSettingsTab.tsx | 4 +- .../views/spaces/SpaceSettingsGeneralTab.tsx | 82 +++---- .../spaces/SpaceSettingsVisibilityTab.tsx | 83 +++---- .../SpaceSettingsVisibilityTab-test.tsx.snap | 214 +++++++++--------- 8 files changed, 213 insertions(+), 231 deletions(-) delete mode 100644 res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss diff --git a/res/css/_components.pcss b/res/css/_components.pcss index f200429ced..94153b2e89 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -341,7 +341,6 @@ @import "./views/settings/_UpdateCheckButton.pcss"; @import "./views/settings/tabs/_SettingsSection.pcss"; @import "./views/settings/tabs/_SettingsTab.pcss"; -@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.pcss"; @import "./views/settings/tabs/room/_NotificationSettingsTab.pcss"; @import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss"; @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss"; diff --git a/res/css/views/room_settings/_AliasSettings.pcss b/res/css/views/room_settings/_AliasSettings.pcss index 66ac17d842..15a7b8a870 100644 --- a/res/css/views/room_settings/_AliasSettings.pcss +++ b/res/css/views/room_settings/_AliasSettings.pcss @@ -27,20 +27,14 @@ limitations under the License. box-shadow: none; } -.mx_AliasSettings { - summary { - cursor: pointer; - color: $accent; - font-weight: var(--font-semi-bold); - list-style: none; +.mx_AliasSettings_localAddresses { + cursor: pointer; + color: $accent; + font-weight: var(--font-semi-bold); + list-style: none; - /* list-style doesn't do it for webkit */ - &::-webkit-details-marker { - display: none; - } - } - - .mx_AliasSettings_localAliasHeader { - margin-top: 35px; + /* list-style doesn't do it for webkit */ + &::-webkit-details-marker { + display: none; } } diff --git a/res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss b/res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss deleted file mode 100644 index af55820d66..0000000000 --- a/res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss +++ /dev/null @@ -1,19 +0,0 @@ -/* -Copyright 2019 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_GeneralRoomSettingsTab_profileSection { - margin-top: 10px; -} diff --git a/src/components/views/room_settings/AliasSettings.tsx b/src/components/views/room_settings/AliasSettings.tsx index 16388953af..f6a6f32e4f 100644 --- a/src/components/views/room_settings/AliasSettings.tsx +++ b/src/components/views/room_settings/AliasSettings.tsx @@ -1,5 +1,5 @@ /* -Copyright 2016 - 2021 The Matrix.org Foundation C.I.C. +Copyright 2016 - 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -402,7 +402,7 @@ export default class AliasSettings extends React.Component { } return ( -
+ <> { } > - {/* - { _t("Published Addresses") } -

- { isSpaceRoom - ? _t("Published addresses can be used by anyone on any server to join your space.") - : _t("Published addresses can be used by anyone on any server to join your room.") } -   - { _t("To publish an address, it needs to be set as a local address first.") } -

*/} {canonicalAliasSection} {this.props.hidePublishSetting ? null : ( { } >
- {this.state.detailsOpen ? _t("Show less") : _t("Show more")} + + {this.state.detailsOpen ? _t("Show less") : _t("Show more")} + {localAliasesList}
-
+ ); } } diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx index cc8db528a1..631af29fa2 100644 --- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx @@ -86,9 +86,7 @@ export default class GeneralRoomSettingsTab extends React.Component -
- -
+ diff --git a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx index 329a580b79..7880349064 100644 --- a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx +++ b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx @@ -27,6 +27,9 @@ import { avatarUrlForRoom } from "../../../Avatar"; import { htmlSerializeFromMdIfNeeded } from "../../../editor/serialize"; import { leaveSpace } from "../../../utils/leave-behaviour"; import { getTopic } from "../../../hooks/room/useTopic"; +import SettingsTab from "../settings/tabs/SettingsTab"; +import { SettingsSection } from "../settings/shared/SettingsSection"; +import SettingsSubsection from "../settings/shared/SettingsSubsection"; interface IProps { matrixClient: MatrixClient; @@ -94,50 +97,49 @@ const SpaceSettingsGeneralTab: React.FC = ({ matrixClient: cli, space }) }; return ( -
-
{_t("General")}
+ + +
+
{_t("Edit settings relating to your space.")}
-
{_t("Edit settings relating to your space.")}
+ {error &&
{error}
} - {error &&
{error}
} + -
- + + {_t("Cancel")} + + + {busy ? _t("Saving…") : _t("Save Changes")} + +
- - {_t("Cancel")} - - - {busy ? _t("Saving…") : _t("Save Changes")} - -
- - {_t("Leave Space")} -
- { - leaveSpace(space); - }} - > - {_t("Leave Space")} - -
-
+ + { + leaveSpace(space); + }} + > + {_t("Leave Space")} + + + + ); }; diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx index 368d6c96fc..d94bc52ee5 100644 --- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx +++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx @@ -1,5 +1,5 @@ /* -Copyright 2021 The Matrix.org Foundation C.I.C. +Copyright 2021-2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -30,6 +30,8 @@ import JoinRuleSettings from "../settings/JoinRuleSettings"; import { useRoomState } from "../../../hooks/useRoomState"; import SettingsFieldset from "../settings/SettingsFieldset"; import { useAsyncMemo } from "../../../hooks/useAsyncMemo"; +import { SettingsSection } from "../settings/shared/SettingsSection"; +import SettingsTab from "../settings/tabs/SettingsTab"; interface IProps { matrixClient: MatrixClient; @@ -124,8 +126,7 @@ const SpaceSettingsVisibilityTab: React.FC = ({ matrixClient: cli, space let addressesSection: JSX.Element | undefined; if (space.getJoinRule() === JoinRule.Public) { addressesSection = ( - <> - {_t("Address")} + = ({ matrixClient: cli, space canonicalAliasEvent={canonicalAliasEv ?? undefined} hidePublishSetting={!serverSupportsExploringSpaces} /> - + ); } return ( -
-
{_t("Visibility")}
+ + + {error && ( +
+ {error} +
+ )} - {error && ( -
- {error} -
- )} - - - setError(_t("Failed to update the visibility of this space"))} - closeSettingsFn={closeSettingsFn} - /> - {advancedSection} -
- { - setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared); - }} - disabled={!canSetHistoryVisibility} - label={_t("Preview Space")} + + setError(_t("Failed to update the visibility of this space"))} + closeSettingsFn={closeSettingsFn} /> -

- {_t("Allow people to preview your space before they join.")} -
- {_t("Recommended for public spaces.")} -

-
- + {advancedSection} +
+ { + setHistoryVisibility( + checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared, + ); + }} + disabled={!canSetHistoryVisibility} + label={_t("Preview Space")} + /> +

+ {_t("Allow people to preview your space before they join.")} +
+ {_t("Recommended for public spaces.")} +

+
+ - {addressesSection} -
+ {addressesSection} + + ); }; diff --git a/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap index a93fda9d6a..34d9f5c931 100644 --- a/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap +++ b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap @@ -21,118 +21,130 @@ exports[` renders container 1`] = ` class="mx_SettingsTab" >
- Visibility -
-
- - Access -
- Decide who can view and join mock-space. -
-
-

- Allow people to preview your space before they join. -
- - Recommended for public spaces. - -

- + `;