refactor(skins):make transperent panel optional

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

@@ -12,10 +12,16 @@
       .directive('baPanel', baPanel);
 
   /** @ngInject */
-  function baPanel(baPanel, $document, $window) {
+  function baPanel(baPanel, $document, $window, tplSkinManager) {
     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 panel-white invisible ' + (attrs.baPanelClass || '') + '" zoom-in ba-panel-blur>';
+        var res = '<div  class="panel {{panelType}} invisible ' + (attrs.baPanelClass || '') + '" zoom-in ba-panel-blur>';
         res += baPanel.template(el, attrs);
         res += '</div>';
         return res;

src/app/tplSkin/tplSkin.constants.js

@@ -12,35 +12,41 @@
       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'
     },
     {
       name: 'Transparent (beta)',
       bodyClass: SKIN_CLASS_PREFIX + '-transparent',
+      panelType: "panel-blur",
       thumbnailUrl: 'assets/img/app/skin-thumbnails/02_transparent.jpg',
       chartColorProfile: 'transparent'
     }

src/app/tplSkin/tplSkinManager.service.js

@@ -22,6 +22,10 @@
       }
     };
 
+    this.getActiveSkin = function(){
+      return activeSkin;
+    };
+
     this.getChartColorProfile = function() {
       return tplSkinChartColors[activeSkin.chartColorProfile];
     };

src/sass/theme/bootstrap-overrides/_panel.scss

@@ -59,9 +59,7 @@ $panel-heading-font-size: 16px;
   //text-transform: uppercase;
 }
 
-.panel-white {
+.panel-white, .panel-blur {
-  $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
-  background: url($blurredBgUrl);
   background-size: cover;
   > .panel-heading {
     background-color: transparent;
@@ -70,6 +68,15 @@ $panel-heading-font-size: 16px;
   }
 }
 
+.panel-white{
+  background-color: $panel-bg;
+}
+
+.panel-blur{
+  $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
+  background: url($blurredBgUrl);
+}
+
 .panel-primary {
   > .panel-heading {
     color: $primary;