feat(skin): changed structure of skin folders and added additional skins

src/app/components/contentTop/contentTop.html

@@ -8,6 +8,6 @@
   </ul>
   <div class="dropdown al-look">
     <a href class="dropdown-toggle ion-settings" data-toggle="dropdown"></a>
-    <div class="dropdown-menu dropdown-menu-right" look-and-feel-panel></div>
+    <div class="dropdown-menu dropdown-menu-right" tpl-skin-panel></div>
   </div>
 </div>

src/app/lookAndFeel/lookAndFeelPanel.directive.js

@@ -1,25 +0,0 @@
-/**
- * @author v.lugovsky
- * created on 18.11.2015
- */
-(function() {
-  'use strict';
-
-  blurAdminApp
-      .directive('lookAndFeelPanel', lookAndFeelPanel);
-
-  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,10 +0,0 @@
-<div class="look-and-feel-panel">
-  <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 }}" />
-      </div>
-      <div class="col-xs-6 text-col" ng-bind="option.name"></div>
-    </div>
-  </div>
-</div>

src/app/tplSkin/tplSkin.constants.js

@@ -46,7 +46,7 @@
   ];
 
   blurAdminApp
-      .constant('skinClassPrefix', SKIN_CLASS_PREFIX)
-      .constant('lookAndFeelEnum', ADMIN_STYLES);
+      .constant('tplSkinClassPrefix', SKIN_CLASS_PREFIX)
+      .constant('tplSkinEnum', ADMIN_STYLES);
 
 })();

src/app/tplSkin/tplSkinManager.service.js

@@ -6,10 +6,10 @@
   'use strict';
 
   blurAdminApp
-      .service('lookAndFeelOptions', lookAndFeelOptions);
+      .service('tplSkinManager', tplSkinManager);
 
-  lookAndFeelOptions.$inject = ['$document', 'skinClassPrefix'];
-  function lookAndFeelOptions($document, skinClassPrefix) {
+  tplSkinManager.$inject = ['$document', 'tplSkinClassPrefix'];
+  function tplSkinManager($document, tplSkinClassPrefix) {
 
     var activeSkin = null;
 
@@ -25,7 +25,7 @@
       var body = $document[0].body;
       var $body = angular.element(body);
       body.className.split(/\s+/).forEach(function(className) {
-        if (className.indexOf(skinClassPrefix) === 0) {
+        if (className.indexOf(tplSkinClassPrefix) === 0) {
           $body.removeClass(className);
         }
       });

src/app/tplSkin/tplSkinPanel.directive.js

@@ -0,0 +1,25 @@
+/**
+ * @author v.lugovsky
+ * created on 18.11.2015
+ */
+(function() {
+  'use strict';
+
+  blurAdminApp
+      .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

@@ -0,0 +1,10 @@
+<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/app/tplSkin/tplSkinPanel.scss

@@ -1,11 +1,16 @@
-.look-and-feel-panel {
+.tpl-skin-panel {
   width: 300px;
-  .look-and-feel-option {
+  .tpl-skin-option {
     padding: 10px;
+    line-height: 83px;
 
     &:hover {
       cursor: pointer;
       background-color: $primary;
+      color: white;
+    }
+    + .tpl-skin-option {
+      border-top: 1px solid #999;
     }
   }
   .skin-thumbnail {

src/assets/css/_variables.scss

@@ -1,11 +1,11 @@
 $font-family:  'Lato', sans-serif;
 
-$primary: #41bee9;
-$info: #5bc0de;
-$success: #348779;
-$warning: #bbcb50;
-$danger: #9d498c;
-$default: #e9e9e9;
+$primary: #41bee9!default;
+$info: #5bc0de!default;
+$success: #348779!default;
+$warning: #bbcb50!default;
+$danger: #9d498c!default;
+$default: #e9e9e9!default;
 
 $primary-dark: #1694bf;
 $success-dark: #1c4a42;

src/assets/css/main.scss

@@ -1,5 +1,6 @@
 @import "variables.scss",
 "mixins.scss",
+"skins/skins.scss",
 "../../app/pages/typography/typography.scss",
 "preloader.scss",
 "socicon.scss",
@@ -7,8 +8,7 @@
 "table.scss",
 "layout.scss",
 "icons.scss",
-"skins/skins.scss",
-"../../app/lookAndFeel/lookAndFeelPanel.scss",
+"../../app/tplSkin/tplSkinPanel.scss",
 "../../app/components/widgets/widgets.scss",
 "../../app/pages/buttons/buttonsPage.scss",
 "../../app/pages/icons/iconsPage.scss",

src/assets/css/skins/_02_transparent.scss

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

src/assets/css/skins/_03_blue.scss

@@ -0,0 +1,6 @@
+body.badmin-blue {
+  background-image: url(../img/blue-bg.jpg);
+  .page-top {
+    background-color: rgba(0,0,0,.5);
+  }
+}

src/assets/css/skins/_06_transblue.scss

@@ -0,0 +1,12 @@
+body.badmin-transblue {
+  background-image: url(../img/transblue-bg.jpg);
+
+  .page-top {
+    background-color: rgba(0,0,0,.5);
+  }
+
+  .panel, .panel:hover {
+    border-color: rgba(80, 80, 80, 0.5);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}

src/assets/css/skins/_07_grey.scss

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

src/assets/css/skins/skins.scss

@@ -1,6 +1,6 @@
-@import 'transparent';
-@import 'blue';
-@import 'peachy';
-@import 'material';
-@import 'transblue';
-@import 'grey';
+@import '02_transparent';
+@import '03_blue';
+@import '04_peachy';
+@import '05_material';
+@import '06_transblue';
+@import '07_grey';