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
This commit is contained in:
Kerry 2023-05-03 13:55:55 +12:00 committed by GitHub
parent ede2132560
commit 5a73d8e1b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 213 additions and 231 deletions

View file

@ -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<IProps> = ({ matrixClient: cli, space
let addressesSection: JSX.Element | undefined;
if (space.getJoinRule() === JoinRule.Public) {
addressesSection = (
<>
<span className="mx_SettingsTab_subheading">{_t("Address")}</span>
<SettingsSection heading={_t("Address")}>
<AliasSettings
roomId={space.roomId}
canSetCanonicalAlias={canSetCanonical}
@ -133,50 +134,52 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
canonicalAliasEvent={canonicalAliasEv ?? undefined}
hidePublishSetting={!serverSupportsExploringSpaces}
/>
</>
</SettingsSection>
);
}
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Visibility")}</div>
<SettingsTab>
<SettingsSection heading={_t("Visibility")}>
{error && (
<div data-testid="space-settings-error" className="mx_SpaceRoomView_errorText">
{error}
</div>
)}
{error && (
<div data-testid="space-settings-error" className="mx_SpaceRoomView_errorText">
{error}
</div>
)}
<SettingsFieldset
data-testid="access-fieldset"
legend={_t("Access")}
description={_t("Decide who can view and join %(spaceName)s.", { spaceName: space.name })}
>
<JoinRuleSettings
room={space}
onError={(): void => setError(_t("Failed to update the visibility of this space"))}
closeSettingsFn={closeSettingsFn}
/>
{advancedSection}
<div className="mx_SettingsTab_toggleWithDescription">
<LabelledToggleSwitch
value={historyVisibility === HistoryVisibility.WorldReadable}
onChange={(checked: boolean): void => {
setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared);
}}
disabled={!canSetHistoryVisibility}
label={_t("Preview Space")}
<SettingsFieldset
data-testid="access-fieldset"
legend={_t("Access")}
description={_t("Decide who can view and join %(spaceName)s.", { spaceName: space.name })}
>
<JoinRuleSettings
room={space}
onError={(): void => setError(_t("Failed to update the visibility of this space"))}
closeSettingsFn={closeSettingsFn}
/>
<p>
{_t("Allow people to preview your space before they join.")}
<br />
<b>{_t("Recommended for public spaces.")}</b>
</p>
</div>
</SettingsFieldset>
{advancedSection}
<div className="mx_SettingsTab_toggleWithDescription">
<LabelledToggleSwitch
value={historyVisibility === HistoryVisibility.WorldReadable}
onChange={(checked: boolean): void => {
setHistoryVisibility(
checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared,
);
}}
disabled={!canSetHistoryVisibility}
label={_t("Preview Space")}
/>
<p>
{_t("Allow people to preview your space before they join.")}
<br />
<b>{_t("Recommended for public spaces.")}</b>
</p>
</div>
</SettingsFieldset>
{addressesSection}
</div>
{addressesSection}
</SettingsSection>
</SettingsTab>
);
};