feat(theme): change dashboard and charts to use light theme

Alex-Gramm · May 13, 2016 · 490d81f · 490d81f
1 parent cbfa97d
commit 490d81f
Show file tree

Hide file tree

Showing 20 changed files with 143 additions and 141 deletions.
diff --git a/src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js b/src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js
@@ -14,6 +14,7 @@
     var areaChart = AmCharts.makeChart(id, {
       type: 'serial',
       theme: 'blur',
+      color: layoutColors.defaultText,
       dataProvider: [
         {
           lineColor: layoutColors.info,
@@ -79,7 +80,7 @@
             hh: 'h ',
             mm: 'min'
           },
-          axisAlpha: 0
+          gridColor: layoutColors.defaultText,
         }
       ],
       graphs: [
@@ -124,17 +125,17 @@
         ],
         parseDates: true,
         autoGridCount: false,
-        axisColor: '#555555',
-        gridAlpha: 0,
-        gridCount: 50
+        gridCount: 50,
+        gridAlpha: 0.5,
+        gridColor: layoutColors.border,
       },
       export: {
         enabled: true
       },
       pathToImages: layoutPaths.images.amChart
     });
 
-    tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart);
+    //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart);
 
     areaChart.addListener('dataUpdated', zoomAreaChart);
 

diff --git a/src/app/pages/charts/amCharts/barChart/BarChartCtrl.js b/src/app/pages/charts/amCharts/barChart/BarChartCtrl.js
@@ -14,6 +14,7 @@
     var barChart = AmCharts.makeChart(id, {
       type: 'serial',
       theme: 'blur',
+      color: layoutColors.defaultText,
       dataProvider: [
         {
           country: 'USA',
@@ -44,14 +45,16 @@
         {
           country: 'France',
           visits: 1114,
-          color: layoutColors.default
+          color: layoutColors.primaryLight
         }
       ],
       valueAxes: [
         {
           axisAlpha: 0,
           position: 'left',
-          title: 'Visitors from country'
+          title: 'Visitors from country',
+          gridAlpha: 0.5,
+          gridColor: layoutColors.border,
         }
       ],
       startDuration: 1,
@@ -73,7 +76,9 @@
       categoryField: 'country',
       categoryAxis: {
         gridPosition: 'start',
-        labelRotation: 45
+        labelRotation: 45,
+        gridAlpha: 0.5,
+        gridColor: layoutColors.border,
       },
       export: {
         enabled: true
@@ -82,7 +87,6 @@
       pathToImages: layoutPaths.images.amChart
     });
 
-    tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);
+    //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);
   }
-
 })();
diff --git a/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js b/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js
@@ -107,16 +107,18 @@
         "graph": "g1",
         "oppositeAxis": false,
         "offset": 30,
-        "scrollbarHeight": 50,
-        "backgroundAlpha": 0,
-        "selectedBackgroundAlpha": 0.1,
-        "selectedBackgroundColor": "#888888",
-        "graphFillAlpha": 0,
-        "graphLineAlpha": 0.5,
-        "selectedGraphFillAlpha": 0,
-        "selectedGraphLineAlpha": 1,
-        "autoGridCount": true,
-        "color": "#AAAAAA"
+        gridAlpha: 0,
+        color: layoutColors.defaultText,
+        scrollbarHeight: 50,
+        backgroundAlpha: 0,
+        selectedBackgroundAlpha: 0.05,
+        selectedBackgroundColor: layoutColors.defaultText,
+        graphFillAlpha: 0,
+        autoGridCount: true,
+        selectedGraphFillAlpha: 0,
+        graphLineAlpha: 0.2,
+        selectedGraphLineColor: layoutColors.defaultText,
+        selectedGraphLineAlpha: 1
       },
       "chartCursor": {
         "pan": true,

diff --git a/src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js b/src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js
@@ -9,11 +9,13 @@
       .controller('FunnelChartCtrl', FunnelChartCtrl);
 
   /** @ngInject */
-  function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths) {
+  function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths, layoutColors) {
     var id = $element[0].getAttribute('id');
     var funnelChart = AmCharts.makeChart(id, {
       type: 'funnel',
       theme: 'blur',
+      color: layoutColors.defaultText,
+      labelTickColor: layoutColors.borderDark,
       dataProvider: [
         {
           title: 'Website visits',
@@ -64,7 +66,7 @@
       pathToImages: layoutPaths
     });
 
-    tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
+    //tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
   }
 
 })();
diff --git a/src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js b/src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js
@@ -14,6 +14,7 @@
     var lineChart = AmCharts.makeChart(id, {
       type: 'serial',
       theme: 'blur',
+      color: layoutColors.defaultText,
       marginTop: 0,
       marginRight: 15,
       dataProvider: [
@@ -85,7 +86,9 @@
       valueAxes: [
         {
           axisAlpha: 0,
-          position: 'left'
+          position: 'left',
+          gridAlpha: 0.5,
+          gridColor: layoutColors.border,
         }
       ],
       graphs: [
@@ -104,17 +107,16 @@
       chartScrollbar: {
         graph: 'g1',
         gridAlpha: 0,
-        color: '#888888',
+        color: layoutColors.defaultText,
         scrollbarHeight: 55,
         backgroundAlpha: 0,
-        selectedBackgroundAlpha: 0.1,
-        selectedBackgroundColor: '#888888',
+        selectedBackgroundAlpha: 0.05,
+        selectedBackgroundColor: layoutColors.defaultText,
         graphFillAlpha: 0,
         autoGridCount: true,
         selectedGraphFillAlpha: 0,
         graphLineAlpha: 0.2,
-        graphLineColor: '#c2c2c2',
-        selectedGraphLineColor: '#888888',
+        selectedGraphLineColor: layoutColors.defaultText,
         selectedGraphLineAlpha: 1
       },
       chartCursor: {
@@ -131,7 +133,9 @@
         minPeriod: 'YYYY',
         parseDates: true,
         minorGridAlpha: 0.1,
-        minorGridEnabled: true
+        minorGridEnabled: true,
+        gridAlpha: 0.5,
+        gridColor: layoutColors.border,
       },
       export: {
         enabled: true
@@ -140,7 +144,7 @@
       pathToImages: layoutPaths.images.amChart
     });
 
-    tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart);
+    //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart);
 
     lineChart.addListener('rendered', zoomChart);
     if (lineChart.zoomChart) {

diff --git a/src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js b/src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js
@@ -9,17 +9,19 @@
       .controller('PieChartCtrl', PieChartCtrl);
 
   /** @ngInject */
-  function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths) {
+  function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths, layoutColors) {
     var id = $element[0].getAttribute('id');
     var pieChart = AmCharts.makeChart(id, {
       type: 'pie',
       startDuration: 0,
       theme: 'blur',
       addClassNames: true,
+      color: layoutColors.defaultText,
+      labelTickColor: layoutColors.borderDark,
       legend: {
         position: 'right',
         marginRight: 100,
-        autoMargins: false
+        autoMargins: false,
       },
       innerRadius: '40%',
       defs: {
@@ -126,7 +128,7 @@
       }
     });
 
-    tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart);
+    //tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart);
 
     pieChart.addListener('init', handleInit);
 

diff --git a/src/app/pages/charts/chartist/chartist.html b/src/app/pages/charts/chartist/chartist.html
@@ -1,4 +1,4 @@
-<section ng-controller="chartistCtrl">
+<section ng-controller="chartistCtrl" class="chartist">
   <div class="row">
     <div class="col-md-6 ">
       <div ba-panel ba-panel-title="Lines" ba-panel-class="with-scroll ">

diff --git a/src/app/pages/charts/chartist/chartistCtrl.js b/src/app/pages/charts/chartist/chartistCtrl.js
@@ -9,9 +9,10 @@
     .controller('chartistCtrl', chartistCtrl);
 
   /** @ngInject */
-  function chartistCtrl($scope, $timeout) {
+  function chartistCtrl($scope, $timeout, layoutColors) {
 
     $scope.simpleLineOptions = {
+      color: layoutColors.defaultText,
       fullWidth: true,
       height: "300px",
       chartPadding: {

diff --git a/src/app/pages/charts/morris/morris.module.js b/src/app/pages/charts/morris/morris.module.js
@@ -6,11 +6,11 @@
   'use strict';
 
   angular.module('BlurAdmin.pages.charts.morris', [])
-    .config(routeConfig).config(function(){
+    .config(routeConfig).config(function(layoutColors){
       Morris.Donut.prototype.defaults.backgroundColor = 'transparent';
-      Morris.Donut.prototype.defaults.labelColor = 'rgba(255,255,255,0.8)';
-      Morris.Grid.prototype.gridDefaults.gridLineColor = 'rgba(255,255,255,0.8)';
-      Morris.Grid.prototype.gridDefaults.gridTextColor = 'rgba(255,255,255,0.8)';
+      Morris.Donut.prototype.defaults.labelColor = layoutColors.defaultText;
+      Morris.Grid.prototype.gridDefaults.gridLineColor = layoutColors.borderDark;
+      Morris.Grid.prototype.gridDefaults.gridTextColor = layoutColors.defaultText;
     });
 
   /** @ngInject */

diff --git a/src/app/pages/charts/morris/morrisCtrl.js b/src/app/pages/charts/morris/morrisCtrl.js
@@ -10,7 +10,7 @@
 
   /** @ngInject */
   function morrisCtrl($scope, $window, layoutColors) {
-    $scope.colors = [layoutColors.primary, layoutColors.warning, layoutColors.danger, layoutColors.info, layoutColors.success, layoutColors.default, layoutColors.primaryDark];
+    $scope.colors = [layoutColors.primary, layoutColors.warning, layoutColors.danger, layoutColors.info, layoutColors.success, layoutColors.primaryDark];
     $scope.lineData = [
       {y: "2006", a: 100, b: 90},
       {y: "2007", a: 75, b: 65},

diff --git a/src/app/pages/components/mail/mail.html b/src/app/pages/components/mail/mail.html
@@ -1,43 +1,41 @@
 <div class="row mail-row">
   <div class="col-md-12">
     <div ba-panel ba-panel-class="xmedium-panel mail-panel">
-      <div class="mail-container">
-        <div class="letter-layout">
-          <div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
-            <div class="compose-button">
-              <button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
-                Compose
-              </button>
-            </div>
-            <div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
-                 ui-sref="components.mail.label({label: t.label})" ng-click="selectTab(t.label)">
-              {{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
-            </div>
-            <div class="labels">
-              <div class="labels-title">
+      <div class="letter-layout">
+        <div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
+          <div class="compose-button">
+            <button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
+              Compose
+            </button>
+          </div>
+          <div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
+               ui-sref="components.mail.label({label: t.label})" ng-click="selectTab(t.label)">
+            {{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
+          </div>
+          <div class="labels">
+            <div class="labels-title">
 
+            </div>
+            <div class="labels-container">
+              <div class="label-item">
+                <span class="tag label work">Work</span>
               </div>
-              <div class="labels-container">
-                <div class="label-item">
-                  <span class="tag label work">Work</span>
-                </div>
-                <div class="label-item">
-                  <span class="tag label family">Family</span>
-                </div>
-                <div class="label-item">
-                  <span class="tag label friend">Friend</span>
-                </div>
-                <div class="label-item">
-                  <span class="tag label study">Study</span>
-                </div>
+              <div class="label-item">
+                <span class="tag label family">Family</span>
+              </div>
+              <div class="label-item">
+                <span class="tag label friend">Friend</span>
+              </div>
+              <div class="label-item">
+                <span class="tag label study">Study</span>
               </div>
             </div>
-            <div class="add-label-container">
-              <i class="ion-plus-round"></i><span class="label-input-stub">Add new label</span>
-            </div>
           </div>
-          <ui-view></ui-view>
+          <div class="add-label-container">
+            <i class="ion-plus-round"></i><span class="label-input-stub">Add new label</span>
+          </div>
         </div>
+        <ui-view></ui-view>
       </div>
     </div>
   </div>