Use semantic headings for room settings content (#10734)
* split SettingsSection out of SettingsTab, replace usage * correct copyright * use semantic headings in GeneralRoomSettingsTab * use SettingsTab and SettingsSubsection in room settings * fix VoipRoomSettingsTab
This commit is contained in:
Kerry
GitHub
parent
e7f5261eda
commit
4736f0e44c
12 changed files with 439 additions and 380 deletions
|
|
@ -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<IProps, ISt
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="mx_SettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("Advanced")}</div>
|
||||
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
|
||||
<span className="mx_SettingsTab_subheading">
|
||||
{room.isSpaceRoom() ? _t("Space information") : _t("Room information")}
|
||||
</span>
|
||||
<div>
|
||||
<span>{_t("Internal room ID")}</span>
|
||||
<CopyableText getTextToCopy={() => this.props.room.roomId}>
|
||||
{this.props.room.roomId}
|
||||
</CopyableText>
|
||||
</div>
|
||||
{unfederatableSection}
|
||||
</div>
|
||||
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
|
||||
<span className="mx_SettingsTab_subheading">{_t("Room version")}</span>
|
||||
<div>
|
||||
<span>{_t("Room version:")}</span>
|
||||
{room.getVersion()}
|
||||
</div>
|
||||
{oldRoomLink}
|
||||
{roomUpgradeButton}
|
||||
</div>
|
||||
</div>
|
||||
<SettingsTab>
|
||||
<SettingsSection heading={_t("Advanced")}>
|
||||
<SettingsSubsection heading={room.isSpaceRoom() ? _t("Space information") : _t("Room information")}>
|
||||
<div>
|
||||
<span>{_t("Internal room ID")}</span>
|
||||
<CopyableText getTextToCopy={() => this.props.room.roomId}>
|
||||
{this.props.room.roomId}
|
||||
</CopyableText>
|
||||
</div>
|
||||
{unfederatableSection}
|
||||
</SettingsSubsection>
|
||||
<SettingsSubsection heading={_t("Room version")}>
|
||||
<div>
|
||||
<span>{_t("Room version:")}</span>
|
||||
{room.getVersion()}
|
||||
</div>
|
||||
{oldRoomLink}
|
||||
{roomUpgradeButton}
|
||||
</SettingsSubsection>
|
||||
</SettingsSection>
|
||||
</SettingsTab>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<IProps> {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="mx_SettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
|
||||
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">{content}</div>
|
||||
</div>
|
||||
<SettingsTab>
|
||||
<SettingsSection heading={_t("Bridges")}>{content}</SettingsSection>
|
||||
</SettingsTab>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@ import { UIFeature } from "../../../../../settings/UIFeature";
|
|||
import UrlPreviewSettings from "../../../room_settings/UrlPreviewSettings";
|
||||
import AliasSettings from "../../../room_settings/AliasSettings";
|
||||
import PosthogTrackers from "../../../../../PosthogTrackers";
|
||||
import SettingsSubsection from "../../shared/SettingsSubsection";
|
||||
import SettingsTab from "../SettingsTab";
|
||||
import { SettingsSection } from "../../shared/SettingsSection";
|
||||
|
||||
interface IProps {
|
||||
room: Room;
|
||||
|
|
@ -72,35 +75,36 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
|
|||
let leaveSection;
|
||||
if (room.getMyMembership() === "join") {
|
||||
leaveSection = (
|
||||
<>
|
||||
<span className="mx_SettingsTab_subheading">{_t("Leave room")}</span>
|
||||
<div className="mx_SettingsTab_section">
|
||||
<AccessibleButton kind="danger" onClick={this.onLeaveClick}>
|
||||
{_t("Leave room")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</>
|
||||
<SettingsSubsection heading={_t("Leave room")}>
|
||||
<AccessibleButton kind="danger" onClick={this.onLeaveClick}>
|
||||
{_t("Leave room")}
|
||||
</AccessibleButton>
|
||||
</SettingsSubsection>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("General")}</div>
|
||||
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
|
||||
<RoomProfileSettings roomId={room.roomId} />
|
||||
</div>
|
||||
<SettingsTab>
|
||||
<SettingsSection heading={_t("General")}>
|
||||
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
|
||||
<RoomProfileSettings roomId={room.roomId} />
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
<div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div>
|
||||
<AliasSettings
|
||||
roomId={room.roomId}
|
||||
canSetCanonicalAlias={canSetCanonical}
|
||||
canSetAliases={canSetAliases}
|
||||
canonicalAliasEvent={canonicalAliasEv}
|
||||
/>
|
||||
<div className="mx_SettingsTab_heading">{_t("Other")}</div>
|
||||
{urlPreviewSettings}
|
||||
{leaveSection}
|
||||
</div>
|
||||
<SettingsSection heading={_t("Room Addresses")}>
|
||||
<AliasSettings
|
||||
roomId={room.roomId}
|
||||
canSetCanonicalAlias={canSetCanonical}
|
||||
canSetAliases={canSetAliases}
|
||||
canonicalAliasEvent={canonicalAliasEv}
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection heading={_t("Other")}>
|
||||
{urlPreviewSettings}
|
||||
{leaveSection}
|
||||
</SettingsSection>
|
||||
</SettingsTab>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<IProps, IS
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="mx_SettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("Notifications")}</div>
|
||||
|
||||
<div className="mx_SettingsTab_section mx_NotificationSettingsTab_notificationsSection">
|
||||
<StyledRadioGroup
|
||||
name="roomNotificationSetting"
|
||||
definitions={[
|
||||
{
|
||||
value: RoomNotifState.AllMessages,
|
||||
className: "mx_NotificationSettingsTab_defaultEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("Default")}
|
||||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{_t(
|
||||
"Get notifications as set up in your <a>settings</a>",
|
||||
{},
|
||||
{
|
||||
a: (sub) => (
|
||||
<AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onOpenSettingsClick}
|
||||
>
|
||||
{sub}
|
||||
</AccessibleButton>
|
||||
),
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: RoomNotifState.AllMessagesLoud,
|
||||
className: "mx_NotificationSettingsTab_allMessagesEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("All messages")}
|
||||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{_t("Get notified for every message")}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: RoomNotifState.MentionsOnly,
|
||||
className: "mx_NotificationSettingsTab_mentionsKeywordsEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("@mentions & keywords")}
|
||||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{_t(
|
||||
"Get notified only with mentions and keywords " +
|
||||
"as set up in your <a>settings</a>",
|
||||
{},
|
||||
{
|
||||
a: (sub) => (
|
||||
<AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onOpenSettingsClick}
|
||||
>
|
||||
{sub}
|
||||
</AccessibleButton>
|
||||
),
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: RoomNotifState.Mute,
|
||||
className: "mx_NotificationSettingsTab_noneEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("Off")}
|
||||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{_t("You won't get any notifications")}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
onChange={this.onRoomNotificationChange}
|
||||
value={this.roomProps.notificationVolume}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
|
||||
<span className="mx_SettingsTab_subheading">{_t("Sounds")}</span>
|
||||
<div>
|
||||
<div className="mx_SettingsTab_subsectionText">
|
||||
<span>
|
||||
{_t("Notification sound")}: <code>{this.state.currentSound}</code>
|
||||
</span>
|
||||
</div>
|
||||
<AccessibleButton
|
||||
className="mx_NotificationSound_resetSound"
|
||||
disabled={this.state.currentSound == "default"}
|
||||
onClick={this.clearSound}
|
||||
kind="primary"
|
||||
>
|
||||
{_t("Reset")}
|
||||
</AccessibleButton>
|
||||
<SettingsTab>
|
||||
<SettingsSection heading={_t("Notifications")}>
|
||||
<div className="mx_NotificationSettingsTab_notificationsSection">
|
||||
<StyledRadioGroup
|
||||
name="roomNotificationSetting"
|
||||
definitions={[
|
||||
{
|
||||
value: RoomNotifState.AllMessages,
|
||||
className: "mx_NotificationSettingsTab_defaultEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("Default")}
|
||||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{_t(
|
||||
"Get notifications as set up in your <a>settings</a>",
|
||||
{},
|
||||
{
|
||||
a: (sub) => (
|
||||
<AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onOpenSettingsClick}
|
||||
>
|
||||
{sub}
|
||||
</AccessibleButton>
|
||||
),
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: RoomNotifState.AllMessagesLoud,
|
||||
className: "mx_NotificationSettingsTab_allMessagesEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("All messages")}
|
||||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{_t("Get notified for every message")}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: RoomNotifState.MentionsOnly,
|
||||
className: "mx_NotificationSettingsTab_mentionsKeywordsEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("@mentions & keywords")}
|
||||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{_t(
|
||||
"Get notified only with mentions and keywords " +
|
||||
"as set up in your <a>settings</a>",
|
||||
{},
|
||||
{
|
||||
a: (sub) => (
|
||||
<AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onOpenSettingsClick}
|
||||
>
|
||||
{sub}
|
||||
</AccessibleButton>
|
||||
),
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: RoomNotifState.Mute,
|
||||
className: "mx_NotificationSettingsTab_noneEntry",
|
||||
label: (
|
||||
<>
|
||||
{_t("Off")}
|
||||
<div className="mx_NotificationSettingsTab_microCopy">
|
||||
{_t("You won't get any notifications")}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
onChange={this.onRoomNotificationChange}
|
||||
value={this.roomProps.notificationVolume}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3>{_t("Set a new custom sound")}</h3>
|
||||
<div className="mx_SettingsFlag">
|
||||
<form autoComplete="off" noValidate={true}>
|
||||
<input
|
||||
ref={this.soundUpload}
|
||||
className="mx_NotificationSound_soundUpload"
|
||||
type="file"
|
||||
onClick={chromeFileInputFix}
|
||||
onChange={this.onSoundUploadChanged}
|
||||
accept="audio/*"
|
||||
aria-label={_t("Upload custom sound")}
|
||||
/>
|
||||
</form>
|
||||
|
||||
{currentUploadedFile}
|
||||
<SettingsSubsection heading={_t("Sounds")}>
|
||||
<div>
|
||||
<div className="mx_SettingsTab_subsectionText">
|
||||
<span>
|
||||
{_t("Notification sound")}: <code>{this.state.currentSound}</code>
|
||||
</span>
|
||||
</div>
|
||||
<AccessibleButton
|
||||
className="mx_NotificationSound_resetSound"
|
||||
disabled={this.state.currentSound == "default"}
|
||||
onClick={this.clearSound}
|
||||
kind="primary"
|
||||
>
|
||||
{_t("Reset")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
<div>
|
||||
<h4>{_t("Set a new custom sound")}</h4>
|
||||
<div className="mx_SettingsFlag">
|
||||
<form autoComplete="off" noValidate={true}>
|
||||
<input
|
||||
ref={this.soundUpload}
|
||||
className="mx_NotificationSound_soundUpload"
|
||||
type="file"
|
||||
onClick={chromeFileInputFix}
|
||||
onChange={this.onSoundUploadChanged}
|
||||
accept="audio/*"
|
||||
aria-label={_t("Upload custom sound")}
|
||||
/>
|
||||
</form>
|
||||
|
||||
<AccessibleButton
|
||||
className="mx_NotificationSound_browse"
|
||||
onClick={this.triggerUploader}
|
||||
kind="primary"
|
||||
>
|
||||
{_t("Browse")}
|
||||
</AccessibleButton>
|
||||
{currentUploadedFile}
|
||||
</div>
|
||||
|
||||
<AccessibleButton
|
||||
className="mx_NotificationSound_save"
|
||||
disabled={this.state.uploadedFile == null}
|
||||
onClick={this.onClickSaveSound}
|
||||
kind="primary"
|
||||
>
|
||||
{_t("Save")}
|
||||
</AccessibleButton>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AccessibleButton
|
||||
className="mx_NotificationSound_browse"
|
||||
onClick={this.triggerUploader}
|
||||
kind="primary"
|
||||
>
|
||||
{_t("Browse")}
|
||||
</AccessibleButton>
|
||||
|
||||
<AccessibleButton
|
||||
className="mx_NotificationSound_save"
|
||||
disabled={this.state.uploadedFile == null}
|
||||
onClick={this.onClickSaveSound}
|
||||
kind="primary"
|
||||
>
|
||||
{_t("Save")}
|
||||
</AccessibleButton>
|
||||
<br />
|
||||
</div>
|
||||
</SettingsSubsection>
|
||||
</SettingsSection>
|
||||
</SettingsTab>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<IProps> {
|
|||
const canBanUsers = currentUserLevel >= banLevel;
|
||||
bannedUsersSection = (
|
||||
<SettingsFieldset legend={_t("Banned users")}>
|
||||
<ul>
|
||||
<ul className="mx_RolesRoomSettingsTab_bannedList">
|
||||
{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<IProps> {
|
|||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
<div className="mx_SettingsTab mx_RolesRoomSettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("Roles & Permissions")}</div>
|
||||
{privilegedUsersSection}
|
||||
{canChangeLevels && <AddPrivilegedUsers room={room} defaultUserLevel={defaultUserLevel} />}
|
||||
{mutedUsersSection}
|
||||
{bannedUsersSection}
|
||||
<SettingsFieldset
|
||||
legend={_t("Permissions")}
|
||||
description={
|
||||
isSpaceRoom
|
||||
? _t("Select the roles required to change various parts of the space")
|
||||
: _t("Select the roles required to change various parts of the room")
|
||||
}
|
||||
>
|
||||
{powerSelectors}
|
||||
{eventPowerSelectors}
|
||||
</SettingsFieldset>
|
||||
</div>
|
||||
<SettingsTab>
|
||||
<SettingsSection heading={_t("Roles & Permissions")}>
|
||||
{privilegedUsersSection}
|
||||
{canChangeLevels && <AddPrivilegedUsers room={room} defaultUserLevel={defaultUserLevel} />}
|
||||
{mutedUsersSection}
|
||||
{bannedUsersSection}
|
||||
<SettingsFieldset
|
||||
legend={_t("Permissions")}
|
||||
description={
|
||||
isSpaceRoom
|
||||
? _t("Select the roles required to change various parts of the space")
|
||||
: _t("Select the roles required to change various parts of the room")
|
||||
}
|
||||
>
|
||||
{powerSelectors}
|
||||
{eventPowerSelectors}
|
||||
</SettingsFieldset>
|
||||
</SettingsSection>
|
||||
</SettingsTab>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<IProps, ISt
|
|||
roomName: room.name,
|
||||
});
|
||||
|
||||
let advanced: JSX.Element | undefined;
|
||||
if (room.getJoinRule() === JoinRule.Public) {
|
||||
advanced = (
|
||||
<div>
|
||||
<AccessibleButton
|
||||
onClick={this.toggleAdvancedSection}
|
||||
kind="link"
|
||||
className="mx_SettingsTab_showAdvanced"
|
||||
aria-expanded={this.state.showAdvancedSection}
|
||||
>
|
||||
{this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")}
|
||||
</AccessibleButton>
|
||||
{this.state.showAdvancedSection && this.renderAdvanced()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsFieldset legend={_t("Access")} description={description}>
|
||||
<JoinRuleSettings
|
||||
|
|
@ -275,6 +294,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
promptUpgrade={true}
|
||||
aliasWarning={aliasWarning}
|
||||
/>
|
||||
{advanced}
|
||||
</SettingsFieldset>
|
||||
);
|
||||
}
|
||||
|
|
@ -399,7 +419,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
const canSetGuestAccess = state?.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mx_SecurityRoomSettingsTab_advancedSection">
|
||||
<LabelledToggleSwitch
|
||||
value={guestAccess === GuestAccess.CanJoin}
|
||||
onChange={this.onGuestAccessChange}
|
||||
|
|
@ -412,7 +432,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
"the room without having a registered account.",
|
||||
)}
|
||||
</p>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -437,45 +457,30 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
|
||||
const historySection = this.renderHistory();
|
||||
|
||||
let advanced: JSX.Element | undefined;
|
||||
if (room.getJoinRule() === JoinRule.Public) {
|
||||
advanced = (
|
||||
<div className="mx_SettingsTab_section">
|
||||
<AccessibleButton
|
||||
onClick={this.toggleAdvancedSection}
|
||||
kind="link"
|
||||
className="mx_SettingsTab_showAdvanced"
|
||||
aria-expanded={this.state.showAdvancedSection}
|
||||
>
|
||||
{this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")}
|
||||
</AccessibleButton>
|
||||
{this.state.showAdvancedSection && this.renderAdvanced()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
|
||||
<SettingsTab>
|
||||
<SettingsSection heading={_t("Security & Privacy")}>
|
||||
<SettingsFieldset
|
||||
legend={_t("Encryption")}
|
||||
description={_t("Once enabled, encryption cannot be disabled.")}
|
||||
>
|
||||
<LabelledToggleSwitch
|
||||
value={isEncrypted}
|
||||
onChange={this.onEncryptionChange}
|
||||
label={_t("Encrypted")}
|
||||
disabled={!canEnableEncryption}
|
||||
/>
|
||||
{encryptionSettings}
|
||||
</SettingsFieldset>
|
||||
|
||||
<SettingsFieldset
|
||||
legend={_t("Encryption")}
|
||||
description={_t("Once enabled, encryption cannot be disabled.")}
|
||||
>
|
||||
<LabelledToggleSwitch
|
||||
value={isEncrypted}
|
||||
onChange={this.onEncryptionChange}
|
||||
label={_t("Encrypted")}
|
||||
disabled={!canEnableEncryption}
|
||||
/>
|
||||
{encryptionSettings}
|
||||
</SettingsFieldset>
|
||||
{this.renderJoinRule()}
|
||||
{historySection}
|
||||
</SettingsSection>
|
||||
</SettingsTab>
|
||||
// <div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
|
||||
// <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
|
||||
|
||||
{this.renderJoinRule()}
|
||||
|
||||
{advanced}
|
||||
{historySection}
|
||||
</div>
|
||||
// </div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue