From c0ac44e4711e55f32501365045e14576665a0aec Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 2 Jun 2020 17:10:22 +0100 Subject: [PATCH 1/5] Change internal font size from from 15 to 20. --- res/css/_common.scss | 2 +- res/css/_font-sizes.scss | 112 +++++++++++++-------------- src/settings/Settings.js | 2 +- src/settings/watchers/FontWatcher.ts | 3 +- 4 files changed, 60 insertions(+), 59 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index ebeeb381e6..c562c3e95f 100644 --- 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: 20px; } html { diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss index 2d7ab67e40..c4a223d66c 100644 --- 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.05rem; +$font-1-5px: 0.075rem; +$font-2px: 0.1rem; +$font-3px: 0.15rem; +$font-4px: 0.2rem; +$font-5px: 0.25rem; +$font-6px: 0.3rem; +$font-7px: 0.35rem; +$font-8px: 0.4rem; +$font-9px: 0.45rem; +$font-10px: 0.5rem; +$font-10-4px: 0.52rem; +$font-11px: 0.55rem; +$font-12px: 0.6rem; +$font-13px: 0.65rem; +$font-14px: 0.7rem; +$font-15px: 0.75rem; +$font-16px: 0.8rem; +$font-17px: 0.85rem; +$font-18px: 0.9rem; +$font-19px: 0.95rem; +$font-20px: 1.0rem; +$font-21px: 1.05rem; +$font-22px: 1.1rem; +$font-23px: 1.15rem; +$font-24px: 1.2rem; +$font-25px: 1.25rem; +$font-26px: 1.3rem; +$font-27px: 1.35rem; +$font-28px: 1.4rem; +$font-29px: 1.45rem; +$font-30px: 1.5rem; +$font-31px: 1.55rem; +$font-32px: 1.6rem; +$font-33px: 1.65rem; +$font-34px: 1.7rem; +$font-35px: 1.75rem; +$font-36px: 1.8rem; +$font-37px: 1.85rem; +$font-38px: 1.9rem; +$font-39px: 1.95rem; +$font-40px: 2.0rem; +$font-41px: 2.05rem; +$font-42px: 2.1rem; +$font-43px: 2.15rem; +$font-44px: 2.2rem; +$font-45px: 2.25rem; +$font-46px: 2.3rem; +$font-47px: 2.35rem; +$font-48px: 2.4rem; +$font-49px: 2.45rem; +$font-50px: 2.5rem; +$font-51px: 2.55rem; +$font-52px: 2.6rem; +$font-88px: 4.4rem; +$font-400px: 20rem; diff --git a/src/settings/Settings.js b/src/settings/Settings.js index e6aa112c5f..7cb4421a4f 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -180,7 +180,7 @@ export const SETTINGS = { "fontSize": { displayName: _td("Font size"), supportedLevels: LEVELS_ACCOUNT_SETTINGS, - default: 15, + default: 20, controller: new FontSizeController(), }, "useCustomFontSize": { diff --git a/src/settings/watchers/FontWatcher.ts b/src/settings/watchers/FontWatcher.ts index dce9e77e9e..08a809f869 100644 --- a/src/settings/watchers/FontWatcher.ts +++ b/src/settings/watchers/FontWatcher.ts @@ -45,7 +45,8 @@ export class FontWatcher implements IWatcher { }; private setRootFontSize = (size) => { - const fontSize = Math.max(Math.min(FontWatcher.MAX_SIZE, size), FontWatcher.MIN_SIZE); + // Externally we tell the user the font is size 15. Internally we use 20. + const fontSize = Math.max(Math.min(FontWatcher.MAX_SIZE, size), FontWatcher.MIN_SIZE) + 5; if (fontSize !== size) { SettingsStore.setValue("fontSize", null, SettingLevel.Device, fontSize); From f6504d67ba0a09379c1291a2000dac1dae9697aa Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 4 Jun 2020 16:23:28 +0100 Subject: [PATCH 2/5] Use 10px instead --- res/css/_common.scss | 2 +- res/css/_font-sizes.scss | 112 +++++++++++++-------------- src/settings/watchers/FontWatcher.ts | 4 +- 3 files changed, 59 insertions(+), 59 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index c562c3e95f..77a8ff9f4a 100644 --- 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: 20px; + font-size: 10px; } html { diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss index c4a223d66c..5b876ab11d 100644 --- 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.05rem; -$font-1-5px: 0.075rem; -$font-2px: 0.1rem; -$font-3px: 0.15rem; -$font-4px: 0.2rem; -$font-5px: 0.25rem; -$font-6px: 0.3rem; -$font-7px: 0.35rem; -$font-8px: 0.4rem; -$font-9px: 0.45rem; -$font-10px: 0.5rem; -$font-10-4px: 0.52rem; -$font-11px: 0.55rem; -$font-12px: 0.6rem; -$font-13px: 0.65rem; -$font-14px: 0.7rem; -$font-15px: 0.75rem; -$font-16px: 0.8rem; -$font-17px: 0.85rem; -$font-18px: 0.9rem; -$font-19px: 0.95rem; -$font-20px: 1.0rem; -$font-21px: 1.05rem; -$font-22px: 1.1rem; -$font-23px: 1.15rem; -$font-24px: 1.2rem; -$font-25px: 1.25rem; -$font-26px: 1.3rem; -$font-27px: 1.35rem; -$font-28px: 1.4rem; -$font-29px: 1.45rem; -$font-30px: 1.5rem; -$font-31px: 1.55rem; -$font-32px: 1.6rem; -$font-33px: 1.65rem; -$font-34px: 1.7rem; -$font-35px: 1.75rem; -$font-36px: 1.8rem; -$font-37px: 1.85rem; -$font-38px: 1.9rem; -$font-39px: 1.95rem; -$font-40px: 2.0rem; -$font-41px: 2.05rem; -$font-42px: 2.1rem; -$font-43px: 2.15rem; -$font-44px: 2.2rem; -$font-45px: 2.25rem; -$font-46px: 2.3rem; -$font-47px: 2.35rem; -$font-48px: 2.4rem; -$font-49px: 2.45rem; -$font-50px: 2.5rem; -$font-51px: 2.55rem; -$font-52px: 2.6rem; -$font-88px: 4.4rem; -$font-400px: 20rem; +$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/settings/watchers/FontWatcher.ts b/src/settings/watchers/FontWatcher.ts index 08a809f869..5d7c601fa1 100644 --- a/src/settings/watchers/FontWatcher.ts +++ b/src/settings/watchers/FontWatcher.ts @@ -45,8 +45,8 @@ export class FontWatcher implements IWatcher { }; private setRootFontSize = (size) => { - // Externally we tell the user the font is size 15. Internally we use 20. - const fontSize = Math.max(Math.min(FontWatcher.MAX_SIZE, size), FontWatcher.MIN_SIZE) + 5; + // 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; if (fontSize !== size) { SettingsStore.setValue("fontSize", null, SettingLevel.Device, fontSize); From 2ec47ecc743593ef816b1b7e7f7e903428b065f3 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 4 Jun 2020 17:50:56 +0100 Subject: [PATCH 3/5] 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 { 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): Promise => { @@ -151,7 +151,13 @@ export default class AppearanceUserSettingsTab extends React.Component { - // 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); } (document.querySelector(":root")).style.fontSize = toPx(fontSize); }; From bba6767608cea9444d927b02195794f48111c3f5 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 4 Jun 2020 18:00:22 +0100 Subject: [PATCH 4/5] Update displayed min and max --- .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 9b77493c4f..2b58e0e28e 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -137,8 +137,8 @@ export default class AppearanceUserSettingsTab extends React.Component): Promise => { 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")}; From f3011f00f78a3de7a34868fc506b462472154b7c Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 4 Jun 2020 19:43:35 +0100 Subject: [PATCH 5/5] Remove debug --- src/settings/watchers/FontWatcher.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/settings/watchers/FontWatcher.ts b/src/settings/watchers/FontWatcher.ts index 1eb0af9f3e..05c707a57b 100644 --- a/src/settings/watchers/FontWatcher.ts +++ b/src/settings/watchers/FontWatcher.ts @@ -47,7 +47,6 @@ export class FontWatcher implements IWatcher { }; private setRootFontSize = (size) => { - console.log({size}) const fontSize = Math.max(Math.min(FontWatcher.MAX_SIZE, size), FontWatcher.MIN_SIZE); if (fontSize !== size) {