chore(tabs): update subpages to work w/ @component

ionic-team · May 31, 2016 · 9cc127d · 9cc127d
1 parent 5f8b013
commit 9cc127d
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 18 deletions.
diff --git a/src/components/tabs/tab-button.ts b/src/components/tabs/tab-button.ts
@@ -51,8 +51,9 @@ export class TabButton extends Ion {
     this.hasBadge = !!this.tab.tabBadge;
   }
 
-  @HostListener('click')
-  private onClick() {
+  @HostListener('click', ['$event'])
+  private onClick(ev: UIEvent) {
     this.ionSelect.emit(this.tab);
+    ev.preventDefault();
   }
 }
diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts
@@ -5,9 +5,9 @@ import {Config} from '../../config/config';
 import {isTrueProperty} from '../../util/util';
 import {Keyboard} from '../../util/keyboard';
 import {NavController, NavOptions} from '../nav/nav-controller';
-import {ViewController} from '../nav/view-controller';
-import {Tabs} from './tabs';
 import {TabButton} from './tab-button';
+import {Tabs} from './tabs';
+import {ViewController} from '../nav/view-controller';
 
 
 /**
@@ -291,8 +291,12 @@ export class Tab extends NavController {
     }
 
     super.loadPage(viewCtrl, navbarContainerRef, opts, () => {
-      if (viewCtrl.instance) {
-        viewCtrl.instance._tabSubPage = isTabSubPage;
+      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.scss b/src/components/tabs/tabs.scss
@@ -80,6 +80,7 @@ tabbar {
   border-radius: 0;
 
   text-align: center;
+  text-decoration: none;
   background: none;
   cursor: pointer;
 }

diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
@@ -2,14 +2,14 @@ import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContai
 
 import {App} from '../app/app';
 import {Config} from '../../config/config';
+import {Ion} from '../ion';
+import {isBlank, isTrueProperty} from '../../util/util';
+import {NavController} from '../nav/nav-controller';
+import {Platform} from '../../platform/platform';
 import {Tab} from './tab';
 import {TabButton} from './tab-button';
 import {TabHighlight} from './tab-highlight';
-import {Ion} from '../ion';
-import {Platform} from '../../platform/platform';
-import {NavController} from '../nav/nav-controller';
 import {ViewController} from '../nav/view-controller';
-import {isBlank, isTrueProperty} from '../../util/util';
 
 
 /**
@@ -138,7 +138,7 @@ import {isBlank, isTrueProperty} from '../../util/util';
     '</ion-navbar-section>' +
     '<ion-tabbar-section>' +
       '<tabbar role="tablist">' +
-        '<a *ngFor="let t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab">' +
+        '<a *ngFor="let t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab" href="#">' +
           '<ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
           '<span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>' +
           '<ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="\'badge-\' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>' +

diff --git a/src/components/tabs/test/advanced/index.ts b/src/components/tabs/test/advanced/index.ts
@@ -411,11 +411,15 @@ class Tab3Page1 {
 }
 
 
-@Component({})
-@Routes([
-  { path: '/', component: SignIn },
-  { path: '/tabs', component: TabsPage },
-])
-class E2EApp {}
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+// @Routes([
+//   { path: '/', component: SignIn },
+//   { path: '/tabs', component: TabsPage },
+// ])
+class E2EApp {
+  root = SignIn;
+}
 
 ionicBootstrap(E2EApp);
diff --git a/src/config/bootstrap.ts b/src/config/bootstrap.ts
@@ -39,7 +39,6 @@ export function ionicBootstrap(appRootComponent: any, customProviders?: Array<an
 
 
 export function ionicPostBootstrap(ngComponentRef: ComponentRef<any>): ComponentRef<any> {
-  //ngComponentRef.injector.get(TapClick);
   let app: App = ngComponentRef.injector.get(App);
   app.setAppInjector(ngComponentRef.injector);