Put room settings form elements in fieldsets (#7311)
* override default fieldset styles Signed-off-by: Kerry Archibald <kerrya@element.io> * SettingsFieldset component Signed-off-by: Kerry Archibald <kerrya@element.io> * test settings fieldset Signed-off-by: Kerry Archibald <kerrya@element.io> * refactor SettingsFlag styles * use SettingsFieldset in room > securit settings * use fieldset in urlpreviewsettings Signed-off-by: Kerry Archibald <kerrya@element.io> * use SettingsFieldset in AliasSettings Signed-off-by: Kerry Archibald <kerrya@element.io> * fieldset in room > roles settings Signed-off-by: Kerry Archibald <kerrya@element.io> * css lint Signed-off-by: Kerry Archibald <kerrya@element.io> * run i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * fussy order Signed-off-by: Kerry Archibald <kerrya@element.io> * default export Signed-off-by: Kerry Archibald <kerrya@element.io> * fix copyright headers Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
cba92c0e90
commit
2e3f225520
16 changed files with 385 additions and 147 deletions
|
|
@ -66,15 +66,9 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
|
|||
const canChangeGroups = room.currentState.mayClientSendStateEvent("m.room.related_groups", client);
|
||||
const groupsEvent = room.currentState.getStateEvents("m.room.related_groups", "");
|
||||
|
||||
let urlPreviewSettings = <>
|
||||
<span className='mx_SettingsTab_subheading'>{ _t("URL Previews") }</span>
|
||||
<div className='mx_SettingsTab_section'>
|
||||
<UrlPreviewSettings room={room} />
|
||||
</div>
|
||||
</>;
|
||||
if (!SettingsStore.getValue(UIFeature.URLPreviews)) {
|
||||
urlPreviewSettings = null;
|
||||
}
|
||||
const urlPreviewSettings = SettingsStore.getValue(UIFeature.URLPreviews) ?
|
||||
<UrlPreviewSettings room={room} /> :
|
||||
null;
|
||||
|
||||
let flairSection;
|
||||
if (SettingsStore.getValue(UIFeature.Flair)) {
|
||||
|
|
@ -110,14 +104,12 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
|
|||
</div>
|
||||
|
||||
<div className="mx_SettingsTab_heading">{ _t("Room Addresses") }</div>
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
<AliasSettings
|
||||
roomId={this.props.roomId}
|
||||
canSetCanonicalAlias={canSetCanonical}
|
||||
canSetAliases={canSetAliases}
|
||||
canonicalAliasEvent={canonicalAliasEv}
|
||||
/>
|
||||
</div>
|
||||
<AliasSettings
|
||||
roomId={this.props.roomId}
|
||||
canSetCanonicalAlias={canSetCanonical}
|
||||
canSetAliases={canSetAliases}
|
||||
canonicalAliasEvent={canonicalAliasEv}
|
||||
/>
|
||||
<div className="mx_SettingsTab_heading">{ _t("Other") }</div>
|
||||
{ flairSection }
|
||||
{ urlPreviewSettings }
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import { RoomState } from "matrix-js-sdk/src/models/room-state";
|
|||
import { compare } from "../../../../../utils/strings";
|
||||
import ErrorDialog from '../../../dialogs/ErrorDialog';
|
||||
import PowerSelector from "../../../elements/PowerSelector";
|
||||
import SettingsFieldset from '../../SettingsFieldset';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import SettingsStore from "../../../../../settings/SettingsStore";
|
||||
|
|
@ -345,17 +346,15 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
|
|||
|
||||
if (privilegedUsers.length) {
|
||||
privilegedUsersSection =
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
<div className='mx_SettingsTab_subheading'>{ _t('Privileged Users') }</div>
|
||||
{ privilegedUsers }
|
||||
</div>;
|
||||
<SettingsFieldset legend={_t('Privileged Users')}>
|
||||
{ privilegedUsers }
|
||||
</SettingsFieldset>;
|
||||
}
|
||||
if (mutedUsers.length) {
|
||||
mutedUsersSection =
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
<div className='mx_SettingsTab_subheading'>{ _t('Muted Users') }</div>
|
||||
<SettingsFieldset legend={_t('Muted Users')}>
|
||||
{ mutedUsers }
|
||||
</div>;
|
||||
</SettingsFieldset>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -364,8 +363,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
|
|||
if (banned.length) {
|
||||
const canBanUsers = currentUserLevel >= banLevel;
|
||||
bannedUsersSection =
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
<div className='mx_SettingsTab_subheading'>{ _t('Banned users') }</div>
|
||||
<SettingsFieldset legend={_t('Banned users')}>
|
||||
<ul>
|
||||
{ banned.map((member) => {
|
||||
const banEvent = member.events.member.getContent();
|
||||
|
|
@ -383,7 +381,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
|
|||
);
|
||||
}) }
|
||||
</ul>
|
||||
</div>;
|
||||
</SettingsFieldset>;
|
||||
}
|
||||
|
||||
const powerSelectors = Object.keys(powerLevelDescriptors).map((key, index) => {
|
||||
|
|
@ -452,15 +450,17 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
|
|||
{ privilegedUsersSection }
|
||||
{ mutedUsersSection }
|
||||
{ bannedUsersSection }
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
<span className='mx_SettingsTab_subheading'>{ _t("Permissions") }</span>
|
||||
<p>{ 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')
|
||||
}</p>
|
||||
<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 }
|
||||
</div>
|
||||
</SettingsFieldset>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ import createRoom, { IOpts } from '../../../../../createRoom';
|
|||
import CreateRoomDialog from '../../../dialogs/CreateRoomDialog';
|
||||
import JoinRuleSettings from "../../JoinRuleSettings";
|
||||
import ErrorDialog from "../../../dialogs/ErrorDialog";
|
||||
import SettingsFieldset from '../../SettingsFieldset';
|
||||
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
|
|
@ -265,14 +266,11 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
</div>
|
||||
);
|
||||
}
|
||||
const description = _t("Decide who can join %(roomName)s.", {
|
||||
roomName: room?.name,
|
||||
});
|
||||
|
||||
return <div className="mx_SecurityRoomSettingsTab_joinRule">
|
||||
<div className="mx_SettingsTab_subsectionText">
|
||||
<span>{ _t("Decide who can join %(roomName)s.", {
|
||||
roomName: room?.name,
|
||||
}) }</span>
|
||||
</div>
|
||||
|
||||
return <SettingsFieldset legend={_t("Access")} description={description}>
|
||||
{ aliasWarning }
|
||||
|
||||
<JoinRuleSettings
|
||||
|
|
@ -282,7 +280,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
closeSettingsFn={this.props.closeSettingsFn}
|
||||
promptUpgrade={true}
|
||||
/>
|
||||
</div>;
|
||||
</SettingsFieldset>;
|
||||
}
|
||||
|
||||
private onJoinRuleChangeError = (error: Error) => {
|
||||
|
|
@ -330,6 +328,10 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
};
|
||||
|
||||
private renderHistory() {
|
||||
if (!SettingsStore.getValue(UIFeature.RoomHistorySettings)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const client = MatrixClientPeg.get();
|
||||
const history = this.state.history;
|
||||
const state = client.getRoom(this.props.roomId).currentState;
|
||||
|
|
@ -358,21 +360,18 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{ _t('Changes to who can read history will only apply to future messages in this room. ' +
|
||||
'The visibility of existing history will be unchanged.') }
|
||||
</div>
|
||||
<StyledRadioGroup
|
||||
name="historyVis"
|
||||
value={history}
|
||||
onChange={this.onHistoryRadioToggle}
|
||||
disabled={!canChangeHistory}
|
||||
definitions={options}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const description = _t('Changes to who can read history will only apply to future messages in this room. ' +
|
||||
'The visibility of existing history will be unchanged.');
|
||||
|
||||
return (<SettingsFieldset legend={_t("Who can read history?")} description={description}>
|
||||
<StyledRadioGroup
|
||||
name="historyVis"
|
||||
value={history}
|
||||
onChange={this.onHistoryRadioToggle}
|
||||
disabled={!canChangeHistory}
|
||||
definitions={options}
|
||||
/>
|
||||
</SettingsFieldset>);
|
||||
}
|
||||
|
||||
private toggleAdvancedSection = () => {
|
||||
|
|
@ -416,15 +415,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
/>;
|
||||
}
|
||||
|
||||
let historySection = (<>
|
||||
<span className='mx_SettingsTab_subheading'>{ _t("Who can read history?") }</span>
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
{ this.renderHistory() }
|
||||
</div>
|
||||
</>);
|
||||
if (!SettingsStore.getValue(UIFeature.RoomHistorySettings)) {
|
||||
historySection = null;
|
||||
}
|
||||
const historySection = this.renderHistory();
|
||||
|
||||
let advanced;
|
||||
if (room.getJoinRule() === JoinRule.Public) {
|
||||
|
|
@ -446,26 +437,17 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
<div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{ _t("Security & Privacy") }</div>
|
||||
|
||||
<span className='mx_SettingsTab_subheading'>{ _t("Encryption") }</span>
|
||||
<div className='mx_SettingsTab_section mx_SecurityRoomSettingsTab_encryptionSection'>
|
||||
<div>
|
||||
<div className='mx_SettingsTab_subsectionText'>
|
||||
<span>{ _t("Once enabled, encryption cannot be disabled.") }</span>
|
||||
</div>
|
||||
<LabelledToggleSwitch
|
||||
value={isEncrypted}
|
||||
onChange={this.onEncryptionChange}
|
||||
label={_t("Encrypted")}
|
||||
disabled={!canEnableEncryption}
|
||||
/>
|
||||
</div>
|
||||
<SettingsFieldset legend={_t("Encryption")} description={_t("Once enabled, encryption cannot be disabled.")}>
|
||||
<LabelledToggleSwitch
|
||||
value={isEncrypted}
|
||||
onChange={this.onEncryptionChange}
|
||||
label={_t("Encrypted")}
|
||||
disabled={!canEnableEncryption}
|
||||
/>
|
||||
{ encryptionSettings }
|
||||
</div>
|
||||
</SettingsFieldset>
|
||||
|
||||
<span className='mx_SettingsTab_subheading'>{ _t("Access") }</span>
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
{ this.renderJoinRule() }
|
||||
</div>
|
||||
{ this.renderJoinRule() }
|
||||
|
||||
{ advanced }
|
||||
{ historySection }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue