From 5650f241472d5596e8f1794dc5bd79501da0f830 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 8 Apr 2019 11:39:23 +0300 Subject: [PATCH] feat(spinner): Eva style (#1351) BREAKING CHANGE: Following spinner theme properties were renamed: spinner-bg -> spinner-background-color spinner-circle-bg -> spinner-circle-filled-color spinner-fg -> spinner-text-color spinner-primary-bg -> spinner-primary-circle-filled-color spinner-info-bg -> spinner-info-circle-filled-color spinner-success-bg -> spinner-success-circle-filled-color spinner-warning-bg -> spinner-warning-circle-filled-color spinner-danger-bg -> spinner-danger-circle-filled-color spinner-xsmall -> spinner-height-tiny spinner-small -> spinner-height-small spinner-medium -> spinner-height-medium spinner-large -> spinner-height-large spinner-xlarge -> spinner-height-giant Following properties were removed: spinner-xxsmall spinner-xxlarge spinner-disabled-bg spinner-disabled-fg spinner-active-bg 'active' and 'disabled' along with NbSpinnerComponent STATUS_ACTIVE, STATUS_DISABLED static properties statuses were removed. Following NbSpinnerComponent static properties were removed: SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER. Classes '[size-name]-spinner' changed to 'size-[size-name]'. Classes '[status-name]-spinner' changed to 'status-[status-name]'. NbSpinnerComponent 'xxsmall' and 'xxlarge' getters removed. --- docs/structure.ts | 1 + .../spinner/_spinner.component.theme.scss | 70 +++------ .../components/spinner/spinner.component.scss | 2 - .../components/spinner/spinner.component.ts | 140 ++++++++---------- .../components/spinner/spinner.directive.ts | 23 +-- .../theme/components/spinner/spinner.spec.ts | 4 +- .../theme/styles/themes/_default.scss | 45 +++--- .../spinner/spinner-button.component.ts | 19 +-- .../spinner/spinner-card.component.ts | 2 +- .../spinner/spinner-colors.component.html | 15 +- .../spinner/spinner-sizes.component.html | 22 +-- .../spinner/spinner-tabs.component.ts | 4 +- 12 files changed, 145 insertions(+), 202 deletions(-) diff --git a/docs/structure.ts b/docs/structure.ts index 3482803ad9..9ed60be744 100644 --- a/docs/structure.ts +++ b/docs/structure.ts @@ -435,6 +435,7 @@ export const structure = [ icon: 'spinner.svg', source: [ 'NbSpinnerDirective', + 'NbSpinnerComponent', ], }, { diff --git a/src/framework/theme/components/spinner/_spinner.component.theme.scss b/src/framework/theme/components/spinner/_spinner.component.theme.scss index aa144d079e..799e76c0ae 100644 --- a/src/framework/theme/components/spinner/_spinner.component.theme.scss +++ b/src/framework/theme/components/spinner/_spinner.component.theme.scss @@ -11,64 +11,40 @@ } nb-spinner { - background-color: nb-theme(spinner-bg); - - &.active-spinner .spin-circle { - border-right-color: nb-theme(spinner-active-bg); - } - &.disabled-spinner .spin-circle { - border-right-color: nb-theme(spinner-disabled-bg); - } - &.primary-spinner .spin-circle { - border-right-color: nb-theme(spinner-primary-bg); - } - &.info-spinner .spin-circle { - border-right-color: nb-theme(spinner-info-bg); - } - &.success-spinner .spin-circle { - border-right-color: nb-theme(spinner-success-bg); - } - &.warning-spinner .spin-circle { - border-right-color: nb-theme(spinner-warning-bg); - } - &.danger-spinner .spin-circle { - border-right-color: nb-theme(spinner-danger-bg); - } + background-color: nb-theme(spinner-background-color); .spin-circle { - border-left-color: nb-theme(spinner-circle-bg); - border-top-color: nb-theme(spinner-circle-bg); - border-bottom-color: nb-theme(spinner-circle-bg); + border-right-color: nb-theme(spinner-circle-filled-color); + border-left-color: nb-theme(spinner-circle-empty-color); + border-top-color: nb-theme(spinner-circle-empty-color); + border-bottom-color: nb-theme(spinner-circle-empty-color); } .message { - color: nb-theme(spinner-fg); + color: nb-theme(spinner-text-color); + font-family: nb-theme(spinner-text-font-family); + font-size: nb-theme(spinner-text-font-size); + font-weight: nb-theme(spinner-text-font-weight); + line-height: nb-theme(spinner-text-line-height); } + } - &.xxsmall-spinner { - font-size: nb-theme(spinner-xxsmall); - } - &.xsmall-spinner { - font-size: nb-theme(spinner-xsmall); - } - &.small-spinner { - font-size: nb-theme(spinner-small); - } - &.medium-spinner { - font-size: nb-theme(spinner-medium); + @each $status in nb-get-statuses() { + nb-spinner.status-#{$status} .spin-circle { + border-top-color: nb-theme(spinner-#{$status}-circle-filled-color); + border-right-color: nb-theme(spinner-#{$status}-circle-empty-color); + border-bottom-color: nb-theme(spinner-#{$status}-circle-filled-color); + border-left-color: nb-theme(spinner-#{$status}-circle-filled-color); } - &.large-spinner { - font-size: nb-theme(spinner-large); - } - &.xlarge-spinner { - font-size: nb-theme(spinner-xlarge); - } - &.xxlarge-spinner { - font-size: nb-theme(spinner-xxlarge); + } + + @each $size in nb-get-sizes() { + nb-spinner.size-#{$size} { + font-size: nb-theme(spinner-height-#{$size}); } } - @-webkit-keyframes spin { + @keyframes spin { 0% { transform: rotate(0deg); } diff --git a/src/framework/theme/components/spinner/spinner.component.scss b/src/framework/theme/components/spinner/spinner.component.scss index be3feaf1d2..b40fea1004 100644 --- a/src/framework/theme/components/spinner/spinner.component.scss +++ b/src/framework/theme/components/spinner/spinner.component.scss @@ -30,7 +30,5 @@ .message { margin-left: 0.5rem; - line-height: 1rem; - font-size: 1rem; } } diff --git a/src/framework/theme/components/spinner/spinner.component.ts b/src/framework/theme/components/spinner/spinner.component.ts index 830e1b8447..80aa343581 100644 --- a/src/framework/theme/components/spinner/spinner.component.ts +++ b/src/framework/theme/components/spinner/spinner.component.ts @@ -6,8 +6,39 @@ import { Component, HostBinding, Input } from '@angular/core'; +import { NbComponentSize } from '../component-size'; +import { NbComponentStatus } from '../component-status'; + /** * Styled spinner component + * + * @styles + * + * spinner-background-color: + * spinner-circle-filled-color: + * spinner-circle-empty-color: + * spinner-text-color: + * spinner-text-font-family: + * spinner-text-font-size: + * spinner-text-font-weight: + * spinner-text-line-height: + * spinner-primary-circle-filled-color: + * spinner-primary-circle-empty-color: + * spinner-info-circle-filled-color: + * spinner-info-circle-empty-color: + * spinner-success-circle-filled-color: + * spinner-success-circle-empty-color: + * spinner-warning-circle-filled-color: + * spinner-warning-circle-empty-color: + * spinner-danger-circle-filled-color: + * spinner-danger-circle-empty-color: + * spinner-white-circle-filled-color: + * spinner-white-circle-empty-color: + * spinner-height-tiny: + * spinner-height-small: + * spinner-height-medium: + * spinner-height-large: + * spinner-height-giant: */ @Component({ selector: 'nb-spinner', @@ -19,118 +50,75 @@ import { Component, HostBinding, Input } from '@angular/core'; }) export class NbSpinnerComponent { - static readonly SIZE_XXSMALL = 'xxsmall'; - static readonly SIZE_XSMALL = 'xsmall'; - static readonly SIZE_SMALL = 'small'; - static readonly SIZE_MEDIUM = 'medium'; - static readonly SIZE_LARGE = 'large'; - static readonly SIZE_XLARGE = 'xlarge'; - static readonly SIZE_XXLARGE = 'xxlarge'; - - static readonly STATUS_ACTIVE = 'active'; - static readonly STATUS_DISABLED = 'disabled'; - static readonly STATUS_PRIMARY = 'primary'; - static readonly STATUS_INFO = 'info'; - static readonly STATUS_SUCCESS = 'success'; - static readonly STATUS_WARNING = 'warning'; - static readonly STATUS_DANGER = 'danger'; - - size: string = NbSpinnerComponent.SIZE_MEDIUM; - status: string = NbSpinnerComponent.STATUS_ACTIVE; - /** * Loading text that is shown near the icon * @type string */ - @Input() message: string = 'Loading...'; + @Input() + message: string = 'Loading...'; /** - * Spiiner size, available sizes: - * xxsmall, xsmall, small, medium, large, xlarge, xxlarge - * @param {string} val + * Spinner size, available sizes: + * tiny, small, medium, large, giant + * @param {string} value */ - @Input('size') - private set setSize(val: string) { - this.size = val; - } + @Input() + size: NbComponentSize = 'medium'; /** - * Spiiner status (adds specific styles): - * active, disabled, primary, info, success, warning, danger - * @param {string} val + * Spinner status (adds specific styles): + * primary, info, success, warning, danger */ - @Input('status') - private set setStatus(val: string) { - this.status = val; - } - - @HostBinding('class.xxsmall-spinner') - get xxsmall() { - return this.size === NbSpinnerComponent.SIZE_XXSMALL; - } + @Input() + status: '' | NbComponentStatus; - @HostBinding('class.xsmall-spinner') - get xsmall() { - return this.size === NbSpinnerComponent.SIZE_XSMALL; + @HostBinding('class.size-tiny') + get tiny() { + return this.size === 'tiny'; } - @HostBinding('class.small-spinner') + @HostBinding('class.size-small') get small() { - return this.size === NbSpinnerComponent.SIZE_SMALL; + return this.size === 'small'; } - @HostBinding('class.medium-spinner') + @HostBinding('class.size-medium') get medium() { - return this.size === NbSpinnerComponent.SIZE_MEDIUM; + return this.size === 'medium'; } - @HostBinding('class.large-spinner') + @HostBinding('class.size-large') get large() { - return this.size === NbSpinnerComponent.SIZE_LARGE; - } - - @HostBinding('class.xlarge-spinner') - get xlarge() { - return this.size === NbSpinnerComponent.SIZE_XLARGE; - } - - @HostBinding('class.xxlarge-spinner') - get xxlarge() { - return this.size === NbSpinnerComponent.SIZE_XXLARGE; - } - - @HostBinding('class.active-spinner') - get active() { - return this.status === NbSpinnerComponent.STATUS_ACTIVE; + return this.size === 'large'; } - @HostBinding('class.disabled-spinner') - get disabled() { - return this.status === NbSpinnerComponent.STATUS_DISABLED; + @HostBinding('class.size-giant') + get giant() { + return this.size === 'giant'; } - @HostBinding('class.primary-spinner') + @HostBinding('class.status-primary') get primary() { - return this.status === NbSpinnerComponent.STATUS_PRIMARY; + return this.status === 'primary'; } - @HostBinding('class.info-spinner') + @HostBinding('class.status-info') get info() { - return this.status === NbSpinnerComponent.STATUS_INFO; + return this.status === 'info'; } - @HostBinding('class.success-spinner') + @HostBinding('class.status-success') get success() { - return this.status === NbSpinnerComponent.STATUS_SUCCESS; + return this.status === 'success'; } - @HostBinding('class.warning-spinner') + @HostBinding('class.status-warning') get warning() { - return this.status === NbSpinnerComponent.STATUS_WARNING; + return this.status === 'warning'; } - @HostBinding('class.danger-spinner') + @HostBinding('class.status-danger') get danger() { - return this.status === NbSpinnerComponent.STATUS_DANGER; + return this.status === 'danger'; } } diff --git a/src/framework/theme/components/spinner/spinner.directive.ts b/src/framework/theme/components/spinner/spinner.directive.ts index be6baa487a..f99b7fd91a 100644 --- a/src/framework/theme/components/spinner/spinner.directive.ts +++ b/src/framework/theme/components/spinner/spinner.directive.ts @@ -13,8 +13,12 @@ import { Input, OnInit, Renderer2, - ViewContainerRef, HostBinding, + ViewContainerRef, + HostBinding, } from '@angular/core'; + +import { NbComponentSize } from '../component-size'; +import { NbComponentStatus } from '../component-status'; import { NbSpinnerComponent } from './spinner.component'; /** @@ -35,7 +39,7 @@ import { NbSpinnerComponent } from './spinner.component'; * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbSpinnerModule, * ], * }) @@ -60,11 +64,10 @@ import { NbSpinnerComponent } from './spinner.component'; @Directive({selector: '[nbSpinner]'}) export class NbSpinnerDirective implements OnInit { + private shouldShow = false; spinner: ComponentRef; componentFactory: ComponentFactory; - @HostBinding('class.nb-spinner-container') isSpinnerExist = false; - /** * Spinner message shown next to the icon * @type {string} @@ -72,16 +75,14 @@ export class NbSpinnerDirective implements OnInit { @Input('nbSpinnerMessage') spinnerMessage: string; /** - * Spinner status color active, disabled, primary, info, success, warning, danger - * @type {string} + * Spinner status color primary, info, success, warning, danger */ - @Input('nbSpinnerStatus') spinnerStatus: string; + @Input('nbSpinnerStatus') spinnerStatus: '' | NbComponentStatus; /** - * Spinner size, available sizes: xxsmall, xsmall, small, medium, large, xlarge, xxlarge - * @type {string} + * Spinner size. Possible values: `tiny`, `small`, `medium` (default), `large`, `giant` */ - @Input('nbSpinnerSize') spinnerSize: string; + @Input('nbSpinnerSize') spinnerSize: NbComponentSize = 'medium'; /** * Directive value - show or hide spinner @@ -100,7 +101,7 @@ export class NbSpinnerDirective implements OnInit { } } - private shouldShow = false; + @HostBinding('class.nb-spinner-container') isSpinnerExist = false; constructor(private directiveView: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver, diff --git a/src/framework/theme/components/spinner/spinner.spec.ts b/src/framework/theme/components/spinner/spinner.spec.ts index d233311ad8..a2093589c3 100644 --- a/src/framework/theme/components/spinner/spinner.spec.ts +++ b/src/framework/theme/components/spinner/spinner.spec.ts @@ -26,7 +26,7 @@ describe('Component: NbSpinner', () => { fixture.detectChanges(); expect( fixture - .debugElement.nativeElement.classList.contains('danger-spinner')) + .debugElement.nativeElement.classList.contains('status-danger')) .toBeTruthy() }); @@ -35,7 +35,7 @@ describe('Component: NbSpinner', () => { fixture.detectChanges(); expect( fixture - .debugElement.nativeElement.classList.contains('small-spinner')) + .debugElement.nativeElement.classList.contains('size-small')) .toBeTruthy() }); diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 9afc5ba526..c174b811e0 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1000,24 +1000,33 @@ $theme: ( chat-warning-bg: color-warning, chat-danger-bg: color-danger, - spinner-bg: rgba(255, 255, 255, 0.83), - spinner-circle-bg: color-bg-active, - spinner-fg: color-fg-text, - spinner-active-bg: color-fg, - spinner-disabled-bg: color-basic-200, - spinner-disabled-fg: color-fg, - spinner-primary-bg: color-primary, - spinner-info-bg: color-info, - spinner-success-bg: color-success, - spinner-warning-bg: color-warning, - spinner-danger-bg: color-danger, - spinner-xxsmall: 1.25rem, - spinner-xsmall: 1.5rem, - spinner-small: 1.75rem, - spinner-medium: 2rem, - spinner-large: 2.25rem, - spinner-xlarge: 2.5rem, - spinner-xxlarge: 3rem, + spinner-background-color: rgba(237, 240, 245, 0.5), // color-basic-200 with 0.5 opacity + spinner-circle-filled-color: color-white, + spinner-circle-empty-color: transparent, + spinner-text-color: text-dark-color, + spinner-text-font-family: text-paragraph-font-family, + spinner-text-font-size: text-paragraph-font-size, + spinner-text-font-weight: text-paragraph-font-weight, + spinner-text-line-height: text-paragraph-line-height, + + spinner-primary-circle-filled-color: color-primary, + spinner-primary-circle-empty-color: transparent, + spinner-info-circle-filled-color: color-info, + spinner-info-circle-empty-color: transparent, + spinner-success-circle-filled-color: color-success, + spinner-success-circle-empty-color: transparent, + spinner-warning-circle-filled-color: color-warning, + spinner-warning-circle-empty-color: transparent, + spinner-danger-circle-filled-color: color-danger, + spinner-danger-circle-empty-color: transparent, + spinner-white-circle-filled-color: color-white, + spinner-white-circle-empty-color: transparent, + + spinner-height-tiny: 1.5rem, + spinner-height-small: 1.75rem, + spinner-height-medium: 2rem, + spinner-height-large: 2.25rem, + spinner-height-giant: 2.5rem, stepper-index-size: 2rem, stepper-label-font-size: font-size-sm, diff --git a/src/playground/with-layout/spinner/spinner-button.component.ts b/src/playground/with-layout/spinner/spinner-button.component.ts index f968888c56..2344234902 100644 --- a/src/playground/with-layout/spinner/spinner-button.component.ts +++ b/src/playground/with-layout/spinner/spinner-button.component.ts @@ -12,33 +12,28 @@ import { Component } from '@angular/core';
- - - - - - -
diff --git a/src/playground/with-layout/spinner/spinner-card.component.ts b/src/playground/with-layout/spinner/spinner-card.component.ts index fa8bc07bbb..e87829a439 100644 --- a/src/playground/with-layout/spinner/spinner-card.component.ts +++ b/src/playground/with-layout/spinner/spinner-card.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-app-spinner-card', template: ` - + Spinners

diff --git a/src/playground/with-layout/spinner/spinner-colors.component.html b/src/playground/with-layout/spinner/spinner-colors.component.html index 78f6ef3e84..a5d8336afc 100644 --- a/src/playground/with-layout/spinner/spinner-colors.component.html +++ b/src/playground/with-layout/spinner/spinner-colors.component.html @@ -1,10 +1,4 @@ - - - Some card content. - - - - + Some card content. @@ -33,10 +27,3 @@ Some card content. - - - - Some card content. - - - diff --git a/src/playground/with-layout/spinner/spinner-sizes.component.html b/src/playground/with-layout/spinner/spinner-sizes.component.html index ad2099fc97..2269b444c3 100644 --- a/src/playground/with-layout/spinner/spinner-sizes.component.html +++ b/src/playground/with-layout/spinner/spinner-sizes.component.html @@ -1,40 +1,28 @@ - + Some card content. - + Some card content. - + Some card content. - + Some card content. - - - Some card content. - - - - - - Some card content. - - - - + Some card content. diff --git a/src/playground/with-layout/spinner/spinner-tabs.component.ts b/src/playground/with-layout/spinner/spinner-tabs.component.ts index 91a32149c5..c76b8d6fcf 100644 --- a/src/playground/with-layout/spinner/spinner-tabs.component.ts +++ b/src/playground/with-layout/spinner/spinner-tabs.component.ts @@ -7,14 +7,14 @@ import { Component } from '@angular/core'; - +

A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. Originally, nebula was a name for any diffuse astronomical object.

- +

Nebular's primary goal is to assemble together and connect the most awesome features and libraries creating an efficient ecosystem to speed up and simplify the development.