Skip to content

Commit ac75e52

Browse files
modularcodermodularcoder
committed
Chart colors adjustment
Themes adjustment
1 parent 8d153d5 commit ac75e52

16 files changed

Lines changed: 88 additions & 46 deletions

File tree

‎src/_common/card/card.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
font-size: 14px;
8686
border-top-width: 2px;
8787
border-bottom: 1px solid $color-divider;
88+
text-decoration: none;
8889

8990
&.active {
9091
border-top-color: $color-primary;

‎src/_main.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,13 @@ body {
2828
.color-primary {
2929
color: $color-primary;
3030
}
31+
32+
.chart {
33+
.color-primary {
34+
color: $chart-color-primary;
35+
}
36+
.color-secondary {
37+
color: $chart-color-secondary;
38+
}
39+
}
3140
}

‎src/_themes/orange-theme.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
$color-primary: #FE7A0E;
1+
$color-primary: lighten(#FE7A0E, 3%);
22
$dashboard-stat-icon-color: #BDBDBD;
33

44
$link-color: #969696;
55
$link-transition: initial;
66
$link-decoration: underline;
77

88
$link-hover-color: desaturate(darken($color-primary, 4%), 4%);
9-
$link-hover-decoration: underline;
9+
$link-hover-decoration: underline;
10+
11+
$chart-color-primary: lighten($color-primary, 10%);
12+
$chart-color-secondary: lighten($chart-color-primary, 20%);

‎src/_themes/purple-theme.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
$color-primary: #7867A7;
2-
$dashboard-stat-icon-color: #BDBDBD;
2+
$dashboard-stat-icon-color: #BDBDBD;
3+
4+
5+
$chart-color-primary: lighten($color-primary, 8%);
6+
$chart-color-secondary: lighten($chart-color-primary, 10%);

‎src/_themes/red-theme.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,7 @@ $link-transition: initial;
55
$link-decoration: underline;
66

77
$link-hover-color: #E45252;
8-
$link-hover-decoration: underline;
8+
$link-hover-decoration: underline;
9+
10+
$chart-color-primary: #FF8585;
11+
$chart-color-secondary: #ccc;

‎src/_variables.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,10 @@ $card-padding-x-sm: 10px !default;
9090
// Item list
9191
$item-list-color-border: lighten($color-divider, 6%) !default;
9292

93+
// Charts
94+
$chart-color-primary: $color-primary !default;
95+
$chart-color-secondary: lighten($color-primary, 10%) !default;
96+
9397

9498

9599
/* ***************************************************

‎src/app/_common/sidebar/customize/customize.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,8 @@ $(function () {
124124
*************************************************/
125125
function setThemeColor(){
126126
setTimeout(function(){
127-
config.colorPrimary = tinycolor($("#ref .color-primary").css("color"));
127+
config.chart.colorPrimary = tinycolor($ref.find(".chart .color-primary").css("color"));
128+
config.chart.colorSecondary = tinycolor($ref.find(".chart .color-secondary").css("color"));
128129
}, 200);
129130
}
130131

‎src/app/app-layout.hbs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@
5858
<!-- Reference block for JS -->
5959
<div class="ref" id="ref">
6060
<div class="color-primary"></div>
61+
<div class="chart">
62+
<div class="color-primary"></div>
63+
<div class="color-secondary"></div>
64+
</div>
6165
</div>
6266
<script src="js/vendor.js"></script>
6367
<script src="js/app.js"></script>

‎src/app/charts/charts-flot/charts-flot.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ $(function() {
2525
xaxis: {
2626
tickDecimals: 0
2727
},
28-
colors: [config.colorPrimary],
28+
colors: [config.chart.colorPrimary],
2929
grid: {
3030
color: "#999999",
3131
hoverable: true,
@@ -74,7 +74,7 @@ $(function() {
7474
xaxis: {
7575
tickDecimals: 0
7676
},
77-
colors: [config.colorPrimary],
77+
colors: [config.chart.colorPrimary],
7878
grid: {
7979
color: "#999999",
8080
hoverable: true,
@@ -107,19 +107,19 @@ $(function() {
107107
var data = [{
108108
label: "Sales 1",
109109
data: 21,
110-
color: tinycolor(config.colorPrimary.toString()).lighten(20),
110+
color: tinycolor(config.chart.colorPrimary.toString()).lighten(20),
111111
}, {
112112
label: "Sales 2",
113113
data: 15,
114-
color: tinycolor(config.colorPrimary.toString()).lighten(10),
114+
color: tinycolor(config.chart.colorPrimary.toString()).lighten(10),
115115
}, {
116116
label: "Sales 3",
117117
data: 7,
118-
color: tinycolor(config.colorPrimary.toString()),
118+
color: tinycolor(config.chart.colorPrimary.toString()),
119119
}, {
120120
label: "Sales 4",
121121
data: 52,
122-
color: tinycolor(config.colorPrimary.toString()).darken(10),
122+
color: tinycolor(config.chart.colorPrimary.toString()).darken(10),
123123
}];
124124

125125
var plotObj = $.plot($("#flot-pie-chart"), data, {
@@ -216,7 +216,7 @@ $(function() {
216216
return markings;
217217
}
218218
},
219-
colors: [config.colorPrimary.toString()],
219+
colors: [config.chart.colorPrimary.toString()],
220220
xaxis: {
221221
tickFormatter: function() {
222222
return "";
@@ -290,7 +290,7 @@ $(function() {
290290
legend: {
291291
position: 'sw'
292292
},
293-
colors: [config.colorPrimary.toString()],
293+
colors: [config.chart.colorPrimary.toString()],
294294
grid: {
295295
color: "#999999",
296296
hoverable: true,
@@ -323,7 +323,7 @@ $(function() {
323323

324324
drawFlotCharts();
325325

326-
watch(config, "colorPrimary", function(){
326+
watch(config.chart, function(){
327327
drawFlotCharts();
328328
});
329329

‎src/app/charts/charts-morris/charts-morris.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $(function() {
2424
resize: true,
2525
lineWidth:4,
2626
labels: ['Value'],
27-
lineColors: [config.colorPrimary.toString()],
27+
lineColors: [config.chart.colorPrimary.toString()],
2828
pointSize:5,
2929
});
3030

@@ -49,9 +49,9 @@ $(function() {
4949
hideHover: 'auto',
5050
resize: true,
5151
lineColors: [
52-
tinycolor(config.colorPrimary.toString()).lighten(10).toString(),
53-
tinycolor(config.colorPrimary.toString()).darken(10).toString(),
54-
config.colorPrimary.toString()
52+
tinycolor(config.chart.colorPrimary.toString()).lighten(10).toString(),
53+
tinycolor(config.chart.colorPrimary.toString()).darken(10).toString(),
54+
config.chart.colorPrimary.toString()
5555
],
5656
lineWidth:2,
5757
pointSize:1,
@@ -66,9 +66,9 @@ $(function() {
6666
{ label: "Mail-Order Sales", value: 20 } ],
6767
resize: true,
6868
colors: [
69-
tinycolor(config.colorPrimary.toString()).lighten(10).toString(),
70-
tinycolor(config.colorPrimary.toString()).darken(10).toString(),
71-
config.colorPrimary.toString()
69+
tinycolor(config.chart.colorPrimary.toString()).lighten(10).toString(),
70+
tinycolor(config.chart.colorPrimary.toString()).darken(10).toString(),
71+
config.chart.colorPrimary.toString()
7272
],
7373
});
7474

@@ -89,8 +89,8 @@ $(function() {
8989
hideHover: 'auto',
9090
resize: true,
9191
barColors: [
92-
config.colorPrimary.toString(),
93-
tinycolor(config.colorPrimary.toString()).darken(10).toString()
92+
config.chart.colorPrimary.toString(),
93+
tinycolor(config.chart.colorPrimary.toString()).darken(10).toString()
9494
],
9595
});
9696

@@ -111,15 +111,15 @@ $(function() {
111111
hideHover: 'auto',
112112
resize: true,
113113
lineColors: [
114-
config.colorPrimary.toString(),
115-
tinycolor(config.colorPrimary.toString()).darken(10).toString()
114+
config.chart.colorPrimary.toString(),
115+
tinycolor(config.chart.colorPrimary.toString()).darken(10).toString()
116116
],
117117
});
118118
}
119119

120120
drawMorrisCharts();
121121

122-
watch(config, "colorPrimary", function(){
122+
watch(config.chart, function(){
123123
drawMorrisCharts();
124124
});
125125
});

0 commit comments

Comments
 (0)