From d550f1d18dda89e5a0d54de16f5ce93dca9ddd23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 3 May 2019 11:53:34 +0200 Subject: [PATCH] MOBILE-2959 ionic: Add a shade to Android status bar --- .../remotethemes/providers/remotethemes.ts | 11 ++++- src/app/app.component.ts | 23 +--------- src/config.json | 6 ++- src/providers/app.ts | 44 ++++++++++++++++++- 4 files changed, 59 insertions(+), 25 deletions(-) diff --git a/src/addon/remotethemes/providers/remotethemes.ts b/src/addon/remotethemes/providers/remotethemes.ts index f0555d656..7b30b31ce 100644 --- a/src/addon/remotethemes/providers/remotethemes.ts +++ b/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(); + } } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3df8327a3..293c8d407 100644 --- a/src/app/app.component.ts +++ b/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')) { - // 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(); - } + this.appProvider.setStatusBarColor(); keyboard.hideFormAccessoryBar(false); diff --git a/src/config.json b/src/config.json index e259e3e0a..cd7c0fd99 100644 --- a/src/config.json +++ b/src/config.json @@ -77,6 +77,8 @@ "statusbarlighttext": false, "statusbarbgios": false, "statusbarlighttextios": false, - "statusbarbgandroid": false, - "statusbarlighttextandroid": false + "statusbarbgandroid": "#df7310", + "statusbarlighttextandroid": true, + "statusbarbgremotetheme": "#000000", + "statusbarlighttextremotetheme": true } diff --git a/src/providers/app.ts b/src/providers/app.ts index 6fa8ad847..f61dca669 100644 --- a/src/providers/app.ts +++ b/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(); + } + } }