PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Improve security room settings tab style rules (#8844)

Browse source 
* Fix position of 'Show Advanced' on security room settings tab

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use flex to ensure alignment of the warning icon and message

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove an obsolete style block

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-05 14:24:26 +00:00 committed by GitHub
parent bdc05ec268
commit f45e8ad486
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
View file

@ -16,24 +16,12 @@ limitations under the License.
.mx_SecurityRoomSettingsTab { .mx_SecurityRoomSettingsTab {
.mx_SettingsTab_showAdvanced { .mx_SettingsTab_showAdvanced {
padding: 0; margin-bottom: $spacing-16;
margin-bottom: 16px; }
.mx_SecurityRoomSettingsTab_warning {
display: flex;
align-items: center;
column-gap: $spacing-4;
} }
} }
.mx_SecurityRoomSettingsTab_warning {
display: block;
img {
vertical-align: middle;
margin-right: 5px;
margin-left: 3px;
margin-bottom: 5px;
}
}
.mx_SecurityRoomSettingsTab_encryptionSection {
padding-bottom: 24px;
border-bottom: 1px solid $quinary-content;
margin-bottom: 32px;
}

8
src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
View file

@ -355,7 +355,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const state = client.getRoom(this.props.roomId).currentState; const state = client.getRoom(this.props.roomId).currentState;
const canSetGuestAccess = state.mayClientSendStateEvent(EventType.RoomGuestAccess, client); const canSetGuestAccess = state.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
return <div className="mx_SettingsTab_section"> return <>
<LabelledToggleSwitch <LabelledToggleSwitch
value={guestAccess === GuestAccess.CanJoin} value={guestAccess === GuestAccess.CanJoin}
onChange={this.onGuestAccessChange} onChange={this.onGuestAccessChange}
@ -366,7 +366,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
{ _t("People with supported clients will be able to join " + { _t("People with supported clients will be able to join " +
"the room without having a registered account.") } "the room without having a registered account.") }
</p> </p>
</div>; </>;
} }
render() { render() {
@ -391,7 +391,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
let advanced; let advanced;
if (room.getJoinRule() === JoinRule.Public) { if (room.getJoinRule() === JoinRule.Public) {
advanced = ( advanced = (
<> <div className="mx_SettingsTab_section">
<AccessibleButton <AccessibleButton
onClick={this.toggleAdvancedSection} onClick={this.toggleAdvancedSection}
kind="link" kind="link"
@ -400,7 +400,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
{ this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") } { this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") }
</AccessibleButton> </AccessibleButton>
{ this.state.showAdvancedSection && this.renderAdvanced() } { this.state.showAdvancedSection && this.renderAdvanced() }
</> </div>
); );
} }