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.
ionic-team · Jul 13, 2016 · 743de19 · 743de19
1 parent cca3309
commit 743de19
Show file tree

Hide file tree

Showing 10 changed files with 3 additions and 38 deletions.
diff --git a/src/components/app/structure.scss b/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;
 }
diff --git a/src/components/content/content.ts b/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;

diff --git a/src/components/tabs/tab.ts b/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();
     });
   }

diff --git a/src/components/tabs/tabs.ts b/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.');
-      this.subPages = _config.getBoolean('tabSubPages');
+      console.warn('Config option "tabSubPages" has been deprecated. The Material Design spec now supports Bottom Navigation: https://material.google.com/components/bottom-navigation.html');
     }
 
     // TODO deprecated 07-07-2016 beta.11

diff --git a/src/config/config.ts b/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.                                                                                    |
  *

diff --git a/src/config/modes.ts b/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',
-  tabsHideOnSubPages: true,
+  tabsPlacement: 'bottom',
 
   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',

diff --git a/src/decorators/page.ts b/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);

diff --git a/src/platform/cordova.ios.scss b/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);

diff --git a/src/platform/cordova.md.scss b/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);
 }

diff --git a/src/platform/cordova.wp.scss b/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);
 }