mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 17:56:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

Move compact checkbox

Browse source
This commit is contained in:
Jorik Schellekens 2020-06-24 16:06:50 +01:00
parent fc61145c11
commit 0638b94cc2
5 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
View file

@ -209,9 +209,15 @@ limitations under the License.
}
.mx_AppearanceUserSettingsTab_Advanced {
color: $primary-fg-color;
> * {
margin-bottom: 16px;
}
.mx_AppearanceUserSettingsTab_AdvancedToggle {
color: $accent-color;
margin-bottom: 16px;
cursor: pointer;
}
.mx_AppearanceUserSettingsTab_systemFont {

14
src/components/views/elements/SettingsFlag.tsx
View file

@ -30,6 +30,7 @@ interface IProps {
isExplicit?: boolean;
// XXX: once design replaces all toggles make this the default
useCheckbox?: boolean;
disabled?: boolean;
onChange?(checked: boolean): void;
}
@ -78,14 +79,23 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
else label = _t(label);
if (this.props.useCheckbox) {
return <StyledCheckbox checked={this.state.value} onChange={this.checkBoxOnChange} disabled={!canChange} >
return <StyledCheckbox
checked={this.state.value}
onChange={this.checkBoxOnChange}
disabled={this.props.disabled || !canChange}
>
{label}
</StyledCheckbox>;
} else {
return (
<div className="mx_SettingsFlag">
<span className="mx_SettingsFlag_label">{label}</span>
<ToggleSwitch checked={this.state.value} onChange={this.onChange} disabled={!canChange} aria-label={label} />
<ToggleSwitch
checked={this.state.value}
onChange={this.onChange}
disabled={this.props.disabled || !canChange}
aria-label={label}
/>
</div>
);
}

10
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View file

@ -391,7 +391,13 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
let advanced: React.ReactNode;
if (this.state.showAdvanced) {
advanced = <div>
advanced = <>
<SettingsFlag
name="useCompactLayout"
level={SettingLevel.DEVICE}
useCheckbox={true}
disabled={this.state.useIRCLayout}
/>
<SettingsFlag
name="useSystemFont"
level={SettingLevel.DEVICE}
@ -413,7 +419,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
disabled={!this.state.useSystemFont}
value={this.state.systemFont}
/>
</div>;
</>;
}
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced">
{toggle}

2
src/i18n/strings/en_EN.json
View file

@ -441,7 +441,7 @@
"Font size": "Font size",
"Use custom size": "Use custom size",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
"Use compact timeline layout": "Use compact timeline layout",
"Use a more compact ‘Modern’ layout": "Use a more compact ‘Modern’ layout",
"Show a placeholder for removed messages": "Show a placeholder for removed messages",
"Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",
"Show avatar changes": "Show avatar changes",

2
src/settings/Settings.js
View file

@ -197,7 +197,7 @@ export const SETTINGS = {
},
"useCompactLayout": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Use compact timeline layout'),
displayName: _td('Use a more compact ‘Modern’ layout'),
default: false,
},
"showRedactions": {