mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-21 16:55:34 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/_components.pcss
View file

@ -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";

22
res/css/views/room_settings/_AliasSettings.pcss
View file

@ -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;
}
}

19
res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss
View file

@ -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;
}

19
src/components/views/room_settings/AliasSettings.tsx
View file

@ -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<IProps, IState> {
}
return (
<div className="mx_AliasSettings">
<>
<SettingsFieldset
data-testid="published-address-fieldset"
legend={_t("Published Addresses")}
@ -416,15 +416,6 @@ export default class AliasSettings extends React.Component<IProps, IState> {
</>
}
>
{/*
<span className='mx_SettingsTab_subheading'>{ _t("Published Addresses") }</span>
<p>
{ 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.") }
&nbsp;
{ _t("To publish an address, it needs to be set as a local address first.") }
</p> */}
{canonicalAliasSection}
{this.props.hidePublishSetting ? null : (
<RoomPublishSetting
@ -472,11 +463,13 @@ export default class AliasSettings extends React.Component<IProps, IState> {
}
>
<details onToggle={this.onLocalAliasesToggled} open={this.state.detailsOpen}>
<summary>{this.state.detailsOpen ? _t("Show less") : _t("Show more")}</summary>
<summary className="mx_AliasSettings_localAddresses">
{this.state.detailsOpen ? _t("Show less") : _t("Show more")}
</summary>
{localAliasesList}
</details>
</SettingsFieldset>
</div>
</>
);
}
}

4
src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
View file

@ -86,9 +86,7 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
return (
<SettingsTab>
<SettingsSection heading={_t("General")}>
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
<RoomProfileSettings roomId={room.roomId} />
</div>
<RoomProfileSettings roomId={room.roomId} />
</SettingsSection>
<SettingsSection heading={_t("Room Addresses")}>

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>
);
};

83
src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
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>
);
};

214
test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
View file

@ -21,118 +21,130 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
class="mx_SettingsTab"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
Visibility
</div>
<fieldset
class="mx_SettingsFieldset"
data-testid="access-fieldset"
>
<legend
class="mx_SettingsFieldset_legend"
>
Access
</legend>
<div
class="mx_SettingsFieldset_description"
class="mx_SettingsSection"
>
Decide who can view and join mock-space.
</div>
<label
class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
>
<input
aria-describedby="joinRule-invite-description"
checked=""
disabled=""
id="joinRule-invite"
name="joinRule"
type="radio"
value="invite"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
<h2
class="mx_Heading_h2"
>
Private (invite only)
</div>
Visibility
</h2>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<span
id="joinRule-invite-description"
>
Only invited people can join.
</span>
<label
class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled"
>
<input
aria-describedby="joinRule-public-description"
disabled=""
id="joinRule-public"
name="joinRule"
type="radio"
value="public"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
class="mx_SettingsSection_subSections"
>
Public
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<span
id="joinRule-public-description"
>
Anyone can find and join.
</span>
<div
class="mx_SettingsTab_toggleWithDescription"
>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
<fieldset
class="mx_SettingsFieldset"
data-testid="access-fieldset"
>
<div
id="mx_LabelledToggleSwitch_testid_0"
<legend
class="mx_SettingsFieldset_legend"
>
Preview Space
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_testid_0"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
Access
</legend>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
class="mx_SettingsFieldset_description"
>
Decide who can view and join mock-space.
</div>
<label
class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
>
<input
aria-describedby="joinRule-invite-description"
checked=""
disabled=""
id="joinRule-invite"
name="joinRule"
type="radio"
value="invite"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Private (invite only)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<span
id="joinRule-invite-description"
>
Only invited people can join.
</span>
<label
class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled"
>
<input
aria-describedby="joinRule-public-description"
disabled=""
id="joinRule-public"
name="joinRule"
type="radio"
value="public"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Public
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<span
id="joinRule-public-description"
>
Anyone can find and join.
</span>
<div
class="mx_SettingsTab_toggleWithDescription"
>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_testid_0"
>
Preview Space
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_testid_0"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<p>
Allow people to preview your space before they join.
<br />
<b>
Recommended for public spaces.
</b>
</p>
</div>
</fieldset>
</div>
<p>
Allow people to preview your space before they join.
<br />
<b>
Recommended for public spaces.
</b>
</p>
</div>
</fieldset>
</div>
</div>
</DocumentFragment>
`;