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

This commit is contained in:
Adam Bradley
2016-04-14 12:00:51 -05:00
parent 55389998de
commit 44403d1d87
4 changed files with 16 additions and 10 deletions

View File

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

View File

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

View File

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

View File

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