fix(nav): transition toolbars on iOS

Closes #5692
ionic-team · May 18, 2016 · daa4ccc · daa4ccc
1 parent ed8335d
commit daa4ccc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts
@@ -221,6 +221,9 @@ class FullPage {
       </ion-fixed>
       <ion-fixed style="pointer-events: none; top:0; bottom:0; right:0; width:50%; background: rgba(0,0,0,0.5);"></ion-fixed>
     </ion-content>
+    <ion-toolbar position="bottom">
+      Footer
+    </ion-toolbar>
   `
 })
 class PrimaryHeaderPage {
@@ -285,6 +288,10 @@ class PrimaryHeaderPage {
         <button ion-item (click)="setBackButtonText()">Set Back Button Text</button>
       </ion-list>
     </ion-content>
+
+    <ion-toolbar position="bottom">
+      Another Page Footer
+    </ion-toolbar>
   `
 })
 class AnotherPage {

diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts
@@ -24,6 +24,7 @@ import {isPresent} from '../../util/util';
 export class ViewController {
   private _cntDir: any;
   private _cntRef: ElementRef;
+  private _tbRefs: ElementRef[] = [];
   private _destroys: Function[] = [];
   private _hdAttr: string = null;
   private _leavingOpts: NavOptions = null;
@@ -318,6 +319,21 @@ export class ViewController {
     return this._cntRef;
   }
 
+  /**
+   * @private
+   */
+  setToolbarRef(elementRef: ElementRef) {
+    this._tbRefs.push(elementRef);
+  }
+
+  /**
+   * @private
+   * @returns {elementRef} Returns the Page's Content ElementRef
+   */
+  toolbarRefs(): ElementRef[] {
+    return this._tbRefs;
+  }
+
   /**
    * @private
    */
@@ -543,6 +559,7 @@ export class ViewController {
       this._destroys[i]();
     }
     this._destroys.length = 0;
+    this._tbRefs.length = 0;
   }
 
 }

diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
@@ -5,6 +5,7 @@ import {Config} from '../../config/config';
 import {Ion} from '../ion';
 import {MenuToggle} from '../menu/menu-toggle';
 import {Navbar} from '../navbar/navbar';
+import {ViewController} from '../nav/view-controller';
 
 
 /**
@@ -117,9 +118,14 @@ export class ToolbarBase extends Ion {
 export class Toolbar extends ToolbarBase {
   private _sbPadding: boolean;
 
-  constructor(elementRef: ElementRef, config: Config) {
+  constructor(
+    @Optional() viewCtrl: ViewController,
+    elementRef: ElementRef,
+    config: Config
+  ) {
     super(elementRef);
     this._sbPadding = config.getBoolean('statusbarPadding', false);
+    viewCtrl && viewCtrl.setToolbarRef(elementRef);
   }
 
 }

diff --git a/ionic/transitions/transition-ios.ts b/ionic/transitions/transition-ios.ts
@@ -34,6 +34,7 @@ class IOSTransition extends Transition {
 
     // entering content
     let enteringContent = new Animation(enteringView.contentRef());
+    enteringContent.element(enteringView.toolbarRefs());
     this.add(enteringContent);
 
     if (backDirection) {
@@ -120,6 +121,7 @@ class IOSTransition extends Transition {
     if (leavingView) {
       // leaving content
       let leavingContent = new Animation(leavingView.contentRef());
+      leavingContent.element(leavingView.toolbarRefs());
       this.add(leavingContent);
 
       if (backDirection) {