fix(router-outlet): css and change logic

ionic-team · Mar 21, 2018 · 6e683c5 · 6e683c5
1 parent a98c764
commit 6e683c5
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 33 deletions.
diff --git a/core/src/components/app/app.scss b/core/src/components/app/app.scss
@@ -154,22 +154,31 @@ sub {
 // --------------------------------------------------
 
 ion-app,
+ion-router-outlet,
+ion-tab,
+ion-tabs,
+ion-nav,
 .ion-page {
   @include position(0);
 
   position: absolute;
   z-index: $z-index-page-container;
-  display: flex;
-
-  flex-direction: column;
-  justify-content: space-between;
+  overflow: hidden;
 
   width: 100%;
   height: 100%;
 
   contain: layout size style;
 }
 
+ion-app,
+.ion-page {
+  display: flex;
+
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 .hide-page {
   opacity: 0;
 }

diff --git a/core/src/components/nav/nav.scss b/core/src/components/nav/nav.scss
diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
@@ -22,7 +22,6 @@ import mdTransitionAnimation from './animations/md.transition';
 
 @Component({
   tag: 'ion-nav',
-  styleUrl: 'nav.scss'
 })
 export class NavControllerBase implements NavOutlet {
 

diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
@@ -15,6 +15,7 @@ export class RouterOutlet implements NavOutlet {
 
   private isTransitioning = false;
   private activeEl: HTMLElement = undefined;
+  private activeComponent: any;
 
   mode: string;
 
@@ -28,14 +29,16 @@ export class RouterOutlet implements NavOutlet {
   @Prop() delegate: FrameworkDelegate;
 
   componentDidUnload() {
-    this.activeEl = undefined;
+    this.activeEl = this.activeComponent = undefined;
   }
 
   @Method()
   async setRoot(component: HTMLElement|string, params?: {[key: string]: any}, opts?: RouterOutletOptions): Promise<boolean> {
-    if (this.isTransitioning) {
+    if (this.isTransitioning || this.activeComponent === component) {
       return false;
     }
+    this.activeComponent = component;
+
     // attach entering view to DOM
     const enteringEl = await attachComponent(this.delegate, this.el, component, ['ion-page', 'hide-page'], params);
     const leavingEl = this.activeEl;

diff --git a/core/src/components/tab/tab.scss b/core/src/components/tab/tab.scss
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
@@ -1,8 +1,7 @@
 import { Build, Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 @Component({
-  tag: 'ion-tab',
-  styleUrl: 'tab.scss'
+  tag: 'ion-tab'
 })
 export class Tab {