From c86638c667d023abccb1250825e5c17e1070991c Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 23 Apr 2020 12:09:08 +0100
Subject: [PATCH] add toggle between font slider and custom setting

---
 .../settings/tabs/user/AppearanceUserSettingsTab.js   | 11 +++++++++--
 src/i18n/strings/en_EN.json                           |  3 +++
 src/settings/Settings.js                              |  5 +++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 949b3bed31..ceb3241b8b 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/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>;
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a3051cbb91..2c3239900d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index b144b07e84..e0e34179f3 100644
--- a/src/settings/Settings.js
+++ b/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'),