Merge branch 'master' into list-border-refactor

Conflicts:
	ionic/components/tabs/test/basic/index.ts

demos/component-docs/app.scss

@@ -20,7 +20,7 @@ $font-path: '../../dist/fonts';
 
 
 body, body:hover, body a, body button, body media-switch {
-  cursor: url('http://ionicframework.com/img/finger.png'), auto;
+  cursor: url('http://ionicframework.com/img/finger.png') 8 8, auto;
 }
 
 body ion-app {

demos/component-docs/buttons/block/pages.ts

@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/block.html',
+  templateUrl: 'buttons/block/block.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class BlockPage {

demos/component-docs/buttons/clear/pages.ts

@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/clear.html',
+  templateUrl: 'buttons/clear/clear.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class ClearPage {

demos/component-docs/buttons/components/pages.ts

@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/components.html',
+  templateUrl: 'buttons/components/components.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class ComponentsPage {

demos/component-docs/buttons/fab/pages.ts

@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/fab.html',
+  templateUrl: 'buttons/fab/fab.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class FabPage {

demos/component-docs/buttons/full/pages.ts

@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/full.html',
+  templateUrl: 'buttons/full/full.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class FullPage {

demos/component-docs/buttons/icons/pages.ts

@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/icons.html',
+  templateUrl: 'buttons/icons/icons.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class IconsPage {

demos/component-docs/buttons/outline/pages.ts

@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/outline.html',
+  templateUrl: 'buttons/outline/outline.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class OutlinePage {

demos/component-docs/buttons/round/pages.ts

@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/round.html',
+  templateUrl: 'buttons/round/round.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class RoundPage {

demos/component-docs/buttons/sizes/pages.ts

@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/sizes.html',
+  templateUrl: 'buttons/sizes/sizes.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class SizesPage {

ionic/animations/animation.ts

@@ -94,10 +94,10 @@ export class Animation {
   }
 
   add(childAnimations) {
-    childAnimations = Array.isArray(childAnimations) ? childAnimations : arguments;
-    for (let i = 0; i < childAnimations.length; i++) {
-      childAnimations[i].parent(this);
-      this._chld.push(childAnimations[i]);
+    var _childAnimations = Array.isArray(childAnimations) ? childAnimations : arguments;
+    for (let i = 0; i < _childAnimations.length; i++) {
+      _childAnimations[i].parent(this);
+      this._chld.push(_childAnimations[i]);
     }
     return this;
   }

ionic/components/app/id.ts

@@ -1,4 +1,4 @@
-import {AppViewManager, ElementRef, Directive} from 'angular2/angular2';
+import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/angular2';
 
 import {IonicApp} from './app';
 
@@ -47,3 +47,15 @@ export class IdRef {
     this.app.unregister(this.id);
   }
 }
+
+
+@Directive({
+  selector: '[attr]',
+  inputs: ['attr']
+})
+export class Attr {
+  constructor(private renderer: Renderer, private elementRef: ElementRef) {}
+  onInit() {
+    this.renderer.setElementAttribute(this.elementRef, this.attr, '');
+  }
+}

ionic/components/navbar/navbar.ts

@@ -69,7 +69,8 @@ class BackButtonText extends Ion {
     '[hidden]': '_hidden'
   },
   inputs: [
-    'hideBackButton'
+    'hideBackButton',
+    'navbarStyle'
   ],
   directives: [BackButton, BackButtonText, Icon]
 })
@@ -82,9 +83,16 @@ export class Navbar extends ToolbarBase {
     renderer: Renderer
   ) {
     super(elementRef, config);
+    this.app = app;
+    this.renderer = renderer;
+
     renderer.setElementClass(elementRef, 'toolbar', true);
 
-    this.app = app;
+    let navbarStyle = config.get('navbarStyle');
+    if (navbarStyle) {
+      renderer.setElementAttribute(elementRef, navbarStyle, '');
+    }
+
     viewCtrl && viewCtrl.setNavbar(this);
 
     this.bbIcon = config.get('backButtonIcon');
@@ -92,10 +100,15 @@ export class Navbar extends ToolbarBase {
   }
 
   onInit() {
+    super.onInit();
     let hideBackButton = this.hideBackButton;
     if (typeof hideBackButton === 'string') {
       this.hideBackButton = (hideBackButton === '' || hideBackButton === 'true');
     }
+    
+    if (this.navbarStyle) {
+      this.renderer.setElementAttribute(this.elementRef, this.navbarStyle, '');
+    }
   }
 
   getBackButtonRef() {

ionic/components/tabs/modes/ios.scss

@@ -88,3 +88,11 @@ ion-tabs[tabbar-placement=top] tabbar {
   }
 
 }
+
+@each $color-name, $color-value in $colors {
+
+  tabbar[#{$color-name}] {
+    border-color: darken($color-value, 10%);
+  }
+
+}

ionic/components/tabs/tabs.scss

@@ -87,10 +87,11 @@ tabbar {
   border: 0;
   border-radius: 0;
   background: none;
+}
 
-  &:hover:not(.disable-hover) {
-    color: $tab-button-active-color;
-  }
+.tab-button:hover:not(.disable-hover),
+.tab-button[aria-selected=true] {
+  color: $tab-button-active-color;
 }
 
 .tab-button-text {
@@ -121,10 +122,6 @@ tabbar {
   white-space: normal;
 }
 
-.tab-button[aria-selected=true] {
-  color: $tab-button-active-color;
-}
-
 tab-highlight {
   display: none;
 }
@@ -157,3 +154,24 @@ tab-highlight {
 [tabbar-icons=hide] .tab-button-icon {
   display: none;
 }
+
+
+// Tabbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors {
+
+  tabbar[#{$color-name}] {
+    background-color: $color-value;
+
+    .tab-button {
+      color: inverse($color-value);
+    }
+
+    .tab-button:hover:not(.disable-hover),
+    .tab-button[aria-selected=true] {
+      color: inverse($color-value);
+    }
+  }
+
+}

ionic/components/tabs/tabs.ts

@@ -2,6 +2,7 @@ import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewCont
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
+import {Attr} from '../app/id';
 import {Config} from '../../config/config';
 import {ViewController} from '../nav/view-controller';
 import {ConfigComponent} from '../../config/decorators';
@@ -63,6 +64,7 @@ import {Icon} from '../icon/icon';
   defaultInputs: {
     'tabbarPlacement': 'bottom',
     'tabbarIcons': 'top',
+    'tabbarStyle': 'default',
     'preloadTabs': true
   },
   template:
@@ -70,7 +72,7 @@ import {Icon} from '../icon/icon';
       '<template navbar-anchor></template>' +
     '</ion-navbar-section>' +
     '<ion-tabbar-section>' +
-      '<tabbar role="tablist">' +
+      '<tabbar role="tablist" [attr]="tabbarStyle">' +
         '<a *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' +
           '<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' +
           '<span class="tab-button-text">{{t.tabTitle}}</span>' +
@@ -85,6 +87,7 @@ import {Icon} from '../icon/icon';
     Icon,
     NgFor,
     NgIf,
+    Attr,
     forwardRef(() => TabButton),
     forwardRef(() => TabHighlight),
     forwardRef(() => TabNavBarAnchor)
@@ -217,15 +220,36 @@ export class Tabs extends Ion {
 
   /**
    * @private
-   * "Touch" the active tab, either going back to the root view of the tab
-   * or scrolling the tab to the top
+   * "Touch" the active tab, going back to the root view of the tab
+   * or optionally letting the tab handle the event
    */
   touchActive(tab) {
+    let active = tab.getActive();
+
+    if(!active) {
+      return Promise.resolve();
+    }
+
+    let instance = active.instance;
+
+    // If they have a custom tab selected handler, call it
+    if(instance.tabSelected) {
+      return instance.tabSelected();
+    }
+
+    // If we're a few pages deep, pop to root
     if (tab.length() > 1) {
       // Pop to the root view
       return tab.popToRoot();
     }
 
+    // Otherwise, if the page we're on is not our real root, reset it to our
+    // default root type
+    if(tab.root != active.componentType) {
+      return tab.setRoot(tab.root);
+    }
+
+    // And failing all of that, we do something safe and secure
     return Promise.resolve();
   }
 

ionic/components/tabs/test/basic/index.ts

@@ -54,9 +54,7 @@ class Tab1 {
   `
 })
 class Tab2 {
-  constructor(nav: NavController) {
-    this.nav = nav;
-
+  constructor() {
     this.sessions = [];
     for(var i = 1; i <= 250; i++) {
       this.sessions.push({
@@ -83,11 +81,8 @@ class Tab2 {
     </ion-content>
     `
 })
-class Tab3 {
-  constructor(nav: NavController) {
-    this.nav = nav;
-  }
-}
+class Tab3 {}
+
 
 @App({
   template: `
@@ -104,7 +99,7 @@ class Tab3 {
       </ion-content>
     </ion-menu>
 
-    <ion-tabs #content>
+    <ion-tabs #content tabbar-style="secondary">
       <ion-tab tab-title="Plain List" tab-icon="star" [root]="root1"></ion-tab>
       <ion-tab tab-title="Schedule" tab-icon="globe" [root]="root2"></ion-tab>
       <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>

ionic/components/tabs/test/ghost/e2e.ts

@@ -0,0 +1 @@
+

ionic/components/tabs/test/ghost/index.ts

@@ -0,0 +1,133 @@
+  import {App, Page, NavController, Tab} from 'ionic/ionic';
+
+import {ContentChild, QueryList, ViewChildren} from 'angular2/angular2';
+
+//
+// Tab 1
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Heart</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 1</h2>
+    </ion-content>
+    `
+})
+class Tab1 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+//
+// Tab 2
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Star</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 2</h2>
+    </ion-content>
+    `
+})
+class Tab2 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+//
+// Tab 3
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <a menu-toggle>
+        <icon menu></icon>
+      </a>
+      <ion-title>Stopwatch</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 3</h2>
+    </ion-content>
+    `
+})
+class Tab3 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+//
+// Tab 3
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <a menu-toggle>
+        <icon menu></icon>
+      </a>
+      <ion-title>Quesarito</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Quesarito</h2>
+    </ion-content>
+    `
+})
+class QuesaritoPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+@App({
+  template: `
+    <ion-menu [content]="content">
+      <ion-toolbar secondary>
+        <ion-title>Secret Menu</ion-title>
+      </ion-toolbar>
+      <ion-content>
+        <ion-list>
+          <button ion-item menu-close detail-none (click)="openPage('quesarito')">
+            Quesarito
+          </button>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+
+    <ion-tabs #content>
+      <ion-tab tab-title="Heart" tab-icon="heart" [root]="root1" #tab1></ion-tab>
+      <ion-tab tab-title="Star" tab-icon="star" [root]="root2"></ion-tab>
+      <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>
+    </ion-tabs>
+  `
+})
+export class TabsPage {
+  @ViewChildren(Tab) tab : QueryList<Tab>;
+
+  afterViewInit() {
+    console.log('Tab', this.tab);
+    console.log(this.tab.first.setRoot);
+  }
+
+  openPage(which) {
+    let pages = {
+      'quesarito': QuesaritoPage
+    };
+
+    this.tab.first.setRoot(pages[which])
+  }
+
+  constructor() {
+
+    this.root1 = Tab1;
+    this.root2 = Tab2;
+    this.root3 = Tab3;
+  }
+  onInit() {
+  }
+}

ionic/components/tabs/test/tab-bar-scenarios/main.html

@@ -59,3 +59,11 @@
   <ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
   <ion-tab tab-title="Indiana Jones and the Last Crusade"></ion-tab>
 </ion-tabs>
+
+
+<!-- primary color tabbar -->
+<ion-tabs no-navbar tabbar-style="primary">
+  <ion-tab tab-icon="call"></ion-tab>
+  <ion-tab tab-icon="heart"></ion-tab>
+  <ion-tab tab-icon="settings"></ion-tab>
+</ion-tabs>