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 { SettingLevel } from "../../../settings/SettingLevel";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { Room } from "matrix-js-sdk/src/models/room";
import SettingsFlag from "../elements/SettingsFlag";
import SettingsFieldset from '../settings/SettingsFieldset';
interface IProps {
room: Room;
@ -96,18 +97,19 @@ export default class UrlPreviewSettings extends React.Component<IProps> {
roomId={roomId} />
);
return (
<div>
<div className='mx_SettingsTab_subsectionText'>
{ _t('When someone puts a URL in their message, a URL preview can be shown to give more ' +
const description = <>
<p>
{ _t('When someone puts a URL in their message, a URL preview can be shown to give more ' +
'information about that link such as the title, description, and an image from the website.') }
</div>
<div className='mx_SettingsTab_subsectionText'>
{ previewsForAccount }
</div>
</p>
<p>{ previewsForAccount }</p>
</>;
return (
<SettingsFieldset legend={_t("URL Previews")} description={description}>
{ previewsForRoom }
<label>{ previewsForRoomAccount }</label>
</div>
</SettingsFieldset>
);
}
}