adjustments for look and feel

src/app/lookAndFeel/lookAndFeel.constants.js

@@ -5,6 +5,8 @@
 (function() {
   'use strict';
 
+  var SKIN_CLASS_PREFIX = 'badmin';
+
   var ADMIN_STYLES = [
     {
       name: 'Default',
@@ -13,37 +15,38 @@
     },
     {
       name: 'Transparent',
-      bodyClass: 'badmin-transparent',
+      bodyClass: SKIN_CLASS_PREFIX + '-transparent',
       thumbnailUrl: 'img/02_transparent.jpg'
     },
     {
       name: 'Blue',
-      bodyClass: 'badmin-blue',
+      bodyClass: SKIN_CLASS_PREFIX + '-blue',
       thumbnailUrl: 'img/03_blue.jpg'
     },
     {
       name: 'Peachy',
-      bodyClass: 'badmin-peachy',
+      bodyClass: SKIN_CLASS_PREFIX + '-peachy',
       thumbnailUrl: 'img/04_peachy.jpg'
     },
     {
       name: 'Material',
-      bodyClass: 'badmin-material',
+      bodyClass: SKIN_CLASS_PREFIX + '-material',
       thumbnailUrl: 'img/05_material.jpg'
     },
     {
       name: 'Transblue',
-      bodyClass: 'badmin-transblue',
+      bodyClass: SKIN_CLASS_PREFIX + '-transblue',
       thumbnailUrl: 'img/06_transblue.jpg'
     },
     {
       name: 'Grey',
-      bodyClass: 'badmin-grey',
+      bodyClass: SKIN_CLASS_PREFIX + '-grey',
       thumbnailUrl: 'img/07_grey.jpg'
     }
   ];
 
   blurAdminApp
+      .constant('skinClassPrefix', SKIN_CLASS_PREFIX)
       .constant('lookAndFeelEnum', ADMIN_STYLES);
 
 })();

src/app/lookAndFeel/lookAndFeelOptions.service.js

@@ -6,15 +6,34 @@
   'use strict';
 
   blurAdminApp
-      .factory('lookAndFeelOptions', lookAndFeelOptions);
+      .service('lookAndFeelOptions', lookAndFeelOptions);
 
-  lookAndFeelOptions.$inject = ['lookAndFeelEnum'];
-  function lookAndFeelOptions(lookAndFeelEnum) {
+  lookAndFeelOptions.$inject = ['$document', 'skinClassPrefix'];
+  function lookAndFeelOptions($document, skinClassPrefix) {
 
-    var model = {
-      adminStyles: lookAndFeelEnum
+    var activeSkin = null;
+
+    this.setActiveSkin = function(skin) {
+      activeSkin = skin;
+      if (activeSkin) {
+        _removeSkinBodyClassIfPresent();
+        _addSkinBodyClass(activeSkin);
+      }
     };
-    return model;
+
+    function _removeSkinBodyClassIfPresent() {
+      var body = $document[0].body;
+      var $body = angular.element(body);
+      body.className.split(/\s+/).forEach(function(className) {
+        if (className.indexOf(skinClassPrefix) === 0) {
+          $body.removeClass(className);
+        }
+      });
+    }
+
+    function _addSkinBodyClass(skin) {
+      angular.element($document[0].body).addClass(skin.bodyClass);
+    }
   }
 
 })();

src/app/lookAndFeel/lookAndFeelPanel.directive.js

@@ -8,12 +8,16 @@
   blurAdminApp
       .directive('lookAndFeelPanel', lookAndFeelPanel);
 
-  lookAndFeelPanel.$inject = ['lookAndFeelEnum'];
-  function lookAndFeelPanel(lookAndFeelEnum) {
+  lookAndFeelPanel.$inject = ['lookAndFeelEnum', 'lookAndFeelOptions'];
+  function lookAndFeelPanel(lookAndFeelEnum, lookAndFeelOptions) {
     return {
       templateUrl: 'app/lookAndFeel/lookAndFeelPanel.html',
       link: function(scope, el) {
         scope.lookAndFeels = lookAndFeelEnum;
+
+        scope.setActiveSkin = function(option) {
+          lookAndFeelOptions.setActiveSkin(option);
+        };
       }
     };
   }

src/app/lookAndFeel/lookAndFeelPanel.html

@@ -1,5 +1,5 @@
 <div class="look-and-feel-panel">
-  <div class="look-and-feel-option" ng-repeat="option in lookAndFeels">
+  <div class="look-and-feel-option" ng-repeat="option in lookAndFeels" ng-click="setActiveSkin(option)">
     <div class="row">
       <div class="col-xs-6">
         <img class="skin-thumbnail" ng-src="{{ option.thumbnailUrl }}" />

src/assets/css/main.scss

@@ -7,6 +7,7 @@
 "table.scss",
 "layout.scss",
 "icons.scss",
+"skins/skins.scss",
 "../../app/lookAndFeel/lookAndFeelPanel.scss",
 "../../app/components/widgets/widgets.scss",
 "../../app/pages/buttons/buttonsPage.scss",

src/assets/css/skins/_transparent.scss

@@ -0,0 +1,6 @@
+body.badmin-transparent {
+  .panel, .panel:hover {
+    border-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}

src/assets/css/skins/skins.scss

@@ -0,0 +1,6 @@
+@import 'transparent';
+@import 'blue';
+@import 'peachy';
+@import 'material';
+@import 'transblue';
+@import 'grey';