refactor(components): add color/mode properties

ionic-team · Sep 13, 2016 · bc7d328 · bc7d328
1 parent 52ada1c
commit bc7d328
Show file tree

Hide file tree

Showing 25 changed files with 1,169 additions and 1,345 deletions.
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
@@ -1,6 +1,7 @@
 import { Directive, ElementRef, Input, Renderer } from '@angular/core';
 
 import { Config } from '../../config/config';
+import { Ion } from '../ion';
 
 
 /**
@@ -13,43 +14,28 @@ import { Config } from '../../config/config';
 @Directive({
   selector: 'ion-badge'
 })
-export class Badge {
-  /** @internal */ 
-  _color: string;
+export class Badge extends Ion {
 
   /**
    * @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('badge', val);
   }
 
-  set color(value: string) {
-    this._updateColor(value);
-  }
-
-  constructor(
-    config: Config,
-    private _elementRef: ElementRef,
-    private _renderer: Renderer
-  ) { }
-
   /**
-   * @internal
+   * @input {string} The mode to apply to this component.
    */
-  _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
+  @Input()
+  set mode(val: string) {
+    this._setMode('badge', val);
   }
 
-  /**
-   * @internal
-   */
-  _setElementColor(color: string, isAdd: boolean) {
-    if (color !== null && color !== '') {
-      this._renderer.setElementClass(this._elementRef.nativeElement, `badge-${color}`, isAdd);
-    }
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
   }
+
 }
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
@@ -1,6 +1,7 @@
 import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
 
 import { Config } from '../../config/config';
+import { Ion } from '../ion';
 import { isTrueProperty } from '../../util/util';
 
 
@@ -90,37 +91,34 @@ import { isTrueProperty } from '../../util/util';
  */
 @Component({
   selector: '[ion-button]',
-  // NOTE: template must not contain spaces between elements
-  template: '<span class="button-inner"><ng-content></ng-content></span><ion-button-effect></ion-button-effect>',
+  template:
+    '<span class="button-inner">' +
+      '<ng-content></ng-content>' +
+    '</span>' +
+    '<div class="button-effect"></div>',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class Button {
-  /** @internal */
+export class Button extends Ion {
+  /** @private */
   _role: string = 'button'; // bar-button
 
-  /** @internal */
-  _mt: boolean = false; // menutoggle
+  /** @private */
+  _mt: boolean; // menutoggle
 
-  /** @internal */
-  _size: string = null; // large/small/default
+  /** @private */
+  _size: string; // large/small/default
 
-  /** @internal */
+  /** @private */
   _style: string = 'default'; // outline/clear/solid
 
-  /** @internal */
-  _shape: string = null; // round/fab
+  /** @private */
+  _shape: string; // round/fab
 
-  /** @internal */
-  _display: string = null; // block/full
+  /** @private */
+  _display: string; // block/full
 
-  /** @internal */
-  _color: string = null; // primary/secondary
-
-  /** @internal */
-  _disabled: boolean = false; // disabled
-
-  /** @internal */
+  /** @private */
   _init: boolean;
 
   /**
@@ -203,9 +201,20 @@ export class Button {
     this._attr('_display', 'full', val);
   }
 
+  /**
+   * @input {string} A button that fills its parent container without a border-radius or borders on the left/right.
+   */
+  @Input()
+  set mode(val: string) {
+    this._assignCss(false);
+    this._mode = val;
+    this._assignCss(true);
+  }
+
+  /** @private */
   _attr(type: string, attrName: string, attrValue: boolean) {
     if (type === '_style') {
-      this._setColor(this._color, isTrueProperty(attrValue));
+      this._updateColor(this._color, isTrueProperty(attrValue));
     }
     this._setClass((<any>this)[type], false);
     if (isTrueProperty(attrValue)) {
@@ -224,24 +233,23 @@ export class Button {
    */
   @Input()
   set color(val: string) {
-    this._updateColor(val);
+    this._updateColor(this._color, false);
+    this._updateColor(val, true);
+    this._color = val;
   }
 
   constructor(
     @Attribute('menuToggle') menuToggle: string,
     @Attribute('ion-button') ionButton: string,
     config: Config,
-    private _elementRef: ElementRef,
-    private _renderer: Renderer
+    elementRef: ElementRef,
+    renderer: Renderer
   ) {
-    let element = _elementRef.nativeElement;
+    super(config, elementRef, renderer);
+    this._mode = config.get('mode');
 
     if (config.get('hoverCSS') === false) {
-      _renderer.setElementClass(element, 'disable-hover', true);
-    }
-
-    if (element.hasAttribute('disabled')) {
-      this._disabled = true;
+      this.setElementClass('disable-hover', true);
     }
 
     if (ionButton.trim().length > 0) {
@@ -255,30 +263,11 @@ export class Button {
     }
   }
 
-  /**
-   * @private
-   */
   ngAfterContentInit() {
     this._init = true;
     this._assignCss(true);
   }
 
-  /**
-   * @internal
-   */
-  _updateColor(newColor: string) {
-    this._setColor(this._color, false);
-    this._setColor(newColor, true);
-    this._color = newColor;
-  }
-
-  /**
-   * @private
-   */
-  addClass(className: string) {
-    this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
-  }
-
   /**
    * @private
    */
@@ -289,36 +278,38 @@ export class Button {
   }
 
   /**
-   * @internal
+   * @private
    */
   _assignCss(assignCssClass: boolean) {
     let role = this._role;
     if (role) {
-      this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button
+      this.setElementClass(role, assignCssClass); // button
+      this.setElementClass(`${role}-${this._mode}`, assignCssClass); // button
 
       this._setClass('menutoggle', this._mt); // menutoggle
-
       this._setClass(this._style, assignCssClass); // button-clear
       this._setClass(this._shape, assignCssClass); // button-round
       this._setClass(this._display, assignCssClass); // button-full
       this._setClass(this._size, assignCssClass); // button-small
-      this._setColor(this._color, assignCssClass); // button-secondary, bar-button-secondary
+      this._updateColor(this._color, assignCssClass); // button-secondary, bar-button-secondary
     }
   }
 
   /**
-   * @internal
+   * @private
    */
   _setClass(type: string, assignCssClass: boolean) {
     if (type && this._init) {
-      this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type.toLowerCase(), assignCssClass);
+      type = type.toLocaleLowerCase();
+      this.setElementClass(`${this._role}-${type}`, assignCssClass);
+      this.setElementClass(`${this._role}-${type}-${this._mode}`, assignCssClass);
     }
   }
 
   /**
-   * @internal
+   * @private
    */
-  _setColor(color: string, isAdd: boolean) {
+  _updateColor(color: string, isAdd: boolean) {
     if (color && this._init) {
       // The class should begin with the button role
       // button, bar-button
@@ -331,7 +322,7 @@ export class Button {
       className += (style !== null && style !== '' && style !== 'default' ? '-' + style.toLowerCase() : '');
 
       if (color !== null && color !== '') {
-        this._renderer.setElementClass(this._elementRef.nativeElement, `${className}-${color}`, isAdd);
+        this.setElementClass(`${className}-${this._mode}-${color}`, isAdd);
       }
     }
   }