imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Clean up font scaling appearance

Browse source
This commit is contained in:
Jorik Schellekens 2020-06-08 19:02:36 +01:00
parent 4b39ccbe26
commit b4bdb23f5f
2 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -43,3 +43,7 @@ limitations under the License.
padding-left: 20px; padding-left: 20px;
padding-right: 5px; padding-right: 5px;
} }
.mx_SettingsTab_customFontSizeField {
margin-left: calc($font-16px + 10px);
}

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

@ -281,7 +281,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
values={[13, 15, 16, 18, 20]} values={[13, 15, 16, 18, 20]}
value={parseInt(this.state.fontSize, 10)} value={parseInt(this.state.fontSize, 10)}
onSelectionChange={this.onFontSizeChanged} onSelectionChange={this.onFontSizeChanged}
displayFunc={value => ""} displayFunc={_ => ""}
disabled={this.state.useCustomFontSize} disabled={this.state.useCustomFontSize}
/> />
<div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div> <div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
@ -290,9 +290,10 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
name="useCustomFontSize" name="useCustomFontSize"
level={SettingLevel.ACCOUNT} level={SettingLevel.ACCOUNT}
onChange={(checked) => this.setState({useCustomFontSize: checked})} onChange={(checked) => this.setState({useCustomFontSize: checked})}
useCheckbox={true}
/> />
<Field <Field
type="text" type="number"
label={_t("Font size")} label={_t("Font size")}
autoComplete="off" autoComplete="off"
placeholder={this.state.fontSize.toString()} placeholder={this.state.fontSize.toString()}
@ -301,6 +302,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
onValidate={this.onValidateFontSize} onValidate={this.onValidateFontSize}
onChange={(value) => this.setState({fontSize: value.target.value})} onChange={(value) => this.setState({fontSize: value.target.value})}
disabled={!this.state.useCustomFontSize} disabled={!this.state.useCustomFontSize}
className="mx_SettingsTab_customFontSizeField"
/> />
</div>; </div>;
} }