From 45025d6738f161e24d7d91c06f00797bd49f6ac4 Mon Sep 17 00:00:00 2001 From: Max Bothe Date: Mon, 10 Oct 2016 16:50:00 +0200 Subject: [PATCH 1/2] feat(checkbox): Add color attribute. --- src/demo-app/checkbox/checkbox-demo.html | 5 ++- src/demo-app/checkbox/checkbox-demo.ts | 5 +++ src/lib/checkbox/README.md | 14 ++++++++ src/lib/checkbox/_checkbox-theme.scss | 43 +++++++++++++++++++++--- src/lib/checkbox/checkbox.scss | 5 +++ src/lib/checkbox/checkbox.spec.ts | 32 ++++++++++++++++++ src/lib/checkbox/checkbox.ts | 28 ++++++++++++++- 7 files changed, 125 insertions(+), 7 deletions(-) diff --git a/src/demo-app/checkbox/checkbox-demo.html b/src/demo-app/checkbox/checkbox-demo.html index 9fd9c922cd8e..713f8b008d4c 100644 --- a/src/demo-app/checkbox/checkbox-demo.html +++ b/src/demo-app/checkbox/checkbox-demo.html @@ -2,6 +2,7 @@

md-checkbox: Basic Example

md-checkbox: Basic Example + +

Alignment:

@@ -41,4 +44,4 @@

md-checkbox: Basic Example

Nested Checklist

- \ No newline at end of file + diff --git a/src/demo-app/checkbox/checkbox-demo.ts b/src/demo-app/checkbox/checkbox-demo.ts index edab7a8fa15c..aed0335dc761 100644 --- a/src/demo-app/checkbox/checkbox-demo.ts +++ b/src/demo-app/checkbox/checkbox-demo.ts @@ -67,6 +67,7 @@ export class CheckboxDemo { isChecked: boolean = false; isDisabled: boolean = false; alignment: string = 'start'; + useAlternativeColor: boolean = false; printResult() { if (this.isIndeterminate) { @@ -74,4 +75,8 @@ export class CheckboxDemo { } return this.isChecked ? 'Yes!' : 'No!'; } + + checkboxColor() { + return this.useAlternativeColor ? 'primary' : 'accent'; + } } diff --git a/src/lib/checkbox/README.md b/src/lib/checkbox/README.md index 4efc10ccf5b4..a8cffb6ae668 100644 --- a/src/lib/checkbox/README.md +++ b/src/lib/checkbox/README.md @@ -77,3 +77,17 @@ checkbox if you do not wish to have any label text. ```html ``` + +### Theming + +The color of a `md-checkbox` can be changed by using the `color` attribute. +The value `accent` is default and will correspond to your theme accent color. +Alternatively, you can specify `primary` or `warn`. + +Example: + + ```html + + I come after my label. + + ``` diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss index ba66c87f06a2..247d6cfc733a 100644 --- a/src/lib/checkbox/_checkbox-theme.scss +++ b/src/lib/checkbox/_checkbox-theme.scss @@ -5,6 +5,7 @@ $is-dark-theme: map-get($theme, is-dark); $primary: map-get($theme, primary); $accent: map-get($theme, accent); + $warn: map-get($theme, warn); $background: map-get($theme, background); @@ -15,7 +16,9 @@ $checkbox-mark-color: md-color($background, background); // The color that is used as the checkbox background when it is checked. - $checkbox-background-color: md-color($accent, 500); + $checkbox-background-color-primary: md-color($primary, 500); + $checkbox-background-color-accent: md-color($accent, 500); + $checkbox-background-color-warn: md-color($warn, 500); // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors, // this does not work well with elements layered on top of one another. To get around this we @@ -43,8 +46,22 @@ } .md-checkbox-indeterminate, .md-checkbox-checked { - .md-checkbox-background { - background-color: $checkbox-background-color; + &.md-primary { + .md-checkbox-background { + background-color: $checkbox-background-color-primary; + } + } + + &.md-accent { + .md-checkbox-background { + background-color: $checkbox-background-color-accent; + } + } + + &.md-warn { + .md-checkbox-background { + background-color: $checkbox-background-color-warn; + } } } @@ -63,7 +80,23 @@ } // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied. - .md-checkbox-focused .md-ink-ripple { - background-color: md-color($accent, 0.26); + .md-checkbox-focused { + &.md-primary { + .md-ink-ripple { + background-color: md-color($primary, 0.26); + } + } + + &.md-accent { + .md-ink-ripple { + background-color: md-color($accent, 0.26); + } + } + + &.md-warn { + .md-ink-ripple { + background-color: md-color($warn, 0.26); + } + } } } diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index e634fe878cbb..d1135520dbcc 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/src/lib/checkbox/checkbox.scss @@ -1,4 +1,5 @@ @import '../core/theming/theming'; +@import '../core/style/elevation'; @import '../core/style/variables'; @import '../core/ripple/ripple'; @@ -189,6 +190,10 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) md-checkbox { cursor: pointer; + + // Animation + transition: background $swift-ease-out-duration $swift-ease-out-timing-function, + md-elevation-transition-property-value(); } .md-checkbox-layout { diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index e7af963aeb46..e0e0a251baeb 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -267,6 +267,36 @@ describe('MdCheckbox', () => { expect(inputElement.required).toBe(false); }); + describe('color behaviour', () => { + it('should apply class based on color attribute', () => { + testComponent.checkboxColor = 'primary'; + fixture.detectChanges(); + expect(checkboxDebugElement.nativeElement.classList.contains('md-primary')).toBe(true); + + testComponent.checkboxColor = 'accent'; + fixture.detectChanges(); + expect(checkboxDebugElement.nativeElement.classList.contains('md-accent')).toBe(true); + }); + + it('should should not clear previous defined classes', () => { + checkboxDebugElement.nativeElement.classList.add('custom-class'); + + testComponent.checkboxColor = 'primary'; + fixture.detectChanges(); + + expect(checkboxDebugElement.nativeElement.classList.contains('md-primary')).toBe(true); + expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true); + + testComponent.checkboxColor = 'accent'; + fixture.detectChanges(); + + expect(checkboxDebugElement.nativeElement.classList.contains('md-primary')).toBe(false); + expect(checkboxDebugElement.nativeElement.classList.contains('md-accent')).toBe(true); + expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true); + + }); + }); + describe('state transition css classes', () => { it('should transition unchecked -> checked -> unchecked', () => { testComponent.isChecked = true; @@ -519,6 +549,7 @@ describe('MdCheckbox', () => { [checked]="isChecked" [indeterminate]="isIndeterminate" [disabled]="isDisabled" + [color]="checkboxColor" (change)="changeCount = changeCount + 1" (click)="onCheckboxClick($event)" (change)="onCheckboxChange($event)"> @@ -536,6 +567,7 @@ class SingleCheckbox { parentElementKeyedUp: boolean = false; lastKeydownEvent: Event = null; changeCount: number = 0; + checkboxColor: string = 'primary'; onCheckboxClick(event: Event) {} onCheckboxChange(event: MdCheckboxChange) {} diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index ab1b55fa6ba3..fd8dd3a427b0 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -128,11 +128,15 @@ export class MdCheckbox implements ControlValueAccessor { private _indeterminate: boolean = false; + private _color: string; + private _controlValueAccessorChangeFn: (value: any) => void = (value) => {}; hasFocus: boolean = false; - constructor(private _renderer: Renderer, private _elementRef: ElementRef) {} + constructor(private _renderer: Renderer, private _elementRef: ElementRef) { + this.color = 'accent'; + } /** * Whether the checkbox is checked. Note that setting `checked` will immediately set @@ -174,6 +178,28 @@ export class MdCheckbox implements ControlValueAccessor { } } + /** Sets the color of the checkbox */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + _setElementColor(color: string, isAdd: boolean) { + if (color != null && color != '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `md-${color}`, isAdd); + } + } + /** * Implemented as part of ControlValueAccessor. * TODO: internal From 01985f195c3cbddb7f69efd0b4e1189262a50452 Mon Sep 17 00:00:00 2001 From: Max Bothe Date: Tue, 11 Oct 2016 23:26:04 +0200 Subject: [PATCH 2/2] Incorporate feedback. --- src/lib/checkbox/_checkbox-theme.scss | 41 ++++++++------------------- 1 file changed, 12 insertions(+), 29 deletions(-) diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss index 247d6cfc733a..4bde9b49407f 100644 --- a/src/lib/checkbox/_checkbox-theme.scss +++ b/src/lib/checkbox/_checkbox-theme.scss @@ -15,11 +15,6 @@ // The color of the checkbox's checkmark / mixedmark. $checkbox-mark-color: md-color($background, background); - // The color that is used as the checkbox background when it is checked. - $checkbox-background-color-primary: md-color($primary, 500); - $checkbox-background-color-accent: md-color($accent, 500); - $checkbox-background-color-warn: md-color($warn, 500); - // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors, // this does not work well with elements layered on top of one another. To get around this we // blend the colors together based on the base color and the theme background. @@ -46,22 +41,16 @@ } .md-checkbox-indeterminate, .md-checkbox-checked { - &.md-primary { - .md-checkbox-background { - background-color: $checkbox-background-color-primary; - } + &.md-primary .md-checkbox-background { + background-color: md-color($primary, 500); } - &.md-accent { - .md-checkbox-background { - background-color: $checkbox-background-color-accent; - } + &.md-accent .md-checkbox-background { + background-color: md-color($accent, 500); } - &.md-warn { - .md-checkbox-background { - background-color: $checkbox-background-color-warn; - } + &.md-warn .md-checkbox-background { + background-color: md-color($warn, 500); } } @@ -81,22 +70,16 @@ // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied. .md-checkbox-focused { - &.md-primary { - .md-ink-ripple { - background-color: md-color($primary, 0.26); - } + &.md-primary .md-ink-ripple { + background-color: md-color($primary, 0.26); } - &.md-accent { - .md-ink-ripple { - background-color: md-color($accent, 0.26); - } + &.md-accent .md-ink-ripple { + background-color: md-color($accent, 0.26); } - &.md-warn { - .md-ink-ripple { - background-color: md-color($warn, 0.26); - } + &.md-warn .md-ink-ripple { + background-color: md-color($warn, 0.26); } } }