Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-24 03:10: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',
base: 'default',
variables: {
temperature: [
'#ffa36b',
'#ffa36b',
'#ff9e7a',
'#ff9888',
'#ff8ea0',
],
temperature: {
arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
arcEmpty: theme.bg2,
thumbBg: theme.bg2,
thumbBorder: '#ffa36b',
},
solar: {
gradientLeft: '#ff8ea0',

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

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

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

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

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

@ -28,7 +28,7 @@
</g>
<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>
</svg>
</div>

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

@ -18,11 +18,6 @@
z-index: 2;
}
.circle {
fill: nb-theme(background-basic-color-2);
stroke: nb-theme(color-primary-default);
}
.temperature-bg {
position: absolute;
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;
@Input() fillColors: string|string[] = '#2ec6ff';
@Input() disableArcColor = '#999999';
@Input() fillColors: string|string[];
@Input() disableArcColor;
@Input() bottomAngle = 90;
@Input() arcThickness = 18; // CSS pixels
@Input() thumbRadius = 16; // CSS pixels
@Input() thumbBorder = 3;
@Input() thumbBg;
@Input() thumbBorderColor;
@Input() maxLeap = 0.4;
value = 50;

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

@ -5,8 +5,8 @@
<div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
[min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="theme.arcEmpty"
[fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
<div class="value temperature h1">
@ -39,8 +39,8 @@
<div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
[min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="theme.arcEmpty"
[fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
<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;
humidityMode = 'heat';
colors: any;
theme: any;
themeSubscription: any;
constructor(private theme: NbThemeService,
constructor(private themeService: NbThemeService,
private temperatureHumidityService: TemperatureHumidityData) {
this.theme.getJsTheme()
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(config => {
this.colors = config.variables;
this.theme = config.variables.temperature;
});
forkJoin(