feat(skin): add skin change layout ability

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" look-and-feel-panel></div>
+  </div>
 </div>

src/app/lookAndFeel/lookAndFeel.constants.js

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

src/app/lookAndFeel/lookAndFeelOptions.service.js

@@ -0,0 +1,20 @@
+/**
+ * @author v.lugovsky
+ * created on 18.11.2015
+ */
+(function() {
+  'use strict';
+
+  blurAdminApp
+      .factory('lookAndFeelOptions', lookAndFeelOptions);
+
+  lookAndFeelOptions.$inject = ['lookAndFeelEnum'];
+  function lookAndFeelOptions(lookAndFeelEnum) {
+
+    var model = {
+      adminStyles: lookAndFeelEnum
+    };
+    return model;
+  }
+
+})();

src/app/lookAndFeel/lookAndFeelPanel.directive.js

@@ -0,0 +1,21 @@
+/**
+ * @author v.lugovsky
+ * created on 18.11.2015
+ */
+(function() {
+  'use strict';
+
+  blurAdminApp
+      .directive('lookAndFeelPanel', lookAndFeelPanel);
+
+  lookAndFeelPanel.$inject = ['lookAndFeelEnum'];
+  function lookAndFeelPanel(lookAndFeelEnum) {
+    return {
+      templateUrl: 'app/lookAndFeel/lookAndFeelPanel.html',
+      link: function(scope, el) {
+        scope.lookAndFeels = lookAndFeelEnum;
+      }
+    };
+  }
+
+})();

src/app/lookAndFeel/lookAndFeelPanel.html

@@ -0,0 +1,10 @@
+<div class="look-and-feel-panel">
+  <div class="look-and-feel-option" ng-repeat="option in lookAndFeels">
+    <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/lookAndFeel/lookAndFeelPanel.scss

@@ -0,0 +1,14 @@
+.look-and-feel-panel {
+  width: 300px;
+  .look-and-feel-option {
+    padding: 10px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: $primary;
+    }
+  }
+  .skin-thumbnail {
+    width: 100%;
+  }
+}

src/assets/css/main.scss

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