jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(colors): refactor color scheme structure

pull/383/head
KostyaDanovsky 2016-04-18 16:43:00 +03:00
parent e34dfffac8
commit b669dd4758
11 changed files with 158 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js
View File

@ -42,8 +42,8 @@
"id": "g3",
color: layoutColors.default,
"valueAxis": "v1",
"lineColor": layoutColors.primaryBg,
"fillColors": layoutColors.primaryBg,
"lineColor": layoutColors.primaryLight,
"fillColors": layoutColors.primaryLight,
"fillAlphas": 0.8,
"lineAlpha": 0.8,
"type": "column",

9
src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js
View File

@ -10,6 +10,7 @@
/** @ngInject */
function DashboardCalendarCtrl(layoutColors) {
var palette = layoutColors.bgColorPalette;
var $element = $('#calendar').fullCalendar({
//height: 335,
header: {
@ -39,23 +40,23 @@
{
title: 'All Day Event',
start: '2016-03-01',
color: layoutColors.successCharts
color: palette.silverTree
},
{
title: 'Long Event',
start: '2016-03-07',
end: '2016-03-10',
color: layoutColors.primaryCharts
color: palette.blueStone
},
{
title: 'Dinner',
start: '2016-03-14T20:00:00',
color: layoutColors.infoCharts
color: palette.surfieGreen
},
{
title: 'Birthday Party',
start: '2016-04-01T07:00:00',
color: layoutColors.warningCharts
color: palette.gossipDark
}
]
});

62
src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js
View File

@ -9,46 +9,52 @@
.controller('TrafficChartCtrl', TrafficChartCtrl);
/** @ngInject */
function TrafficChartCtrl(layoutColors) {
var doughnutData = [
function TrafficChartCtrl(layoutColors, $scope) {
var palette = layoutColors.bgColorPalette;
$scope.doughnutData = [
{
value: 2000,
color: layoutColors.defaultCharts,
highlight: "#f1f1f1",
label: 'Ad Campaigns'
},
{
color: palette.white,
highlight: palette.whiteDark,
label: 'Ad Campaigns',
percentage: 87,
order: 0,
}, {
value: 1500,
color: layoutColors.primaryCharts,
highlight: "#136775",
label: 'Search engines'
},
{
color: palette.blueStone,
highlight: palette.blueStoneDark,
label: 'Search engines',
percentage: 22,
order: 4,
}, {
value: 1000,
color: layoutColors.infoCharts,
highlight: "#13998a",
label: 'Direct Traffic'
},
{
color: palette.surfieGreen,
highlight: palette.surfieGreenDark,
label: 'Referral Traffic',
percentage: 70,
order: 3,
}, {
value: 1200,
color: layoutColors.successCharts,
highlight: "#94d7a1",
label: 'Referral Traffic'
},
{
color: palette.silverTree,
highlight: palette.silverTreeDark,
label: 'Direct Traffic',
percentage: 38,
order: 2,
}, {
value: 400,
color: layoutColors.warningCharts,
highlight: "#dcfcc4",
label: 'Other'
}
color: palette.gossip,
highlight: palette.gossipDark,
label: 'Other',
percentage: 17,
order: 1,
},
];
var ctx = document.getElementById('chart-area').getContext('2d');
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
segmentShowStroke: false,
percentageInnerCutout : 64,
responsive: true
});
}
})();

53
src/app/pages/dashboard/trafficChart/trafficChart.html
View File

@ -14,61 +14,16 @@
<div class="channels-info">
<div>
<div class="channels-info-item">
<div class="legend-color default"></div>
<p>Ad Campaigns<span class="channel-number">+87%</span></p>
<div class="channels-info-item" ng-repeat="item in doughnutData | orderBy:'order'">
<div class="legend-color" style="background-color: {{::item.color}}"></div>
<p>{{::item.label}}<span class="channel-number">+{{item.percentage}}%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
aria-valuenow="{{item.percentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{item.percentage}}%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color warning"></div>
<p>Other<span class="channel-number">+17%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color success"></div>
<p>Direct Traffic<span class="channel-number">+38%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color info"></div>
<p>Referral Traffic<span class="channel-number">+70%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color primary"></div>
<p>Search engines<span class="channel-number">+22%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
</div>
</div>
</div>
</div>
</div>
</div>

110
src/app/theme/theme.constants.js
View File

@ -7,38 +7,66 @@
var IMAGES_ROOT = 'assets/img/';
// main color scheme
var colorScheme = {
primary: '#209e91',
info: '#2dacd1',
success: '#90b900',
warning: '#dfb81c',
danger: '#e85656',
};
// background color palette
var bgColorPalette = {
blueStone: '#005562',
surfieGreen: '#0e8174',
silverTree: '#6eba8c',
gossip: '#b9f2a1',
white: '#ffffff',
};
angular.module('BlurAdmin.theme')
.constant('layoutColors', {
primary: '#209e91',
info: '#2dacd1',
success: '#90b900',
warning: '#dfb81c',
danger: '#e85656',
primary: colorScheme.primary,
info: colorScheme.info,
success: colorScheme.success,
warning: colorScheme.warning,
danger: colorScheme.danger,
primaryLight: tint(colorScheme.primary, 30),
infoLight: tint(colorScheme.info, 30),
successLight: tint(colorScheme.success, 30),
warningLight: tint(colorScheme.warning, 30),
dangerLight: tint(colorScheme.danger, 30),
primaryDark: shade(colorScheme.primary, 15),
infoDark: shade(colorScheme.info, 15),
successDark: shade(colorScheme.success, 15),
warningDark: shade(colorScheme.warning, 15),
dangerDark: shade(colorScheme.danger, 15),
primaryBg: tint(colorScheme.primary, 20),
infoBg: tint(colorScheme.info, 20),
successBg: tint(colorScheme.success, 20),
warningBg: tint(colorScheme.warning, 20),
dangerBg: tint(colorScheme.danger, 20),
default: '#ffffff',
successLight: '#85BA54',
primaryLight: '#5FBCBB',
warningLight: '#c5d36a',
defaultText: '#ffffff',
primaryDark: '#17857a',
dangerDark: '#c24848',
successDark: '#7b9e00',
warningDark: '#c6a315',
infoDark: '#258ead',
bgColorPalette: {
blueStone: bgColorPalette.blueStone,
surfieGreen: bgColorPalette.surfieGreen,
silverTree: bgColorPalette.silverTree,
gossip: bgColorPalette.gossip,
white: bgColorPalette.white,
primaryBg: '#63cec3',
infoBg: '#5abfdd',
successBg: '#b5d448',
warningBg: '#e8ca52',
dangerBg: '#f67171',
primaryCharts: '#005562',
successCharts: '#6eba8c',
infoCharts: '#0e8174',
warningCharts: '#b9f2a1',
dangerCharts: '#ffa76d',
defaultCharts: '#ffffff',
defaultText: '#ffffff'
blueStoneDark: shade(bgColorPalette.blueStone, 15),
surfieGreenDark: shade(bgColorPalette.surfieGreen, 15),
silverTreeDark: shade(bgColorPalette.silverTree, 15),
gossipDark: shade(bgColorPalette.gossip, 15),
whiteDark: shade(bgColorPalette.white, 5),
},
})
.constant('layoutSizes', {
resWidthCollapseSidebar: 1200,
@ -53,4 +81,32 @@
}
});
function shade(color, weight) {
return mix('#000000', color, weight);
}
function tint(color, weight) {
return mix('#ffffff', color, weight);
}
//SASS mix function
function mix(color1, color2, weight) {
// convert a decimal value to hex
function d2h(d) {
return d.toString(16);
}
// convert a hex value to decimal
function h2d(h) {
return parseInt(h, 16);
}
var result = "#";
for(var i = 1; i < 7; i += 2) {
var color1Part = h2d(color1.substr(i, 2));
var color2Part = h2d(color2.substr(i, 2));
var resultPart = d2h(Math.floor(color2Part + (color1Part - color2Part) * (weight / 100.0)));
result += ('0' + resultPart).slice(-2);
}
return result;
}
})();

8
src/sass/app/_alerts.scss
View File

@ -27,18 +27,18 @@
.bg-success {
background-color: rgba($success,0.85);
a{
color: $primary-charts;
color: $danger;
&:hover{
color: $primary-dark;
color: $danger-dark;
}
}
}
.bg-info {
background-color: rgba($info,0.85);
a{
color: $warning-bg;
color: $warning;
&:hover{
color: $warning;
color: $warning-dark;
}
}
}

1
src/sass/app/_form.scss
View File

@ -135,7 +135,6 @@ textarea.form-control {
}
&.bootstrap-switch-focused {
box-shadow: none;
border-color: $input-border-focus;
&.bootstrap-switch-off {
border-color: $input-border;
}

1
src/sass/common.scss
View File

@ -1,2 +1,3 @@
@import 'theme/conf/mixins';
@import 'theme/conf/colorScheme';
@import 'theme/conf/variables';

23
src/sass/theme/conf/_colorScheme.scss Normal file
View File

@ -0,0 +1,23 @@
$primary: #209e91 !default;
$info: #2dacd1 !default;
$success: #90b900 !default;
$warning: #dfb81c !default;
$danger: #e85656 !default;
$primary-light: tint($primary, 30%);
$info-light: tint($info, 30%);
$success-light: tint($success, 30%);
$warning-light: tint($warning, 30%);
$danger-light: tint($danger, 30%);
$primary-dark: shade($primary, 15%);
$info-dark: shade($info, 15%);
$success-dark: shade($success, 15%);
$warning-dark: shade($warning, 15%);
$danger-dark: shade($danger, 15%);
$primary-bg: tint($primary, 20%);
$info-bg: tint($info, 20%);
$success-bg: tint($success, 20%);
$warning-bg: tint($warning, 20%);
$danger-bg: tint($danger, 20%);

34
src/sass/theme/conf/_variables.scss
View File

@ -1,41 +1,12 @@
$font-family: 'Roboto', sans-serif;
$default: #ffffff !default;
$primary: #209e91 !default;
$info: #2dacd1 !default;
$success: #90b900 !default;
$warning: #dfb81c !default;
$danger: #e85656 !default;
$primary-light: #5FBCBB;
$success-light: #85BA54;
$primary-dark: #17857a;
$info-dark: #258ead;
$success-dark: #7b9e00;
$warning-dark: #c6a315;
$danger-dark: #c24848;
$primary-bg: #63cec3;
$info-bg: #5abfdd;
$success-bg: #b5d448;
$warning-bg: #e8ca52;
$danger-bg: #f67171;
$primary-charts :#005562;
$success-charts :#6eba8c;
$info-charts :#0e8174;
$warning-charts :#b9f2a1;
$danger-charts :#ffa76d;
$default-charts :#ffffff;
$view-total :rgba(0,0,0,.4);
$accent: #E3FF53;
$activelink: $primary;
$hoverlink: $primary-dark;
$default: #ffffff !default;
$facebook-color: #3b5998;
$twitter-color: #55acee;
$google-color: #dd4b39;
@ -57,7 +28,6 @@ $help-text: #949494;
$border: #dddddd;
$border-light: #eeeeee;
$input-border: #cccccc;
$input-border-focus: #1488b0;
$resXXL: 1280px;
$resXL: 1170px;

59
src/sass/theme/dashboard/_trafficChart.scss
View File

@ -116,67 +116,8 @@
top: 27px;
border-radius: 15px;
left: -45px;
&.info{
background-color: $info-charts;
}
&.success{
background-color: $success-charts;
}
&.danger{
background-color: $danger-charts;
}
&.default{
background-color: $default;
}
&.warning{
background-color: $warning-charts;
}
&.primary{
background-color: $primary-charts;
}
}
//@mixin doughnut-size($size) {
// .traffic-chart .canvas-holder {
// width: $size;
// height: $size;
// canvas {
// width: $size;
// height: $size;
// }
// }
//}
//@media (max-width: $resS) {
// @include doughnut-size(250px);
// .canvas-holder {
// float: none;
// }
// .traffic-legend {
// display: block;
// padding: 10px 0 0;
// width: 300px;
// }
// ul.doughnut-legend {
// padding-left: 20px;
// li {
// &:nth-child(2n-1) {
// float: left;
// }
// }
// }
// .traffic-chart{
// width: 100%;
// }
// .canvas-holder{
// display: block;
// margin: 0 auto;
// }
// .panel.medium-panel.traffic-panel{
// height: inherit;
// }
//}
.traffic-chart canvas{
border: 10px solid rgba(0,0,0,0.0);
border-radius: 150px;