EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3708 settings: Upgrade from font size to zoom levels

main
Pau Ferrer Ocaña 2021-03-02 16:08:40 +01:00
parent 95b6456388
commit 5c51af9f1b
7 changed files with 99 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
moodle.config.json
View File

@ -71,11 +71,11 @@
"password": "moodle"
}
},
"font_sizes": [
100,
110,
120
],
"zoomlevels": {
"normal": 100,
"low": 110,
"high": 120
},
"customurlscheme": "moodlemobile",
"siteurl": "",
"sitename": "",

7
src/core/classes/tabs.ts
View File

@ -28,9 +28,8 @@ import { IonSlides } from '@ionic/angular';
import { Subscription } from 'rxjs';
import { CoreApp } from '@services/app';
import { CoreConfig } from '@services/config';
import { CoreConstants } from '@/core/constants';
import { Platform, Translate } from '@singletons';
import { CoreSettingsHelper } from '@features/settings/services/settings-helper';
/**
* Class to abstract some common code for tabs.
@ -373,9 +372,9 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
return;
}
const fontSize = await CoreConfig.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConstants.CONFIG.font_sizes[0]);
const zoomLevel = await CoreSettingsHelper.getZoom();
this.maxSlides = Math.floor(width / (fontSize / CoreConstants.CONFIG.font_sizes[0] * CoreTabsBaseComponent.MIN_TAB_WIDTH));
this.maxSlides = Math.floor(width / (zoomLevel / 100 * CoreTabsBaseComponent.MIN_TAB_WIDTH));
}
/**

6
src/core/constants.ts
View File

@ -14,7 +14,7 @@
/* eslint-disable @typescript-eslint/naming-convention */
import { CoreColorScheme } from '@features/settings/services/settings-helper';
import { CoreColorScheme, CoreZoomLevel } from '@features/settings/services/settings-helper';
import { CoreSitesDemoSiteData } from '@services/sites';
import envJson from '@/assets/env.json';
@ -56,7 +56,7 @@ export class CoreConstants {
static readonly SETTINGS_DEBUG_DISPLAY = 'CoreSettingsDebugDisplay';
static readonly SETTINGS_REPORT_IN_BACKGROUND = 'CoreSettingsReportInBackground'; // @deprecated since 3.5.0
static readonly SETTINGS_SEND_ON_ENTER = 'CoreSettingsSendOnEnter';
static readonly SETTINGS_FONT_SIZE = 'CoreSettingsFontSize';
static readonly SETTINGS_ZOOM_LEVEL = 'CoreSettingsZoomLevel';
static readonly SETTINGS_COLOR_SCHEME = 'CoreSettingsColorScheme';
static readonly SETTINGS_ANALYTICS_ENABLED = 'CoreSettingsAnalyticsEnabled';
@ -145,7 +145,7 @@ type EnvironmentConfig = {
wsservice: string;
wsextservice: string;
demo_sites: Record<string, CoreSitesDemoSiteData>;
font_sizes: number[];
zoomlevels: Record<CoreZoomLevel, number>;
customurlscheme: string;
siteurl: string;
sitename: string;

8
src/core/features/settings/pages/general/general.html
View File

@ -21,13 +21,13 @@
<ion-label>
<h2>{{ 'core.settings.fontsize' | translate }}</h2>
</ion-label>
<ion-segment [(ngModel)]="selectedFontSize" (ionChange)="fontSizeChanged()" color="primary" item-content>
<ion-segment-button *ngFor="let fontSize of fontSizes" [value]="fontSize.size"
[ngStyle]="{'font-size.px': fontSize.style}">
<ion-segment [(ngModel)]="selectedZoomLevel" (ionChange)="zoomLevelChanged()" color="primary" item-content>
<ion-segment-button *ngFor="let zoomLevel of zoomLevels" [value]="zoomLevel.value"
[ngStyle]="{'font-size.px': zoomLevel.style}">
<ion-label>
{{ 'core.settings.fontsizecharacter' | translate }}
<!-- Empty element styled with the largest font size, so all buttons share a common baseline. -->
<span [ngStyle]="{'font-size.px': fontSizes[fontSizes.length - 1].style}"></span>
<span [ngStyle]="{'font-size.px': zoomLevels[zoomLevels.length - 1].style}"></span>
</ion-label>
</ion-segment-button>
</ion-segment>

31
src/core/features/settings/pages/general/general.ts
View File

@ -19,7 +19,7 @@ import { CoreEvents } from '@singletons/events';
import { CoreLang } from '@services/lang';
import { CoreDomUtils } from '@services/utils/dom';
import { CorePushNotifications } from '@features/pushnotifications/services/pushnotifications';
import { CoreSettingsHelper, CoreColorScheme } from '../../services/settings-helper';
import { CoreSettingsHelper, CoreColorScheme, CoreZoomLevel } from '../../services/settings-helper';
/**
* Page that displays the general settings.
@ -33,8 +33,8 @@ export class CoreSettingsGeneralPage {
languages: { code: string; name: string }[] = [];
selectedLanguage = '';
fontSizes: { size: number; style: number; selected: boolean }[] = [];
selectedFontSize = 0;
zoomLevels: { value: CoreZoomLevel; style: number; selected: boolean }[] = [];
selectedZoomLevel = CoreZoomLevel.NORMAL;
richTextEditor = true;
debugDisplay = false;
analyticsSupported = false;
@ -84,17 +84,14 @@ export class CoreSettingsGeneralPage {
}
}
this.selectedFontSize = await CoreConfig.get(
CoreConstants.SETTINGS_FONT_SIZE,
CoreConstants.CONFIG.font_sizes[0],
);
this.selectedZoomLevel = await CoreSettingsHelper.getZoomLevel();
this.fontSizes = CoreConstants.CONFIG.font_sizes.map((size) =>
this.zoomLevels = Object.keys(CoreConstants.CONFIG.zoomlevels).map((value: CoreZoomLevel) =>
({
size,
value,
// Absolute pixel size based on 1.4rem body text when this size is selected.
style: Math.round(size * 16 / 100),
selected: size === this.selectedFontSize,
style: Math.round(CoreConstants.CONFIG.zoomlevels[value] * 16 / 100),
selected: value === this.selectedZoomLevel,
}));
@ -118,17 +115,17 @@ export class CoreSettingsGeneralPage {
}
/**
* Called when a new font size is selected.
* Called when a new zoom level is selected.
*/
fontSizeChanged(): void {
this.fontSizes = this.fontSizes.map((fontSize) => {
fontSize.selected = fontSize.size === this.selectedFontSize;
zoomLevelChanged(): void {
this.zoomLevels = this.zoomLevels.map((fontSize) => {
fontSize.selected = fontSize.value === this.selectedZoomLevel;
return fontSize;
});
CoreSettingsHelper.setFontSize(this.selectedFontSize);
CoreConfig.set(CoreConstants.SETTINGS_FONT_SIZE, this.selectedFontSize);
CoreSettingsHelper.applyZoomLevel(this.selectedZoomLevel);
CoreConfig.set(CoreConstants.SETTINGS_ZOOM_LEVEL, this.selectedZoomLevel);
}
/**

71
src/core/features/settings/services/settings-helper.ts
View File

@ -45,6 +45,15 @@ export const enum CoreColorScheme {
DARK = 'dark',
}
/**
* Constants to define zoom levels.
*/
export const enum CoreZoomLevel {
NORMAL = 'normal',
LOW = 'low',
HIGH = 'high',
}
/**
* Settings helper service.
*/
@ -284,13 +293,64 @@ export class CoreSettingsHelperProvider {
throw new CoreError(Translate.instant('core.lostconnection'));
}
/**
* Upgrades from Font size to new zoom level.
*/
async upgradeZoomLevel(): Promise<void> {
// Check old setting and update the new.
try {
const fontSize = await CoreConfig.get<number>('CoreSettingsFontSize');
if (typeof fontSize == 'undefined') {
// Already upgraded.
return;
}
// Reset the value to solve edge cases.
CoreConfig.set(CoreConstants.SETTINGS_ZOOM_LEVEL, CoreZoomLevel.NORMAL);
if (fontSize < 100) {
if (fontSize > 90) {
CoreConfig.set(CoreConstants.SETTINGS_ZOOM_LEVEL, CoreZoomLevel.HIGH);
} else if (fontSize > 70) {
CoreConfig.set(CoreConstants.SETTINGS_ZOOM_LEVEL, CoreZoomLevel.LOW);
}
}
CoreConfig.delete('CoreSettingsFontSize');
} catch {
// Already upgraded.
return;
}
}
/**
* Get saved Zoom Level setting.
*
* @return The saved zoom Level option.
*/
async getZoomLevel(): Promise<CoreZoomLevel> {
return CoreConfig.get(CoreConstants.SETTINGS_ZOOM_LEVEL, CoreZoomLevel.NORMAL);
}
/**
* Get saved zoom level value.
*
* @return The saved zoom level value in %.
*/
async getZoom(): Promise<number> {
const zoomLevel = await this.getZoomLevel();
return CoreConstants.CONFIG.zoomlevels[zoomLevel];
}
/**
* Init Settings related to DOM.
*/
async initDomSettings(): Promise<void> {
// Set the font size based on user preference.
const fontSize = await CoreConfig.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConstants.CONFIG.font_sizes[0]);
this.setFontSize(fontSize);
const zoomLevel = await this.getZoomLevel();
this.applyZoomLevel(zoomLevel);
this.initColorScheme();
}
@ -334,11 +394,12 @@ export class CoreSettingsHelperProvider {
/**
* Set document default font size.
*
* @param fontSize Font size in percentage.
* @param zoomLevel Zoom Level.
*/
setFontSize(fontSize: number): void {
applyZoomLevel(zoomLevel: CoreZoomLevel): void {
const zoom = CoreConstants.CONFIG.zoomlevels[zoomLevel];
// @todo Since zoom is deprecated and fontSize is not working, we should do some research here.
document.documentElement.style.zoom = fontSize + '%';
document.documentElement.style.zoom = zoom + '%';
}
/**

5
src/core/features/settings/settings.module.ts
View File

@ -48,7 +48,10 @@ const mainMenuMoreRoutes: Routes = [
provide: APP_INITIALIZER,
multi: true,
deps: [CoreSettingsHelperProvider],
useFactory: (helper: CoreSettingsHelperProvider) => () => helper.initDomSettings(),
useFactory: (helper: CoreSettingsHelperProvider) => async () => {
await helper.upgradeZoomLevel();
helper.initDomSettings();
},
},
],
})