From 6e683c54e03dc611960469db4c6a5cf82f088134 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Wed, 21 Mar 2018 16:50:54 +0100
Subject: [PATCH] fix(router-outlet): css and change logic

---
 core/src/components/app/app.scss                | 17 +++++++++++++----
 core/src/components/nav/nav.scss                | 14 --------------
 core/src/components/nav/nav.tsx                 |  1 -
 .../components/router-outlet/route-outlet.tsx   |  7 +++++--
 core/src/components/tab/tab.scss                | 10 ----------
 core/src/components/tab/tab.tsx                 |  3 +--
 6 files changed, 19 insertions(+), 33 deletions(-)
 delete mode 100644 core/src/components/nav/nav.scss
 delete mode 100644 core/src/components/tab/tab.scss

diff --git a/core/src/components/app/app.scss b/core/src/components/app/app.scss
index c0650bf89a..7b504b7657 100644
--- a/core/src/components/app/app.scss
+++ b/core/src/components/app/app.scss
@@ -154,15 +154,16 @@ 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%;
@@ -170,6 +171,14 @@ ion-app,
   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
deleted file mode 100644
index 5b052883f5..0000000000
--- a/core/src/components/nav/nav.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import "../../themes/util";
-
-ion-nav {
-  @include position(0);
-
-  position: absolute;
-  z-index: $z-index-page-container;
-  overflow: hidden;
-
-  width: 100%;
-  height: 100%;
-
-  contain: layout size style;
-}
diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
index dae4bec3ca..99a47ed91c 100644
--- 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
index f28d1597bb..b5ea8ec71e 100644
--- 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
deleted file mode 100644
index 5134090f09..0000000000
--- a/core/src/components/tab/tab.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "../../themes/ionic.globals";
-
-ion-tab {
-  @include position(0, null, null, 0);
-
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-}
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
index b7efd00a9d..3a21b5ffb6 100644
--- 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 {