From 06fccf7e12f50fd187c3b5e9780fa2f4a9f9d9b1 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 10 Apr 2019 12:03:54 +0200 Subject: [PATCH] feat(progress): Eva style (#1361) BREAKING CHANGE: Following progress theme variables were renamed: progress-bar-height-xlg -> progress-bar-giant-height progress-bar-height-lg -> progress-bar-large-height progress-bar-height -> progress-bar-medium-height progress-bar-height-sm -> progress-bar-small-height progress-bar-height-xs -> progress-bar-tiny-height progress-bar-font-size-xlg -> progress-bar-giant-text-font-size progress-bar-font-size-lg -> progress-bar-large-text-font-size progress-bar-font-size -> progress-bar-medium-text-font-size progress-bar-font-size-sm -> progress-bar-small-text-font-size progress-bar-font-size-xs -> progress-bar-tiny-text-font-size progress-bar-radius -> progress-bar-border-radius progress-bar-bg -> progress-bar-[status]-background-color progress-bar-font-color -> progress-bar-[status]-background-color progress-bar-font-weight -> progress-bar-[size]-text-font-weight progress-bar-primary-bg -> progress-bar-[status]-background-color progress-bar-success-bg -> progress-bar-[status]-background-color progress-bar-info-bg -> progress-bar-[status]-background-color progress-bar-warning-bg -> progress-bar-[status]-background-color progress-bar-danger-bg -> progress-bar-[status]-background-color 'progress-bar-default-bg' removed. Size values changed from 'xs', 'sm', 'lg', 'xlg' changed to 'tiny', 'small', 'medium', 'large', 'giant'. Size classes now set on nb-progress-bar element. Also class naming changed to 'size-[size-name]', 'status-[status-name]'. --- .../_progress-bar.component.theme.scss | 77 +++++------ .../progress-bar/progress-bar.component.ts | 129 +++++++++++++----- .../progress-bar/progress-bar.spec.ts | 16 +-- .../theme/styles/themes/_default.scss | 59 +++++--- .../progress-bar-size.component.html | 10 +- 5 files changed, 177 insertions(+), 114 deletions(-) diff --git a/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss b/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss index 9097a145c4..82ec7c92a7 100644 --- a/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss +++ b/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss @@ -5,58 +5,47 @@ */ @mixin nb-progress-bar-theme() { + nb-progress-bar { + .progress-container { + border-radius: nb-theme(progress-bar-border-radius); + } - .progress-container { - height: nb-theme(progress-bar-height); - border-radius: nb-theme(progress-bar-radius); - background-color: nb-theme(progress-bar-bg); - &.xlg { - .progress-value { - font-size: nb-theme(progress-bar-font-size-xlg); - } - height: nb-theme(progress-bar-height-xlg); + .progress-value { + display: flex; + align-items: center; + justify-content: center; + font-family: nb-theme(progress-bar-text-font-family); + transition-duration: nb-theme(progress-bar-animation-duration); + transition-property: width, background-color; } - &.lg { - .progress-value { - font-size: nb-theme(progress-bar-font-size-lg); + } + + @each $size in nb-get-sizes() { + + nb-progress-bar.size-#{$size} { + .progress-container { + height: nb-theme(progress-bar-#{$size}-height); } - height: nb-theme(progress-bar-height-lg); - } - &.sm { + .progress-value { - font-size: nb-theme(progress-bar-font-size-sm); + font-size: nb-theme(progress-bar-#{$size}-text-font-size); + font-weight: nb-theme(progress-bar-#{$size}-text-font-weight); + line-height: nb-theme(progress-bar-#{$size}-text-line-height); } - height: nb-theme(progress-bar-height-sm); } - &.xs { + } + + @each $status in nb-get-statuses() { + + nb-progress-bar.status-#{$status} { + .progress-container { + background-color: nb-theme(progress-bar-#{$status}-background-color); + } + .progress-value { - font-size: nb-theme(progress-bar-font-size-xs); + background-color: nb-theme(progress-bar-#{$status}-filled-background-color); + color: nb-theme(progress-bar-#{$status}-text-color); } - height: nb-theme(progress-bar-height-xs); - } - } - .progress-value { - background-color: nb-theme(progress-bar-default-bg); - color: nb-theme(progress-bar-font-color); - font-size: nb-theme(progress-bar-font-size); - font-weight: nb-theme(progress-bar-font-weight); - line-height: nb-theme(progress-bar-line-height); - transition-duration: nb-theme(progress-bar-animation-duration); - transition-property: width, background-color; - &.primary { - background-color: nb-theme(progress-bar-primary-bg); - } - &.info { - background-color: nb-theme(progress-bar-info-bg); - } - &.success { - background-color: nb-theme(progress-bar-success-bg); - } - &.warning { - background-color: nb-theme(progress-bar-warning-bg); - } - &.danger { - background-color: nb-theme(progress-bar-danger-bg); } } } diff --git a/src/framework/theme/components/progress-bar/progress-bar.component.ts b/src/framework/theme/components/progress-bar/progress-bar.component.ts index 543c8acfb3..b4e121efdc 100644 --- a/src/framework/theme/components/progress-bar/progress-bar.component.ts +++ b/src/framework/theme/components/progress-bar/progress-bar.component.ts @@ -4,7 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { Component, Input } from '@angular/core'; +import { Component, HostBinding, Input } from '@angular/core'; +import { NbComponentSize, NbComponentStatus } from '@nebular/theme'; /** * Progress Bar is a component for indicating progress. @@ -20,7 +21,7 @@ import { Component, Input } from '@angular/core'; * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbProgressBarModule, * ], * }) @@ -45,33 +46,51 @@ import { Component, Input } from '@angular/core'; * * @styles * - * progress-bar-height-xlg: - * progress-bar-height-lg: - * progress-bar-height: - * progress-bar-height-sm: - * progress-bar-height-xs: - * progress-bar-font-size-xlg: - * progress-bar-font-size-lg: - * progress-bar-font-size: - * progress-bar-font-size-sm: - * progress-bar-font-size-xs: - * progress-bar-radius: - * progress-bar-bg-color: - * progress-bar-font-color: - * progress-bar-font-weight: - * progress-bar-default-bg-color: - * progress-bar-primary-bg-color: - * progress-bar-success-bg-color: - * progress-bar-info-bg-color: - * progress-bar-warning-bg-color: - * progress-bar-danger-bg-color: + * progress-bar-animation-duration: + * progress-bar-border-radius: + * progress-bar-text-font-family: + * progress-bar-tiny-height: + * progress-bar-tiny-text-font-size: + * progress-bar-tiny-text-font-weight: + * progress-bar-tiny-text-line-height: + * progress-bar-small-height: + * progress-bar-small-text-font-size: + * progress-bar-small-text-font-weight: + * progress-bar-small-text-line-height: + * progress-bar-medium-height: + * progress-bar-medium-text-font-size: + * progress-bar-medium-text-font-weight: + * progress-bar-medium-text-line-height: + * progress-bar-large-height: + * progress-bar-large-text-font-size: + * progress-bar-large-text-font-weight: + * progress-bar-large-text-line-height: + * progress-bar-giant-height: + * progress-bar-giant-text-font-size: + * progress-bar-giant-text-font-weight: + * progress-bar-giant-text-line-height: + * progress-bar-primary-background-color: + * progress-bar-primary-filled-background-color: + * progress-bar-primary-text-color: + * progress-bar-success-background-color: + * progress-bar-success-filled-background-color: + * progress-bar-success-text-color: + * progress-bar-info-background-color: + * progress-bar-info-filled-background-color: + * progress-bar-info-text-color: + * progress-bar-warning-background-color: + * progress-bar-warning-filled-background-color: + * progress-bar-warning-text-color: + * progress-bar-danger-background-color: + * progress-bar-danger-filled-background-color: + * progress-bar-danger-text-color: */ @Component({ selector: 'nb-progress-bar', styleUrls: ['./progress-bar.component.scss'], template: ` -
-
+
+
{{ value }}%
@@ -82,27 +101,71 @@ export class NbProgressBarComponent { /** * Progress bar value in percent (0 - 100) - * @type {number} - * @private */ @Input() value: number = 0; /** - * Progress bar background (primary, info success, warning, danger) - * @param {string} val + * Progress bar background (`primary` (default), `info`, `success`, `warning`, `danger`) */ - @Input() status: string; + @Input() status: NbComponentStatus = 'primary'; /** - * Progress bar size (xs, sm, lg, xlg) - * @param {string} val + * Progress bar size (`tiny`, `small`, `medium` (default), `large`, `giant`) */ - @Input() size: string; + @Input() size: NbComponentSize = 'medium'; /** * Displays value inside progress bar - * @param {string} val */ @Input() displayValue: boolean = false; + @HostBinding('class.size-tiny') + get tiny(): boolean { + return this.size === 'tiny'; + } + + @HostBinding('class.size-small') + get small(): boolean { + return this.size === 'small'; + } + + @HostBinding('class.size-medium') + get medium(): boolean { + return this.size === 'medium'; + } + + @HostBinding('class.size-large') + get large(): boolean { + return this.size === 'large'; + } + + @HostBinding('class.size-giant') + get giant(): boolean { + return this.size === 'giant'; + } + + @HostBinding('class.status-primary') + get primary(): boolean { + return this.status === 'primary'; + } + + @HostBinding('class.status-success') + get success(): boolean { + return this.status === 'success'; + } + + @HostBinding('class.status-info') + get info(): boolean { + return this.status === 'info'; + } + + @HostBinding('class.status-warning') + get warning(): boolean { + return this.status === 'warning'; + } + + @HostBinding('class.status-danger') + get danger(): boolean { + return this.status === 'danger'; + } } diff --git a/src/framework/theme/components/progress-bar/progress-bar.spec.ts b/src/framework/theme/components/progress-bar/progress-bar.spec.ts index 4d5ee7b366..deb8d7e571 100644 --- a/src/framework/theme/components/progress-bar/progress-bar.spec.ts +++ b/src/framework/theme/components/progress-bar/progress-bar.spec.ts @@ -29,21 +29,13 @@ describe('Component: NbProgressBar', () => { it('Setting status danger should set class danger', () => { progressBar.status = 'danger'; fixture.detectChanges(); - expect( - fixture - .debugElement - .query(By.css('.progress-value')).nativeElement.classList.contains('danger')) - .toBeTruthy() + expect(fixture.nativeElement.classList).toContain('status-danger') }); - it('Setting size sm should set class sm', () => { - progressBar.size = 'sm'; + it('Setting size should set class', () => { + progressBar.size = 'small'; fixture.detectChanges(); - expect( - fixture - .debugElement - .query(By.css('.progress-container')).nativeElement.classList.contains('sm')) - .toBeTruthy() + expect((fixture.nativeElement as HTMLElement).classList).toContain('size-small'); }); it('Setting displayValue should create span with value label', () => { diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 37c38379ce..db86c4be58 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1080,27 +1080,46 @@ $theme: ( badge-warning-bg-color: color-warning, badge-danger-bg-color: color-danger, - progress-bar-height-xlg: 1.75rem, - progress-bar-height-lg: 1.5rem, - progress-bar-height: 1.375rem, - progress-bar-height-sm: 1.25rem, - progress-bar-height-xs: 1rem, progress-bar-animation-duration: 400ms, - progress-bar-font-size-xlg: font-size-xlg, - progress-bar-font-size-lg: font-size-lg, - progress-bar-font-size: font-size, - progress-bar-font-size-sm: font-size-sm, - progress-bar-font-size-xs: font-size-xs, - progress-bar-radius: radius, - progress-bar-bg: layout-bg, - progress-bar-font-color: color-white, - progress-bar-font-weight: font-weight-bold, - progress-bar-default-bg: color-info, - progress-bar-primary-bg: color-primary, - progress-bar-success-bg: color-success, - progress-bar-info-bg: color-info, - progress-bar-warning-bg: color-warning, - progress-bar-danger-bg: color-danger, + progress-bar-border-radius: radius, + progress-bar-text-font-family: text-subtitle-font-family, + + progress-bar-tiny-height: 1rem, + progress-bar-tiny-text-font-size: text-subtitle-2-font-size, + progress-bar-tiny-text-font-weight: text-subtitle-2-font-weight, + progress-bar-tiny-text-line-height: text-subtitle-2-line-height, + progress-bar-small-height: 1.25rem, + progress-bar-small-text-font-size: text-subtitle-2-font-size, + progress-bar-small-text-font-weight: text-subtitle-2-font-weight, + progress-bar-small-text-line-height: text-subtitle-2-line-height, + progress-bar-medium-height: 1.375rem, + progress-bar-medium-text-font-size: text-subtitle-font-size, + progress-bar-medium-text-font-weight: text-subtitle-font-weight, + progress-bar-medium-text-line-height: text-subtitle-line-height, + progress-bar-large-height: 1.5rem, + progress-bar-large-text-font-size: text-subtitle-font-size, + progress-bar-large-text-font-weight: text-subtitle-font-weight, + progress-bar-large-text-line-height: text-subtitle-line-height, + progress-bar-giant-height: 1.75rem, + progress-bar-giant-text-font-size: text-subtitle-font-size, + progress-bar-giant-text-font-weight: text-subtitle-font-weight, + progress-bar-giant-text-line-height: text-subtitle-line-height, + + progress-bar-primary-background-color: color-basic-200, + progress-bar-primary-filled-background-color: color-primary, + progress-bar-primary-text-color: text-light-color, + progress-bar-success-background-color: color-basic-200, + progress-bar-success-filled-background-color: color-success, + progress-bar-success-text-color: text-light-color, + progress-bar-info-background-color: color-basic-200, + progress-bar-info-filled-background-color: color-info, + progress-bar-info-text-color: text-light-color, + progress-bar-warning-background-color: color-basic-200, + progress-bar-warning-filled-background-color: color-warning, + progress-bar-warning-text-color: text-light-color, + progress-bar-danger-background-color: color-basic-200, + progress-bar-danger-filled-background-color: color-danger, + progress-bar-danger-text-color: text-light-color, alert-font-size: font-size, alert-line-height: line-height, diff --git a/src/playground/with-layout/progress-bar/progress-bar-size.component.html b/src/playground/with-layout/progress-bar/progress-bar-size.component.html index ad11097fe3..59a671252f 100644 --- a/src/playground/with-layout/progress-bar/progress-bar-size.component.html +++ b/src/playground/with-layout/progress-bar/progress-bar-size.component.html @@ -1,9 +1,9 @@ - xs - sm - none - lg - xlg + tiny + small + medium + large + giant