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

MOBILE-3144 settings: Add color scheme setting

main
Pau Ferrer Ocaña 2019-09-17 13:03:18 +02:00
parent b4189f0cab
commit 716f76f969
10 changed files with 107 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/langindex.json
View File

@ -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",

4
src/assets/lang/en.json
View File

@ -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",

3
src/config.json
View File

@ -89,5 +89,6 @@
"statusbarlighttextandroid": true,
"statusbarbgremotetheme": "#000000",
"statusbarlighttextremotetheme": true,
"enableanalytics": false
"enableanalytics": false,
"forceColorScheme": ""
}

1
src/core/constants.ts
View File

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

4
src/core/settings/lang/en.json
View File

@ -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",

6
src/core/settings/pages/general/general.html
View File

@ -20,6 +20,12 @@
</ion-segment-button>
</ion-segment>
</ion-item>
<ion-item text-wrap class="core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0">
<ion-label><h2>{{ 'core.settings.colorscheme' | translate }}</h2></ion-label>
<ion-select [(ngModel)]="selectedScheme" (ngModelChange)="colorSchemeChanged()" interface="action-sheet">
<ion-option *ngFor="let scheme of colorSchemes" [value]="scheme">{{ 'core.settings.colorscheme-' + scheme | translate }}</ion-option>
</ion-select>
</ion-item>
<ion-item text-wrap *ngIf="rteSupported">
<ion-label>
<h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>

32
src/core/settings/pages/general/general.ts
View File

@ -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.
*/

52
src/core/settings/providers/helper.ts
View File

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

6
src/core/settings/settings.module.ts
View File

@ -28,4 +28,8 @@ import { CoreSettingsHelper } from './providers/helper';
CoreSettingsHelper
]
})
export class CoreSettingsModule {}
export class CoreSettingsModule {
constructor(settingsHelper: CoreSettingsHelper) {
settingsHelper.initDomSettings();
}
}

5
src/providers/utils/dom.ts
View File

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