imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use semantic headings in space settings (#10751)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

82
src/components/views/spaces/SpaceSettingsGeneralTab.tsx
View file

@ -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<IProps> = ({ matrixClient: cli, space })
};
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("General")}</div>
<SettingsTab>
<SettingsSection heading={_t("General")}>
<div>
<div>{_t("Edit settings relating to your space.")}</div>
<div>{_t("Edit settings relating to your space.")}</div>
{error && <div className="mx_SpaceRoomView_errorText">{error}</div>}
{error && <div className="mx_SpaceRoomView_errorText">{error}</div>}
<SpaceBasicSettings
avatarUrl={avatarUrlForRoom(space, 80, 80, "crop") ?? undefined}
avatarDisabled={busy || !canSetAvatar}
setAvatar={setNewAvatar}
name={name}
nameDisabled={busy || !canSetName}
setName={setName}
topic={topic}
topicDisabled={busy || !canSetTopic}
setTopic={setTopic}
/>
<div className="mx_SettingsTab_section">
<SpaceBasicSettings
avatarUrl={avatarUrlForRoom(space, 80, 80, "crop") ?? undefined}
avatarDisabled={busy || !canSetAvatar}
setAvatar={setNewAvatar}
name={name}
nameDisabled={busy || !canSetName}
setName={setName}
topic={topic}
topicDisabled={busy || !canSetTopic}
setTopic={setTopic}
/>
<AccessibleButton
onClick={onCancel}
disabled={busy || !(avatarChanged || nameChanged || topicChanged)}
kind="link"
>
{_t("Cancel")}
</AccessibleButton>
<AccessibleButton onClick={onSave} disabled={busy} kind="primary">
{busy ? _t("Saving…") : _t("Save Changes")}
</AccessibleButton>
</div>
<AccessibleButton
onClick={onCancel}
disabled={busy || !(avatarChanged || nameChanged || topicChanged)}
kind="link"
>
{_t("Cancel")}
</AccessibleButton>
<AccessibleButton onClick={onSave} disabled={busy} kind="primary">
{busy ? _t("Saving…") : _t("Save Changes")}
</AccessibleButton>
</div>
<span className="mx_SettingsTab_subheading">{_t("Leave Space")}</span>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
<AccessibleButton
kind="danger"
onClick={() => {
leaveSpace(space);
}}
>
{_t("Leave Space")}
</AccessibleButton>
</div>
</div>
<SettingsSubsection heading={_t("Leave Space")}>
<AccessibleButton
kind="danger"
onClick={() => {
leaveSpace(space);
}}
>
{_t("Leave Space")}
</AccessibleButton>
</SettingsSubsection>
</SettingsSection>
</SettingsTab>
);
};