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 2021-12-09 18:44:22 +01:00 committed by GitHub
parent cba92c0e90
commit 2e3f225520
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 385 additions and 147 deletions

View file

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