refactor(components): add color/mode properties

src/components/toolbar/toolbar-item.ts

@@ -1,6 +1,8 @@
-import { Directive, ElementRef, Optional, forwardRef, Inject, ContentChildren } from '@angular/core';
+import { ContentChildren, Directive, ElementRef, forwardRef, Optional, Inject, Renderer } from '@angular/core';
 
 import { Button } from '../button/button';
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
 import { Navbar } from '../navbar/navbar';
 import { Toolbar } from './toolbar';
 
@@ -11,16 +13,19 @@ import { Toolbar } from './toolbar';
 @Directive({
   selector: 'ion-buttons,[menuToggle]'
 })
-export class ToolbarItem {
+export class ToolbarItem extends Ion {
   inToolbar: boolean;
 
   constructor(
+    config: Config,
     elementRef: ElementRef,
+    renderer: Renderer,
     @Optional() toolbar: Toolbar,
     @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
   ) {
-    toolbar && toolbar.addItemRef(elementRef);
-    navbar && navbar.addItemRef(elementRef);
+    super(config, elementRef, renderer);
+
+    this._setMode('bar-buttons', config.get('mode'));
     this.inToolbar = !!(toolbar || navbar);
   }
 

src/components/toolbar/toolbar-title.ts

@@ -1,5 +1,6 @@
-import { Component, ElementRef, Optional, forwardRef, Inject, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, Optional, Inject, Renderer, ViewEncapsulation } from '@angular/core';
 
+import { Config } from '../../config/config';
 import { Ion } from '../ion';
 import { Navbar } from '../navbar/navbar';
 import { Toolbar } from './toolbar';
@@ -43,7 +44,7 @@ import { Toolbar } from './toolbar';
 @Component({
   selector: 'ion-title',
   template:
-    '<div class="toolbar-title">' +
+    '<div class="toolbar-title" [ngClass]="\'toolbar-title-\' + _mode">' +
       '<ng-content></ng-content>' +
     '</div>',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -51,13 +52,17 @@ import { Toolbar } from './toolbar';
 })
 export class ToolbarTitle extends Ion {
   constructor(
-    private _elementRef: ElementRef,
+    config: Config,
+    elementRef: ElementRef,
+    renderer: Renderer,
     @Optional() toolbar: Toolbar,
     @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
   ) {
-    super(_elementRef);
-    toolbar && toolbar.setTitleCmp(this);
-    navbar && navbar.setTitleCmp(this);
+    super(config, elementRef, renderer);
+    this._setMode('title', this._mode = config.get('mode'));
+
+    toolbar && toolbar._setTitle(this);
+    navbar && navbar._setTitle(this);
   }
 
   /**

src/components/toolbar/toolbar.ts

@@ -1,8 +1,9 @@
-import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, Input, Optional, QueryList, Renderer, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, Input, Optional, Renderer } from '@angular/core';
 
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
-import { ViewController } from '../nav/view-controller';
+import { ToolbarTitle } from './toolbar-title';
+import { ViewController } from '../../navigation/view-controller';
 
 
 /**
@@ -35,10 +36,12 @@ import { ViewController } from '../nav/view-controller';
 @Directive({
   selector: 'ion-header'
 })
-export class Header {
+export class Header extends Ion {
 
-  constructor(@Optional() viewCtrl: ViewController) {
-    viewCtrl && viewCtrl.setHeader(this);
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
+    super(config, elementRef, renderer);
+    this._setMode('header', config.get('mode'));
+    viewCtrl && viewCtrl._setHeader(this);
   }
 
 }
@@ -69,10 +72,12 @@ export class Header {
 @Directive({
   selector: 'ion-footer'
 })
-export class Footer {
+export class Footer extends Ion {
 
-  constructor(@Optional() viewCtrl: ViewController) {
-    viewCtrl && viewCtrl.setFooter(this);
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
+    super(config, elementRef, renderer);
+    this._setMode('footer', config.get('mode'));
+    viewCtrl && viewCtrl._setFooter(this);
   }
 
 }
@@ -82,19 +87,17 @@ export class Footer {
  * @private
  */
 export class ToolbarBase extends Ion {
-  itemRefs: ElementRef[] = [];
-  titleRef: any = null;
-  titleCmp: any;
+  private _title: ToolbarTitle;
 
-  constructor(elementRef: ElementRef) {
-    super(elementRef);
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
   }
 
   /**
    * @private
    */
-  setTitleCmp(titleCmp: any) {
-    this.titleCmp = titleCmp;
+  _setTitle(titleCmp: ToolbarTitle) {
+    this._title = titleCmp;
   }
 
   /**
@@ -102,31 +105,7 @@ export class ToolbarBase extends Ion {
    * Returns the toolbar title text if it exists or an empty string
    */
   getTitleText() {
-    return (this.titleCmp && this.titleCmp.getTitleText()) || '';
-  }
-
-  /**
-   * @private
-   */
-  getTitleRef() {
-    return this.titleCmp && this.titleCmp.elementRef;
-  }
-
-  /**
-   * @private
-   * A toolbar items include the left and right side `ion-buttons`,
-   * and every `menu-toggle`. It does not include the `ion-title`.
-   * @returns {TODO} Array of this toolbar's item ElementRefs.
-   */
-  getItemRefs() {
-    return this.itemRefs;
-  }
-
-  /**
-   * @private
-   */
-  addItemRef(itemElementRef: ElementRef) {
-    this.itemRefs.push(itemElementRef);
+    return (this._title && this._title.getTitleText()) || '';
   }
 
 }
@@ -267,15 +246,14 @@ export class ToolbarBase extends Ion {
  */
 @Component({
   selector: 'ion-toolbar',
-  template: `
-    <div class="toolbar-background"></div>
-    <ng-content select="[menuToggle],ion-buttons[left]"></ng-content>
-    <ng-content select="ion-buttons[start]"></ng-content>
-    <ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>
-    <div class="toolbar-content">
-      <ng-content></ng-content>
-    </div>
-  `,
+  template:
+    '<div class="toolbar-background" [ngClass]="\'toolbar-background-\' + _mode"></div>' +
+    '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
+    '<ng-content select="ion-buttons[start]"></ng-content>' +
+    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
+    '<div class="toolbar-content" [ngClass]="\'toolbar-content-\' + _mode">' +
+      '<ng-content></ng-content>' +
+    '</div>',
   host: {
     'class': 'toolbar',
     '[class.statusbar-padding]': '_sbPadding'
@@ -283,59 +261,35 @@ export class ToolbarBase extends Ion {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Toolbar extends ToolbarBase {
-  private _sbPadding: boolean;
-
-  /** @internal */ 
-  _color: string;
+  /** @private */
+  _sbPadding: boolean;
 
   /**
    * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
    */
   @Input()
-  get color(): string {
-    return this._color;
+  set color(val: string) {
+    this._setColor('toolbar', val);
   }
 
-  set color(value: string) {
-    this._updateColor(value);
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('toolbar', val);
   }
 
   constructor(
     @Optional() viewCtrl: ViewController,
-    @Optional() header: Header,
-    @Optional() footer: Footer,
     config: Config,
-    private _elementRef: ElementRef,
-    private _renderer: Renderer
+    elementRef: ElementRef,
+    renderer: Renderer
   ) {
-    super(_elementRef);
-
-    if (viewCtrl && (header || footer)) {
-      // only toolbars within headers and footer are view toolbars
-      // toolbars within the content are not view toolbars, since they
-      // are apart of the content, and could be anywhere within the content
-      viewCtrl.setToolbarRef(_elementRef);
-    }
+    super(config, elementRef, renderer);
 
+    this.mode = config.get('mode');
     this._sbPadding = config.getBoolean('statusbarPadding');
   }
 
-  /**
-   * @internal
-   */
-  _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
-  }
-
-  /**
-   * @internal
-   */
-  _setElementColor(color: string, isAdd: boolean) {
-    if (color !== null && color !== '') {
-      this._renderer.setElementClass(this._elementRef.nativeElement, `toolbar-${color}`, isAdd);
-    }
-  }
-
 }