feat(statusbarPadding): add statusbar-padding css to toolbars

Author: adamdbradley

ionic/components/navbar/navbar.ts

@@ -108,7 +108,8 @@ class ToolbarBackground {
     '</div>',
   host: {
     '[hidden]': '_hidden',
-    'class': 'toolbar'
+    'class': 'toolbar',
+    '[class.statusbar-padding]': '_sbPadding'
   },
   directives: [BackButton, BackButtonText, Icon, ToolbarBackground]
 })
@@ -120,6 +121,7 @@ export class Navbar extends ToolbarBase {
   private _bbRef: ElementRef;
   private _bbtRef: ElementRef;
   private _bgRef: ElementRef;
+  private _sbPadding: boolean;
 
   /**
    * @input {boolean} whether the back button should be shown or not
@@ -145,6 +147,7 @@ export class Navbar extends ToolbarBase {
 
     this._bbIcon = config.get('backButtonIcon');
     this._bbText = config.get('backButtonText');
+    this._sbPadding = config.getBoolean('statusbarPadding', false);
   }
 
   /**

ionic/components/tabs/tabs.ts

@@ -135,7 +135,7 @@ import {isBlank, isTrueProperty} from '../../util/util';
 @Component({
   selector: 'ion-tabs',
   template:
-    '<ion-navbar-section>' +
+    '<ion-navbar-section [class.statusbar-padding]="_sbPadding">' +
       '<template navbar-anchor></template>' +
     '</ion-navbar-section>' +
     '<ion-tabbar-section>' +
@@ -167,6 +167,7 @@ export class Tabs extends Ion {
   private _preloadTabs: boolean = null;
   private _tabs: Array<Tab> = [];
   private _onReady = null;
+  private _sbPadding: boolean;
   private _useHighlight: boolean;
 
   /**
@@ -238,6 +239,7 @@ export class Tabs extends Ion {
     this.id = ++tabIds;
     this.subPages = _config.getBoolean('tabSubPages');
     this._useHighlight = _config.getBoolean('tabbarHighlight');
+    this._sbPadding = _config.getBoolean('statusbarPadding', false);
 
     if (parent) {
       // this Tabs has a parent Nav

ionic/components/toolbar/toolbar.ts

@@ -1,9 +1,10 @@
 import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject, ContentChildren, ContentChild, QueryList, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 
+import {Button} from '../button/button';
+import {Config} from '../../config/config';
 import {Ion} from '../ion';
 import {MenuToggle} from '../menu/menu-toggle';
 import {Navbar} from '../navbar/navbar';
-import {Button} from '../button/button';
 
 
 /**
@@ -108,14 +109,17 @@ export class ToolbarBase extends Ion {
       '<ng-content></ng-content>' +
     '</div>',
   host: {
-    'class': 'toolbar'
+    'class': 'toolbar',
+    '[class.statusbar-padding]': '_sbPadding'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Toolbar extends ToolbarBase {
+  private _sbPadding: boolean;
 
-  constructor(elementRef: ElementRef) {
+  constructor(elementRef: ElementRef, config: Config) {
     super(elementRef);
+    this._sbPadding = config.getBoolean('statusbarPadding', false);
   }
 
 }

ionic/platform/registry.ts

@@ -101,14 +101,11 @@ Platform.register({
     keyboardHeight: 300,
     mode: 'ios',
     scrollAssist: isIOSDevice,
+    statusbarPadding: !!(win.cordova),
     swipeBackEnabled: isIOSDevice,
     swipeBackThreshold: 40,
     tapPolyfill: isIOSDevice,
-    virtualScrollEventAssist: function() {
-      // UIWebView needs help getting scroll events
-      // WKWebView does not (WKWebView supports indexDB)
-      return !(window.indexedDB);
-    }
+    virtualScrollEventAssist: !(window.indexedDB)
   },
   isMatch(p: Platform): boolean {
     return p.isPlatformMatch('ios', ['iphone', 'ipad', 'ipod'], ['windows phone']);