refactor(tabs): remove tabSubPages UI

The Material Design spec has added “Bottom Navigation”, which is what
Ionic calls “Tabs”. Ionic’s MD mode now follows the updated Material
Design spec with the tabbar placed on the bottom. Additionally, any tab
sub pages do not automatically cover up the tabbar. Covering up the
tabbar is still possible by using a modal, however, it is no longer a
default feature for MD mode.

src/components/app/structure.scss

@@ -219,7 +219,6 @@ 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' && !ele.classList.contains('tab-subpage')) {
+    while (ele && ele.tagName !== 'ION-MODAL') {
 
       if (ele.tagName === 'ION-TABS') {
         tabbarEle = <HTMLElement>ele.firstElementChild;

src/components/tabs/tab.ts

@@ -294,20 +294,7 @@ export class Tab extends NavController {
    * @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

@@ -148,7 +148,6 @@ 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,
@@ -172,11 +171,6 @@ 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.
    */
@@ -222,11 +216,6 @@ export class Tabs extends Ion {
    */
   @ViewChild('tabbar') private _tabbar: ElementRef;
 
-  /**
-   * @private
-   */
-  @ViewChild('portal', {read: ViewContainerRef}) portal: ViewContainerRef;
-
   /**
    * @private
    */
@@ -246,13 +235,11 @@ export class Tabs extends Ion {
     this.parent = parent;
     this.id = ++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. Please use "tabsHideOnSubPages" instead.');
+      console.warn('Config option "tabSubPages" has been deprecated. The Material Design spec now supports Bottom Navigation: https://material.google.com/components/bottom-navigation.html');
-      this.subPages = _config.getBoolean('tabSubPages');
     }
 
     // TODO deprecated 07-07-2016 beta.11

src/config/config.ts

@@ -103,7 +103,6 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
  * | `tabsHighlight`          | `boolean`           | Whether to show a highlight line under the tab when it is selected.                                                                              |
  * | `tabsLayout`             | `string`            | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-left"`, `"icon-right"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`.  |
  * | `tabsPlacement`          | `string`            | The position of the tabs relative to the content. Available options: `"top"`, `"bottom"`                                                         |
- * | `tabsHideOnSubPages`     | `boolean`           | Whether to hide the tabs on child pages or not. If `true` it will not show the tabs on child pages.                                              |
  * | `toastEnter`             | `string`            | The name of the transition to use while a toast is presented.                                                                                    |
  * | `toastLeave`             | `string`            | The name of the transition to use while a toast is dismissed.                                                                                    |
  *

src/config/modes.ts

@@ -39,7 +39,6 @@ Config.setModeConfig('ios', {
 
   tabsHighlight: false,
   tabsPlacement: 'bottom',
-  tabsHideOnSubPages: false,
 
   toastEnter: 'toast-slide-in',
   toastLeave: 'toast-slide-out',
@@ -82,8 +81,7 @@ Config.setModeConfig('md', {
   spinner: 'crescent',
 
   tabsHighlight: true,
-  tabsPlacement: 'top',
+  tabsPlacement: 'bottom',
-  tabsHideOnSubPages: true,
 
   toastEnter: 'toast-md-slide-in',
   toastLeave: 'toast-md-slide-out',
@@ -127,7 +125,6 @@ Config.setModeConfig('wp', {
 
   tabsHighlight: false,
   tabsPlacement: 'top',
-  tabsHideOnSubPages: true,
 
   toastEnter: 'toast-wp-slide-in',
   toastLeave: 'toast-wp-slide-out',

src/decorators/page.ts

@@ -38,7 +38,6 @@ export function Page(config: PageMetadata) {
     config.selector = 'ion-page';
     config.host = config.host || {};
     config.host['[hidden]'] = '_hidden';
-    config.host['[class.tab-subpage]'] = '_tabSubPage';
     var annotations = _reflect.getMetadata('annotations', cls) || [];
     annotations.push(new Component(config));
     _reflect.defineMetadata('annotations', annotations, cls);

src/platform/cordova.ios.scss

@@ -10,7 +10,6 @@ $cordova-ios-statusbar-padding-modal-max-width:         $cordova-statusbar-paddi
 ion-nav > ion-page,
 ion-nav > ion-page > ion-header,
 ion-tab > ion-page > ion-header,
-ion-tabs > ion-page.tab-subpage > ion-header,
 ion-menu {
   @include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding);
   @include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding);

src/platform/cordova.md.scss

@@ -10,7 +10,6 @@ $cordova-md-statusbar-padding-modal-max-width:         $cordova-statusbar-paddin
 ion-nav > ion-page,
 ion-nav > ion-page > ion-header,
 ion-tab > ion-page > ion-header,
-ion-tabs > ion-page.tab-subpage > ion-header,
 ion-menu {
   @include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding);
 }

src/platform/cordova.wp.scss

@@ -10,7 +10,6 @@ $cordova-wp-statusbar-padding-modal-max-width:         $cordova-statusbar-paddin
 ion-nav > ion-page,
 ion-nav > ion-page > ion-header,
 ion-tab > ion-page > ion-header,
-ion-tabs > ion-page.tab-subpage > ion-header,
 ion-menu {
   @include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding);
 }