diff --git a/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js b/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js index 030e8c82f..673f2695b 100644 --- a/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js +++ b/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js @@ -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", diff --git a/src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js b/src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js index 94a6f3f30..91e6089d2 100644 --- a/src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js +++ b/src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js @@ -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 } ] }); diff --git a/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js b/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js index 3bcb10cdf..ebd0c3b7d 100644 --- a/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js +++ b/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js @@ -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 }); - } })(); \ No newline at end of file diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.html b/src/app/pages/dashboard/trafficChart/trafficChart.html index f8bea04d6..9af85ae54 100644 --- a/src/app/pages/dashboard/trafficChart/trafficChart.html +++ b/src/app/pages/dashboard/trafficChart/trafficChart.html @@ -14,61 +14,16 @@
- -
-
-

Ad Campaigns+87%

-
-
-
-
-
- -
-
-

Other+17%

+
+
+

{{::item.label}}+{{item.percentage}}%

+ aria-valuenow="{{item.percentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{item.percentage}}%">
- -
-
-

Direct Traffic+38%

-
-
-
-
-
- -
-
-

Referral Traffic+70%

-
-
-
-
-
- -
-
-

Search engines+22%

-
-
-
-
-
- - -
-
diff --git a/src/app/theme/theme.constants.js b/src/app/theme/theme.constants.js index 4957c503a..b24884264 100644 --- a/src/app/theme/theme.constants.js +++ b/src/app/theme/theme.constants.js @@ -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', - - primaryDark: '#17857a', - dangerDark: '#c24848', - successDark: '#7b9e00', - warningDark: '#c6a315', - infoDark: '#258ead', - - primaryBg: '#63cec3', - infoBg: '#5abfdd', - successBg: '#b5d448', - warningBg: '#e8ca52', - dangerBg: '#f67171', - - primaryCharts: '#005562', - successCharts: '#6eba8c', - infoCharts: '#0e8174', - warningCharts: '#b9f2a1', - dangerCharts: '#ffa76d', - defaultCharts: '#ffffff', - - defaultText: '#ffffff' + defaultText: '#ffffff', + + bgColorPalette: { + blueStone: bgColorPalette.blueStone, + surfieGreen: bgColorPalette.surfieGreen, + silverTree: bgColorPalette.silverTree, + gossip: bgColorPalette.gossip, + white: bgColorPalette.white, + + 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; + } })(); diff --git a/src/sass/app/_alerts.scss b/src/sass/app/_alerts.scss index 18c48c01c..87cffd15a 100644 --- a/src/sass/app/_alerts.scss +++ b/src/sass/app/_alerts.scss @@ -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; } } } diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss index fb90f7cc2..de8b87201 100644 --- a/src/sass/app/_form.scss +++ b/src/sass/app/_form.scss @@ -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; } diff --git a/src/sass/common.scss b/src/sass/common.scss index e6f67acdc..bd86edfd4 100644 --- a/src/sass/common.scss +++ b/src/sass/common.scss @@ -1,2 +1,3 @@ @import 'theme/conf/mixins'; +@import 'theme/conf/colorScheme'; @import 'theme/conf/variables'; diff --git a/src/sass/theme/conf/_colorScheme.scss b/src/sass/theme/conf/_colorScheme.scss new file mode 100644 index 000000000..eb75f8e11 --- /dev/null +++ b/src/sass/theme/conf/_colorScheme.scss @@ -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%); diff --git a/src/sass/theme/conf/_variables.scss b/src/sass/theme/conf/_variables.scss index 9e0d5bb9c..5806bded0 100644 --- a/src/sass/theme/conf/_variables.scss +++ b/src/sass/theme/conf/_variables.scss @@ -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; diff --git a/src/sass/theme/dashboard/_trafficChart.scss b/src/sass/theme/dashboard/_trafficChart.scss index 05e497b44..97426bf32 100644 --- a/src/sass/theme/dashboard/_trafficChart.scss +++ b/src/sass/theme/dashboard/_trafficChart.scss @@ -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;