From 2ec47ecc743593ef816b1b7e7f7e903428b065f3 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 4 Jun 2020 17:50:56 +0100
Subject: [PATCH] Use different setting flag print expected values

---
 .../tabs/user/AppearanceUserSettingsTab.tsx        | 12 +++++++++---
 src/settings/Settings.js                           |  4 ++--
 src/settings/watchers/FontWatcher.ts               | 14 ++++++++------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index bcd87b290a..9b77493c4f 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -62,7 +62,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         super(props);
 
         this.state = {
-            fontSize: SettingsStore.getValue("fontSize", null).toString(),
+            fontSize: (SettingsStore.getValue("baseFontSize", null) + FontWatcher.SIZE_DIFF).toString(),
             ...this.calculateThemeState(),
             customThemeUrl: "",
             customThemeMessage: {isError: false, text: ""},
@@ -132,7 +132,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     private onFontSizeChanged = (size: number): void => {
         this.setState({fontSize: size.toString()});
-        SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, size);
+        SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, size - FontWatcher.SIZE_DIFF);
     };
 
     private onValidateFontSize = async ({value}: Pick<IFieldState, "value">): Promise<IValidationResult> => {
@@ -151,7 +151,13 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             };
         }
 
-        SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, value);
+        SettingsStore.setValue(
+            "baseFontSize",
+            null,
+            SettingLevel.DEVICE,
+            parseInt(value, 10) - FontWatcher.SIZE_DIFF
+        );
+
         return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
     }
 
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 7cb4421a4f..da80a041bd 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -177,10 +177,10 @@ export const SETTINGS = {
         displayName: _td("Show info about bridges in room settings"),
         default: false,
     },
-    "fontSize": {
+    "baseFontSize": {
         displayName: _td("Font size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        default: 20,
+        default: 10,
         controller: new FontSizeController(),
     },
     "useCustomFontSize": {
diff --git a/src/settings/watchers/FontWatcher.ts b/src/settings/watchers/FontWatcher.ts
index 5d7c601fa1..1eb0af9f3e 100644
--- a/src/settings/watchers/FontWatcher.ts
+++ b/src/settings/watchers/FontWatcher.ts
@@ -20,8 +20,10 @@ import IWatcher from "./Watcher";
 import { toPx } from '../../utils/units';
 
 export class FontWatcher implements IWatcher {
-    public static readonly MIN_SIZE = 13;
-    public static readonly MAX_SIZE = 20;
+    public static readonly MIN_SIZE = 8;
+    public static readonly MAX_SIZE = 15;
+    // Externally we tell the user the font is size 15. Internally we use 10.
+    public static readonly SIZE_DIFF = 5;
 
     private dispatcherRef: string;
 
@@ -30,7 +32,7 @@ export class FontWatcher implements IWatcher {
     }
 
     public start() {
-        this.setRootFontSize(SettingsStore.getValue("fontSize"));
+        this.setRootFontSize(SettingsStore.getValue("baseFontSize") + FontWatcher.SIZE_DIFF);
         this.dispatcherRef = dis.register(this.onAction);
     }
 
@@ -45,11 +47,11 @@ export class FontWatcher implements IWatcher {
     };
 
     private setRootFontSize = (size) => {
-        // Externally we tell the user the font is size 15. Internally we use 10.
-        const fontSize = Math.max(Math.min(FontWatcher.MAX_SIZE, size), FontWatcher.MIN_SIZE) - 5;
+        console.log({size})
+        const fontSize = Math.max(Math.min(FontWatcher.MAX_SIZE, size), FontWatcher.MIN_SIZE);
 
         if (fontSize !== size) {
-            SettingsStore.setValue("fontSize", null, SettingLevel.Device, fontSize);
+            SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, fontSize);
         }
         (<HTMLElement>document.querySelector(":root")).style.fontSize = toPx(fontSize);
     };