refactor(theme): remove skin related files

src/app/app.js

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

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

@@ -9,7 +9,7 @@
       .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',
@@ -136,8 +136,6 @@
       pathToImages: layoutPaths.images.amChart
     });
 
-    //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart);
-
     areaChart.addListener('dataUpdated', zoomAreaChart);
 
     function zoomAreaChart() {

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

@@ -9,7 +9,7 @@
       .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',
@@ -86,7 +86,5 @@
       creditsPosition: 'top-right',
       pathToImages: layoutPaths.images.amChart
     });
-
-    //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);
   }
 })();

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

@@ -9,7 +9,7 @@
       .controller('FunnelChartCtrl', FunnelChartCtrl);
 
   /** @ngInject */
-  function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths, layoutColors) {
+  function FunnelChartCtrl($scope, $element, layoutPaths, layoutColors) {
     var id = $element[0].getAttribute('id');
     var funnelChart = AmCharts.makeChart(id, {
       type: 'funnel',
@@ -65,8 +65,5 @@
       creditsPosition: 'bottom-left',
       pathToImages: layoutPaths
     });
-
-    //tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
   }
-
 })();

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

@@ -9,7 +9,7 @@
       .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',
@@ -144,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,7 +9,7 @@
       .controller('PieChartCtrl', PieChartCtrl);
 
   /** @ngInject */
-  function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths, layoutColors) {
+  function PieChartCtrl($element, layoutPaths, layoutColors) {
     var id = $element[0].getAttribute('id');
     var pieChart = AmCharts.makeChart(id, {
       type: 'pie',
@@ -128,8 +128,6 @@
       }
     });
 
-    //tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart);
-
     pieChart.addListener('init', handleInit);
 
     pieChart.addListener('rollOverSlice', function (e) {

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

@@ -9,7 +9,7 @@
       .controller('DashboardLineChartCtrl', DashboardLineChartCtrl);
 
   /** @ngInject */
-  function DashboardLineChartCtrl($scope, tplSkinManager, tplSkinChartWatcherHelper, layoutColors, layoutPaths) {
+  function DashboardLineChartCtrl(layoutColors, layoutPaths) {
     var chartData = [
       { date: new Date(2012, 11), value: 0, value0: 0 },
       { date: new Date(2013, 0), value: 15000, value0: 19000},
@@ -43,8 +43,6 @@
       { date: new Date(2015, 1), value: 49800, value0: 13000}
     ];
 
-    //var chartColorProfile = tplSkinManager.getChartColorProfile();
-
     var chart = AmCharts.makeChart('amchart', {
       type: 'serial',
       theme: 'blur',
@@ -114,8 +112,6 @@
       pathToImages: layoutPaths.images.amChart
     });
 
-    //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, chart);
-
     function zoomChart() {
       chart.zoomToDates(new Date(2013, 3), new Date(2014, 0));
     }

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

@@ -12,14 +12,8 @@
       .directive('baPanel', baPanel);
 
   /** @ngInject */
-  function baPanel(baPanel, $document, $window, tplSkinManager) {
+  function baPanel(baPanel) {
     return angular.extend({}, baPanel, {
-      link: function($scope){
-        $scope.panelType = tplSkinManager.getActiveSkin().panelType;
-        $scope.$on('tplSkinChanged', function(){
-          $scope.panelType = tplSkinManager.getActiveSkin().panelType;
-        });
-      },
       template: function(el, attrs) {
         var res = '<div  class="panel {{panelType}} full-invisible ' + (attrs.baPanelClass || '') + '" zoom-in ba-panel-blur>';
         res += baPanel.template(el, attrs);
@@ -28,5 +22,4 @@
       }
     });
   }
-
 })();

src/app/tplSkin/tplSkin.constants.js

@@ -1,71 +0,0 @@
-/**
- * @author v.lugovsky
- * created on 18.11.2015
- */
-(function() {
-  'use strict';
-
-  var SKIN_CLASS_PREFIX = 'badmin';
-
-  var ADMIN_STYLES = [
-    {
-      name: 'Transparent (beta)',
-      bodyClass: SKIN_CLASS_PREFIX + '-transparent',
-      panelType: "panel-blur",
-      thumbnailUrl: 'assets/img/app/skin-thumbnails/02_transparent.jpg',
-      chartColorProfile: 'transparent'
-    },
-    {
-      name: 'Default',
-      bodyClass: '',
-      thumbnailUrl: 'assets/img/app/skin-thumbnails/01_default.jpg',
-      panelType: "panel-white",
-      chartColorProfile: 'whitePanel'
-    },
-    {
-      name: 'Peachy',
-      bodyClass: SKIN_CLASS_PREFIX + '-peachy',
-      thumbnailUrl: 'assets/img/app/skin-thumbnails/04_peachy.jpg',
-      panelType: "panel-white",
-      chartColorProfile: 'whitePanel'
-    },
-    {
-      name: 'Blue',
-      bodyClass: SKIN_CLASS_PREFIX + '-blue',
-      thumbnailUrl: 'assets/img/app/skin-thumbnails/03_blue.jpg',
-      panelType: "panel-white",
-      chartColorProfile: 'whitePanel'
-    },
-    {
-      name: 'Material',
-      bodyClass: SKIN_CLASS_PREFIX + '-material',
-      thumbnailUrl: 'assets/img/app/skin-thumbnails/05_material.jpg',
-      panelType: "panel-white",
-      chartColorProfile: 'whitePanel'
-    },
-    {
-      name: 'Transblue (beta)',
-      bodyClass: SKIN_CLASS_PREFIX + '-transblue',
-      panelType: "panel-blur",
-      thumbnailUrl: 'assets/img/app/skin-thumbnails/06_transblue.jpg',
-      chartColorProfile: 'transparent'
-    }
-  ];
-
-  var SKIN_CHART_COLORS = {
-    whitePanel: {
-      fontColors: undefined,
-      axisColors: '#7b7b7b'
-    },
-    transparent: {
-      fontColors: '#FFFFFF',
-      axisColors: '#FFFFFF'
-    }
-  };
-
-  angular.module('BlurAdmin.tplSkin')
-      .constant('tplSkinClassPrefix', SKIN_CLASS_PREFIX)
-      .constant('tplSkinEnum', ADMIN_STYLES)
-      .constant('tplSkinChartColors', SKIN_CHART_COLORS);
-
-})();

src/app/tplSkin/tplSkin.module.js

@@ -1,14 +0,0 @@
-/**
- * @author v.lugovksy
- * created on 16.12.2015
- */
-/**
- * @author v.lugovsky
- * created on 16.12.2015
- */
-(function () {
-  'use strict';
-
-  angular.module('BlurAdmin.tplSkin', []);
-
-})();

src/app/tplSkin/tplSkinChartWatcherHelper.service.js

@@ -1,67 +0,0 @@
-/**
- * @author v.lugovsky
- * created on 27.11.2015
- */
-(function() {
-  'use strict';
-
-  angular.module('BlurAdmin.tplSkin')
-      .service('tplSkinChartWatcherHelper', tplSkinChartWatcherHelper);
-
-  tplSkinChartWatcherHelper.$inject = ['tplSkinManager'];
-  function tplSkinChartWatcherHelper(tplSkinManager) {
-
-    this.watchAxisChartStyleChanges = function(scope, chart) {
-      _doUpdateStyles();
-      scope.$on('tplSkinChanged', _doUpdateStyles);
-
-      function _doUpdateStyles() {
-        var chartColorProfile = tplSkinManager.getChartColorProfile();
-        chart.color = chartColorProfile.fontColors;
-        chart.categoryAxis.color = chartColorProfile.fontColors;
-        chart.categoryAxis.axisColor = chartColorProfile.axisColors;
-        chart.valueAxes[0].color = chartColorProfile.fontColors;
-        chart.valueAxes[0].axisColor = chartColorProfile.axisColors;
-        chart.validateNow();
-      }
-    };
-
-    this.watchChartColorChanges = function(scope, chart) {
-      _doUpdateStyles();
-      scope.$on('tplSkinChanged', _doUpdateStyles);
-
-      function _doUpdateStyles() {
-        var chartColorProfile = tplSkinManager.getChartColorProfile();
-        chart.color = chartColorProfile.fontColors;
-        chart.validateNow();
-      }
-    };
-
-    this.watchDonutChanges = function(scope, chart) {
-      _doUpdateStyles();
-      scope.$on('tplSkinChanged', _doUpdateStyles);
-
-      function _doUpdateStyles() {
-        var chartColorProfile = tplSkinManager.getChartColorProfile();
-        chart.color = chartColorProfile.fontColors;
-        chart.legend.color = chartColorProfile.fontColors;
-        chart.labelTickColor = chartColorProfile.axisColors;
-        chart.validateNow();
-      }
-    };
-
-    this.watchFunnelChanges = function(scope, chart) {
-      _doUpdateStyles();
-      scope.$on('tplSkinChanged', _doUpdateStyles);
-
-      function _doUpdateStyles() {
-        var chartColorProfile = tplSkinManager.getChartColorProfile();
-        chart.color = chartColorProfile.fontColors;
-        chart.labelTickColor = chartColorProfile.axisColors;
-        chart.validateNow();
-      }
-    };
-
-  }
-
-})();

src/app/tplSkin/tplSkinManager.service.js

@@ -1,50 +0,0 @@
-/**
- * @author v.lugovsky
- * created on 18.11.2015
- */
-(function() {
-  'use strict';
-
-  angular.module('BlurAdmin.tplSkin')
-      .service('tplSkinManager', tplSkinManager);
-
-  tplSkinManager.$inject = ['$rootScope', '$document', 'tplSkinClassPrefix', 'tplSkinChartColors', 'tplSkinEnum'];
-  function tplSkinManager($rootScope, $document, tplSkinClassPrefix, tplSkinChartColors, tplSkinEnum) {
-
-    var activeSkin = tplSkinEnum[0];
-
-    this.setActiveSkin = function(skin) {
-      activeSkin = skin;
-      if (activeSkin) {
-        _removeSkinBodyClassIfPresent();
-        _addSkinBodyClass(activeSkin);
-        $rootScope.$broadcast('tplSkinChanged');
-      }
-    };
-
-    this.getActiveSkin = function(){
-      return activeSkin;
-    };
-
-    this.getChartColorProfile = function() {
-      return tplSkinChartColors[activeSkin.chartColorProfile];
-    };
-
-    function _removeSkinBodyClassIfPresent() {
-      var body = $document[0].body;
-      var $body = angular.element(body);
-      body.className.split(/\s+/).forEach(function(className) {
-        if (className.indexOf(tplSkinClassPrefix) === 0) {
-          $body.removeClass(className);
-        }
-      });
-    }
-
-    function _addSkinBodyClass(skin) {
-      angular.element($document[0].body).addClass(skin.bodyClass);
-    }
-
-    this.setActiveSkin(activeSkin);
-  }
-
-})();

src/app/tplSkin/tplSkinPanel.directive.js

@@ -1,25 +0,0 @@
-/**
- * @author v.lugovsky
- * created on 18.11.2015
- */
-(function() {
-  'use strict';
-
-  angular.module('BlurAdmin.tplSkin')
-      .directive('tplSkinPanel', tplSkinPanel);
-
-  tplSkinPanel.$inject = ['tplSkinEnum', 'tplSkinManager'];
-  function tplSkinPanel(tplSkinEnum, tplSkinManager) {
-    return {
-      templateUrl: 'app/tplSkin/tplSkinPanel.html',
-      link: function(scope) {
-        scope.skins = tplSkinEnum;
-
-        scope.setActiveSkin = function(option) {
-          tplSkinManager.setActiveSkin(option);
-        };
-      }
-    };
-  }
-
-})();

src/app/tplSkin/tplSkinPanel.html

@@ -1,10 +0,0 @@
-<div class="tpl-skin-panel">
-  <div class="tpl-skin-option" ng-repeat="skin in skins" ng-click="setActiveSkin(skin)">
-    <div class="row">
-      <div class="col-xs-6">
-        <img class="skin-thumbnail" ng-src="{{ skin.thumbnailUrl }}" />
-      </div>
-      <div class="col-xs-6 text-col" ng-bind="skin.name"></div>
-    </div>
-  </div>
-</div>

src/sass/app/_chartsPage.scss

@@ -47,6 +47,16 @@
   margin: 1px;
 }
 
+.ct-area {
+  fill-opacity: .5;
+}
+
+.ct-label{
+  color: $default-text;
+  opacity: 0.9;
+  fill: rgba(255,255,255,.9);
+}
+
 .ct-chart .ct-label{
   font-size: 1em;
 }
@@ -102,16 +112,6 @@
   }
 }
 
-body.badmin-transparent{
-  .ct-area {
-    fill-opacity: .5;
-  }
-  .ct-label{
-    color: $default-text;
-    opacity: 0.9;
-    fill: rgba(255,255,255,.9);
-  }
-}
 @media screen and (min-width: 992px) {
   .row.morris-up {
     > div {

src/sass/app/_email.scss

@@ -10,21 +10,28 @@
 }
 
 .mail-navigation-container {
+  float: left;
+  position: relative;
+  height: 550px;
+  transition: width 0.5s;
   color: $default-text;
   width: 200px;
+  overflow: hidden;
+  padding: 0;
   .mail-navigation {
     cursor: pointer;
     font-weight: $font-light;
     font-size: 16px;
     text-align: left;
     padding: 10px 10px 10px 30px;
+    margin-left: 0;
     transition: 0.8s padding ease;
     .new-mails {
       position: absolute;
       left: 150px;
       padding: 1px 6px;
       border: 1px solid;
-      background-color: $primary-light;
+      background-color: transparent;
       margin-top: -2px;
       font-size: 12px;
       margin-right: 5px;
@@ -32,26 +39,29 @@
       transition: 0.8s left ease;
     }
     &.active {
-      background-color: $primary-light;
+      background: rgba(black, 0.2);
+      color: white;
+      transition: background-color .5s ease;
       &:hover {
-        background-color: $primary-light;
+        background-color: rgba(black, 0.3);
       }
       .new-mails {
-        color: $primary-light;
+        background-color: transparent;
-        background-color: $default;
+        color: $default;
       }
-      transition: background-color .2s ease, 0.8s padding ease;
     }
     &:hover {
-      background-color: $border-light;
+      background-color: rgba(black, 0.1);
     }
   }
   .compose-button {
     margin: 7px 0;
+    text-align: center;
     .btn {
       width: 140px;
       font-weight: $font-light;
-      background-color: $dribble-color;
+      border: $border 2px solid;
+      background-color: transparent;
     }
   }
 }
@@ -124,12 +134,17 @@
   }
 }
 
-.message-container, .side-message-navigation, .mail-navigation-container {
+.message-container, .side-message-navigation {
   float: left;
   padding: 0 15px;
   position: relative;
   height: 550px;
   transition: width 0.5s;
+  width: calc(100% - 200px);
+  border-bottom-right-radius: 5px;
+  border-top-right-radius: 5px;
+  border-left: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.12);
 }
 
 .side-message-navigation {
@@ -755,40 +770,6 @@
 }
 
 body.badmin-transparent {
-  .mail-navigation-container {
-    overflow: hidden;
-    width: 200px;
-    padding: 0;
-    .mail-navigation {
-      margin-left: 0;
-      .new-mails {
-        background-color: transparent;
-      }
-      &.active {
-        background: rgba(black, 0.2);
-        color: white;
-        transition: background-color .5s ease;
-        .new-mails {
-          background-color: transparent;
-          color: $default;
-        }
-        &:hover {
-          background-color: rgba(black, 0.3);
-        }
-      }
-      &:hover {
-        background-color: rgba(black, 0.1);
-      }
-    }
-  }
-
-  .message-container, .side-message-navigation{
-    width: calc(100% - 200px);
-    border-bottom-right-radius: 5px;
-    border-top-right-radius: 5px;
-    border-left: 1px solid rgba(0, 0, 0, 0.12);
-    box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
-  }
 
   .side-message-navigation {
     overflow: hidden;

src/sass/theme/_table.scss

@@ -203,7 +203,6 @@ input.search-input {
   margin-left: 0;
 }
 
-body.badmin-transparent {
 .table {
   & > thead {
     & > tr {
@@ -259,7 +258,6 @@ body.badmin-transparent {
   color: $default-text;
   border-bottom: dashed 1px $border;
 }
-}
 
 th {
   font-weight: $font-normal;

src/sass/theme/dashboard/_calendar.scss

@@ -720,7 +720,6 @@ a.fc-more {
 .fc-day-grid-container.fc-scroller  {
   height: auto!important;
 }
-body.badmin-transparent{
 
 .calendar-panel.panel .panel-body{
   padding: 0;
@@ -767,4 +766,3 @@ body.badmin-transparent{
   color: $default-text;
   opacity: 0.9;
 }
-}

src/sass/theme/dashboard/_popularApp.scss

@@ -21,7 +21,8 @@
   .popular-app-cost {
     font-size: 20px;
     padding: 20px 22px;
-    border-bottom: 1px solid $border;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
   }
   .popular-app-info {
     padding: 20px 22px;
@@ -38,14 +39,3 @@
     }
   }
 }
-
-body.badmin-transparent {
-  .popular-app-img {
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
-  }
-  .popular-app-cost {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
-  }
-}

src/sass/theme/skins/_02_transparent.scss

@@ -1 +0,0 @@
-

src/sass/theme/skins/_03_blue.scss

@@ -1,3 +0,0 @@
-body.badmin-blue {
-  background-image: url(../../../assets/img/blue-bg.jpg);
-}

src/sass/theme/skins/_04_peachy.scss

@@ -1,3 +0,0 @@
-body.badmin-peachy {
-  background-image: url(../../../assets/img/peachy-bg.jpg);
-}

src/sass/theme/skins/_05_material.scss

@@ -1,3 +0,0 @@
-body.badmin-material {
-  background: #039be6;
-}

src/sass/theme/skins/_06_transblue.scss

@@ -1,6 +0,0 @@
-body.badmin-transblue {
-  background-image: url(../../../assets/img/transblue-bg.jpg);
-
-  @include overrideColors(#fff);
-  @include overridePanelBg(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
-}

src/sass/theme/skins/_07_grey.scss

@@ -1,3 +0,0 @@
-body.badmin-grey {
-  background: #bdbdbd;
-}