Merge branch 'skin-change' into v2

gulpfile.js

@@ -58,6 +58,7 @@ gulp.task('minify-css', ['minify-404-css', 'minify-auth-css'], function () {
 var imgSrc = [
   'src/assets/img/*',
   'src/assets/pictures/*',
+  'src/app/lookAndFeel/thumbs/*',
   'src/app/pages/dashboard/widgets/timeline/img/*',
   'src/app/pages/profile/img/*',
   'src/app/pages/icons/widgets/kameleon-img/*',

src/app/components/contentTop/_contentTop.scss

@@ -24,4 +24,13 @@ h1.al-title {
     font-size: 18px;
     font-weight: 100;
   }
+}
+
+.al-look {
+  float: right;
+  margin-right: 10px;
+  padding-top: 10px;
+  > a {
+    font-size: 19px;
+  }
 }

src/app/components/contentTop/contentTop.html

@@ -6,4 +6,8 @@
       <a href="#/dashboard">Home</a></li>
     <li>{{ activePageTitle }}</li>
   </ul>
+  <div class="dropdown al-look">
+    <a href class="dropdown-toggle ion-settings" data-toggle="dropdown"></a>
+    <div class="dropdown-menu dropdown-menu-right" tpl-skin-panel></div>
+  </div>
 </div>

src/app/tplSkin/tplSkin.constants.js

@@ -0,0 +1,52 @@
+/**
+ * @author v.lugovsky
+ * created on 18.11.2015
+ */
+(function() {
+  'use strict';
+
+  var SKIN_CLASS_PREFIX = 'badmin';
+
+  var ADMIN_STYLES = [
+    {
+      name: 'Default',
+      bodyClass: '',
+      thumbnailUrl: 'img/01_default.jpg'
+    },
+    {
+      name: 'Transparent',
+      bodyClass: SKIN_CLASS_PREFIX + '-transparent',
+      thumbnailUrl: 'img/02_transparent.jpg'
+    },
+    {
+      name: 'Blue',
+      bodyClass: SKIN_CLASS_PREFIX + '-blue',
+      thumbnailUrl: 'img/03_blue.jpg'
+    },
+    {
+      name: 'Peachy',
+      bodyClass: SKIN_CLASS_PREFIX + '-peachy',
+      thumbnailUrl: 'img/04_peachy.jpg'
+    },
+    {
+      name: 'Material',
+      bodyClass: SKIN_CLASS_PREFIX + '-material',
+      thumbnailUrl: 'img/05_material.jpg'
+    },
+    {
+      name: 'Transblue',
+      bodyClass: SKIN_CLASS_PREFIX + '-transblue',
+      thumbnailUrl: 'img/06_transblue.jpg'
+    },
+    {
+      name: 'Grey',
+      bodyClass: SKIN_CLASS_PREFIX + '-grey',
+      thumbnailUrl: 'img/07_grey.jpg'
+    }
+  ];
+
+  blurAdminApp
+      .constant('tplSkinClassPrefix', SKIN_CLASS_PREFIX)
+      .constant('tplSkinEnum', ADMIN_STYLES);
+
+})();

src/app/tplSkin/tplSkinManager.service.js

@@ -0,0 +1,39 @@
+/**
+ * @author v.lugovsky
+ * created on 18.11.2015
+ */
+(function() {
+  'use strict';
+
+  blurAdminApp
+      .service('tplSkinManager', tplSkinManager);
+
+  tplSkinManager.$inject = ['$document', 'tplSkinClassPrefix'];
+  function tplSkinManager($document, tplSkinClassPrefix) {
+
+    var activeSkin = null;
+
+    this.setActiveSkin = function(skin) {
+      activeSkin = skin;
+      if (activeSkin) {
+        _removeSkinBodyClassIfPresent();
+        _addSkinBodyClass(activeSkin);
+      }
+    };
+
+    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);
+    }
+  }
+
+})();

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

@@ -0,0 +1,19 @@
+.tpl-skin-panel {
+  width: 300px;
+  .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 {
+    width: 100%;
+  }
+}

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,6 +8,7 @@
 "table.scss",
 "layout.scss",
 "icons.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

@@ -0,0 +1,6 @@
+body.badmin-transparent {
+  .panel, .panel:hover {
+    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

@@ -0,0 +1,6 @@
+@import '02_transparent';
+@import '03_blue';
+@import '04_peachy';
+@import '05_material';
+@import '06_transblue';
+@import '07_grey';