fix(nav): auto set iOS black transition bg via css

ionic-team · Jun 20, 2016 · 7842991 · 7842991
1 parent 3a7addf
commit 7842991
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/src/components/app/structure.scss b/src/components/app/structure.scss
@@ -209,6 +209,7 @@ ion-content.js-scroll > scroll-content {
 
 [nav-viewport],
 [nav-portal],
-[tab-portal] {
+[tab-portal],
+.nav-decor {
   display: none;
 }
diff --git a/src/components/content/content.ios.scss b/src/components/content/content.ios.scss
@@ -7,7 +7,7 @@
 $content-ios-outer-background:          #efeff4 !default;
 $content-ios-padding:                   $content-padding !default;
 $content-ios-margin:                    $content-margin !default;
-$content-ios-has-views-background:      #000 !default;
+$content-ios-transition-background:     #000 !default;
 
 ion-content {
   background-color: $background-ios-color;
@@ -17,9 +17,21 @@ ion-content {
   background: $content-ios-outer-background;
 }
 
-ion-nav.has-views,
-ion-tab.has-views {
-  background: $content-ios-has-views-background;
+ion-page.show-page ~ .nav-decor {
+  // when ios pages transition, the leaving page grays out
+  // this is the black square behind all pages so they gray out
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  background: $content-ios-transition-background;
+
+  pointer-events: none;
 }
 
 

diff --git a/src/components/nav/nav-controller.ts b/src/components/nav/nav-controller.ts
@@ -1324,9 +1324,6 @@ export class NavController extends Ion {
         // class to the nav when it's finished its first transition
         if (!this._init) {
           this._init = true;
-          if (!this.isPortal) {
-            this._renderer.setElementClass(this.getNativeElement(), 'has-views', true);
-          }
         }
 
       } else {

diff --git a/src/components/nav/nav.ts b/src/components/nav/nav.ts
@@ -109,7 +109,7 @@ import {ViewController} from './view-controller';
  */
 @Component({
   selector: 'ion-nav',
-  template: '<div #viewport nav-viewport></div><div nav-portal></div>',
+  template: '<div #viewport nav-viewport></div><div class="nav-decor"></div><div nav-portal></div>',
   directives: [NavPortal],
   encapsulation: ViewEncapsulation.None,
 })

diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts
@@ -123,7 +123,7 @@ import {ViewController} from '../nav/view-controller';
     '[attr.aria-labelledby]': '_btnId',
     'role': 'tabpanel'
   },
-  template: '<div #viewport></div>',
+  template: '<div #viewport></div><div class="nav-decor"></div>',
   encapsulation: ViewEncapsulation.None,
 })
 export class Tab extends NavController {