Skip to content

Commit

Permalink
MOBILE-2959 ionic: Add a shade to Android status bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@crazyserver
crazyserver committed May 8, 2019
1 parent 9b4da3e commit d550f1d
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 25 deletions.
11 changes: 10 additions & 1 deletion src/addon/remotethemes/providers/remotethemes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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');
}

Expand Down Expand Up @@ -75,6 +77,9 @@ export class AddonRemoteThemesProvider {
styles.forEach((style) => {
this.disableElement(style, true);
});

// Set StatusBar properties.
this.appProvider.setStatusBarColor();
}

/**
Expand All @@ -91,6 +96,10 @@ export class AddonRemoteThemesProvider {
} else {
element.disabled = false;
element.removeAttribute('disabled');

if (element.innerHTML != '') {
this.appProvider.resetStatusBarColor();
}
}
}

Expand Down
23 changes: 2 additions & 21 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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'
Expand All @@ -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) {
Expand All @@ -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);

Expand Down
6 changes: 4 additions & 2 deletions src/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@
"statusbarlighttext": false,
"statusbarbgios": false,
"statusbarlighttextios": false,
"statusbarbgandroid": false,
"statusbarlighttextandroid": false
"statusbarbgandroid": "#df7310",
"statusbarlighttextandroid": true,
"statusbarbgremotetheme": "#000000",
"statusbarlighttextremotetheme": true
}
44 changes: 43 additions & 1 deletion src/providers/app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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();
}
}
}

0 comments on commit d550f1d

Please sign in to comment.