fix(tabs): hide tab's navbar when a page comes without a navbar

Closes #5556
ionic-team · Jun 18, 2016 · 2d68089 · 2d68089
1 parent cdb1f85
commit 2d68089
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 24 deletions.
diff --git a/src/components/app/structure.scss b/src/components/app/structure.scss
@@ -125,11 +125,6 @@ ion-page.show-page scroll-content {
   display: block;
 }
 
-ion-page.tab-subpage {
-  position: fixed;
-  z-index: 10;
-}
-
 
 // Toolbar Container Structure
 // --------------------------------------------------

diff --git a/src/components/content/content.ts b/src/components/content/content.ts
@@ -420,6 +420,7 @@ export class Content extends Ion {
     this._paddingBottom = 0;
     this._headerHeight = 0;
     this._footerHeight = 0;
+    this._tabbarOnTop = null;
 
     let ele: HTMLElement = this._elementRef.nativeElement;
     let parentEle: HTMLElement = ele.parentElement;

diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts
@@ -247,12 +247,12 @@ export class Tab extends NavController {
   load(opts: NavOptions, done?: Function) {
     if (!this._loaded && this.root) {
       this.push(this.root, this.rootParams, opts).then(() => {
-        done();
+        done(true);
       });
       this._loaded = true;
 
     } else {
-      done();
+      done(false);
     }
   }
 

diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
@@ -2,8 +2,10 @@ import {Component, ElementRef, Optional, ViewChild, ViewContainerRef, EventEmitt
 
 import {App} from '../app/app';
 import {Config} from '../../config/config';
+import {Content} from '../content/content';
 import {Ion} from '../ion';
 import {isBlank, isTrueProperty} from '../../util/util';
+import {nativeRaf} from '../../util/dom';
 import {NavController} from '../nav/nav-controller';
 import {Platform} from '../../platform/platform';
 import {Tab} from './tab';
@@ -355,7 +357,7 @@ export class Tabs extends Ion {
     let selectedPage = selectedTab.getActive();
     selectedPage && selectedPage.fireWillEnter();
 
-    selectedTab.load(opts, () => {
+    selectedTab.load(opts, (initialLoad: boolean) => {
 
       selectedTab.ionSelect.emit(selectedTab);
       this.ionChange.emit(selectedTab);
@@ -388,6 +390,18 @@ export class Tabs extends Ion {
         this.selectHistory.push(selectedTab.id);
       }
 
+      // if this is not the Tab's initial load then we need
+      // to refresh the tabbar and content dimensions to be sure
+      // they're lined up correctly
+      if (!initialLoad && selectedPage) {
+        var content = <Content>selectedPage.getContent();
+        if (content && content instanceof Content) {
+          nativeRaf(() => {
+            content.readDimensions();
+            content.writeDimensions();
+          });
+        }
+      }
     });
   }
 
@@ -501,6 +515,7 @@ export class Tabs extends Ion {
 
   /**
    * @private
+   * DOM WRITE
    */
   setTabbarPosition(top: number, bottom: number) {
     let tabbarEle = <HTMLElement>this._tabbar.nativeElement;

diff --git a/src/components/tabs/test/advanced/tab2page2.html b/src/components/tabs/test/advanced/tab2page2.html
@@ -9,7 +9,7 @@
 
 <ion-content padding>
 
-  <p><button (click)="push()">Go to Tab 2, Page 3</button></p>
+  <p><button (click)="push()">Go to Tab 2, Page 3 (no navbar)</button></p>
   <p><button (click)="nav.pop()">Back to Tab 2, Page 1</button></p>
   <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>

diff --git a/src/components/tabs/test/advanced/tab2page3.html b/src/components/tabs/test/advanced/tab2page3.html
@@ -1,13 +1,9 @@
-<ion-header>
 
-  <ion-navbar>
-    <ion-title>Tabs 2, Page 3</ion-title>
-  </ion-navbar>
-
-</ion-header>
+<ion-content padding>
 
+  <h2>Tab 2, Page 3</h2>
 
-<ion-content padding>
+  <p>No Header.</p>
 
   <p><button (click)="nav.pop()">Back to Tab 2, Page 2</button></p>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

diff --git a/src/components/tabs/test/advanced/tab3page1.html b/src/components/tabs/test/advanced/tab3page1.html
@@ -1,14 +1,8 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Tabs 3, Page 1</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
 
 <ion-content padding>
 
   <h2>Tabs 3, Page 1</h2>
 
+  <p>No header.</p>
+
 </ion-content>