From f630a1d5402dd3df8a9f7b6b36dabe1741a230a6 Mon Sep 17 00:00:00 2001 From: KostyaDanovsky Date: Mon, 7 Aug 2017 16:12:38 +0300 Subject: [PATCH] feat(dashboard): improve charts and other cards for correct theme switching --- src/app/@theme/styles/theme.cosmic.ts | 18 ++-- src/app/@theme/styles/theme.default.ts | 30 ++++--- .../contacts/contacts.component.scss | 5 +- .../electricity-chart.component.ts | 2 +- .../electricity/electricity.component.scss | 9 +- .../room-selector.component.html | 2 +- .../room-selector.component.scss | 50 +++++++---- .../security-cameras.component.scss | 86 +++++++++++-------- .../security-cameras.component.ts | 2 +- .../dashboard/solar/solar.component.scss | 36 ++++++++ .../pages/dashboard/solar/solar.component.ts | 34 ++++---- .../status-card/status-card.component.scss | 46 +++++++--- .../status-card/status-card.component.ts | 6 +- .../temperature-dragger.component.html | 4 +- .../temperature-dragger.component.scss | 21 ++++- .../temperature-dragger.component.ts | 9 +- .../temperature/temperature.component.html | 4 +- .../temperature/temperature.component.scss | 15 +++- .../traffic/traffic-chart.component.ts | 28 +++--- .../dashboard/weather/weather.component.scss | 11 ++- 20 files changed, 280 insertions(+), 138 deletions(-) diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts index 5497f043..9ca1cf22 100644 --- a/src/app/@theme/styles/theme.cosmic.ts +++ b/src/app/@theme/styles/theme.cosmic.ts @@ -12,18 +12,24 @@ export const COSMIC_THEME = { ], solar: { - color: '#19977E', - shadowColor: 'rgba(0, 217, 119, 0.3)', gradientLeft: '#7bff24', gradientRight: '#2ec7fe', + shadowColor: '#19977E', + radius: ['70%', '90%'], }, traffic: { colorBlack: '#000000', tooltipBg: 'rgba(0, 255, 170, 0.35)', - lineBg: 'rgba(146, 141, 255, 0.5)', - shadowLineBg: '#bdbaff', - shadowLineDarkBg: '#a695ff', + tooltipBorderColor: '#00d977', + tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;', + tooltipTextColor: '#ffffff', + lineBg: '#d1d1ff', + lineShadowBlur: '14', + itemColor: '#BEBBFF', + itemBorderColor: '#ffffff', + itemEmphasisBorderColor: '#ffffff', + shadowLineDarkBg: '#655ABD', shadowLineShadow: 'rgba(33, 7, 77, 0.5)', gradFrom: 'rgba(118, 89, 255, 0.4)', gradTo: 'rgba(164, 84, 255, 0.5)', @@ -34,7 +40,7 @@ export const COSMIC_THEME = { tooltipLineColor: 'rgba(255, 255, 255, 0.1)', tooltipLineWidth: '1', tooltipBorderColor: '#00d977', - tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35);border-radius: 10px;padding: 8px 24px;', + tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;', tooltipTextColor: '#ffffff', xAxisColor: 'rgba(161, 161 ,229, 0.3)', diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts index 5f92e2f9..3a7042dd 100644 --- a/src/app/@theme/styles/theme.default.ts +++ b/src/app/@theme/styles/theme.default.ts @@ -6,21 +6,27 @@ export const DEFAULT_THEME = { temperature: ['#42db7d'], solar: { - color: '#19977E', - shadowColor: 'rgba(0, 217, 119, 0.3)', - gradientLeft: '#7bff24', - gradientRight: '#2ec7fe', + gradientLeft: '#42db7d', + gradientRight: '#42db7d', + shadowColor: 'rgba(0, 0, 0, 0)', + radius: ['80%', '90%'], }, traffic: { colorBlack: '#000000', - tooltipBg: 'rgba(0, 255, 170, 0.35)', - lineBg: 'rgba(146, 141, 255, 0.5)', - shadowLineBg: '#bdbaff', - shadowLineDarkBg: '#a695ff', - shadowLineShadow: 'rgba(33, 7, 77, 0.5)', - gradFrom: 'rgba(118, 89, 255, 0.4)', - gradTo: 'rgba(164, 84, 255, 0.5)', + tooltipBg: '#ffffff', + tooltipBorderColor: '#c0c8d1', + tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', + tooltipTextColor: '#222222', + lineBg: '#c0c8d1', + lineShadowBlur: '1', + itemColor: '#bcc3cc', + itemBorderColor: '#bcc3cc', + itemEmphasisBorderColor: '#42db7d', + shadowLineDarkBg: 'rgba(0, 0, 0, 0)', + shadowLineShadow: 'rgba(0, 0, 0, 0)', + gradFrom: '#ebeef2', + gradTo: '#ebeef2', }, electricity: { @@ -28,7 +34,7 @@ export const DEFAULT_THEME = { tooltipLineColor: 'rgba(0, 0, 0, 0)', tooltipLineWidth: '0', tooltipBorderColor: '#ebeef2', - tooltipExtraCss: 'border-radius: 10px;padding: 8px 24px;', + tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', tooltipTextColor: '#222222', xAxisColor: 'rgba(0, 0, 0, 0)', diff --git a/src/app/pages/dashboard/contacts/contacts.component.scss b/src/app/pages/dashboard/contacts/contacts.component.scss index 71554d7c..c7fbef8c 100644 --- a/src/app/pages/dashboard/contacts/contacts.component.scss +++ b/src/app/pages/dashboard/contacts/contacts.component.scss @@ -20,7 +20,10 @@ justify-content: space-between; color: nb-theme(color-fg); padding: 1rem; - border-bottom: 1px solid nb-theme(separator); + + &:not(:last-child) { + border-bottom: 1px solid nb-theme(separator); + } } .i-contact { diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts index b6c54494..da985ee8 100644 --- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts +++ b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts @@ -35,7 +35,7 @@ export class ElectricityChartComponent implements AfterViewInit { // } this.data = points.map((p, index) => ({ - label: (index % 3 === 2) ? `${Math.round(index / 3)}` : '', + label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '', value: p, })); } diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss index bf9d449e..b9132030 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.scss +++ b/src/app/pages/dashboard/electricity/electricity.component.scss @@ -55,8 +55,8 @@ position: absolute; content: ''; width: 100%; - height: 0.25rem; - border-radius: 0.125rem; + height: 5px; + border-radius: 2.5px; bottom: 0; left: 0; background: nb-theme(color-success); @@ -92,6 +92,7 @@ align-items: center; justify-content: space-between; padding: 1rem; + color: nb-theme(color-fg); &:not(:first-child) { border-top: 1px solid nb-theme(separator); @@ -171,10 +172,10 @@ .stats-block { margin-right: 3rem; + color: nb-theme(color-fg); .subtitle { - font-size: 1.125rem; - font-weight: nb-theme(font-weight-light); + font-size: 1.125rem; } .value { diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html index 578d2ee3..4cc2aba3 100644 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html @@ -4,7 +4,7 @@ - +
-
June 7, 2017
-

6. 421 kWh

-
out of 8.421 kWh
+
June 7, 2017
+
6. 421 kWh
+
out of 8.421 kWh
`, }) -export class SolarComponent { +export class SolarComponent implements AfterViewInit { + + @Input() chartValue: number; option: any = {}; - @Input('chartValue') - set chartValue(value: number) { - this.option.series[0].data[0].value = value; - this.option.series[0].data[1].value = 100 - value; - this.option.series[1].data[0].value = value; + constructor(private theme: NbThemeService) { } - constructor(private theme: NbThemeService) { - this.theme.getJsTheme().subscribe(config => { + ngAfterViewInit() { + this.theme.getJsTheme().delay(1).subscribe(config => { const solarTheme: any = config.variables.solar; @@ -44,10 +42,10 @@ export class SolarComponent { hoverAnimation: false, type: 'pie', center: ['35%', '50%'], - radius: ['70%', '90%'], + radius: solarTheme.radius, data: [ { - value: 72, + value: this.chartValue, name: ' ', label: { normal: { @@ -75,7 +73,7 @@ export class SolarComponent { color: solarTheme.gradientRight, }, ]), - shadowColor: solarTheme.gradientLeft, + shadowColor: solarTheme.shadowColor, shadowBlur: 0, shadowOffsetX: 0, shadowOffsetY: 3, @@ -84,7 +82,7 @@ export class SolarComponent { hoverAnimation: false, }, { - value: 28, + value: 100 - this.chartValue, name: ' ', tooltip: { show: false, @@ -108,10 +106,10 @@ export class SolarComponent { hoverAnimation: false, type: 'pie', center: ['35%', '50%'], - radius: ['70%', '90%'], + radius: solarTheme.radius, data: [ { - value: 72, + value: this.chartValue, name: ' ', label: { normal: { diff --git a/src/app/pages/dashboard/status-card/status-card.component.scss b/src/app/pages/dashboard/status-card/status-card.component.scss index 798d324a..2869822f 100644 --- a/src/app/pages/dashboard/status-card/status-card.component.scss +++ b/src/app/pages/dashboard/status-card/status-card.component.scss @@ -13,15 +13,20 @@ box-shadow: $bevel, $shadow; transition: all 0.1s ease-out; - $border-radius: nb-theme(card-border-radius); .icon-container { + height: 100%; + padding: 0.625rem; + border-right: 1px solid nb-theme(separator); + } + + .icon { display: flex; align-items: center; justify-content: center; - height: 100%; - width: 7rem; - font-size: 4em; - border-radius: $border-radius 0 0 $border-radius; + width: 5.75rem; + height: 4.75rem; + font-size: 3.5rem; + border-radius: nb-theme(card-border-radius); transition: all 0.1s ease-out, color 0s; color: nb-theme(color-white); @@ -46,7 +51,7 @@ &:hover { background: lighten(nb-theme(card-bg), 5%); - .icon-container { + .icon { &.primary { background-image: btn-hero-primary-light-gradient(); } @@ -66,7 +71,7 @@ box-shadow: none; background: nb-theme(card-bg); - .icon-container { + .icon { &.primary, &.success, &.info, &.warning { box-shadow: none; } @@ -89,6 +94,10 @@ color: nb-theme(card-fg); .icon-container { + border-right: 1px solid nb-theme(separator); + } + + .icon { color: nb-theme(card-fg); &.primary, &.success, &.info, &.warning { @@ -97,9 +106,6 @@ } } - .details { - border-left: 1px solid nb-theme(separator); - } .title { color: nb-theme(card-fg); } @@ -128,4 +134,24 @@ color: nb-theme(card-fg); } } + + @include nb-for-theme(cosmic) { + nb-card { + .icon-container { + padding: 0; + border-right: none; + } + + .icon { + width: 7rem; + height: 100%; + font-size: 4em; + border-radius: nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius); + } + + .status { + font-weight: nb-theme(font-weight-light); + } + } + } } diff --git a/src/app/pages/dashboard/status-card/status-card.component.ts b/src/app/pages/dashboard/status-card/status-card.component.ts index 8406b1db..74859e8c 100644 --- a/src/app/pages/dashboard/status-card/status-card.component.ts +++ b/src/app/pages/dashboard/status-card/status-card.component.ts @@ -5,8 +5,10 @@ import { Component, Input } from '@angular/core'; styleUrls: ['./status-card.component.scss'], template: ` -
- +
+
+ +
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html index dca03847..9c8e1deb 100644 --- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html +++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html @@ -26,9 +26,7 @@ - + [attr.stroke-width]="thumbBorder / scaleFactor" class="circle">
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss index 39906ee1..e19dcbe1 100644 --- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss +++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss @@ -12,6 +12,11 @@ z-index: 2; } + .circle { + fill: nb-theme(color-bg); + stroke: nb-theme(color-success); + } + .temperature-bg { position: absolute; width: 88%; @@ -47,12 +52,11 @@ display: flex; align-items: center; justify-content: center; - box-shadow: nb-theme(card-shadow); cursor: pointer; font-size: 2.5rem; color: nb-theme(color-fg-heading); - text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); transition: all 0.1s ease-out; + border: 2px solid nb-theme(separator); &:hover { background-color: lighten(nb-theme(card-bg), 5%); @@ -68,4 +72,17 @@ text-shadow: none; } } + + @include nb-for-theme(cosmic) { + .circle { + fill: nb-theme(color-fg-heading); + stroke: nb-theme(color-fg-heading); + } + + .power-bg { + border: none; + box-shadow: nb-theme(card-shadow); + text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); + } + } } diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts index ea2de6c8..a42a7bbd 100644 --- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts +++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts @@ -18,8 +18,8 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges { @Input() disableArcColor: string = '#999999'; @Input() bottomAngle: number = 90; @Input() arcThickness: number = 18; // CSS pixels - @Input() thumbRadius: number = 15; // CSS pixels - @Input() thumbDashRadius: number = null; + @Input() thumbRadius: number = 16; // CSS pixels + @Input() thumbBorder: number = 3; @Input() maxLeap: number = 0.4; value: number = 50; @@ -61,7 +61,6 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges { translateYValue = 0; thickness = 6; pinRadius = 10; - pinDashRadius = null; colors: any = []; styles = { @@ -133,7 +132,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges { const svgBoundingRect = this.svgRoot.nativeElement.getBoundingClientRect(); const svgAreaFactor = svgBoundingRect.height && svgBoundingRect.width / svgBoundingRect.height || 1; const svgHeight = VIEW_BOX_SIZE / svgAreaFactor; - const thumbMaxRadius = Math.max(this.thumbRadius, this.thumbDashRadius); + const thumbMaxRadius = this.thumbRadius + this.thumbBorder; const thumbMargin = 2 * thumbMaxRadius > this.arcThickness ? (thumbMaxRadius - this.arcThickness / 2) / this.scaleFactor : 0; @@ -151,7 +150,6 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges { } else { this.radius = VIEW_BOX_SIZE / 2 - thumbMargin; } - } else { this.radius = (svgHeight - 2 * thumbMargin) / (1 + Math.cos(halfAngle)); } @@ -163,7 +161,6 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges { this.thickness = this.arcThickness / this.scaleFactor; this.pinRadius = this.thumbRadius / this.scaleFactor; - this.pinDashRadius = this.thumbDashRadius && this.thumbDashRadius / this.scaleFactor; } private calculateClipPathSettings() { diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html index d1b376d9..59b3986c 100644 --- a/src/app/pages/dashboard/temperature/temperature.component.html +++ b/src/app/pages/dashboard/temperature/temperature.component.html @@ -51,8 +51,8 @@
-
+
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss index 9e38c951..bd768abc 100644 --- a/src/app/pages/dashboard/temperature/temperature.component.scss +++ b/src/app/pages/dashboard/temperature/temperature.component.scss @@ -104,8 +104,7 @@ &.active { border-color: nb-theme(color-fg-highlight); - box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25); - background-color: rgba(nb-theme(color-fg-highlight), 0.25); + color: nb-theme(color-success); } i { @@ -125,4 +124,16 @@ font-size: 1.75rem; } } + + @include nb-for-theme(cosmic) { + .btn-icon { + border-color: nb-theme(form-control-border-color); + + &.active { + border-color: nb-theme(color-fg-highlight); + box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25); + background-color: rgba(nb-theme(color-fg-highlight), 0.25); + } + } + } } diff --git a/src/app/pages/dashboard/traffic/traffic-chart.component.ts b/src/app/pages/dashboard/traffic/traffic-chart.component.ts index dc7b98de..8368af5b 100644 --- a/src/app/pages/dashboard/traffic/traffic-chart.component.ts +++ b/src/app/pages/dashboard/traffic/traffic-chart.component.ts @@ -62,12 +62,16 @@ export class TrafficChartComponent implements AfterViewInit { axisPointer: { type: 'shadow', }, + textStyle: { + color: trafficTheme.tooltipTextColor, + fontSize: 16, + }, position: 'top', backgroundColor: trafficTheme.tooltipBg, - borderColor: config.variables.colorSuccess, + borderColor: trafficTheme.tooltipBorderColor, borderWidth: 3, formatter: '{c0} MB', - extraCssText: `box-shadow: 0px 2px 46px 0 ${trafficTheme.tooltipBg};border-radius: 10px;padding: 5px 20px;`, + extraCssText: trafficTheme.tooltipExtraCss, }, series: [ { @@ -78,7 +82,7 @@ export class TrafficChartComponent implements AfterViewInit { silent: true, itemStyle: { normal: { - color: trafficTheme.lineBg, + color: trafficTheme.shadowLineDarkBg, }, emphasis: { color: 'rgba(0,0,0,0)', @@ -89,7 +93,7 @@ export class TrafficChartComponent implements AfterViewInit { lineStyle: { normal: { width: 2, - color: trafficTheme.lineBg, + color: trafficTheme.shadowLineDarkBg, }, }, data: points.map(p => p - 15), @@ -101,26 +105,22 @@ export class TrafficChartComponent implements AfterViewInit { sampling: 'average', itemStyle: { normal: { - color: trafficTheme.shadowLineBg, - borderColor: 'white', + color: trafficTheme.itemColor, + borderColor: trafficTheme.itemBorderColor, borderWidth: 2, - shadowColor: trafficTheme.shadowLineShadow, - shadowOffsetX: 0, - shadowOffsetY: -3, - shadowBlur: 10, }, emphasis: { color: 'white', - borderColor: 'rgba(0,0,0,0)', - borderWidth: 5, + borderColor: trafficTheme.itemEmphasisBorderColor, + borderWidth: 2, }, }, lineStyle: { normal: { width: 2, color: trafficTheme.lineBg, - shadowColor: trafficTheme.shadowLineDarkBg, - shadowBlur: 14, + shadowColor: trafficTheme.lineBg, + shadowBlur: trafficTheme.lineShadowBlur, }, }, areaStyle: { diff --git a/src/app/pages/dashboard/weather/weather.component.scss b/src/app/pages/dashboard/weather/weather.component.scss index 83ec07ef..0248dcba 100644 --- a/src/app/pages/dashboard/weather/weather.component.scss +++ b/src/app/pages/dashboard/weather/weather.component.scss @@ -50,9 +50,14 @@ .icon { font-size: 10rem; line-height: 10rem; - text-shadow: 0 3px 0 #665ebd, - 0 4px 10px rgba(33, 7, 77, 0.5), - 0 2px 10px #928dff; + color: nb-theme(color-success); + + @include nb-for-theme(cosmic) { + color: nb-theme(color-fg); + text-shadow: 0 3px 0 #665ebd, + 0 4px 10px rgba(33, 7, 77, 0.5), + 0 2px 10px #928dff; + } } }