refactor(colorScheme): move colors to config provider

src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js

@@ -9,7 +9,8 @@
       .controller('AreaChartCtrl', AreaChartCtrl);
 
   /** @ngInject */
-  function AreaChartCtrl($scope, layoutColors, $element, layoutPaths) {
+  function AreaChartCtrl($scope, baConfig, $element, layoutPaths) {
+    var layoutColors = baConfig.colors;
     var id = $element[0].getAttribute('id');
     var areaChart = AmCharts.makeChart(id, {
       type: 'serial',

src/app/pages/charts/amCharts/barChart/BarChartCtrl.js

@@ -9,7 +9,8 @@
       .controller('BarChartCtrl', BarChartCtrl);
 
   /** @ngInject */
-  function BarChartCtrl($scope, layoutColors, $element, layoutPaths) {
+  function BarChartCtrl($scope, baConfig, $element, layoutPaths) {
+    var layoutColors = baConfig.colors;
     var id = $element[0].getAttribute('id');
     var barChart = AmCharts.makeChart(id, {
       type: 'serial',

src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js

@@ -9,7 +9,8 @@
     .controller('combinedChartCtrl', combinedChartCtrl);
 
   /** @ngInject */
-  function combinedChartCtrl($element, layoutColors, layoutPaths) {
+  function combinedChartCtrl($element, baConfig, layoutPaths) {
+    var layoutColors = baConfig.colors;
     var id = $element[0].getAttribute('id');
     var chart = AmCharts.makeChart(id, {
       "type": "serial",

src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js

@@ -9,7 +9,8 @@
       .controller('FunnelChartCtrl', FunnelChartCtrl);
 
   /** @ngInject */
-  function FunnelChartCtrl($scope, $element, layoutPaths, layoutColors) {
+  function FunnelChartCtrl($scope, $element, layoutPaths, baConfig) {
+    var layoutColors = baConfig.colors;
     var id = $element[0].getAttribute('id');
     var funnelChart = AmCharts.makeChart(id, {
       type: 'funnel',

src/app/pages/charts/amCharts/ganttChart/ganttChartCtrl.js

@@ -9,7 +9,7 @@
     .controller('ganttChartCtrl', ganttChartCtrl);
 
   /** @ngInject */
-  function ganttChartCtrl(layoutColors, $element) {
+  function ganttChartCtrl($element) {
     var id = $element[0].getAttribute('id');
     var chart = AmCharts.makeChart( id, {
       "type": "gantt",

src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js

@@ -9,7 +9,8 @@
       .controller('LineChartCtrl', LineChartCtrl);
 
   /** @ngInject */
-  function LineChartCtrl($scope, layoutColors, $element, layoutPaths) {
+  function LineChartCtrl($scope, baConfig, $element, layoutPaths) {
+    var layoutColors = baConfig.colors;
     var id = $element[0].getAttribute('id');
     var lineChart = AmCharts.makeChart(id, {
       type: 'serial',

src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js

@@ -9,7 +9,8 @@
       .controller('PieChartCtrl', PieChartCtrl);
 
   /** @ngInject */
-  function PieChartCtrl($element, layoutPaths, layoutColors) {
+  function PieChartCtrl($element, layoutPaths, baConfig) {
+    var layoutColors = baConfig.colors;
     var id = $element[0].getAttribute('id');
     var pieChart = AmCharts.makeChart(id, {
       type: 'pie',

src/app/pages/charts/chartist/chartistCtrl.js

@@ -9,10 +9,10 @@
     .controller('chartistCtrl', chartistCtrl);
 
   /** @ngInject */
-  function chartistCtrl($scope, $timeout, layoutColors) {
+  function chartistCtrl($scope, $timeout, baConfig) {
 
     $scope.simpleLineOptions = {
-      color: layoutColors.defaultText,
+      color: baConfig.colors.defaultText,
       fullWidth: true,
       height: "300px",
       chartPadding: {

src/app/pages/charts/morris/morris.module.js

@@ -6,7 +6,8 @@
   'use strict';
 
   angular.module('BlurAdmin.pages.charts.morris', [])
-    .config(routeConfig).config(function(layoutColors){
+    .config(routeConfig).config(function(baConfigProvider){
+      var layoutColors = baConfigProvider.colors;
       Morris.Donut.prototype.defaults.backgroundColor = 'transparent';
       Morris.Donut.prototype.defaults.labelColor = layoutColors.defaultText;
       Morris.Grid.prototype.gridDefaults.gridLineColor = layoutColors.borderDark;

src/app/pages/charts/morris/morrisCtrl.js

@@ -9,7 +9,8 @@
     .controller('morrisCtrl', morrisCtrl);
 
   /** @ngInject */
-  function morrisCtrl($scope, $window, layoutColors) {
+  function morrisCtrl($scope, $window, baConfig) {
+    var layoutColors = baConfig.colors;
     $scope.colors = [layoutColors.primary, layoutColors.warning, layoutColors.danger, layoutColors.info, layoutColors.success, layoutColors.primaryDark];
     $scope.lineData = [
       {y: "2006", a: 100, b: 90},

src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js

@@ -9,8 +9,8 @@
       .controller('DashboardCalendarCtrl', DashboardCalendarCtrl);
 
   /** @ngInject */
-  function DashboardCalendarCtrl(layoutColors) {
+  function DashboardCalendarCtrl(baConfig) {
-    var dashboardColors = layoutColors.dashboard;
+    var dashboardColors = baConfig.colors.dashboard;
     var $element = $('#calendar').fullCalendar({
       //height: 335,
       header: {

src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js

@@ -9,8 +9,9 @@
       .controller('DashboardLineChartCtrl', DashboardLineChartCtrl);
 
   /** @ngInject */
-  function DashboardLineChartCtrl(layoutColors, layoutPaths, layoutTheme, baUtil) {
+  function DashboardLineChartCtrl(baConfig, layoutPaths, baUtil) {
-    var graphColor = layoutTheme.blur ? '#000000' : layoutColors.primary;
+    var layoutColors = baConfig.colors;
+    var graphColor = baConfig.theme.blur ? '#000000' : layoutColors.primary;
     var chartData = [
       { date: new Date(2012, 11), value: 0, value0: 0 },
       { date: new Date(2013, 0), value: 15000, value0: 19000},

src/app/pages/dashboard/dashboardMap/DashboardMapCtrl.js

@@ -9,7 +9,8 @@
       .controller('DashboardMapCtrl', DashboardMapCtrl);
 
   /** @ngInject */
-  function DashboardMapCtrl(layoutColors, layoutPaths) {
+  function DashboardMapCtrl(baConfig, layoutPaths) {
+    var layoutColors = baConfig.colors;
     var map = AmCharts.makeChart('amChartMap', {
       type: 'map',
       theme: 'blur',

src/app/pages/dashboard/dashboardPieChart/DashboardPieChartCtrl.js

@@ -9,8 +9,8 @@
       .controller('DashboardPieChartCtrl', DashboardPieChartCtrl);
 
   /** @ngInject */
-  function DashboardPieChartCtrl($scope, $timeout, layoutColors, baUtil) {
+  function DashboardPieChartCtrl($scope, $timeout, baConfig, baUtil) {
-    var pieColor = baUtil.hexToRGB(layoutColors.defaultText, 0.2);
+    var pieColor = baUtil.hexToRGB(baConfig.colors.defaultText, 0.2);
     $scope.charts = [{
       color: pieColor,
       description: 'New Visits',

src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js

@@ -9,10 +9,10 @@
       .controller('DashboardTodoCtrl', DashboardTodoCtrl);
 
   /** @ngInject */
-  function DashboardTodoCtrl($scope, layoutColors, layoutTheme) {
+  function DashboardTodoCtrl($scope, baConfig) {
 
-    $scope.transparent = layoutTheme.blur;
+    $scope.transparent = baConfig.theme.blur;
-    var dashboardColors = layoutColors.dashboard;
+    var dashboardColors = baConfig.colors.dashboard;
     var colors = [];
     for (var key in dashboardColors) {
       colors.push(dashboardColors[key]);

src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js

@@ -9,10 +9,10 @@
       .controller('TrafficChartCtrl', TrafficChartCtrl);
 
   /** @ngInject */
-  function TrafficChartCtrl($scope, layoutColors, layoutTheme) {
+  function TrafficChartCtrl($scope, baConfig) {
 
-    $scope.transparent = layoutTheme.blur;
+    $scope.transparent = baConfig.theme.blur;
-    var dashboardColors = layoutColors.dashboard;
+    var dashboardColors = baConfig.colors.dashboard;
     $scope.doughnutData = [
       {
         value: 2000,

src/app/pages/maps/map-bubbles/MapBubblePageCtrl.js

@@ -9,7 +9,8 @@
       .controller('MapBubblePageCtrl', MapBubblePageCtrl);
 
   /** @ngInject */
-  function MapBubblePageCtrl(layoutColors, $timeout, layoutPaths) {
+  function MapBubblePageCtrl(baConfig, $timeout, layoutPaths) {
+    var layoutColors = baConfig.colors;
     var latlong = {};
     latlong['AD'] = {'latitude': 42.5, 'longitude': 1.5};
     latlong['AE'] = {'latitude': 24, 'longitude': 54};

src/app/pages/maps/map-lines/MapLinesPageCtrl.js

@@ -9,7 +9,8 @@
       .controller('MapLinesPageCtrl', MapLinesPageCtrl);
 
   /** @ngInject */
-  function MapLinesPageCtrl(layoutColors, $timeout, layoutPaths) {
+  function MapLinesPageCtrl(baConfig, $timeout, layoutPaths) {
+    var layoutColors = baConfig.colors;
     // svg path for target icon
     var targetSVG = 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z';
 // svg path for plane icon

src/app/theme/amChartConfig.js

@@ -9,7 +9,8 @@
       .config(amChartConfig);
 
   /** @ngInject */
-  function amChartConfig(layoutColors) {
+  function amChartConfig(baConfigProvider) {
+    var layoutColors = baConfigProvider.colors;
     AmCharts.themes.blur = {
 
       themeName: "blur",

src/app/theme/chartJsConfig.js

@@ -9,7 +9,8 @@
     .config(chartJsConfig);
 
   /** @ngInject */
-  function chartJsConfig(ChartJsProvider, layoutColors) {
+  function chartJsConfig(ChartJsProvider, baConfigProvider) {
+    var layoutColors = baConfigProvider.colors;
     // Configure all charts
     ChartJsProvider.setOptions({
       colours: [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.primaryLight],

src/app/theme/components/baPanel/baPanel.directive.js

@@ -12,11 +12,11 @@
       .directive('baPanel', baPanel);
 
   /** @ngInject */
-  function baPanel(baPanel, layoutTheme) {
+  function baPanel(baPanel, baConfig) {
     return angular.extend({}, baPanel, {
       template: function(el, attrs) {
-        var res = '<div  class="panel ' + (layoutTheme.blur ? 'panel-blur' : '') + ' full-invisible ' + (attrs.baPanelClass || '');
+        var res = '<div  class="panel ' + (baConfig.theme.blur ? 'panel-blur' : '') + ' full-invisible ' + (attrs.baPanelClass || '');
-        res += '" zoom-in ' + (layoutTheme.blur ? 'ba-panel-blur' : '') + '>';
+        res += '" zoom-in ' + (baConfig.theme.blur ? 'ba-panel-blur' : '') + '>';
         res += baPanel.template(el, attrs);
         res += '</div>';
         return res;

src/app/theme/theme.config.js

@@ -0,0 +1,23 @@
+/**
+ * Created by k.danovsky on 13.05.2016.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+    .config(config);
+
+  /** @ngInject */
+  function config(baConfigProvider, colorHelper) {
+    baConfigProvider.theme.blur = false;
+
+    var colors = baConfigProvider.colors;
+    colors.default = '#ffffff';
+    colors.defaultText = '#666666';
+    colors.dashboard.white = '#10c4b5';
+    colors.dashboard.whiteDark = colorHelper.shade(colors.dashboard.white, 5);
+
+    console.log(baConfigProvider);
+  }
+})();

src/app/theme/theme.configProvider.js

@@ -0,0 +1,87 @@
+/**
+ * Created by k.danovsky on 13.05.2016.
+ */
+
+(function () {
+  'use strict';
+
+  var basic = {
+    default: 'rgba(#000000, 0.2)',
+    defaultText: '#ffffff',
+    border: '#dddddd',
+    borderDark: '#aaaaaa',
+  };
+
+  // main functional color scheme
+  var colorScheme = {
+    primary: '#209e91',
+    info: '#2dacd1',
+    success: '#90b900',
+    warning: '#dfb81c',
+    danger: '#e85656',
+  };
+
+  // dashboard colors for charts
+  var dashboardColors = {
+    blueStone: '#005562',
+    surfieGreen: '#0e8174',
+    silverTree: '#6eba8c',
+    gossip: '#b9f2a1',
+    white: '#ffffff',
+  };
+
+  angular.module('BlurAdmin.theme')
+    .provider('baConfig', configProvider);
+
+  /** @ngInject */
+  function configProvider(colorHelper) {
+    var conf = {
+      theme: {
+        blur: true,
+      },
+      colors: {
+        default: basic.default,
+        defaultText: basic.defaultText,
+        border: basic.border,
+        borderDark: basic.borderDark,
+
+        primary: colorScheme.primary,
+        info: colorScheme.info,
+        success: colorScheme.success,
+        warning: colorScheme.warning,
+        danger: colorScheme.danger,
+
+        primaryLight: colorHelper.tint(colorScheme.primary, 30),
+        infoLight: colorHelper.tint(colorScheme.info, 30),
+        successLight: colorHelper.tint(colorScheme.success, 30),
+        warningLight: colorHelper.tint(colorScheme.warning, 30),
+        dangerLight: colorHelper.tint(colorScheme.danger, 30),
+
+        primaryDark: colorHelper.shade(colorScheme.primary, 15),
+        infoDark: colorHelper.shade(colorScheme.info, 15),
+        successDark: colorHelper.shade(colorScheme.success, 15),
+        warningDark: colorHelper.shade(colorScheme.warning, 15),
+        dangerDark: colorHelper.shade(colorScheme.danger, 15),
+
+        dashboard: {
+          blueStone: dashboardColors.blueStone,
+          surfieGreen: dashboardColors.surfieGreen,
+          silverTree: dashboardColors.silverTree,
+          gossip: dashboardColors.gossip,
+          white: dashboardColors.white,
+
+          blueStoneDark: colorHelper.shade(dashboardColors.blueStone, 15),
+          surfieGreenDark: colorHelper.shade(dashboardColors.surfieGreen, 15),
+          silverTreeDark: colorHelper.shade(dashboardColors.silverTree, 15),
+          gossipDark: colorHelper.shade(dashboardColors.gossip, 15),
+          whiteDark: colorHelper.shade(dashboardColors.white, 5),
+        },
+      }
+    };
+    conf.$get = function () {
+      delete conf.$get;
+      return conf;
+    };
+    return conf;
+  }
+})();

src/app/theme/theme.constants.js

@@ -7,75 +7,7 @@
 
   var IMAGES_ROOT = 'assets/img/';
 
-  var blurTheme = true;
-
-  var basic = {
-    default: 'rgba(#000000, 0.2)',
-    defaultText: '#ffffff',
-    border: '#dddddd',
-    borderDark: '#aaaaaa',
-  };
-
-  // main functional color scheme
-  var colorScheme = {
-    primary: '#209e91',
-    info: '#2dacd1',
-    success: '#90b900',
-    warning: '#dfb81c',
-    danger: '#e85656',
-  };
-
-  // dashboard colors for charts
-  var dashboardColors = {
-    blueStone: '#005562',
-    surfieGreen: '#0e8174',
-    silverTree: '#6eba8c',
-    gossip: '#b9f2a1',
-    white: '#ffffff',
-  };
-
   angular.module('BlurAdmin.theme')
-    .constant('layoutTheme', {
-      blur: blurTheme,
-    })
-    .constant('layoutColors', {
-      default: basic.default,
-      defaultText: basic.defaultText,
-      border: basic.border,
-      borderDark: basic.borderDark,
-
-      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),
-
-      dashboard: {
-        blueStone: dashboardColors.blueStone,
-        surfieGreen: dashboardColors.surfieGreen,
-        silverTree: dashboardColors.silverTree,
-        gossip: dashboardColors.gossip,
-        white: dashboardColors.white,
-
-        blueStoneDark: shade(dashboardColors.blueStone, 15),
-        surfieGreenDark: shade(dashboardColors.surfieGreen, 15),
-        silverTreeDark: shade(dashboardColors.silverTree, 15),
-        gossipDark: shade(dashboardColors.gossip, 15),
-        whiteDark: shade(dashboardColors.white, 5),
-      },
-    })
     .constant('layoutSizes', {
       resWidthCollapseSidebar: 1200,
       resWidthHideSidebar: 500
@@ -87,6 +19,14 @@
         amMap: 'assets/img/theme/vendor/ammap//dist/ammap/images/',
         amChart: 'assets/img/theme/vendor/amcharts/dist/amcharts/images/'
       }
+    })
+    .constant('colorHelper', {
+      tint: function(color, weight) {
+        return mix('#ffffff', color, weight);
+      },
+      shade: function(color, weight) {
+        return mix('#000000', color, weight);
+      },
     });
 
   function shade(color, weight) {

src/app/theme/theme.service.js

@@ -9,14 +9,14 @@
     .service('themeLayoutSettings', themeLayoutSettings);
 
   /** @ngInject */
-  function themeLayoutSettings(layoutTheme) {
+  function themeLayoutSettings(baConfig) {
     var isMobile = (/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase());
     var mobileClass = isMobile ? 'mobile' : '';
-    var blurClass = layoutTheme.blur ? 'blur-theme' : '';
+    var blurClass = baConfig.theme.blur ? 'blur-theme' : '';
     angular.element(document.body).addClass(mobileClass).addClass(blurClass);
 
     return {
-      blur: layoutTheme.blur,
+      blur: baConfig.theme.blur,
       mobile: isMobile,
     }
   }

src/sass/common.scss

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