MOBILE-2959 ionic: Add a shade to Android status bar

src/addon/remotethemes/providers/remotethemes.ts

@@ -14,6 +14,7 @@
 
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
+import { CoreAppProvider } from '@providers/app';
 import { CoreFileProvider } from '@providers/file';
 import { CoreFilepoolProvider } from '@providers/filepool';
 import { CoreLoggerProvider } from '@providers/logger';
@@ -34,7 +35,8 @@ export class AddonRemoteThemesProvider {
     protected stylesEls: {[siteId: string]: {element: HTMLStyleElement, hash: string}} = {};
 
     constructor(logger: CoreLoggerProvider, private sitesProvider: CoreSitesProvider, private fileProvider: CoreFileProvider,
-            private filepoolProvider: CoreFilepoolProvider, private http: Http, private utils: CoreUtilsProvider) {
+            private filepoolProvider: CoreFilepoolProvider, private http: Http, private utils: CoreUtilsProvider,
+            private appProvider: CoreAppProvider) {
         this.logger = logger.getInstance('AddonRemoteThemesProvider');
     }
 
@@ -75,6 +77,9 @@ export class AddonRemoteThemesProvider {
         styles.forEach((style) => {
             this.disableElement(style, true);
         });
+
+        // Set StatusBar properties.
+        this.appProvider.setStatusBarColor();
     }
 
     /**
@@ -91,6 +96,10 @@ export class AddonRemoteThemesProvider {
         } else {
             element.disabled = false;
             element.removeAttribute('disabled');
+
+            if (element.innerHTML != '') {
+                this.appProvider.resetStatusBarColor();
+            }
         }
     }
 

src/app/app.component.ts

@@ -14,7 +14,6 @@
 
 import { Component, OnInit, NgZone } from '@angular/core';
 import { Platform, IonicApp } from 'ionic-angular';
-import { StatusBar } from '@ionic-native/status-bar';
 import { CoreAppProvider } from '@providers/app';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreLangProvider } from '@providers/lang';
@@ -23,7 +22,6 @@ import { CoreSitesProvider } from '@providers/sites';
 import { CoreLoginHelperProvider } from '@core/login/providers/helper';
 import { Keyboard } from '@ionic-native/keyboard';
 import { ScreenOrientation } from '@ionic-native/screen-orientation';
-import { CoreConfigConstants } from '../configconstants';
 
 @Component({
     templateUrl: 'app.html'
@@ -35,7 +33,7 @@ export class MoodleMobileApp implements OnInit {
     protected logger;
     protected lastUrls = {};
 
-    constructor(private platform: Platform, statusBar: StatusBar, logger: CoreLoggerProvider, keyboard: Keyboard,
+    constructor(private platform: Platform, logger: CoreLoggerProvider, keyboard: Keyboard,
             private eventsProvider: CoreEventsProvider, private loginHelper: CoreLoginHelperProvider, private zone: NgZone,
             private appProvider: CoreAppProvider, private langProvider: CoreLangProvider, private sitesProvider: CoreSitesProvider,
             private screenOrientation: ScreenOrientation, app: IonicApp) {
@@ -46,24 +44,7 @@ export class MoodleMobileApp implements OnInit {
             // Here you can do any higher level native things you might need.
 
             // Set StatusBar properties.
-            if (typeof CoreConfigConstants.statusbarbgios == 'string' && platform.is('ios')) {
+            this.appProvider.setStatusBarColor();
-                // IOS Status bar properties.
-                statusBar.overlaysWebView(false);
-                statusBar.backgroundColorByHexString(CoreConfigConstants.statusbarbgios);
-                CoreConfigConstants.statusbarlighttextios ? statusBar.styleLightContent() : statusBar.styleDefault();
-            } else if (typeof CoreConfigConstants.statusbarbgandroid == 'string' && platform.is('android')) {
-                // Android Status bar properties.
-                statusBar.backgroundColorByHexString(CoreConfigConstants.statusbarbgandroid);
-                CoreConfigConstants.statusbarlighttextandroid ? statusBar.styleLightContent() : statusBar.styleDefault();
-            } else if (typeof CoreConfigConstants.statusbarbg == 'string') {
-                // Generic Status bar properties.
-                platform.is('ios') && statusBar.overlaysWebView(false);
-                statusBar.backgroundColorByHexString(CoreConfigConstants.statusbarbg);
-                CoreConfigConstants.statusbarlighttext ? statusBar.styleLightContent() : statusBar.styleDefault();
-            } else {
-                // Default Status bar properties.
-                platform.is('android') ? statusBar.styleLightContent() : statusBar.styleDefault();
-            }
 
             keyboard.hideFormAccessoryBar(false);
 

src/config.json

@@ -77,6 +77,8 @@
     "statusbarlighttext": false,
     "statusbarbgios": false,
     "statusbarlighttextios": false,
-    "statusbarbgandroid": false,
+    "statusbarbgandroid": "#df7310",
-    "statusbarlighttextandroid": false
+    "statusbarlighttextandroid": true,
+    "statusbarbgremotetheme": "#000000",
+    "statusbarlighttextremotetheme": true
 }

src/providers/app.ts

@@ -16,11 +16,13 @@ import { Injectable, NgZone } from '@angular/core';
 import { Platform, App, NavController, MenuController } from 'ionic-angular';
 import { Keyboard } from '@ionic-native/keyboard';
 import { Network } from '@ionic-native/network';
+import { StatusBar } from '@ionic-native/status-bar';
 
 import { CoreDbProvider } from './db';
 import { CoreLoggerProvider } from './logger';
 import { CoreEventsProvider } from './events';
 import { SQLiteDB } from '@classes/sqlitedb';
+import { CoreConfigConstants } from '../configconstants';
 
 /**
  * Data stored for a redirect to another page/site.
@@ -72,7 +74,7 @@ export class CoreAppProvider {
 
     constructor(dbProvider: CoreDbProvider, private platform: Platform, private keyboard: Keyboard, private appCtrl: App,
             private network: Network, logger: CoreLoggerProvider, events: CoreEventsProvider, zone: NgZone,
-            private menuCtrl: MenuController) {
+            private menuCtrl: MenuController, private statusBar: StatusBar) {
         this.logger = logger.getInstance('CoreAppProvider');
         this.db = dbProvider.getDB(this.DBNAME);
 
@@ -490,4 +492,44 @@ export class CoreAppProvider {
             return index >= 0 && !!this.backActions.splice(index, 1);
         };
     }
+
+    /**
+     * Set StatusBar color depending on platform.
+     */
+    setStatusBarColor(): void {
+        if (typeof CoreConfigConstants.statusbarbgios == 'string' && this.platform.is('ios')) {
+            // IOS Status bar properties.
+            this.statusBar.overlaysWebView(false);
+            this.statusBar.backgroundColorByHexString(CoreConfigConstants.statusbarbgios);
+            CoreConfigConstants.statusbarlighttextios ? this.statusBar.styleLightContent() : this.statusBar.styleDefault();
+        } else if (typeof CoreConfigConstants.statusbarbgandroid == 'string' && this.platform.is('android')) {
+            // Android Status bar properties.
+            this.statusBar.backgroundColorByHexString(CoreConfigConstants.statusbarbgandroid);
+            CoreConfigConstants.statusbarlighttextandroid ? this.statusBar.styleLightContent() : this.statusBar.styleDefault();
+        } else if (typeof CoreConfigConstants.statusbarbg == 'string') {
+            // Generic Status bar properties.
+            this.platform.is('ios') && this.statusBar.overlaysWebView(false);
+            this.statusBar.backgroundColorByHexString(CoreConfigConstants.statusbarbg);
+            CoreConfigConstants.statusbarlighttext ? this.statusBar.styleLightContent() : this.statusBar.styleDefault();
+        } else {
+            // Default Status bar properties.
+            this.platform.is('android') ? this.statusBar.styleLightContent() : this.statusBar.styleDefault();
+        }
+    }
+
+    /**
+     * Reset StatusBar color if any was set.
+     */
+    resetStatusBarColor(): void {
+        if (typeof CoreConfigConstants.statusbarbgremotetheme == 'string' &&
+                ((typeof CoreConfigConstants.statusbarbgios == 'string' && this.platform.is('ios')) ||
+                (typeof CoreConfigConstants.statusbarbgandroid == 'string' && this.platform.is('android')) ||
+                typeof CoreConfigConstants.statusbarbg == 'string')) {
+            // If the status bar has been overriden and there's a fallback color for remote themes, use it now.
+            this.platform.is('ios') && this.statusBar.overlaysWebView(false);
+            this.statusBar.backgroundColorByHexString(CoreConfigConstants.statusbarbgremotetheme);
+            CoreConfigConstants.statusbarlighttextremotetheme ?
+                this.statusBar.styleLightContent() : this.statusBar.styleDefault();
+        }
+    }
 }