From 16f2d19cb13aae50dbfd734e3fbaf15a1a5f05fe Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Sun, 21 Apr 2019 17:23:28 +0200 Subject: [PATCH] feat(icon): Eva theme (#1404) BREAKING CHANGE: NbIconComponent status static fields removed. STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER. 'status' field now uses common NbComponentStatus type. NbIconComponent static class names renamed to 'status-[status-name]'. Following theme properties were renamed: icon-primary-fg -> icon-primary-color icon-info-fg -> icon-info-color icon-success-fg -> icon-success-color icon-warning-fg -> icon-warning-color icon-danger-fg -> icon-danger-color --- .../icon/_icon.component.theme.scss | 22 ++----- .../theme/components/icon/icon.component.ts | 59 +++++++++---------- .../theme/styles/themes/_default.scss | 15 ++--- 3 files changed, 41 insertions(+), 55 deletions(-) diff --git a/src/framework/theme/components/icon/_icon.component.theme.scss b/src/framework/theme/components/icon/_icon.component.theme.scss index 7b7e2a3a1a..3ba60596a8 100644 --- a/src/framework/theme/components/icon/_icon.component.theme.scss +++ b/src/framework/theme/components/icon/_icon.component.theme.scss @@ -8,23 +8,13 @@ nb-icon { font-size: nb-theme(icon-font-size); line-height: nb-theme(icon-line-height); - width: 1em; - height: 1em; + width: nb-theme(icon-width); + height: nb-theme(icon-height); + } - &.primary-icon { - color: nb-theme(icon-primary-fg); - } - &.info-icon { - color: nb-theme(icon-info-fg); - } - &.success-icon { - color: nb-theme(icon-success-fg); - } - &.warning-icon { - color: nb-theme(icon-warning-fg); - } - &.danger-icon { - color: nb-theme(icon-danger-fg); + @each $status in nb-get-statuses() { + nb-icon.status-#{$status} { + color: nb-theme(icon-#{$status}-color); } } } diff --git a/src/framework/theme/components/icon/icon.component.ts b/src/framework/theme/components/icon/icon.component.ts index d99c3d38f1..a562585e12 100644 --- a/src/framework/theme/components/icon/icon.component.ts +++ b/src/framework/theme/components/icon/icon.component.ts @@ -16,6 +16,7 @@ import { } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; +import { NbComponentStatus } from '../component-status'; import { NbIconLibraries } from './icon-libraries'; /** @@ -46,7 +47,7 @@ import { NbIconLibraries } from './icon-libraries'; * * @NgModule({ * imports: [ - * // ... + * // ... * NbEvaIconsModule, * ], * }) @@ -56,7 +57,7 @@ import { NbIconLibraries } from './icon-libraries'; * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbIconModule, * ], * }) @@ -85,13 +86,14 @@ import { NbIconLibraries } from './icon-libraries'; * @styles * * icon-font-size: + * icon-line-height: * icon-width: * icon-height: - * icon-primary-fg: - * icon-info-fg: - * icon-success-fg: - * icon-warning-fg: - * icon-danger-fg: + * icon-primary-color: + * icon-info-color: + * icon-success-color: + * icon-warning-color: + * icon-danger-color: */ @Component({ selector: 'nb-icon', @@ -101,41 +103,35 @@ import { NbIconLibraries } from './icon-libraries'; }) export class NbIconComponent implements OnChanges, OnInit { - 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'; - - private iconDef; - private prevClasses = []; + protected iconDef; + protected prevClasses = []; @HostBinding('innerHtml') html: SafeHtml; - @HostBinding('class.primary-icon') + @HostBinding('class.status-primary') get primary() { - return this.status === NbIconComponent.STATUS_PRIMARY; + return this.status === 'primary'; } - @HostBinding('class.info-icon') + @HostBinding('class.status-info') get info() { - return this.status === NbIconComponent.STATUS_INFO; + return this.status === 'info'; } - @HostBinding('class.success-icon') + @HostBinding('class.status-success') get success() { - return this.status === NbIconComponent.STATUS_SUCCESS; + return this.status === 'success'; } - @HostBinding('class.warning-icon') + @HostBinding('class.status-warning') get warning() { - return this.status === NbIconComponent.STATUS_WARNING; + return this.status === 'warning'; } - @HostBinding('class.danger-icon') + @HostBinding('class.status-danger') get danger() { - return this.status === NbIconComponent.STATUS_DANGER; + return this.status === 'danger'; } /** @@ -158,16 +154,15 @@ export class NbIconComponent implements OnChanges, OnInit { /** * Icon status (adds specific styles): - * primary, info, success, warning, danger - * @param {string} status + * `primary`, `info`, `success`, `warning`, `danger` */ - @Input() status: string; + @Input() status: NbComponentStatus; constructor( - private sanitizer: DomSanitizer, - private iconLibrary: NbIconLibraries, - private el: ElementRef, - private renderer: Renderer2, + protected sanitizer: DomSanitizer, + protected iconLibrary: NbIconLibraries, + protected el: ElementRef, + protected renderer: Renderer2, ) {} ngOnInit() { diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index ff3c241304..06fd0d02cf 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1461,13 +1461,14 @@ $theme: ( tree-grid-icon-color: color-fg-text, icon-font-size: 1.25rem, - icon-width: icon-font-size, - icon-height: icon-font-size, - icon-primary-fg: color-primary, - icon-info-fg: color-info, - icon-success-fg: color-success, - icon-warning-fg: color-warning, - icon-danger-fg: color-danger, + icon-line-height: 1, + icon-width: 1em, + icon-height: 1em, + icon-primary-color: color-primary, + icon-info-color: color-info, + icon-success-color: color-success, + icon-warning-color: color-warning, + icon-danger-color: color-danger, ); // register the theme