diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss index ce4489ba52..f42e106dbc 100644 --- a/ionic/components/content/modes/ios.scss +++ b/ionic/components/content/modes/ios.scss @@ -9,6 +9,7 @@ $outer-content-md-background-color: #efeff4 !default; background: $outer-content-md-background-color; } -ion-nav.has-views { +ion-nav.has-views, +ion-tab.has-views { background: #000; } diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index dfeb776996..fff9f44f8e 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -1,4 +1,4 @@ -import {Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager} from 'angular2/angular2'; +import {Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager, Renderer} from 'angular2/angular2'; import {Ion} from '../ion'; import {makeComponent} from '../../config/decorators'; @@ -110,7 +110,8 @@ export class NavController extends Ion { compiler: Compiler, loader: DynamicComponentLoader, viewManager: AppViewManager, - zone: NgZone + zone: NgZone, + renderer: Renderer ) { super(elementRef, config); @@ -122,6 +123,7 @@ export class NavController extends Ion { this._loader = loader; this._viewManager = viewManager; this._zone = zone; + this.renderer = renderer; this._views = []; @@ -180,6 +182,10 @@ export class NavController extends Ion { // add the view to the stack this._add(enteringView); + raf(() => { + this._cleanup(enteringView); + }); + if (this.router) { // notify router of the state change this.router.stateChange('push', enteringView, params); @@ -755,11 +761,11 @@ export class NavController extends Ion { }); } - _cleanup() { + _cleanup(activeView) { // the active view, and the previous view, should be rendered in dom and ready to go // all others, like a cached page 2 back, should be display: none and not rendered let destroys = []; - let activeView = this.getActive(); + activeView = activeView || this.getActive(); let previousView = this.getPrevious(activeView); this._views.forEach(view => { @@ -783,6 +789,16 @@ export class NavController extends Ion { }); } + addHasViews() { + if (this._views.length === 1) { + this._zone.runOutsideAngular(() => { + setTimeout(() => { + this.renderer.setElementClass(this.elementRef, 'has-views', true); + }, 200); + }); + } + } + /** * TODO * @param {TODO} nbContainer TODO diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 781f18cb5e..a954d03cf5 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -150,9 +150,10 @@ export class Nav extends NavController { compiler: Compiler, loader: DynamicComponentLoader, viewManager: AppViewManager, - zone: NgZone + zone: NgZone, + renderer: Renderer ) { - super(hostNavCtrl, app, config, elementRef, compiler, loader, viewManager, zone); + super(hostNavCtrl, app, config, elementRef, compiler, loader, viewManager, zone, renderer); this.panes = []; } @@ -253,13 +254,7 @@ export class Nav extends NavController { }); } - if (this._views.length === 1) { - this._zone.runOutsideAngular(() => { - // setTimeout(function() { - // componentRef && componentRef.location && componentRef.location.nativeElement.classList.add('has-views'); - // }, 100); - }); - } + this.addHasViews(); done(); }); diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index 080eead1e9..c7ccfb2e40 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -1,4 +1,4 @@ -import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, forwardRef, NgZone} from 'angular2/angular2'; +import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, forwardRef, NgZone, Renderer} from 'angular2/angular2'; import {IonicApp} from '../app/app'; import {IonicConfig} from '../../config/config'; @@ -77,10 +77,11 @@ export class Tab extends NavController { compiler: Compiler, loader: DynamicComponentLoader, viewManager: AppViewManager, - zone: NgZone + zone: NgZone, + renderer: Renderer ) { // A Tab is a NavController for its child pages - super(tabs, app, config, elementRef, compiler, loader, viewManager, zone); + super(tabs, app, config, elementRef, compiler, loader, viewManager, zone, renderer); this.tabs = tabs; this._isInitial = tabs.add(this); @@ -144,8 +145,9 @@ export class Tab extends NavController { }); } - done(); + this.addHasViews(); + done(); }); }