add toggle between font slider and custom setting

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

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>;
}

View file

@ -407,6 +407,9 @@
"Show info about bridges in room settings": "Show info about bridges in room settings",
"Show padlocks on invite only rooms": "Show padlocks on invite only rooms",
"Font size": "Font size",
"Min font size": "Min font size",
"Max font size": "Max font size",
"Custom font size": "Custom font size",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
"Use compact timeline layout": "Use compact timeline layout",
"Show a placeholder for removed messages": "Show a placeholder for removed messages",

View file

@ -187,6 +187,11 @@ export const SETTINGS = {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: 24,
},
"useCustomFontSize": {
displayName: _td("Custom font size"),
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: false,
},
"MessageComposerInput.suggestEmoji": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Enable Emoji suggestions while typing'),