From 94c02e71b234f2a4ebb81177ece7851952c81f18 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 17 Oct 2015 22:57:01 -0500
Subject: [PATCH] improve iOS navbar transitions

---
 ionic/components/nav/test/basic/index.ts     | 79 +++++++++++++-------
 ionic/components/nav/test/routing/index.ts   |  6 +-
 ionic/components/nav/test/routing/view1.html |  4 +-
 ionic/components/nav/test/routing/view2.html |  2 +-
 ionic/components/nav/test/routing/view3.html |  2 +-
 ionic/transitions/ios-transition.ts          | 24 +++++-
 6 files changed, 79 insertions(+), 38 deletions(-)

diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts
index 23b6f4b84a..6115f188a3 100644
--- a/ionic/components/nav/test/basic/index.ts
+++ b/ionic/components/nav/test/basic/index.ts
@@ -4,28 +4,28 @@ import {NavParams, NavController} from 'ionic/ionic';
 
 
 @Page({
-  template: '' +
-    '<ion-navbar *navbar>' +
-      '<ion-title><ion-segment><ion-segment-button>Friends</ion-segment-button><ion-segment-button>Enemies</ion-segment-button></ion-segment></ion-title>' +
-      '<ion-nav-items primary>' +
-        '<button><icon star></icon></button>' +
-      '</ion-nav-items>' +
-      '<ion-nav-items secondary>' +
-        '<button>S1</button>' +
-      '</ion-nav-items>' +
-    '</ion-navbar>' +
-    '<ion-content padding>' +
-      '<p>{{title}}</p>' +
-      '<p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>' +
-      '<p><button [nav-push]="[pushPage, {id: 42}]">Push w/ [nav-push] array (Go to 2nd)</button></p>' +
-      '<p><button [nav-push]="pushPage" [nav-params]="{id:40}">Push w/ [nav-push] and [nav-params] (Go to 2nd)</button></p>' +
-      '<p><button [nav-push]="[\'FirstPage\', {id: 22}]">Push w/ [nav-push] array and string view name (Go to 2nd)</button></p>' +
-      '<p><button nav-push="FirstPage" [nav-params]="{id: 23}">Push w/ nav-push and [nav-params] (Go to 2nd)</button></p>' +
-      '<p><button (click)="setViews()">setViews() (Go to 3rd, no history)</button></p>' +
-      '<icon class="ion-ios-arrow-back"></icon>' +
-      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>'
+  template: `
+    <ion-navbar *navbar>
+      <ion-title><ion-segment><ion-segment-button>Friends</ion-segment-button><ion-segment-button>Enemies</ion-segment-button></ion-segment></ion-title>
+      <ion-nav-items primary>
+        <button><icon star></icon></button>
+      </ion-nav-items>
+      <ion-nav-items secondary>
+        <button>S1</button>
+      </ion-nav-items>
+    </ion-navbar>
+    <ion-content padding>
+      <p>{{title}}</p>
+      <p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>
+      <p><button [nav-push]="[pushPage, {id: 42}]">Push w/ [nav-push] array (Go to 2nd)</button></p>
+      <p><button [nav-push]="pushPage" [nav-params]="{id:40}">Push w/ [nav-push] and [nav-params] (Go to 2nd)</button></p>
+      <p><button [nav-push]="[\'FirstPage\', {id: 22}]">Push w/ [nav-push] array and string view name (Go to 2nd)</button></p>
+      <p><button nav-push="FirstPage" [nav-params]="{id: 23}">Push w/ nav-push and [nav-params] (Go to 2nd)</button></p>
+      <p><button (click)="setViews()">setViews() (Go to 3rd, no history)</button></p>
+      <icon class="ion-ios-arrow-back"></icon>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+    </ion-content>`
 })
 class FirstPage {
   constructor(
@@ -101,11 +101,10 @@ class SecondPage {
   template: `
     <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
     <ion-content padding>
-      <p>
-        <button id="from3To2" (click)="pop()">Pop (Go back to 2nd)</button>
-        <button id="insert" (click)="insert()">Insert first page into history before this</button>
-        <button id="remove" (click)="removeSecond()">Remove second page in history</button>
-      </p>
+      <p><button (click)="push()">Push (Go to 4th)</button></p>
+      <p><button id="from3To2" (click)="pop()">Pop (Go back to 2nd)</button></p>
+      <p><button id="insert" (click)="insert()">Insert first page into history before this</button></p>
+      <p><button id="remove" (click)="removeSecond()">Remove second page in history</button></p>
       <div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
     </ion-content>
   `
@@ -117,6 +116,10 @@ class ThirdPage {
     this.nav = nav
   }
 
+  push() {
+    this.nav.push(FourthPage);
+  }
+
   pop() {
     this.nav.pop()
   }
@@ -132,9 +135,29 @@ class ThirdPage {
 }
 
 
+@Page({
+  template: `
+    <ion-navbar *navbar><ion-title>Fourth Page Header</ion-title></ion-navbar>
+    <ion-content padding>
+      <p>
+        <button (click)="nav.pop()">Pop (Go back to 3rd)</button>
+      </p>
+    </ion-content>
+  `
+})
+class FourthPage {
+  constructor(
+    nav: NavController
+  ) {
+    this.nav = nav
+  }
+}
+
 
 @App({
-  template: '<ion-nav [root]="root"></ion-nav>',
+  template: `
+    <ion-nav [root]="root"></ion-nav>
+  `,
   views: [FirstPage, SecondPage, ThirdPage]
 })
 class E2EApp {
diff --git a/ionic/components/nav/test/routing/index.ts b/ionic/components/nav/test/routing/index.ts
index c267ae07d2..2ed275e313 100644
--- a/ionic/components/nav/test/routing/index.ts
+++ b/ionic/components/nav/test/routing/index.ts
@@ -45,9 +45,9 @@ class View3Cmp {
 
 @App()
 @RouteConfig([
-  { path: '/', component: View1Cmp, as: 'first' },
-  { path: '/second', component: View2Cmp, as: 'second' },
-  { path: '/third/:id', component: View3Cmp, as: 'third' }
+  { path: '/', component: View1Cmp, as: 'First' },
+  { path: '/2', component: View2Cmp, as: 'Second' },
+  { path: '/3/:id', component: View3Cmp, as: 'Third' }
 ])
 class InboxApp {
   constructor(location: Location) {
diff --git a/ionic/components/nav/test/routing/view1.html b/ionic/components/nav/test/routing/view1.html
index 983d6583b3..b48af356a4 100644
--- a/ionic/components/nav/test/routing/view1.html
+++ b/ionic/components/nav/test/routing/view1.html
@@ -17,9 +17,9 @@
     ViewController Id: {{viewCtrl.id}}
   </h4>
   <p>
-    <a href="#/second">Second View via href</a>
+    <a href="#/2">Second View via href</a>
   </p>
   <p>
-    <a href="#/third/3">Third View via href, 3 as id param</a>
+    <a href="#/3/151">Third View via href, 151 as id param</a>
   </p>
 </ion-content>
diff --git a/ionic/components/nav/test/routing/view2.html b/ionic/components/nav/test/routing/view2.html
index f6e0b4c56c..3cd2b1d7e5 100644
--- a/ionic/components/nav/test/routing/view2.html
+++ b/ionic/components/nav/test/routing/view2.html
@@ -19,7 +19,7 @@
     ViewController Id: {{viewCtrl.id}}
   </h4>
   <p>
-    <a href="#/third/12">Third View via href, 12 as id param</a>
+    <a href="#/3/27">Third View via href, 27 as id param</a>
   </p>
   <p>
     <a href="#/">First View via href</a>
diff --git a/ionic/components/nav/test/routing/view3.html b/ionic/components/nav/test/routing/view3.html
index 3d052263cb..99a0017846 100644
--- a/ionic/components/nav/test/routing/view3.html
+++ b/ionic/components/nav/test/routing/view3.html
@@ -17,7 +17,7 @@
     ViewController Id: {{viewCtrl.id}}
   </h4>
   <p>
-    <a href="#/second">Second View via href</a>
+    <a href="#/2">Second View via href</a>
   </p>
   <p>
     <a href="#/">First View via href</a>
diff --git a/ionic/transitions/ios-transition.ts b/ionic/transitions/ios-transition.ts
index cceb36062a..9d43058b5b 100644
--- a/ionic/transitions/ios-transition.ts
+++ b/ionic/transitions/ios-transition.ts
@@ -78,7 +78,7 @@ class IOSTransition extends Animation {
       if (backDirection) {
         // back direction
         enteringTitle.fromTo(TRANSLATEX, OFF_LEFT, CENTER);
-        enteringNavbarBg.fromTo(TRANSLATEX, OFF_LEFT, CENTER);
+
         if (enteringView.enableBack()) {
           enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
           enteringBackButton.fadeIn();
@@ -87,7 +87,6 @@ class IOSTransition extends Animation {
       } else {
         // forward direction
         enteringTitle.fromTo(TRANSLATEX, OFF_RIGHT, CENTER);
-        enteringNavbarBg.fromTo(TRANSLATEX, OFF_RIGHT, CENTER);
 
         if (enteringView.enableBack()) {
           enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
@@ -97,6 +96,17 @@ class IOSTransition extends Animation {
           enteringBackBtnText.fromTo(TRANSLATEX, '150px', '0px');
           enteringNavBar.add(enteringBackBtnText);
         }
+
+        if (leavingHasNavbar) {
+          // if there is a leaving navbar, then just fade this one in
+          enteringNavbarBg
+            .fromTo(TRANSLATEX, CENTER, CENTER)
+            .fadeIn();
+
+        } else {
+          enteringNavbarBg.fromTo(TRANSLATEX, OFF_RIGHT, CENTER);
+        }
+
       }
     }
 
@@ -146,7 +156,15 @@ class IOSTransition extends Animation {
         if (backDirection) {
           // back direction
           leavingTitle.fromTo(TRANSLATEX, CENTER, '100%');
-          leavingNavbarBg.fromTo(TRANSLATEX, CENTER, '100%');
+          if (enteringHasNavbar) {
+            // this is an entering navbar, just fade this out
+            leavingNavbarBg
+              .fromTo(TRANSLATEX, CENTER, CENTER)
+              .fadeOut();
+
+          } else {
+            leavingNavbarBg.fromTo(TRANSLATEX, CENTER, '100%');
+          }
 
           let leavingBackBtnText = new Animation(leavingView.backBtnTextRef());
           leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (300) + 'px');