Merge branch 'color-scheme'

mohan5070 · Apr 18, 2016 · b94770d · b94770d
2 parents c6c0b88 + b669dd4
commit b94770d
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 208 deletions.
diff --git 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
@@ -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
@@ -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
     });
-
   }
 })();
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.html b/src/app/pages/dashboard/trafficChart/trafficChart.html
@@ -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="progress progress-sm channel-progress">
-          <div class="progress-bar " role="progressbar"
-               aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
-          </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="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="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
+               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 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>
 
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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%);