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

moodle.config.json

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

src/core/classes/tabs.ts

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

src/core/constants.ts

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

src/core/features/settings/pages/general/general.html

@@ -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 [(ngModel)]="selectedZoomLevel" (ionChange)="zoomLevelChanged()" color="primary" item-content>
-            <ion-segment-button *ngFor="let fontSize of fontSizes" [value]="fontSize.size"
+            <ion-segment-button *ngFor="let zoomLevel of zoomLevels" [value]="zoomLevel.value"
-                [ngStyle]="{'font-size.px': fontSize.style}">
+                [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>

src/core/features/settings/pages/general/general.ts

@@ -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 }[] = [];
+    zoomLevels: { value: CoreZoomLevel; style: number; selected: boolean }[] = [];
-    selectedFontSize = 0;
+    selectedZoomLevel = CoreZoomLevel.NORMAL;
     richTextEditor = true;
     debugDisplay = false;
     analyticsSupported = false;
@@ -84,17 +84,14 @@ export class CoreSettingsGeneralPage {
             }
         }
 
-        this.selectedFontSize = await CoreConfig.get(
+        this.selectedZoomLevel = await CoreSettingsHelper.getZoomLevel();
-            CoreConstants.SETTINGS_FONT_SIZE,
-            CoreConstants.CONFIG.font_sizes[0],
-        );
 
-        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),
+                style: Math.round(CoreConstants.CONFIG.zoomlevels[value] * 16 / 100),
-                selected: size === this.selectedFontSize,
+                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 {
+    zoomLevelChanged(): void {
-        this.fontSizes = this.fontSizes.map((fontSize) => {
+        this.zoomLevels = this.zoomLevels.map((fontSize) => {
-            fontSize.selected = fontSize.size === this.selectedFontSize;
+            fontSize.selected = fontSize.value === this.selectedZoomLevel;
 
             return fontSize;
         });
 
-        CoreSettingsHelper.setFontSize(this.selectedFontSize);
+        CoreSettingsHelper.applyZoomLevel(this.selectedZoomLevel);
-        CoreConfig.set(CoreConstants.SETTINGS_FONT_SIZE, this.selectedFontSize);
+        CoreConfig.set(CoreConstants.SETTINGS_ZOOM_LEVEL, this.selectedZoomLevel);
     }
 
     /**

src/core/features/settings/services/settings-helper.ts

@@ -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]);
+        const zoomLevel = await this.getZoomLevel();
-        this.setFontSize(fontSize);
+
+        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 + '%';
     }
 
     /**

src/core/features/settings/settings.module.ts

@@ -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();
+            },
         },
     ],
 })