From 716f76f9693c9a5cc19186ef80ac9b334242c303 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 17 Sep 2019 13:03:18 +0200 Subject: [PATCH] MOBILE-3144 settings: Add color scheme setting --- scripts/langindex.json | 4 ++ src/assets/lang/en.json | 4 ++ src/config.json | 3 +- src/core/constants.ts | 1 + src/core/settings/lang/en.json | 4 ++ src/core/settings/pages/general/general.html | 6 +++ src/core/settings/pages/general/general.ts | 32 +++++++++++- src/core/settings/providers/helper.ts | 52 +++++++++++++++++++- src/core/settings/settings.module.ts | 6 ++- src/providers/utils/dom.ts | 5 -- 10 files changed, 107 insertions(+), 10 deletions(-) diff --git a/scripts/langindex.json b/scripts/langindex.json index fe54142bd..741c90a6b 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -1781,6 +1781,10 @@ "core.settings.appready": "local_moodlemobileapp", "core.settings.cannotsyncoffline": "local_moodlemobileapp", "core.settings.cannotsyncwithoutwifi": "local_moodlemobileapp", + "core.settings.colorscheme": "local_moodlemobileapp", + "core.settings.colorscheme-auto": "local_moodlemobileapp", + "core.settings.colorscheme-dark": "local_moodlemobileapp", + "core.settings.colorscheme-light": "local_moodlemobileapp", "core.settings.compilationinfo": "local_moodlemobileapp", "core.settings.cordovadevicemodel": "local_moodlemobileapp", "core.settings.cordovadeviceosversion": "local_moodlemobileapp", diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json index d837ace11..f8d0edfe3 100644 --- a/src/assets/lang/en.json +++ b/src/assets/lang/en.json @@ -1779,6 +1779,10 @@ "core.settings.appready": "App ready", "core.settings.cannotsyncoffline": "Cannot synchronise offline.", "core.settings.cannotsyncwithoutwifi": "Cannot synchronise because the current settings only allow to synchronise when connected to Wi-Fi. Please connect to a Wi-Fi network.", + "core.settings.colorscheme": "Color Scheme", + "core.settings.colorscheme-auto": "Auto (based on system settings)", + "core.settings.colorscheme-dark": "Dark", + "core.settings.colorscheme-light": "Light", "core.settings.compilationinfo": "Compilation info", "core.settings.cordovadevicemodel": "Cordova device model", "core.settings.cordovadeviceosversion": "Cordova device OS version", diff --git a/src/config.json b/src/config.json index 30d79ac4b..4fd352e58 100644 --- a/src/config.json +++ b/src/config.json @@ -89,5 +89,6 @@ "statusbarlighttextandroid": true, "statusbarbgremotetheme": "#000000", "statusbarlighttextremotetheme": true, - "enableanalytics": false + "enableanalytics": false, + "forceColorScheme": "" } diff --git a/src/core/constants.ts b/src/core/constants.ts index a6f31c3a5..ccd5f9c71 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -36,6 +36,7 @@ export class CoreConstants { static SETTINGS_REPORT_IN_BACKGROUND = 'CoreSettingsReportInBackground'; // @deprecated since 3.5.0 static SETTINGS_SEND_ON_ENTER = 'CoreSettingsSendOnEnter'; static SETTINGS_FONT_SIZE = 'CoreSettingsFontSize'; + static SETTINGS_COLOR_SCHEME = 'CoreSettingsColorScheme'; static SETTINGS_ANALYTICS_ENABLED = 'CoreSettingsAnalyticsEnabled'; // WS constants. diff --git a/src/core/settings/lang/en.json b/src/core/settings/lang/en.json index f0e09d02d..32a82c6cc 100644 --- a/src/core/settings/lang/en.json +++ b/src/core/settings/lang/en.json @@ -3,6 +3,10 @@ "appready": "App ready", "cannotsyncoffline": "Cannot synchronise offline.", "cannotsyncwithoutwifi": "Cannot synchronise because the current settings only allow to synchronise when connected to Wi-Fi. Please connect to a Wi-Fi network.", + "colorscheme": "Color Scheme", + "colorscheme-auto": "Auto (based on system settings)", + "colorscheme-dark": "Dark", + "colorscheme-light": "Light", "compilationinfo": "Compilation info", "cordovadevicemodel": "Cordova device model", "cordovadeviceosversion": "Cordova device OS version", diff --git a/src/core/settings/pages/general/general.html b/src/core/settings/pages/general/general.html index 0e1418813..34f0d2376 100644 --- a/src/core/settings/pages/general/general.html +++ b/src/core/settings/pages/general/general.html @@ -20,6 +20,12 @@ + +

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

 + + {{ 'core.settings.colorscheme-' + scheme | translate }} + +

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

diff --git a/src/core/settings/pages/general/general.ts b/src/core/settings/pages/general/general.ts index 9befe638a..720e8fbdc 100644 --- a/src/core/settings/pages/general/general.ts +++ b/src/core/settings/pages/general/general.ts @@ -24,6 +24,7 @@ import { CoreDomUtilsProvider } from '@providers/utils/dom'; import { CoreLocalNotificationsProvider } from '@providers/local-notifications'; import { CorePushNotificationsProvider } from '@core/pushnotifications/providers/pushnotifications'; import { CoreConfigConstants } from '../../../../configconstants'; +import { CoreSettingsHelper } from '../../providers/helper'; /** * Page that displays the general settings. @@ -44,11 +45,13 @@ export class CoreSettingsGeneralPage { debugDisplay: boolean; analyticsSupported: boolean; analyticsEnabled: boolean; + colorSchemes = []; + selectedScheme: string; constructor(appProvider: CoreAppProvider, private configProvider: CoreConfigProvider, fileProvider: CoreFileProvider, private eventsProvider: CoreEventsProvider, private langProvider: CoreLangProvider, private domUtils: CoreDomUtilsProvider, private pushNotificationsProvider: CorePushNotificationsProvider, - localNotificationsProvider: CoreLocalNotificationsProvider) { + localNotificationsProvider: CoreLocalNotificationsProvider, private settingsHelper: CoreSettingsHelper) { // Get the supported languages. const languages = CoreConfigConstants.languages; @@ -59,6 +62,22 @@ export class CoreSettingsGeneralPage { }); } + if (!CoreConfigConstants.forceColorScheme) { + let defaultColorScheme = 'light'; + + if (window.matchMedia('(prefers-color-scheme: dark)').matches || + window.matchMedia('(prefers-color-scheme: light)').matches) { + this.colorSchemes.push('auto'); + defaultColorScheme = 'auto'; + } + this.colorSchemes.push('light'); + this.colorSchemes.push('dark'); + + this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, defaultColorScheme).then((scheme) => { + this.selectedScheme = scheme; + }); + } + // Sort them by name. this.languages.sort((a, b) => { return a.name.localeCompare(b.name); @@ -126,10 +145,19 @@ export class CoreSettingsGeneralPage { return fontSize; }); - document.documentElement.style.fontSize = this.selectedFontSize + '%'; + + this.settingsHelper.setFontSize(this.selectedFontSize); this.configProvider.set(CoreConstants.SETTINGS_FONT_SIZE, this.selectedFontSize); } + /** + * Called when a new color scheme is selected. + */ + colorSchemeChanged(): void { + this.settingsHelper.setColorScheme(this.selectedScheme); + this.configProvider.set(CoreConstants.SETTINGS_COLOR_SCHEME, this.selectedScheme); + } + /** * Called when the rich text editor is enabled or disabled. */ diff --git a/src/core/settings/providers/helper.ts b/src/core/settings/providers/helper.ts index 26ffda777..8579f96e0 100644 --- a/src/core/settings/providers/helper.ts +++ b/src/core/settings/providers/helper.ts @@ -20,6 +20,9 @@ import { CoreFilepoolProvider } from '@providers/filepool'; import { CoreLoggerProvider } from '@providers/logger'; import { CoreSitesProvider } from '@providers/sites'; import { CoreUtilsProvider } from '@providers/utils/utils'; +import { CoreConstants } from '@core/constants'; +import { CoreConfigProvider } from '@providers/config'; +import { CoreConfigConstants } from '../../../configconstants'; import { TranslateService } from '@ngx-translate/core'; /** @@ -32,7 +35,8 @@ export class CoreSettingsHelper { constructor(loggerProvider: CoreLoggerProvider, private appProvider: CoreAppProvider, private cronDelegate: CoreCronDelegate, private eventsProvider: CoreEventsProvider, private filePoolProvider: CoreFilepoolProvider, - private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService) { + private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService, + private configProvider: CoreConfigProvider) { this.logger = loggerProvider.getInstance('CoreSettingsHelper'); } @@ -175,4 +179,50 @@ export class CoreSettingsHelper { return syncPromise; } + + /** + * Init Settings related to DOM. + */ + initDomSettings(): void { + // Set the font size based on user preference. + this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0].toString()).then((fontSize) => { + this.setFontSize(fontSize); + }); + + if (!!CoreConfigConstants.forceColorScheme) { + this.setColorScheme(CoreConfigConstants.forceColorScheme); + } else { + let defaultColorScheme = 'light'; + + if (window.matchMedia('(prefers-color-scheme: dark)').matches || + window.matchMedia('(prefers-color-scheme: light)').matches) { + defaultColorScheme = 'auto'; + } + + this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, defaultColorScheme).then((scheme) => { + this.setColorScheme(scheme); + }); + } + } + + /** + * Set document default font size. + * + * @param fontSize Font size in percentage. + */ + setFontSize(fontSize: string): void { + document.documentElement.style.fontSize = fontSize + '%'; + } + + /** + * Set body color scheme. + * + * @param colorScheme Name of the color scheme. + */ + setColorScheme(colorScheme: string): void { + document.body.classList.remove('scheme-light'); + document.body.classList.remove('scheme-dark'); + document.body.classList.remove('scheme-auto'); + document.body.classList.add('scheme-' + colorScheme); + } } diff --git a/src/core/settings/settings.module.ts b/src/core/settings/settings.module.ts index 6098d4c91..25693befa 100644 --- a/src/core/settings/settings.module.ts +++ b/src/core/settings/settings.module.ts @@ -28,4 +28,8 @@ import { CoreSettingsHelper } from './providers/helper'; CoreSettingsHelper ] }) -export class CoreSettingsModule {} +export class CoreSettingsModule { + constructor(settingsHelper: CoreSettingsHelper) { + settingsHelper.initDomSettings(); + } +} diff --git a/src/providers/utils/dom.ts b/src/providers/utils/dom.ts index fb91e5532..9de6e424d 100644 --- a/src/providers/utils/dom.ts +++ b/src/providers/utils/dom.ts @@ -22,7 +22,6 @@ 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'; @@ -73,10 +72,6 @@ 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 + '%'; - }); } /**