rtl version

README.md

@@ -1,7 +1,5 @@
 # Blur Admin HTML template
 
-Admin template made with ♥ by [Akveo team](http://akveo.com/).
-
 We put a lot of efforts to bring together latest and the most trending web design approaches, while creating this template.
 Every color, character or image was carefully selected by our team to provide the best experience possible.
 We're very proud of it and like it very much. We also hope that you will enjoy it as well.
@@ -12,6 +10,13 @@ It's just a first version, but we will continue development of this template to
 ![alt tag](http://i.imgur.com/yOZPlps.jpg)
 **[Template Demo](http://akveo.com/blur-admin/#/dashboard)**
 
+## Mint Version
+
+We've just finished mint version, check this out:
+
+![alt tag](http://i.imgur.com/A3TMviJ.png)
+**[Template Demo](http://akveo.com/blur-admin-mint)**
+
 ## Installation
 
 To build the template from scratch you will be required to have following tools

src/app/app.js

@@ -14,6 +14,5 @@ angular.module('BlurAdmin', [
   'angular-progress-button-styles',
 
   'BlurAdmin.theme',
-  'BlurAdmin.pages',
-  'BlurAdmin.tplSkin'
+  'BlurAdmin.pages'
 ]);

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

@@ -9,11 +9,12 @@
       .controller('AreaChartCtrl', AreaChartCtrl);
 
   /** @ngInject */
-  function AreaChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper, layoutPaths) {
+  function AreaChartCtrl($scope, layoutColors, $element, layoutPaths) {
     var id = $element[0].getAttribute('id');
     var areaChart = AmCharts.makeChart(id, {
       type: 'serial',
       theme: 'blur',
+      color: layoutColors.defaultText,
       dataProvider: [
         {
           lineColor: layoutColors.info,
@@ -79,7 +80,8 @@
             hh: 'h ',
             mm: 'min'
           },
-          axisAlpha: 0
+          gridAlpha: 0.5,
+          gridColor: layoutColors.border,
         }
       ],
       graphs: [
@@ -124,18 +126,16 @@
         ],
         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);
-
     areaChart.addListener('dataUpdated', zoomAreaChart);
 
     function zoomAreaChart() {

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

@@ -9,11 +9,12 @@
       .controller('BarChartCtrl', BarChartCtrl);
 
   /** @ngInject */
-  function BarChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper, layoutPaths) {
+  function BarChartCtrl($scope, layoutColors, $element, layoutPaths) {
     var id = $element[0].getAttribute('id');
     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,16 +76,15 @@
       categoryField: 'country',
       categoryAxis: {
         gridPosition: 'start',
-        labelRotation: 45
+        labelRotation: 45,
+        gridAlpha: 0.5,
+        gridColor: layoutColors.border,
       },
       export: {
         enabled: true
       },
       creditsPosition: 'top-right',
       pathToImages: layoutPaths.images.amChart
     });
-
-    tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);
   }
-
 })();

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

@@ -14,13 +14,13 @@
     var chart = AmCharts.makeChart(id, {
       "type": "serial",
       "theme": "none",
-      "color": layoutColors.default,
+      "color": layoutColors.defaultText,
       "dataDateFormat": "YYYY-MM-DD",
       "precision": 2,
       "valueAxes": [{
-        color: layoutColors.default,
-        axisColor: layoutColors.default,
-        gridColor: layoutColors.default,
+        color: layoutColors.defaultText,
+        axisColor: layoutColors.defaultText,
+        gridColor: layoutColors.defaultText,
         "id": "v1",
         "title": "Sales",
         "position": "left",
@@ -29,9 +29,9 @@
           return "$" + Math.round(value) + "M";
         }
       }, {
-        color: layoutColors.default,
-        axisColor: layoutColors.default,
-        gridColor: layoutColors.default,
+        color: layoutColors.defaultText,
+        axisColor: layoutColors.defaultText,
+        gridColor: layoutColors.defaultText,
         "id": "v2",
         "title": "Market Days",
         "gridAlpha": 0,
@@ -40,7 +40,7 @@
       }],
       "graphs": [{
         "id": "g3",
-        color: layoutColors.default,
+        color: layoutColors.defaultText,
         "valueAxis": "v1",
         "lineColor": layoutColors.primaryLight,
         "fillColors": layoutColors.primaryLight,
@@ -51,13 +51,13 @@
         "valueField": "sales2",
         "clustered": false,
         "columnWidth": 0.5,
-        "lineColorField" : "#ffffff",
+        "lineColorField" : layoutColors.defaultText,
         "legendValueText": "$[[value]]M",
         "balloonText": "[[title]]<br/><b style='font-size: 130%'>$[[value]]M</b>"
       }, {
         "id": "g4",
         "valueAxis": "v1",
-        color: layoutColors.default,
+        color: layoutColors.defaultText,
         "lineColor": layoutColors.primary,
         "fillColors": layoutColors.primary,
         "fillAlphas": 0.9,
@@ -74,8 +74,8 @@
         "valueAxis": "v2",
         "bullet": "round",
         "bulletBorderAlpha": 1,
-        "bulletColor": "#FFFFFF",
-        color: layoutColors.default,
+        "bulletColor": layoutColors.defaultText,
+        color: layoutColors.defaultText,
         "bulletSize": 5,
         "hideBulletsCount": 50,
         "lineThickness": 2,
@@ -88,10 +88,10 @@
       }, {
         "id": "g2",
         "valueAxis": "v2",
-        color: layoutColors.default,
+        color: layoutColors.defaultText,
         "bullet": "round",
         "bulletBorderAlpha": 1,
-        "bulletColor": "#FFFFFF",
+        "bulletColor": layoutColors.defaultText,
         "bulletSize": 5,
         "hideBulletsCount": 50,
         "lineThickness": 2,
@@ -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,
@@ -128,17 +130,17 @@
       },
       "categoryField": "date",
       "categoryAxis": {
-        "axisColor": "#fff",
-        "color": "#fff",
-        "gridColor": "#fff",
+        "axisColor": layoutColors.defaultText,
+        "color": layoutColors.defaultText,
+        "gridColor": layoutColors.defaultText,
         "parseDates": true,
         "dashLength": 1,
         "minorGridEnabled": true
       },
       "legend": {
         "useGraphSettings": true,
         "position": "top",
-        "color": "#fff"
+        "color": layoutColors.defaultText
       },
       "balloon": {
         "borderThickness": 1,

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, 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',
@@ -63,8 +65,5 @@
       creditsPosition: 'bottom-left',
       pathToImages: layoutPaths
     });
-
-    tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
   }
-
 })();

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

@@ -9,11 +9,12 @@
       .controller('LineChartCtrl', LineChartCtrl);
 
   /** @ngInject */
-  function LineChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper, layoutPaths) {
+  function LineChartCtrl($scope, layoutColors, $element, layoutPaths) {
     var id = $element[0].getAttribute('id');
     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,8 +144,6 @@
       pathToImages: layoutPaths.images.amChart
     });
 
-    tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart);
-
     lineChart.addListener('rendered', zoomChart);
     if (lineChart.zoomChart) {
       lineChart.zoomChart();

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

@@ -9,17 +9,19 @@
       .controller('PieChartCtrl', PieChartCtrl);
 
   /** @ngInject */
-  function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths) {
+  function PieChartCtrl($element, 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,8 +128,6 @@
       }
     });
 
-    tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart);
-
     pieChart.addListener('init', handleInit);
 
     pieChart.addListener('rollOverSlice', function (e) {

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 ">