Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-03-13 17:06:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(temperature): update js theme

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-21 15:07:47 +03:00
parent 658c5921e2
commit 77dc3ab83d
8 changed files with 31 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/app/@theme/styles/theme.corporate.ts
View file

@ -47,13 +47,12 @@ export const CORPORATE_THEME = {
name: 'corporate', name: 'corporate',
base: 'default', base: 'default',
variables: { variables: {
temperature: [ temperature: {
'#ffa36b', arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
'#ffa36b', arcEmpty: theme.bg2,
'#ff9e7a', thumbBg: theme.bg2,
'#ff9888', thumbBorder: '#ffa36b',
'#ff8ea0', },
],
solar: { solar: {
gradientLeft: '#ff8ea0', gradientLeft: '#ff8ea0',

13
src/app/@theme/styles/theme.cosmic.ts
View file

@ -48,13 +48,12 @@ export const COSMIC_THEME = {
base: 'default', base: 'default',
variables: { variables: {
temperature: [ temperature: {
'#2ec7fe', arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
'#31ffad', arcEmpty: theme.bg2,
'#7bff24', thumbBg: '#ffffff',
'#fff024', thumbBorder: '#ffffff',
'#f7bd59', },
],
solar: { solar: {
gradientLeft: '#7bff24', gradientLeft: '#7bff24',

14
src/app/@theme/styles/theme.default.ts
View file

@ -48,14 +48,12 @@ export const DEFAULT_THEME = {
base: null, base: null,
variables: { variables: {
// Safari fix temperature: {
temperature: [ arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
'#42db7d', arcEmpty: theme.bg2,
'#42db7d', thumbBg: theme.bg2,
'#42db7d', thumbBorder: theme.primary,
'#42db7d', },
'#42db7d',
],
solar: { solar: {
gradientLeft: '#42db7d', gradientLeft: '#42db7d',

2
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
View file

@ -28,7 +28,7 @@
</g> </g>
<circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinRadius" <circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinRadius"
[attr.stroke-width]="thumbBorder / scaleFactor" class="circle"></circle> [attr.stroke-width]="thumbBorder / scaleFactor" [attr.fill]="thumbBg" [attr.stroke]="thumbBorderColor"></circle>
</g> </g>
</svg> </svg>
</div> </div>

5
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
View file

@ -18,11 +18,6 @@
z-index: 2; z-index: 2;
} }
.circle {
fill: nb-theme(background-basic-color-2);
stroke: nb-theme(color-primary-default);
}
.temperature-bg { .temperature-bg {
position: absolute; position: absolute;
width: 88%; width: 88%;

6
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
View file

@ -13,12 +13,14 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
@ViewChild('svgRoot', { static: true }) svgRoot: ElementRef; @ViewChild('svgRoot', { static: true }) svgRoot: ElementRef;
@Input() fillColors: string|string[] = '#2ec6ff'; @Input() fillColors: string|string[];
@Input() disableArcColor = '#999999'; @Input() disableArcColor;
@Input() bottomAngle = 90; @Input() bottomAngle = 90;
@Input() arcThickness = 18; // CSS pixels @Input() arcThickness = 18; // CSS pixels
@Input() thumbRadius = 16; // CSS pixels @Input() thumbRadius = 16; // CSS pixels
@Input() thumbBorder = 3; @Input() thumbBorder = 3;
@Input() thumbBg;
@Input() thumbBorderColor;
@Input() maxLeap = 0.4; @Input() maxLeap = 0.4;
value = 50; value = 50;

8
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -5,8 +5,8 @@
<div class="slider-container"> <div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event" <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="colors.layoutBg" [min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="theme.arcEmpty"
[fillColors]="colors.temperature"> [fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }"> <div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
<div class="value temperature h1"> <div class="value temperature h1">
@ -39,8 +39,8 @@
<div class="slider-container"> <div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="colors.layoutBg" [min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="theme.arcEmpty"
[fillColors]="colors.temperature"> [fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }"> <div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
<div class="value humidity h1"> <div class="value humidity h1">

8
src/app/pages/dashboard/temperature/temperature.component.ts
View file

@ -23,15 +23,15 @@ export class TemperatureComponent implements OnDestroy {
humidityOff = false; humidityOff = false;
humidityMode = 'heat'; humidityMode = 'heat';
colors: any; theme: any;
themeSubscription: any; themeSubscription: any;
constructor(private theme: NbThemeService, constructor(private themeService: NbThemeService,
private temperatureHumidityService: TemperatureHumidityData) { private temperatureHumidityService: TemperatureHumidityData) {
this.theme.getJsTheme() this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive)) .pipe(takeWhile(() => this.alive))
.subscribe(config => { .subscribe(config => {
this.colors = config.variables; this.theme = config.variables.temperature;
}); });
forkJoin( forkJoin(