MOBILE-3572 settings: Add notice when auto color scheme is selected

Author: crazyserver

src/assets/lang/en.json

@@ -2001,6 +2001,7 @@
     "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-auto-notice": "Auto mode may not work in some Android devices.",
     "core.settings.colorscheme-dark": "Dark",
     "core.settings.colorscheme-light": "Light",
     "core.settings.compilationinfo": "Compilation info",

src/core/settings/lang/en.json

@@ -7,6 +7,7 @@
     "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-auto-notice": "Auto mode may not work in some Android devices.",
     "colorscheme-dark": "Dark",
     "colorscheme-light": "Light",
     "compilationinfo": "Compilation info",

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

@@ -20,7 +20,7 @@
             </ion-segment-button>
         </ion-segment>
     </ion-item>
-    <ion-item text-wrap class="core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0">
+    <ion-item text-wrap class="core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0" [attr.no-lines]="selectedScheme=='auto' && isAndroid ? true : null">
         <ion-label>
             <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
             <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
@@ -29,6 +29,9 @@ <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
             <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="colorSchemes.length > 0 && selectedScheme=='auto' && isAndroid">
+        <p class="text-danger">{{ 'core.settings.colorscheme-auto-notice' | translate }}</p>
+    </ion-item>
     <ion-item text-wrap *ngIf="rteSupported">
         <ion-label>
             <h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>

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

@@ -15,6 +15,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { IonicPage, Segment } from 'ionic-angular';
 import { CoreConstants } from '@core/constants';
+import { CoreApp } from '@providers/app';
 import { CoreConfigProvider } from '@providers/config';
 import { CoreFileProvider } from '@providers/file';
 import { CoreEventsProvider } from '@providers/events';
@@ -46,6 +47,7 @@ export class CoreSettingsGeneralPage {
     colorSchemes = [];
     selectedScheme: string;
     colorSchemeDisabled: boolean;
+    isAndroid: boolean;
 
     constructor(protected configProvider: CoreConfigProvider,
             fileProvider: CoreFileProvider,
@@ -71,6 +73,8 @@ export class CoreSettingsGeneralPage {
                 this.colorSchemes.push('light');
                 this.selectedScheme = this.colorSchemes[0];
             } else {
+                this.isAndroid = CoreApp.instance.isAndroid();
+
                 this.colorSchemes = this.settingsHelper.getAllowedColorSchemes();
 
                 this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, 'light').then((scheme) => {