add toggle between font slider and custom setting

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js

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

src/i18n/strings/en_EN.json

@@ -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",

src/settings/Settings.js

@@ -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'),