diff --git a/src/components.ios.scss b/src/components.ios.scss index 419a785a316..cd27cf67b3b 100644 --- a/src/components.ios.scss +++ b/src/components.ios.scss @@ -30,6 +30,7 @@ "components/searchbar/searchbar.ios", "components/segment/segment.ios", "components/select/select.ios", + "components/spinner/spinner.ios", "components/tabs/tabs.ios", "components/toggle/toggle.ios", "components/toast/toast.ios", diff --git a/src/components.md.scss b/src/components.md.scss index cb4a9c8a964..1ecb886885b 100644 --- a/src/components.md.scss +++ b/src/components.md.scss @@ -30,6 +30,7 @@ "components/searchbar/searchbar.md", "components/segment/segment.md", "components/select/select.md", + "components/spinner/spinner.md", "components/tabs/tabs.md", "components/toggle/toggle.md", "components/toast/toast.md", diff --git a/src/components.wp.scss b/src/components.wp.scss index c70da72c666..7627cf82f5c 100644 --- a/src/components.wp.scss +++ b/src/components.wp.scss @@ -30,6 +30,7 @@ "components/searchbar/searchbar.wp", "components/segment/segment.wp", "components/select/select.wp", + "components/spinner/spinner.wp", "components/tabs/tabs.wp", "components/toggle/toggle.wp", "components/toast/toast.wp", diff --git a/src/components/spinner/spinner.ios.scss b/src/components/spinner/spinner.ios.scss new file mode 100644 index 00000000000..ab927cbc61a --- /dev/null +++ b/src/components/spinner/spinner.ios.scss @@ -0,0 +1,24 @@ +@import "./spinner"; + +// iOS Spinner +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + + .spinner-#{$color-name} { + + &.spinner-ios line, + &.spinner-ios-small line, + &.spinner-crescent circle { + stroke: $color-base; + } + + &.spinner-bubbles circle, + &.spinner-circles circle, + &.spinner-dots circle { + fill: $color-base; + } + + } + +} diff --git a/src/components/spinner/spinner.md.scss b/src/components/spinner/spinner.md.scss new file mode 100644 index 00000000000..dd60fb8cd2b --- /dev/null +++ b/src/components/spinner/spinner.md.scss @@ -0,0 +1,24 @@ +@import "./spinner"; + +// Material Design Spinner +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + + .spinner-#{$color-name} { + + &.spinner-ios line, + &.spinner-ios-small line, + &.spinner-crescent circle { + stroke: $color-base; + } + + &.spinner-bubbles circle, + &.spinner-circles circle, + &.spinner-dots circle { + fill: $color-base; + } + + } + +} diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts index eb6350f8c63..5e55df08302 100644 --- a/src/components/spinner/spinner.ts +++ b/src/components/spinner/spinner.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core'; import { NgFor, NgStyle } from '@angular/common'; import { Config } from '../../config/config'; @@ -108,7 +108,6 @@ import { Config } from '../../config/config'; `, directives: [NgFor, NgStyle], host: { - '[class]': '_applied', '[class.spinner-paused]': 'paused' }, changeDetection: ChangeDetectionStrategy.OnPush, @@ -122,6 +121,21 @@ export class Spinner { private _init: boolean; private _applied: string; + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + /** * @input {string} SVG spinner name. */ @@ -153,7 +167,11 @@ export class Spinner { */ @Input() paused: boolean = false; - constructor(private _config: Config) {} + constructor( + private _config: Config, + private _elementRef: ElementRef, + private _renderer: Renderer + ) {} /** * @private @@ -188,6 +206,7 @@ export class Spinner { } } + this._renderer.setElementClass(this._elementRef.nativeElement, this._applied, true); } } } @@ -199,6 +218,24 @@ export class Spinner { return data; } + /** + * @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, `spinner-${color}`, isAdd); + } + } + } const SPINNERS: any = { diff --git a/src/components/spinner/spinner.wp.scss b/src/components/spinner/spinner.wp.scss new file mode 100644 index 00000000000..6d96edefdb4 --- /dev/null +++ b/src/components/spinner/spinner.wp.scss @@ -0,0 +1,24 @@ +@import "./spinner"; + +// Windows Spinner +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + + .spinner-#{$color-name} { + + &.spinner-ios line, + &.spinner-ios-small line, + &.spinner-crescent circle { + stroke: $color-base; + } + + &.spinner-bubbles circle, + &.spinner-circles circle, + &.spinner-dots circle { + fill: $color-base; + } + + } + +} diff --git a/src/components/spinner/test/colors/index.ts b/src/components/spinner/test/colors/index.ts new file mode 100644 index 00000000000..c196220921f --- /dev/null +++ b/src/components/spinner/test/colors/index.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; +import { ionicBootstrap } from '../../../../../src'; + + +@Component({ + templateUrl: 'main.html' +}) +class E2EPage { + paused: boolean = false; + + toggleState() { + this.paused = !this.paused; + } +} + + +@Component({ + template: '' +}) +class E2EApp { + root = E2EPage; +} + +ionicBootstrap(E2EApp); diff --git a/src/components/spinner/test/colors/main.html b/src/components/spinner/test/colors/main.html new file mode 100644 index 00000000000..a278502c112 --- /dev/null +++ b/src/components/spinner/test/colors/main.html @@ -0,0 +1,59 @@ + + + + Spinners + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Platform Default + +
ios + +
ios-small + +
bubbles + +
circles + +
crescent + +
dots + +
+ + + +