Use different setting flag print expected values

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

View file

@ -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})};
}

View file

@ -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": {

View file

@ -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);
};