PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Change internal font size from from 15 to 10
This commit is contained in:
Jorik Schellekens 2020-06-08 13:46:04 +01:00 committed by GitHub
commit 349d7a5700
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 76 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.scss
View file

@ -19,7 +19,7 @@ limitations under the License.
@import "./_font-sizes.scss"; @import "./_font-sizes.scss";
:root { :root {
font-size: 15px; font-size: 10px;
} }
html { html {

112
res/css/_font-sizes.scss
View file

@ -14,59 +14,59 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$font-1px: 0.067rem; $font-1px: 0.1rem;
$font-1-5px: 0.100rem; $font-1-5px: 0.15rem;
$font-2px: 0.133rem; $font-2px: 0.2rem;
$font-3px: 0.200rem; $font-3px: 0.3rem;
$font-4px: 0.267rem; $font-4px: 0.4rem;
$font-5px: 0.333rem; $font-5px: 0.5rem;
$font-6px: 0.400rem; $font-6px: 0.6rem;
$font-7px: 0.467rem; $font-7px: 0.7rem;
$font-8px: 0.533rem; $font-8px: 0.8rem;
$font-9px: 0.600rem; $font-9px: 0.9rem;
$font-10px: 0.667rem; $font-10px: 1.0rem;
$font-10-4px: 0.693rem; $font-10-4px: 1.04rem;
$font-11px: 0.733rem; $font-11px: 1.1rem;
$font-12px: 0.800rem; $font-12px: 1.2rem;
$font-13px: 0.867rem; $font-13px: 1.3rem;
$font-14px: 0.933rem; $font-14px: 1.4rem;
$font-15px: 1.000rem; $font-15px: 1.5rem;
$font-16px: 1.067rem; $font-16px: 1.6rem;
$font-17px: 1.133rem; $font-17px: 1.7rem;
$font-18px: 1.200rem; $font-18px: 1.8rem;
$font-19px: 1.267rem; $font-19px: 1.9rem;
$font-20px: 1.3333333rem; $font-20px: 2.0rem;
$font-21px: 1.400rem; $font-21px: 2.1rem;
$font-22px: 1.467rem; $font-22px: 2.2rem;
$font-23px: 1.533rem; $font-23px: 2.3rem;
$font-24px: 1.600rem; $font-24px: 2.4rem;
$font-25px: 1.667rem; $font-25px: 2.5rem;
$font-26px: 1.733rem; $font-26px: 2.6rem;
$font-27px: 1.800rem; $font-27px: 2.7rem;
$font-28px: 1.867rem; $font-28px: 2.8rem;
$font-29px: 1.933rem; $font-29px: 2.9rem;
$font-30px: 2.000rem; $font-30px: 3.0rem;
$font-31px: 2.067rem; $font-31px: 3.1rem;
$font-32px: 2.133rem; $font-32px: 3.2rem;
$font-33px: 2.200rem; $font-33px: 3.3rem;
$font-34px: 2.267rem; $font-34px: 3.4rem;
$font-35px: 2.333rem; $font-35px: 3.5rem;
$font-36px: 2.400rem; $font-36px: 3.6rem;
$font-37px: 2.467rem; $font-37px: 3.7rem;
$font-38px: 2.533rem; $font-38px: 3.8rem;
$font-39px: 2.600rem; $font-39px: 3.9rem;
$font-40px: 2.667rem; $font-40px: 4.0rem;
$font-41px: 2.733rem; $font-41px: 4.1rem;
$font-42px: 2.800rem; $font-42px: 4.2rem;
$font-43px: 2.867rem; $font-43px: 4.3rem;
$font-44px: 2.933rem; $font-44px: 4.4rem;
$font-45px: 3.000rem; $font-45px: 4.5rem;
$font-46px: 3.067rem; $font-46px: 4.6rem;
$font-47px: 3.133rem; $font-47px: 4.7rem;
$font-48px: 3.200rem; $font-48px: 4.8rem;
$font-49px: 3.267rem; $font-49px: 4.9rem;
$font-50px: 3.333rem; $font-50px: 5.0rem;
$font-51px: 3.400rem; $font-51px: 5.1rem;
$font-52px: 3.467rem; $font-52px: 5.2rem;
$font-88px: 5.887rem; $font-88px: 8.8rem;
$font-400px: 26.667rem; $font-400px: 40rem;

16
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View file

@ -62,7 +62,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
super(props); super(props);
this.state = { this.state = {
fontSize: SettingsStore.getValue("fontSize", null).toString(), fontSize: (SettingsStore.getValue("baseFontSize", null) + FontWatcher.SIZE_DIFF).toString(),
...this.calculateThemeState(), ...this.calculateThemeState(),
customThemeUrl: "", customThemeUrl: "",
customThemeMessage: {isError: false, text: ""}, customThemeMessage: {isError: false, text: ""},
@ -132,13 +132,13 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
private onFontSizeChanged = (size: number): void => { private onFontSizeChanged = (size: number): void => {
this.setState({fontSize: size.toString()}); 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> => { private onValidateFontSize = async ({value}: Pick<IFieldState, "value">): Promise<IValidationResult> => {
const parsedSize = parseFloat(value); const parsedSize = parseFloat(value);
const min = FontWatcher.MIN_SIZE; const min = FontWatcher.MIN_SIZE + FontWatcher.SIZE_DIFF;
const max = FontWatcher.MAX_SIZE; const max = FontWatcher.MAX_SIZE + FontWatcher.SIZE_DIFF;
if (isNaN(parsedSize)) { if (isNaN(parsedSize)) {
return {valid: false, feedback: _t("Size must be a number")}; 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})}; return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
} }

4
src/settings/Settings.js
View file

@ -170,10 +170,10 @@ export const SETTINGS = {
displayName: _td("Show info about bridges in room settings"), displayName: _td("Show info about bridges in room settings"),
default: false, default: false,
}, },
"fontSize": { "baseFontSize": {
displayName: _td("Font size"), displayName: _td("Font size"),
supportedLevels: LEVELS_ACCOUNT_SETTINGS, supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: 15, default: 10,
controller: new FontSizeController(), controller: new FontSizeController(),
}, },
"useCustomFontSize": { "useCustomFontSize": {

10
src/settings/watchers/FontWatcher.ts
View file

@ -20,8 +20,10 @@ import IWatcher from "./Watcher";
import { toPx } from '../../utils/units'; import { toPx } from '../../utils/units';
export class FontWatcher implements IWatcher { export class FontWatcher implements IWatcher {
public static readonly MIN_SIZE = 13; public static readonly MIN_SIZE = 8;
public static readonly MAX_SIZE = 20; 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; private dispatcherRef: string;
@ -30,7 +32,7 @@ export class FontWatcher implements IWatcher {
} }
public start() { public start() {
this.setRootFontSize(SettingsStore.getValue("fontSize")); this.setRootFontSize(SettingsStore.getValue("baseFontSize") + FontWatcher.SIZE_DIFF);
this.dispatcherRef = dis.register(this.onAction); 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); const fontSize = Math.max(Math.min(FontWatcher.MAX_SIZE, size), FontWatcher.MIN_SIZE);
if (fontSize !== 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); (<HTMLElement>document.querySelector(":root")).style.fontSize = toPx(fontSize);
}; };