Merge pull request #4725 from matrix-org/joriks/font-scaling-unit-change

Change internal font size from from 15 to 10
matrix-org · Jun 8, 2020 · 349d7a5 · 349d7a5
2 parents b35cde4 + 2fe7c37
commit 349d7a5
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 68 deletions.
diff --git a/res/css/_common.scss b/res/css/_common.scss
@@ -19,7 +19,7 @@ limitations under the License.
 @import "./_font-sizes.scss";
 
 :root {
-    font-size: 15px;
+    font-size: 10px;
 }
 
 html {

diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss
@@ -14,59 +14,59 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$font-1px: 0.067rem;
-$font-1-5px: 0.100rem;
-$font-2px: 0.133rem;
-$font-3px: 0.200rem;
-$font-4px: 0.267rem;
-$font-5px: 0.333rem;
-$font-6px: 0.400rem;
-$font-7px: 0.467rem;
-$font-8px: 0.533rem;
-$font-9px: 0.600rem;
-$font-10px: 0.667rem;
-$font-10-4px: 0.693rem;
-$font-11px: 0.733rem;
-$font-12px: 0.800rem;
-$font-13px: 0.867rem;
-$font-14px: 0.933rem;
-$font-15px: 1.000rem;
-$font-16px: 1.067rem;
-$font-17px: 1.133rem;
-$font-18px: 1.200rem;
-$font-19px: 1.267rem;
-$font-20px: 1.3333333rem;
-$font-21px: 1.400rem;
-$font-22px: 1.467rem;
-$font-23px: 1.533rem;
-$font-24px: 1.600rem;
-$font-25px: 1.667rem;
-$font-26px: 1.733rem;
-$font-27px: 1.800rem;
-$font-28px: 1.867rem;
-$font-29px: 1.933rem;
-$font-30px: 2.000rem;
-$font-31px: 2.067rem;
-$font-32px: 2.133rem;
-$font-33px: 2.200rem;
-$font-34px: 2.267rem;
-$font-35px: 2.333rem;
-$font-36px: 2.400rem;
-$font-37px: 2.467rem;
-$font-38px: 2.533rem;
-$font-39px: 2.600rem;
-$font-40px: 2.667rem;
-$font-41px: 2.733rem;
-$font-42px: 2.800rem;
-$font-43px: 2.867rem;
-$font-44px: 2.933rem;
-$font-45px: 3.000rem;
-$font-46px: 3.067rem;
-$font-47px: 3.133rem;
-$font-48px: 3.200rem;
-$font-49px: 3.267rem;
-$font-50px: 3.333rem;
-$font-51px: 3.400rem;
-$font-52px: 3.467rem;
-$font-88px: 5.887rem;
-$font-400px: 26.667rem;
+$font-1px: 0.1rem;
+$font-1-5px: 0.15rem;
+$font-2px: 0.2rem;
+$font-3px: 0.3rem;
+$font-4px: 0.4rem;
+$font-5px: 0.5rem;
+$font-6px: 0.6rem;
+$font-7px: 0.7rem;
+$font-8px: 0.8rem;
+$font-9px: 0.9rem;
+$font-10px: 1.0rem;
+$font-10-4px: 1.04rem;
+$font-11px: 1.1rem;
+$font-12px: 1.2rem;
+$font-13px: 1.3rem;
+$font-14px: 1.4rem;
+$font-15px: 1.5rem;
+$font-16px: 1.6rem;
+$font-17px: 1.7rem;
+$font-18px: 1.8rem;
+$font-19px: 1.9rem;
+$font-20px: 2.0rem;
+$font-21px: 2.1rem;
+$font-22px: 2.2rem;
+$font-23px: 2.3rem;
+$font-24px: 2.4rem;
+$font-25px: 2.5rem;
+$font-26px: 2.6rem;
+$font-27px: 2.7rem;
+$font-28px: 2.8rem;
+$font-29px: 2.9rem;
+$font-30px: 3.0rem;
+$font-31px: 3.1rem;
+$font-32px: 3.2rem;
+$font-33px: 3.3rem;
+$font-34px: 3.4rem;
+$font-35px: 3.5rem;
+$font-36px: 3.6rem;
+$font-37px: 3.7rem;
+$font-38px: 3.8rem;
+$font-39px: 3.9rem;
+$font-40px: 4.0rem;
+$font-41px: 4.1rem;
+$font-42px: 4.2rem;
+$font-43px: 4.3rem;
+$font-44px: 4.4rem;
+$font-45px: 4.5rem;
+$font-46px: 4.6rem;
+$font-47px: 4.7rem;
+$font-48px: 4.8rem;
+$font-49px: 4.9rem;
+$font-50px: 5.0rem;
+$font-51px: 5.1rem;
+$font-52px: 5.2rem;
+$font-88px: 8.8rem;
+$font-400px: 40rem;
diff --git 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,13 +132,13 @@ 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> => {
         const parsedSize = parseFloat(value);
-        const min = FontWatcher.MIN_SIZE;
-        const max = FontWatcher.MAX_SIZE;
+        const min = FontWatcher.MIN_SIZE + FontWatcher.SIZE_DIFF;
+        const max = FontWatcher.MAX_SIZE + FontWatcher.SIZE_DIFF;
 
         if (isNaN(parsedSize)) {
             return {valid: false, feedback: _t("Size must be a number")};
@@ -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
@@ -170,10 +170,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: 15,
+        default: 10,
         controller: new FontSizeController(),
     },
     "useCustomFontSize": {

diff --git 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);
     }
 
@@ -48,7 +50,7 @@ export class FontWatcher implements IWatcher {
         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);
     };