Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-16 04:58:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): refactor js theme using

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-01 15:42:06 +03:00
parent 672615b710
commit b772882cd6
28 changed files with 561 additions and 492 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -27,6 +27,9 @@ export class ElectricityChartComponent {
}));
this.theme.getJsTheme().subscribe(config => {
const eTheme: any = config.variables.electricity;
this.option = {
grid: {
left: 0,
@ -43,11 +46,11 @@ export class ElectricityChartComponent {
},
},
position: 'top',
backgroundColor: config.trafficTooltipBg,
borderColor: config.colorSuccess,
backgroundColor: eTheme.tooltipBg,
borderColor: config.variables.colorSuccess,
borderWidth: 3,
formatter: '{c0} kWh',
extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
extraCssText: `box-shadow: 0px 2px 46px 0 ${eTheme.tooltipBg};border-radius: 10px;padding: 5px 20px;`,
},
xAxis: {
type: 'category',
@ -59,13 +62,13 @@ export class ElectricityChartComponent {
},
axisLabel: {
textStyle: {
color: config.electricityAxisColor,
color: eTheme.axisColor,
fontSize: 18,
},
},
axisLine: {
lineStyle: {
color: config.electricityAxisColor,
color: eTheme.axisColor,
opacity: 0.3,
width: '2',
},
@ -85,7 +88,7 @@ export class ElectricityChartComponent {
splitLine: {
show: true,
lineStyle: {
color: config.electricityAxisColor,
color: eTheme.axisColor,
opacity: 0.2,
width: '1',
},
@ -112,12 +115,12 @@ export class ElectricityChartComponent {
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.electricityLineGradFrom,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: config.electricityLineGradTo,
color: eTheme.lineGradTo,
}]),
shadowColor: config.electricityLineShadow,
shadowColor: eTheme.lineShadow,
shadowBlur: 6,
shadowOffsetY: 12,
},
@ -126,10 +129,10 @@ export class ElectricityChartComponent {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.electricityAreaGradFrom,
color: eTheme.areaGradFrom,
}, {
offset: 1,
color: config.electricityAreaGradTo,
color: eTheme.areaGradTo,
}]),
},
},
@ -146,12 +149,12 @@ export class ElectricityChartComponent {
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.electricityLineGradFrom,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: config.electricityLineGradTo,
color: eTheme.lineGradTo,
}]),
shadowColor: config.trafficShadowLineDarkBg,
shadowColor: eTheme.shadowLineDarkBg,
shadowBlur: 14,
},
},

20
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -30,6 +30,8 @@ export class SolarComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const solarTheme: any = config.variables.solar;
this.option = Object.assign({}, {
tooltip: {
trigger: 'item',
@ -53,8 +55,8 @@ export class SolarComponent {
formatter: '{d}%',
textStyle: {
fontSize: '22',
fontFamily: config.fontSecondary,
color: config.colorFgHeading,
fontFamily: config.variables.fontSecondary,
color: config.variables.colorFgHeading,
},
},
},
@ -66,14 +68,14 @@ export class SolarComponent {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: config.tempColorGreen,
color: solarTheme.gradientLeft,
},
{
offset: 1,
color: config.tempColorBlue,
color: solarTheme.gradientRight,
},
]),
shadowColor: config.solarColorDarkGreen,
shadowColor: solarTheme.gradientLeft,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 3,
@ -94,7 +96,7 @@ export class SolarComponent {
},
itemStyle: {
normal: {
color: config.layoutBg,
color: config.variables.layoutBg,
},
},
},
@ -125,14 +127,14 @@ export class SolarComponent {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: config.tempColorGreen,
color: solarTheme.gradientLeft,
},
{
offset: 1,
color: config.tempColorBlue,
color: solarTheme.gradientRight,
},
]),
shadowColor: 'rgba(0, 217, 119, 0.3)',
shadowColor: solarTheme.shadowColor,
shadowBlur: 7,
},
},

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

@ -5,13 +5,8 @@
<div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[min]="12" [max]="30" [disableArcColor]="themeConfig.layoutBg"
[fillColors]="[
themeConfig.tempColorBlue,
themeConfig.tempColorLightBlue,
themeConfig.tempColorGreen,
themeConfig.tempColorYellow,
themeConfig.tempColorOrange]">
[min]="12" [max]="30" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
<div class="value temperature">
@ -45,13 +40,8 @@
<div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[min]="0" [max]="100" [disableArcColor]="themeConfig.layoutBg"
[fillColors]="[
themeConfig.tempColorBlue,
themeConfig.tempColorLightBlue,
themeConfig.tempColorGreen,
themeConfig.tempColorYellow,
themeConfig.tempColorOrange]">
[min]="0" [max]="100" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
<div class="value humidity">

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

@ -16,11 +16,11 @@ export class TemperatureComponent {
humidityOff: boolean = false;
humidityMode = 'heat';
themeConfig: any = {};
colors: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.themeConfig = config;
this.colors = config.variables;
});
}
}

26
src/app/pages/dashboard/traffic/traffic-chart.component.ts
View file

@ -21,6 +21,8 @@ export class TrafficChartComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const trafficTheme: any = config.variables.traffic;
this.option = Object.assign({}, {
grid: {
left: 0,
@ -47,7 +49,7 @@ export class TrafficChartComponent {
splitLine: {
show: true,
lineStyle: {
color: config.trafficColorBlack,
color: trafficTheme.colorBlack,
opacity: 0.06,
width: '1',
},
@ -58,11 +60,11 @@ export class TrafficChartComponent {
type: 'shadow',
},
position: 'top',
backgroundColor: config.trafficTooltipBg,
borderColor: config.colorSuccess,
backgroundColor: trafficTheme.tooltipBg,
borderColor: config.variables.colorSuccess,
borderWidth: 3,
formatter: '{c0} MB',
extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
extraCssText: `box-shadow: 0px 2px 46px 0 ${trafficTheme.tooltipBg};border-radius: 10px;padding: 5px 20px;`,
},
series: [
{
@ -73,7 +75,7 @@ export class TrafficChartComponent {
silent: true,
itemStyle: {
normal: {
color: config.trafficLineBg,
color: trafficTheme.lineBg,
},
emphasis: {
color: 'rgba(0,0,0,0)',
@ -84,7 +86,7 @@ export class TrafficChartComponent {
lineStyle: {
normal: {
width: 2,
color: config.trafficLineBg,
color: trafficTheme.lineBg,
},
},
data: points.map(p => p - 15),
@ -96,10 +98,10 @@ export class TrafficChartComponent {
sampling: 'average',
itemStyle: {
normal: {
color: config.trafficShadowLineBg,
color: trafficTheme.shadowLineBg,
borderColor: 'white',
borderWidth: 2,
shadowColor: config.trafficShadowLineShadow,
shadowColor: trafficTheme.shadowLineShadow,
shadowOffsetX: 0,
shadowOffsetY: -3,
shadowBlur: 10,
@ -113,8 +115,8 @@ export class TrafficChartComponent {
lineStyle: {
normal: {
width: 2,
color: config.trafficLineBg,
shadowColor: config.trafficShadowLineDarkBg,
color: trafficTheme.lineBg,
shadowColor: trafficTheme.shadowLineDarkBg,
shadowBlur: 14,
},
},
@ -122,10 +124,10 @@ export class TrafficChartComponent {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.trafficGradFrom,
color: trafficTheme.gradFrom,
}, {
offset: 1,
color: config.trafficGradTo,
color: trafficTheme.gradTo,
}]),
},
},