revert(tabs): undo commit that removes tab sub pages

Fix advanced tabs test

This reverts
https://github.com/driftyco/ionic/commit/743de19ae898e83375b51ef9c376225
c8e63f0ef

src/components/app/structure.scss

@@ -219,6 +219,7 @@ ion-content.js-scroll > scroll-content {
 
 [nav-viewport],
 [nav-portal],
+[tab-portal],
 .nav-decor {
   display: none;
 }

src/components/content/content.ts

@@ -524,7 +524,7 @@ export class Content extends Ion {
     ele = parentEle;
     let tabbarEle: HTMLElement;
 
-    while (ele && ele.tagName !== 'ION-MODAL') {
+    while (ele && ele.tagName !== 'ION-MODAL' && !ele.classList.contains('tab-subpage')) {
 
       if (ele.tagName === 'ION-TABS') {
         tabbarEle = <HTMLElement>ele.firstElementChild;

src/components/tabs/tab.ts

@@ -290,7 +290,20 @@ export class Tab extends NavControllerBase {
    * @private
    */
   loadPage(viewCtrl: ViewController, viewport: ViewContainerRef, opts: NavOptions, done: Function) {
+    let isTabSubPage = (this.parent.subPages && viewCtrl.index > 0);
+
+    if (isTabSubPage) {
+      viewport = this.parent.portal;
+    }
+
     super.loadPage(viewCtrl, viewport, opts, () => {
+      if (isTabSubPage) {
+        // add the .tab-subpage css class to tabs pages that should act like subpages
+        let pageEleRef = viewCtrl.pageRef();
+        if (pageEleRef) {
+          this._renderer.setElementClass(pageEleRef.nativeElement, 'tab-subpage', true);
+        }
+      }
       done();
     });
   }

src/components/tabs/tabs.ts

@@ -150,6 +150,7 @@ import { ViewController } from '../nav/view-controller';
       <tab-highlight></tab-highlight>
     </ion-tabbar>
     <ng-content></ng-content>
+    <div #portal tab-portal></div>
   `,
   directives: [Badge, Icon, NgClass, NgFor, NgIf, TabButton, TabHighlight],
   encapsulation: ViewEncapsulation.None,
@@ -173,6 +174,11 @@ export class Tabs extends Ion {
    */
   selectHistory: string[] = [];
 
+  /**
+   * @private
+   */
+  subPages: boolean;
+
   /**
    * @input {number} The default selected tab index when first loaded. If a selected index isn't provided then it will use `0`, the first tab.
    */
@@ -218,6 +224,11 @@ export class Tabs extends Ion {
    */
   @ViewChild('tabbar') private _tabbar: ElementRef;
 
+  /**
+   * @private
+   */
+  @ViewChild('portal', {read: ViewContainerRef}) portal: ViewContainerRef;
+
   /**
    * @private
    */
@@ -237,11 +248,13 @@ export class Tabs extends Ion {
     this.parent = <NavControllerBase>parent;
     this.id = 't' + (++tabIds);
     this._sbPadding = _config.getBoolean('statusbarPadding');
+    this.subPages = _config.getBoolean('tabsHideOnSubPages');
     this._useHighlight = _config.getBoolean('tabsHighlight');
 
     // TODO deprecated 07-07-2016 beta.11
     if (_config.get('tabSubPages') !== null) {
-      console.warn('Config option "tabSubPages" has been deprecated. The Material Design spec now supports Bottom Navigation: https://material.google.com/components/bottom-navigation.html');
+      console.warn('Config option "tabSubPages" has been deprecated. Please use "tabsHideOnSubPages" instead.');
+      this.subPages = _config.getBoolean('tabSubPages');
     }
 
     // TODO deprecated 07-07-2016 beta.11

src/components/tabs/test/advanced/index.ts

@@ -323,8 +323,10 @@ class Tab3Page1 {
 
 
 @Component({
-  template: '<ion-nav swipeBackEnabled="false"></ion-nav>'
+  template: '<ion-nav [root]="root" swipeBackEnabled="false"></ion-nav>'
 })
-class E2EApp {}
+class E2EApp {
+  root = TabsPage;
+}
 
 ionicBootstrap(E2EApp);