mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 04:21:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Use different setting flag print expected values

Browse source
This commit is contained in:
Jorik Schellekens 2020-06-04 17:50:56 +01:00
parent f6504d67ba
commit 2ec47ecc74
3 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
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,7 +132,7 @@ 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> => {
@ -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

@ -177,10 +177,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: 20, default: 10,
controller: new FontSizeController(), controller: new FontSizeController(),
}, },
"useCustomFontSize": { "useCustomFontSize": {

14
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);
} }
@ -45,11 +47,11 @@ export class FontWatcher implements IWatcher {
}; };
private setRootFontSize = (size) => { private setRootFontSize = (size) => {
// Externally we tell the user the font is size 15. Internally we use 10. console.log({size})
const fontSize = Math.max(Math.min(FontWatcher.MAX_SIZE, size), FontWatcher.MIN_SIZE) - 5; 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);
}; };