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

MOBILE-3317 settings: Allow disabling dark mode in site

main
Dani Palou 2020-01-27 10:17:15 +01:00
parent 84f559264b
commit 9603f9d0d0
6 changed files with 82 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scripts/langindex.json
View File

@ -1927,6 +1927,7 @@
"core.settings.filesystemroot": "local_moodlemobileapp",
"core.settings.fontsize": "local_moodlemobileapp",
"core.settings.fontsizecharacter": "block_accessibility/char",
"core.settings.forcedsetting": "local_moodlemobileapp",
"core.settings.general": "moodle",
"core.settings.language": "moodle",
"core.settings.license": "moodle",

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

@ -1927,6 +1927,7 @@
"core.settings.filesystemroot": "File system root",
"core.settings.fontsize": "Text size",
"core.settings.fontsizecharacter": "A",
"core.settings.forcedsetting": "This setting has been forced by your site configuration.",
"core.settings.general": "General",
"core.settings.language": "Language",
"core.settings.license": "Licence",

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

@ -36,6 +36,7 @@
"filesystemroot": "File system root",
"fontsize": "Text size",
"fontsizecharacter": "A",
"forcedsetting": "This setting has been forced by your site configuration.",
"general": "General",
"language": "Language",
"license": "Licence",

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

@ -21,8 +21,11 @@
</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-label>
<h2>{{ 'core.settings.colorscheme' | translate }}</h2>
<p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
</ion-label>
<ion-select [(ngModel)]="selectedScheme" (ngModelChange)="colorSchemeChanged()" interface="action-sheet" [disabled]="colorSchemeDisabled">
<ion-option *ngFor="let scheme of colorSchemes" [value]="scheme">{{ 'core.settings.colorscheme-' + scheme | translate }}</ion-option>
</ion-select>
</ion-item>

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

@ -47,6 +47,7 @@ export class CoreSettingsGeneralPage {
analyticsEnabled: boolean;
colorSchemes = [];
selectedScheme: string;
colorSchemeDisabled: boolean;
constructor(private appProvider: CoreAppProvider, private configProvider: CoreConfigProvider, fileProvider: CoreFileProvider,
private eventsProvider: CoreEventsProvider, private langProvider: CoreLangProvider,
@ -63,20 +64,27 @@ export class CoreSettingsGeneralPage {
}
if (!CoreConfigConstants.forceColorScheme) {
let defaultColorScheme = 'light';
this.colorSchemeDisabled = this.settingsHelper.isColorSchemeDisabledInSite();
// Auto is not working on iOS right now until we update Webkit.
if (!this.appProvider.isIOS() && (window.matchMedia('(prefers-color-scheme: dark)').matches ||
window.matchMedia('(prefers-color-scheme: light)').matches)) {
this.colorSchemes.push('auto');
defaultColorScheme = 'auto';
if (this.colorSchemeDisabled) {
this.colorSchemes.push('light');
this.selectedScheme = this.colorSchemes[0];
} else {
let defaultColorScheme = 'light';
// Auto is not working on iOS right now until we update Webkit.
if (!this.appProvider.isIOS() && (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;
});
}
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.

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

@ -24,6 +24,7 @@ import { CoreConstants } from '@core/constants';
import { CoreConfigProvider } from '@providers/config';
import { CoreConfigConstants } from '../../../configconstants';
import { TranslateService } from '@ngx-translate/core';
import { CoreSite } from '@classes/site';
/**
* Settings helper service.
@ -38,6 +39,28 @@ export class CoreSettingsHelper {
private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService,
private configProvider: CoreConfigProvider) {
this.logger = loggerProvider.getInstance('CoreSettingsHelper');
if (!CoreConfigConstants.forceColorScheme) {
// Update color scheme when a user enters or leaves a site, or when the site info is updated.
const applySiteScheme = (): void => {
if (this.isColorSchemeDisabledInSite()) {
// Dark mode is disabled, force light mode.
this.setColorScheme('light');
} else {
// Reset color scheme settings.
this.initColorScheme();
}
};
eventsProvider.on(CoreEventsProvider.LOGIN, applySiteScheme.bind(this));
eventsProvider.on(CoreEventsProvider.SITE_UPDATED, applySiteScheme.bind(this));
eventsProvider.on(CoreEventsProvider.LOGOUT, () => {
// Reset color scheme settings.
this.initColorScheme();
});
}
}
/**
@ -189,6 +212,13 @@ export class CoreSettingsHelper {
this.setFontSize(fontSize);
});
this.initColorScheme();
}
/**
* Init the color scheme.
*/
initColorScheme(): void {
if (!!CoreConfigConstants.forceColorScheme) {
this.setColorScheme(CoreConfigConstants.forceColorScheme);
} else {
@ -205,6 +235,30 @@ export class CoreSettingsHelper {
}
}
/**
* Check if color scheme is disabled in a site.
*
* @param siteId Site ID. If not defined, current site.
* @return Promise resolved with whether color scheme is disabled.
*/
async isColorSchemeDisabled(siteId?: string): Promise<boolean> {
const site = await this.sitesProvider.getSite(siteId);
return this.isColorSchemeDisabledInSite(site);
}
/**
* Check if color scheme is disabled in a site.
*
* @param site Site instance. If not defined, current site.
* @return Whether color scheme is disabled.
*/
isColorSchemeDisabledInSite(site?: CoreSite): boolean {
site = site || this.sitesProvider.getCurrentSite();
return site ? site.isFeatureDisabled('NoDelegate_DarkMode') : false;
}
/**
* Set document default font size.
*