diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json index d87fa7cc4..4fa2cc62b 100644 --- a/src/assets/lang/en.json +++ b/src/assets/lang/en.json @@ -1707,6 +1707,8 @@ "core.settings.errorsyncsite": "Error synchronising site data. Please check your Internet connection and try again.", "core.settings.estimatedfreespace": "Estimated free space", "core.settings.filesystemroot": "File system root", + "core.settings.fontsize": "Text size", + "core.settings.fontsizecharacter": "A", "core.settings.general": "General", "core.settings.language": "Language", "core.settings.license": "Licence", diff --git a/src/config.json b/src/config.json index 97284d658..0091827b5 100644 --- a/src/config.json +++ b/src/config.json @@ -68,6 +68,11 @@ "password": "moodle" } }, + "font_sizes": [ + 62.5, + 75.89, + 93.75 + ], "customurlscheme": "moodlemobile", "siteurl": "", "sitename": "", diff --git a/src/core/constants.ts b/src/core/constants.ts index ea038eece..8884ec530 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -35,6 +35,7 @@ export class CoreConstants { static SETTINGS_DEBUG_DISPLAY = 'CoreSettingsDebugDisplay'; static SETTINGS_REPORT_IN_BACKGROUND = 'CoreSettingsReportInBackground'; // @deprecated since 3.5.0 static SETTINGS_SEND_ON_ENTER = 'CoreSettingsSendOnEnter'; + static SETTINGS_FONT_SIZE = 'CoreSettingsFontSize'; // WS constants. static WS_TIMEOUT = 30000; diff --git a/src/core/settings/lang/en.json b/src/core/settings/lang/en.json index d2b371887..b4eab9bce 100644 --- a/src/core/settings/lang/en.json +++ b/src/core/settings/lang/en.json @@ -28,6 +28,8 @@ "errorsyncsite": "Error synchronising site data. Please check your Internet connection and try again.", "estimatedfreespace": "Estimated free space", "filesystemroot": "File system root", + "fontsize": "Text size", + "fontsizecharacter": "A", "general": "General", "language": "Language", "license": "Licence", @@ -54,4 +56,4 @@ "versioncode": "Version code", "versionname": "Version name", "wificonnection": "Wi-Fi connection" -} \ No newline at end of file +} diff --git a/src/core/settings/pages/general/general.html b/src/core/settings/pages/general/general.html index 2358295de..e6b017cc8 100644 --- a/src/core/settings/pages/general/general.html +++ b/src/core/settings/pages/general/general.html @@ -10,6 +10,16 @@ {{ languages[code] }} + +

{{ 'core.settings.fontsize' | translate }}

+ + + {{ 'core.settings.fontsizecharacter' | translate }} + + +

{{ 'core.settings.enablerichtexteditor' | translate }}

diff --git a/src/core/settings/pages/general/general.ts b/src/core/settings/pages/general/general.ts index e6fbd9256..feb6a9855 100644 --- a/src/core/settings/pages/general/general.ts +++ b/src/core/settings/pages/general/general.ts @@ -12,8 +12,8 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, } from '@angular/core'; -import { IonicPage } from 'ionic-angular'; +import { Component, ViewChild } from '@angular/core'; +import { IonicPage, Segment } from 'ionic-angular'; import { CoreAppProvider } from '@providers/app'; import { CoreConstants } from '@core/constants'; import { CoreConfigProvider } from '@providers/config'; @@ -37,6 +37,8 @@ export class CoreSettingsGeneralPage { languages = {}; languageCodes = []; selectedLanguage: string; + fontSizes = []; + selectedFontSize: string; rteSupported: boolean; richTextEditor: boolean; debugDisplay: boolean; @@ -52,6 +54,24 @@ export class CoreSettingsGeneralPage { this.selectedLanguage = currentLanguage; }); + this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => { + this.selectedFontSize = fontSize; + this.fontSizes = CoreConfigConstants.font_sizes.map((size) => { + return { + size: size, + // Absolute pixel size based on 1.4rem body text when this size is selected. + style: Math.round(size * 16 * 1.4 / 100), + selected: size === this.selectedFontSize + }; + }); + // Workaround for segment control bug https://github.com/ionic-team/ionic/issues/6923, fixed in Ionic 4 only. + setTimeout(() => { + if (this.segment) { + this.segment.ngAfterContentInit(); + } + }); + }); + this.rteSupported = this.domUtils.isRichTextEditorSupported(); if (this.rteSupported) { this.configProvider.get(CoreConstants.SETTINGS_RICH_TEXT_EDITOR, true).then((richTextEditorEnabled) => { @@ -64,6 +84,9 @@ export class CoreSettingsGeneralPage { }); } + @ViewChild(Segment) + private segment: Segment; + /** * Called when a new language is selected. */ @@ -73,6 +96,19 @@ export class CoreSettingsGeneralPage { }); } + /** + * Called when a new font size is selected. + */ + fontSizeChanged(): void { + this.fontSizes = this.fontSizes.map((fontSize) => { + fontSize.selected = fontSize.size === this.selectedFontSize; + + return fontSize; + }); + document.documentElement.style.fontSize = this.selectedFontSize + '%'; + this.configProvider.set(CoreConstants.SETTINGS_FONT_SIZE, this.selectedFontSize); + } + /** * Called when the rich text editor is enabled or disabled. */ diff --git a/src/providers/utils/dom.ts b/src/providers/utils/dom.ts index 4f4fdab17..1483a6886 100644 --- a/src/providers/utils/dom.ts +++ b/src/providers/utils/dom.ts @@ -22,6 +22,7 @@ import { TranslateService } from '@ngx-translate/core'; import { CoreTextUtilsProvider } from './text'; import { CoreAppProvider } from '../app'; import { CoreConfigProvider } from '../config'; +import { CoreConfigConstants } from '../../configconstants'; import { CoreUrlUtilsProvider } from './url'; import { CoreFileProvider } from '@providers/file'; import { CoreConstants } from '@core/constants'; @@ -74,6 +75,10 @@ export class CoreDomUtilsProvider { configProvider.get(CoreConstants.SETTINGS_DEBUG_DISPLAY, false).then((debugDisplay) => { this.debugDisplay = !!debugDisplay; }); + // Set the font size based on user preference. + configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => { + document.documentElement.style.fontSize = fontSize + '%'; + }); } /**