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

add toggle between font slider and custom setting

Browse source
This commit is contained in:
Jorik Schellekens 2020-04-23 12:09:08 +01:00
parent a83993f1ff
commit c86638c667
3 changed files with 17 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
View file

@ -36,7 +36,7 @@ export default class StyleUserSettingsTab extends React.Component {
...this._calculateThemeState(),
customThemeUrl: "",
customThemeMessage: {isError: false, text: ""},
useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
};
}
@ -224,6 +224,7 @@ export default class StyleUserSettingsTab extends React.Component {
}
_renderFontSection() {
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<div className="mx_AppearanceUserSettingsTab_fontSlider">
@ -233,10 +234,15 @@ export default class StyleUserSettingsTab extends React.Component {
value={this.state.fontSize}
onSelectionChange={this._onFontSizeChanged}
displayFunc={value => {}}
disabled={false}
disabled={this.state.useCustomFontSize}
/>
<div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
</div>
<SettingsFlag
name="useCustomFontSize"
level={SettingLevel.ACCOUNT}
onChange={(checked)=> this.setState({useCustomFontSize: checked})}
/>
<Field
type="text"
label={_t("Font size")}
@ -245,6 +251,7 @@ export default class StyleUserSettingsTab extends React.Component {
value={this.state.fontSize}
id="font_size_field"
onChange={(ev) => this._onFontSizeChanged(ev.target.value)}
disabled={!this.state.useCustomFontSize}
/>
</div>;
}