refactor(navbar): improved navbar transitions

ionic/components/app/app.ts

@@ -111,7 +111,6 @@ export class IonicApp {
    * @return {bool}
    */
   isTransitioning() {
-    console.debug('isTransitioning', (this._trnsTime > Date.now()), this._trnsTime, Date.now())
     return (this._trnsTime > Date.now());
   }
 

ionic/components/app/structure.scss

@@ -13,6 +13,7 @@ $z-index-navbar-container:       10;
 
 $z-index-content:                5;
 $z-index-toolbar:                10;
+$z-index-toolbar-background:     -1;
 
 $z-index-toolbar-border:         20;
 $z-index-list-border:            50;
@@ -139,7 +140,7 @@ ion-view {
   height: 100%;
   flex-direction: column;
 
-  background-color: white;
+  background-color: $background-color;
 
   transform: translateZ(0px);
 }

ionic/components/app/typography.scss

@@ -35,7 +35,7 @@ a {
   background-color: transparent;
 }
 .enable-hover a:hover {
-  color: $link-hover-color;
+  opacity: 0.7;
 }
 
 h1, h2, h3, h4, h5, h6 {

ionic/components/menu/menu-types.scss

@@ -28,8 +28,8 @@ ion-menu[type=overlay] {
     display: block;
     transform: translate3d(-9999px, 0px, 0px);
     opacity: 0.01;
-    left: -1000px;
+    left: -3000px;
-    width: 4000px;
+    width: 6000px;
 
     &.show-backdrop {
       transform: translate3d(0px, 0px, 0px);

ionic/components/nav-bar/nav-bar.scss

@@ -29,7 +29,3 @@ ion-navbar {
   display: flex;
   align-items: center;
 }
-
-.transparent-navbar {
-  background-color: transparent !important;
-}

ionic/components/nav-bar/nav-bar.ts

@@ -67,7 +67,8 @@ class BackButtonText extends Ion {
       '<ng-content select="ion-title"></ng-content>' +
       '<ng-content select="ion-nav-items[primary]"></ng-content>' +
       '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-    '</div>',
+    '</div>' +
+    '<div class="toolbar-background"></div>',
   directives: [BackButton, BackButtonText]
 })
 export class Navbar extends ToolbarBase {

ionic/components/nav/view-controller.ts

@@ -325,6 +325,17 @@ export class ViewController {
     }
   }
 
+  /**
+   * TODO
+   * @returns {TODO} TODO
+   */
+  navbarBackgroundRef() {
+    let navbarView = this.navbarView();
+    if (navbarView) {
+      return navbarView.getNativeElement().querySelector('.toolbar-background');
+    }
+  }
+
   /**
    * TODO
    * @returns {TODO} TODO

ionic/components/toolbar/modes/ios.scss

@@ -17,8 +17,6 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
 
 .toolbar {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
   min-height: $toolbar-ios-height;
 
   [menu-toggle] {
@@ -66,6 +64,11 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
 }
 
+.toolbar .toolbar-background {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
 ion-title {
   position: absolute;
   top: 0;
@@ -93,6 +96,6 @@ ion-nav-items[secondary] {
   order: map-get($toolbar-order-ios, secondary);
 }
 
-&.hairlines .toolbar {
+&.hairlines .toolbar .toolbar-background {
   border-bottom-width: 0.55px;
 }

ionic/components/toolbar/toolbar.scss

@@ -28,10 +28,6 @@ $toolbar-order: (
   padding: $toolbar-padding;
   width: 100%;
 
-  border: 0;
-  border-color: $toolbar-border-color;
-  background-color: $toolbar-background-color;
-
   button,
   [button] {
     background-color: transparent;
@@ -40,6 +36,21 @@ $toolbar-order: (
   }
 }
 
+.toolbar .toolbar-background {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-toolbar-background;
+
+  border: 0;
+  border-color: $toolbar-border-color;
+  background-color: $toolbar-background-color;
+
+  pointer-events: none;
+}
+
 .enable-hover .toolbar button:hover,
 .enable-hover .toolbar [button]:hover,
 .toolbar button.activated,
@@ -120,8 +131,11 @@ ion-nav-items div {
 @each $color-name, $color-value in $colors {
 
   .toolbar[#{$color-name}] {
+
+    .toolbar-background {
       background-color: $color-value;
       border-color: darken($color-value, 10%);
+    }
 
     .toolbar-title,
     button,

ionic/components/toolbar/toolbar.ts

@@ -69,7 +69,8 @@ export class ToolbarBase extends Ion  {
       '<ng-content select="ion-title"></ng-content>' +
       '<ng-content select="ion-nav-items[primary]"></ng-content>' +
       '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-    '</div>'
+    '</div>' +
+    '<div class="toolbar-background"></div>'
 })
 export class Toolbar extends ToolbarBase {
   constructor(

ionic/themes/dark.scss

@@ -21,7 +21,6 @@ $list-background-color:      $background-color !default;
 $list-border-color:               #666 !default;
 
 $link-color:                 map-get($colors, primary) !default;
-$link-hover-color:           lighten($link-color, 15%) !default;
 
 $toolbar-background-color:   #111 !default;
 $toolbar-border-color:       #000 !default;

ionic/themes/default.scss

@@ -22,7 +22,6 @@ $list-background-color:      $background-color !default;
 $list-border-color:          #c8c7cc !default;
 
 $link-color:                 map-get($colors, primary) !default;
-$link-hover-color:           darken($link-color, 15%) !default;
 
 $toolbar-background-color:   #f8f8f8 !default;
 $toolbar-border-color:       #b2b2b2 !default;

ionic/transitions/ios-transition.ts

@@ -32,6 +32,9 @@ class IOSTransition extends Transition {
       .fadeIn()
       .to(TRANSLATEX, CENTER);
 
+    this.enteringNavbarBackground
+      .to(TRANSLATEX, CENTER);
+
     // leaving view moves off screen
     this.leavingView
       .from(TRANSLATEX, CENTER)
@@ -42,6 +45,9 @@ class IOSTransition extends Transition {
       .from(TRANSLATEX, CENTER)
       .from(OPACITY, 1);
 
+    this.leavingNavbarBackground
+      .from(TRANSLATEX, CENTER);
+
     // set properties depending on direction
     if (opts.direction === 'back') {
       // back direction
@@ -53,9 +59,8 @@ class IOSTransition extends Transition {
       this.enteringTitle
         .from(TRANSLATEX, OFF_LEFT);
 
-      this.leavingNavbar
+      this.enteringNavbarBackground
-        .before.addClass('transparent-navbar')
+        .from(TRANSLATEX, OFF_LEFT);
-        .after.removeClass('transparent-navbar');
 
       this.leavingView
         .to(TRANSLATEX, '100%')
@@ -65,6 +70,9 @@ class IOSTransition extends Transition {
         .to(TRANSLATEX, '100%')
         .to(OPACITY, 0);
 
+      this.leavingNavbarBackground
+        .to(TRANSLATEX, '100%');
+
       if (this.leaving.enableBack() && this.viewWidth() > 200) {
         let leavingBackButtonText = new Animation(this.leaving.backBtnTextRef());
         leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px');
@@ -77,13 +85,12 @@ class IOSTransition extends Transition {
         .from(TRANSLATEX, '99.5%')
         .from(OPACITY, 1);
 
-      this.enteringNavbar
-        .before.addClass('transparent-navbar')
-        .after.removeClass('transparent-navbar');
-
       this.enteringTitle
         .from(TRANSLATEX, '99.5%');
 
+      this.enteringNavbarBackground
+        .from(TRANSLATEX, '99.5%');
+
       this.leavingView
         .to(TRANSLATEX, OFF_LEFT)
         .to(OPACITY, OFF_OPACITY);
@@ -92,6 +99,9 @@ class IOSTransition extends Transition {
         .to(TRANSLATEX, OFF_LEFT)
         .to(OPACITY, 0);
 
+      this.leavingNavbarBackground
+        .to(TRANSLATEX, OFF_LEFT);
+
       if (this.entering.enableBack() && this.viewWidth() > 200) {
         let enteringBackButtonText = new Animation(this.entering.backBtnTextRef());
         enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER);

ionic/transitions/transition.ts

@@ -46,8 +46,10 @@ export class Transition extends Animation {
       this.add(enteringNavbar);
 
       this.enteringNavbarItems = new Animation(enteringView.navbarItemRefs());
-      this.enteringNavbarItems.fadeIn();
+      enteringNavbar.add(this.enteringNavbarItems.fadeIn());
-      enteringNavbar.add(this.enteringNavbarItems);
+
+      this.enteringNavbarBackground = new Animation(enteringView.navbarBackgroundRef());
+      enteringNavbar.add(this.enteringNavbarBackground);
     }
 
 
@@ -69,8 +71,10 @@ export class Transition extends Animation {
       leavingNavbar.add(this.leavingTitle);
 
       this.leavingNavbarItems = new Animation(leavingView.navbarItemRefs());
-      this.leavingNavbarItems.fadeOut();
+      leavingNavbar.add(this.leavingNavbarItems.fadeOut());
-      leavingNavbar.add(this.leavingNavbarItems);
+
+      this.leavingNavbarBackground = new Animation(leavingView.navbarBackgroundRef());
+      leavingNavbar.add(this.leavingNavbarBackground);
 
       this.add(this.leavingView, leavingNavbar);
     }