Merge remote-tracking branch 'origin/v2' into v2

bower.json

@@ -20,16 +20,16 @@
     "amcharts": "~3.15.2",
     "amcharts-stock": "*",
     "ammap": "~3.14.5",
-    "angular": "~1.4.6",
+    "angular": "~1.4.8",
     "angular-route": "~1.4.6",
     "angular-slimscroll": "~1.1.5",
     "angular-smart-table": "~2.1.3",
-    "angular-toastr": "~1.5.0",
+    "angular-toastr": "~1.6.0",
     "angular-touch": "~1.4.6",
     "angular-ui-sortable": "~0.13.4",
     "animate.css": "~3.4.0",
     "bootstrap": "~3.3.5",
-    "bootstrap-select": "~1.7.3",
+    "bootstrap-select": "~1.9.3",
     "bootstrap-switch": "~3.3.2",
     "bootstrap-tagsinput": "~0.5.0",
     "font-awesome": "fontawesome#~4.4.0",
@@ -77,7 +77,7 @@
     "bootstrap": {
       "main": [
         "dist/css/bootstrap.css",
-        "dist/js/bootstrap.js"
+        "js/dropdown.js"
       ]
     },
     "slimScroll": {

src/app/app.js

@@ -11,6 +11,7 @@ angular.module('BlurAdmin', [
   "xeditable",
   'ui.slimscroll',
   'ngJsTree',
+  'angular-progress-button-styles',
 
   'BlurAdmin.theme',
   'BlurAdmin.pages',

src/app/pages/components/mail/list/mailList.html

@@ -1,16 +1,15 @@
 <div class="side-message-navigation">
-  <div class="messages-control side-message-navigation-item">
+  <div class="mail-messages-control side-message-navigation-item">
     <label class="checkbox-inline custom-checkbox nowrap margin-left">
-      <span class="select-all-label">Select All</span>
       <input type="checkbox" id="inlineCheckbox01" value="option1">
+      <span class="select-all-label">Select All</span>
     </label>
     <button type="button" class="btn  btn-icon margin-left"><i class="ion-refresh"></i></button>
-    <div class="btn-group margin-left">
+    <div class="btn-group margin-left" uib-dropdown>
-      <button type="button" class="btn btn-icon dropdown-toggle more-button" data-toggle="dropdown"
+      <button type="button" class="btn more-button" uib-dropdown-toggle>
-              aria-haspopup="true"
+        More <span class="caret"></span>
-              aria-expanded="false">More<span class="caret"></span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -22,29 +21,28 @@
   <div class="messages">
     <table>
       <tr ng-repeat="m in listCtrl.messages track by m.id | orderBy:'-date'"
-          class="side-message-navigation-item little-human shineHover {{m.tag}}"
+          class="side-message-navigation-item little-human shineHover {{m.tag}}">
-          ui-sref="components.mail.detail({id: m.id, label: listCtrl.label})">
         <td>
           <div class="mail-checkbox">
             <label class="checkbox-inline custom-checkbox nowrap margin-left">
-              <span></span>
               <input type="checkbox">
+              <span></span>
             </label>
           </div>
         </td>
-        <td><img ng-src="{{m.name.split(' ')[0] | profilePicture}}" class="little-human-picture"></td>
+        <td  ui-sref="components.mail.detail({id: m.id, label: listCtrl.label})"><img ng-src="{{m.name.split(' ')[0] | profilePicture}}" class="little-human-picture"></td>
-        <td >
+        <td  ui-sref="components.mail.detail({id: m.id, label: listCtrl.label})">
           <div class="margin-left">
             <div><span class="name">{{m.name.split(' ')[0] + ' ' + m.name.split(' ')[1][0]}}.</span></div>
             <div><span class="tag label label-primary {{m.tag}}">{{m.tag}}</span></div>
           </div>
         </td>
-        <td >
+        <td  ui-sref="components.mail.detail({id: m.id, label: listCtrl.label})">
           <div class="margin-left additional-info">
             <span class="subject"> {{m.subject}}</span>
           </div>
         </td>
-        <td>
+        <td  ui-sref="components.mail.detail({id: m.id, label: listCtrl.label})">
           <div class="mail-body-part">{{m.body | plainText}}</div>
         </td>
         <td class="date">

src/app/pages/components/mail/mailMessages.js

@@ -176,6 +176,19 @@
         "tag": "study",
         "labels": ['draft']
       },
+      {
+        "id": "8223xsdaa",
+        "name": "Andrey Hrabouski",
+        "subject": "Car rent",
+        "date": "2015-02-25T10:58:58",
+        "body": $sce.trustAsHtml("<p>Hey Andrey. </p>" +
+          "<p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed. Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
+        "pic": "img/Andrey.png",
+        "email": "lakeishaphillips@mail.com",
+        "position": "Mobile Developer",
+        "tag": "family",
+        "labels": ['draft']
+      },
       {
         "id": "9391xdsff",
         "name": "Vlad Lugovsky",

src/app/pages/components/tree/tree.html

@@ -16,12 +16,6 @@
             <div>
               <button class="btn btn-primary" ng-click="refresh()">Refresh</button>
             </div>
-            <div>
-              <div class="form-group text-left search-container">
-                <label for="search">Filter</label>
-                <input id="search" type="text" class="form-control" ng-model="query" ng-change="find()">
-              </div>
-            </div>
           </div>
         </div>
         <div class="col-sm-8">

src/app/pages/dashboard/dashboardCalendar/dashboardCalendar.html

@@ -1 +1 @@
-<div id='calendar'></div>
+<div id='calendar' class="blurCalendar"></div>

src/app/pages/form/inputs/widgets/select/select.html

@@ -76,7 +76,7 @@
 <div class="row">
   <div class="col-sm-6">
     <div class="form-group">
-      <select class="form-control" title="Primary Select" data-style="btn-primary" selectpicker>
+      <select class="form-control" title="Primary Select" data-style="btn-primary" data-container="body" selectpicker>
         <option>Option 1</option>
         <option>Option 2</option>
         <option>Option 3</option>
@@ -84,7 +84,7 @@
       </select>
     </div>
     <div class="form-group">
-      <select class="form-control" title="Success Select" data-style="btn-success" selectpicker>
+      <select class="form-control" title="Success Select" data-style="btn-success" data-container="body" selectpicker>
         <option>Option 1</option>
         <option>Option 2</option>
         <option>Option 3</option>
@@ -92,7 +92,7 @@
       </select>
     </div>
     <div class="form-group">
-      <select class="form-control" title="Warning Select" data-style="btn-warning" selectpicker>
+      <select class="form-control" title="Warning Select" data-style="btn-warning" data-container="body" selectpicker>
         <option>Option 1</option>
         <option>Option 2</option>
         <option>Option 3</option>
@@ -102,7 +102,7 @@
   </div>
   <div class="col-sm-6">
     <div class="form-group">
-      <select class="form-control" title="Info Select" data-style="btn-info" selectpicker>
+      <select class="form-control" title="Info Select" data-style="btn-info" data-container="body" selectpicker>
         <option>Option 1</option>
         <option>Option 2</option>
         <option>Option 3</option>
@@ -111,7 +111,7 @@
     </div>
 
     <div class="form-group">
-      <select class="form-control" title="Danger Select" data-style="btn-danger" selectpicker>
+      <select class="form-control" title="Danger Select" data-style="btn-danger" data-container="body" selectpicker>
         <option>Option 1</option>
         <option>Option 2</option>
         <option>Option 3</option>
@@ -120,7 +120,7 @@
     </div>
 
     <div class="form-group">
-      <select class="form-control" title="Inverse Select" data-style="btn-inverse" selectpicker>
+      <select class="form-control" title="Inverse Select" data-style="btn-inverse" data-container="body" selectpicker>
         <option>Option 1</option>
         <option>Option 2</option>
         <option>Option 3</option>

src/app/pages/form/inputs/widgets/select/selectpicker.directive.js

@@ -9,11 +9,13 @@
       .directive('selectpicker', selectpicker);
 
   /** @ngInject */
-  function selectpicker() {
+  function selectpicker($timeout) {
     return {
       restrict: 'A',
       link: function( $scope, elem) {
+        $timeout(function() {
           $(elem).selectpicker();
+        }, 0);
       }
     };
   }

src/app/pages/maps/leaflet/LeafletPageCtrl.js

@@ -12,9 +12,6 @@
   function LeafletPageCtrl($timeout) {
     function initialize() {
       var map = L.map(document.getElementById('leaflet-map')).setView([51.505, -0.09], 13);
-
-      L.Icon.Default.imagePath = 'img';
-
       L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
       }).addTo(map);

src/app/pages/profile/ProfileModalCtrl.js

@@ -0,0 +1,19 @@
+/**
+ * @author a.demeshko
+ * created on 21.01.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.profile')
+    .controller('ProfileModalCtrl', ProfileModalCtrl);
+
+  /** @ngInject */
+  function ProfileModalCtrl($scope, $uibModalInstance) {
+    $scope.link = '';
+    $scope.ok = function () {
+      $uibModalInstance.close($scope.link);
+    };
+  }
+
+})();

src/app/pages/profile/ProfilePageCtrl.js

@@ -9,7 +9,7 @@
     .controller('ProfilePageCtrl', ProfilePageCtrl);
 
   /** @ngInject */
-  function ProfilePageCtrl($scope, fileReader, $filter) {
+  function ProfilePageCtrl($scope, fileReader, $filter, $uibModal) {
     $scope.picture = $filter('profilePicture')('Nasta');
 
     $scope.removePicture = function () {
@@ -65,8 +65,14 @@
       item.href = undefined;
     };
 
-    $scope.showModal = function () {
+    $scope.showModal = function (item) {
-      $('#profileModal').modal('show');
+      $uibModal.open({
+        animation: false,
+        controller: 'ProfileModalCtrl',
+        templateUrl: 'app/pages/profile/profileModal.html'
+      }).result.then(function (link) {
+          item.href = link;
+        });
     };
 
     $scope.getFile = function () {

src/app/pages/profile/profile.html

@@ -143,7 +143,7 @@
           <div class="social-profiles row clearfix">
             <div class="col-md-3 col-sm-4" ng-repeat="item in socialProfiles">
 
-              <a class="sn-link" href ng-click="showModal()" ng-if="!item.href">
+              <a class="sn-link" href ng-click="showModal(item)" ng-if="!item.href">
                 <i class="socicon {{ item.icon }}"></i>
                 <span>{{ item.name }}</span>
               </a>
@@ -215,4 +215,3 @@
     </div>
   </div>
 </div>
-<profile-modal></profile-modal>

src/app/pages/profile/profileModal.directive.js

@@ -1,26 +0,0 @@
-/**
- * @author v.lugovsky
- * created on 16.12.2015
- */
-(function () {
-  'use strict';
-
-  angular.module('BlurAdmin.pages.profile')
-      .service('profileModal', profileModal);
-
-  /** @ngInject */
-  function profileModal() {
-    return {
-      restrict: 'EA',
-      replace: true,
-      link: function ($scope) {
-        $scope.link = "";
-        $scope.bindProfile = function(){
-          $scope.link = "";
-        };
-      },
-      templateUrl: 'app/pages/profile/profileModal.html'
-    };
-  }
-
-})();

src/app/pages/profile/profileModal.html

@@ -1,8 +1,6 @@
-<div class="modal profile-modal fade" id="profileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+<div class="modal-content">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
   <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+    <button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
       <em class="ion-ios-close-empty sn-link-close"></em>
     </button>
     <h4 class="modal-title" id="myModalLabel">Add Account</h4>
@@ -10,14 +8,13 @@
   <form name="linkForm">
     <div class="modal-body">
       <p>Paste a link to your profile into the box below</p>
+
       <div class="form-group">
         <input type="text" class="form-control" placeholder="Link to Profile" ng-model="link">
       </div>
     </div>
     <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="bindProfile()">Save changes</button>
+      <button type="button" class="btn btn-primary" ng-click="ok(link)">Save changes</button>
     </div>
   </form>
-    </div>
-  </div>
 </div>

src/app/pages/tables/TablesPageCtrl.js

@@ -11,7 +11,7 @@
   /** @ngInject */
   function TablesPageCtrl($scope, $filter) {
 
-    $scope.smartTablePageSize = 12;
+    $scope.smartTablePageSize = 10;
 
     $scope.smartTableData = [
       {

src/app/pages/tables/widgets/smartTable.html

@@ -1,12 +1,10 @@
 <div class="horizontal-scroll">
   <div class="form-group select-page-size-wrap ">
-    <select class="form-control" data-live-search="true"  title="Rows on page" selectpicker>
+    <label>Rows on page
-      <option>1</option>
+      <select class="form-control selectpicker show-tick" title="Rows on page" selectpicker
-      <option>2</option>
+              ng-model="smartTablePageSize" ng-options="i for i in [5,10,15,20,25]">
-      <option>3</option>
-      <option>4</option>
-      <option>5</option>
       </select>
+    </label>
   </div>
   <table class="table" st-table="smartTableData">
     <thead>

src/app/pages/ui/alerts/alerts.html

@@ -70,11 +70,11 @@
          ba-panel-title="Composite alerts"
          ba-panel-class="with-scroll">
       <div>
-        <div class="alert bg-danger">
+        <div class="alert bg-warning">
-          <h5>Unhandled error!</h5>
+          <h4>Warning!</h4>
-          <strong>Oh snap!</strong> Change a few things up and try submitting again.
+          <strong>Pay attention.</strong> Change a few things up and try submitting again.
           <div class="control-alert">
-            <button type="button" class="btn btn-danger ">Agree</button>
+            <button type="button" class="btn btn-warning ">Pay Attention</button>
             <button type="button" class="btn btn-default ">Ignore</button>
           </div>
         </div>

src/app/pages/ui/buttons/ButtonPageCtrl.js

@@ -9,7 +9,7 @@
       .controller('ButtonPageCtrl', ButtonPageCtrl);
 
   /** @ngInject */
-  function ButtonPageCtrl($scope) {
+  function ButtonPageCtrl($scope, $timeout) {
     $scope.progressFunction = function() {
       return $timeout(function() {}, 3000);
     };

src/app/pages/ui/buttons/widgets/dropdowns.html

@@ -1,10 +1,10 @@
 <div class="row btns-row">
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
-      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-primary " uib-dropdown-toggle>
         Primary <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -14,11 +14,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
-      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-success " uib-dropdown-toggle>
         Success <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -28,11 +28,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
-      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-info " uib-dropdown-toggle>
         Info <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -42,11 +42,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-default " uib-dropdown-toggle>
         Default <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -56,11 +56,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
-      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-warning " uib-dropdown-toggle>
         Warning <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -70,11 +70,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
-      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-danger " uib-dropdown-toggle>
         Danger <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -89,13 +89,13 @@
 
 <div class="row btns-row">
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
       <button type="button" class="btn btn-primary">Primary</button>
-      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-primary " uib-dropdown-toggle>
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -105,13 +105,13 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
       <button type="button" class="btn btn-success">Success</button>
-      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-success " uib-dropdown-toggle>
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -121,13 +121,13 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
       <button type="button" class="btn btn-info">Info</button>
-      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-info " uib-dropdown-toggle>
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -137,13 +137,13 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
       <button type="button" class="btn btn-default">Default</button>
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-default " uib-dropdown-toggle>
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -153,13 +153,13 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
       <button type="button" class="btn btn-warning">Warning</button>
-      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-warning " uib-dropdown-toggle>
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>
@@ -169,13 +169,13 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group">
+    <div class="btn-group" uib-dropdown dropdown-append-to-body>
       <button type="button" class="btn btn-danger">Danger</button>
-      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-danger " uib-dropdown-toggle>
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu">
+      <ul uib-dropdown-menu uib-dropdown-menu>
         <li><a href>Action</a></li>
         <li><a href>Another action</a></li>
         <li><a href>Something else here</a></li>

src/app/pages/ui/icons/widgets/fontAwesomeIcons.html

@@ -1,4 +1,4 @@
-<div class="row icons-list success">
+<div class="row icons-list success awesomeIcons">
   <div class="col-xs-2" ng-repeat="icon in icons.fontAwesomeIcons"><i class="fa {{icon}}"></i></div>
 </div>
 <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank" class="see-all-icons">See all Font Awesome icons</a>

src/app/pages/ui/modals/ModalsPageCtrl.js

@@ -0,0 +1,28 @@
+/**
+ * @author a.demeshko
+ * created on 18.01.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.ui.notifications')
+    .controller('ModalsPageCtrl', ModalsPageCtrl);
+
+  /** @ngInject */
+  function ModalsPageCtrl($scope, $uibModal) {
+    $scope.open = function (page, size) {
+      $uibModal.open({
+        animation: true,
+        templateUrl: page,
+        size: size,
+        resolve: {
+          items: function () {
+            return $scope.items;
+          }
+        }
+      });
+    };
+  }
+
+
+})();

src/app/pages/ui/modals/message-modals.html

@@ -1,6 +0,0 @@
-<div class="modal-buttons same-width clearfix">
-  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#successModal">Success Message</button>
-  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#infoModal">Info Message</button>
-  <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#warningModal">Warning Message</button>
-  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#dangerModal">Danger Message</button>
-</div>

src/app/pages/ui/modals/modalTemplates/basicModal.html

@@ -0,0 +1,16 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
+      <em class="ion-ios-close-empty sn-link-close"></em>
+    </button>
+    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+  </div>
+  <div class="modal-body">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
+    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" ng-click="$dismiss()">Save changes</button>
+  </div>
+</div>

src/app/pages/ui/modals/modalTemplates/dangerModal.html

@@ -0,0 +1,9 @@
+<div class="modal-content">
+  <div class="modal-header bg-danger">
+    <i class="ion-flame"></i><span> Error</span>
+  </div>
+  <div class="modal-body text-center">Your information hasn't been saved!</div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-danger" ng-click="$dismiss()">OK</button>
+  </div>
+</div>

src/app/pages/ui/modals/modalTemplates/infoModal.html

@@ -0,0 +1,9 @@
+<div class="modal-content">
+  <div class="modal-header bg-info">
+    <i class="ion-information-circled"></i><span> Information</span>
+  </div>
+  <div class="modal-body text-center">You've got a new email!</div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-info" ng-click="$dismiss()">OK</button>
+  </div>
+</div>

src/app/pages/ui/modals/modalTemplates/largeModal.html

@@ -0,0 +1,16 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
+      <em class="ion-ios-close-empty sn-link-close"></em>
+    </button>
+    <h4 class="modal-title">Modal title</h4>
+  </div>
+  <div class="modal-body">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
+    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" ng-click="$dismiss()">Save changes</button>
+  </div>
+</div>

src/app/pages/ui/modals/modalTemplates/smallModal.html

@@ -0,0 +1,17 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
+      <em class="ion-ios-close-empty sn-link-close"></em>
+    </button>
+    <h4 class="modal-title">Modal title</h4>
+  </div>
+  <div class="modal-body">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
+    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" ng-click="$dismiss()">Save changes</button>
+  </div>
+</div>
+

src/app/pages/ui/modals/modalTemplates/successModal.html

@@ -0,0 +1,10 @@
+<div class="modal-content">
+  <div class="modal-header bg-success">
+    <i class="ion-checkmark"></i><span> Success</span>
+  </div>
+  <div class="modal-body text-center">Your information has been saved successfully</div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-success" ng-click="$dismiss()">OK</button>
+  </div>
+</div>
+

src/app/pages/ui/modals/modalTemplates/warningModal.html

@@ -0,0 +1,9 @@
+<div class="modal-content">
+  <div class="modal-header bg-warning">
+    <i class="ion-android-warning"></i><span> Warning</span>
+  </div>
+  <div class="modal-body text-center">Your computer is about to explode!</div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-warning" ng-click="$dismiss()">OK</button>
+  </div>
+</div>

src/app/pages/ui/modals/modals.html

@@ -5,7 +5,15 @@
          ba-panel
          ba-panel-title="Modals"
          ba-panel-class="with-scroll">
-      <div ng-include="'app/pages/ui/modals/modalsPanel.html'"></div>
+      <div class="modal-buttons clearfix">
+        <button type="button" class="btn btn-primary" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/basicModal.html', 'md')">Default modal</button>
+        <button type="button" class="btn btn-success" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/largeModal.html', 'lg')">
+          Large modal
+        </button>
+        <button type="button" class="btn btn-warning" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/smallModal.html', 'sm')">
+          Small modal
+        </button>
+      </div>
     </div>
   </div>
 
@@ -14,7 +22,18 @@
          ba-panel
          ba-panel-title="Message Modals"
          ba-panel-class="with-scroll">
-      <div ng-include="'app/pages/ui/modals/message-modals.html'"></div>
+      <div class="modal-buttons same-width clearfix">
+        <button type="button" class="btn btn-success" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/successModal.html')">
+          Success Message
+        </button>
+        <button type="button" class="btn btn-info" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/infoModal.html')">Info Message</button>
+        <button type="button" class="btn btn-warning" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/warningModal.html')">
+          Warning Message
+        </button>
+        <button type="button" class="btn btn-danger" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/dangerModal.html')">
+          Danger Message
+        </button>
+      </div>
     </div>
     <div class="col-md-6"
          ba-panel
@@ -25,138 +44,3 @@
   </div>
 
 </div>
-
-
-<!-- Modal -->
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <em class="ion-ios-close-empty sn-link-close"></em>
-        </button>
-        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
-        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
-        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Large modal -->
-<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
-  <div class="modal-dialog modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <em class="ion-ios-close-empty sn-link-close"></em>
-        </button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
-        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
-        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Small modal -->
-<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <em class="ion-ios-close-empty sn-link-close"></em>
-        </button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
-        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
-        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Success modal -->
-<div class="modal fade message-modal success-modal" id="successModal" tabindex="-1" role="dialog"
-     aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm">
-    <div class="modal-content">
-      <div class="modal-header">
-        <i class="ion-checkmark"></i>
-      </div>
-      <div class="modal-title">Success</div>
-      <div class="modal-body">Your information has been saved successfully</div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Info modal -->
-<div class="modal fade message-modal info-modal" id="infoModal" tabindex="-1" role="dialog"
-     aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm">
-    <div class="modal-content">
-      <div class="modal-header">
-        <i class="ion-information"></i>
-      </div>
-      <div class="modal-title">Information</div>
-      <div class="modal-body">You've got a new email!</div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-info" data-dismiss="modal">OK</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Warning modal -->
-<div class="modal fade message-modal warning-modal" id="warningModal" tabindex="-1" role="dialog"
-     aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm">
-    <div class="modal-content">
-      <div class="modal-header">
-        <i class="ion-android-warning"></i>
-      </div>
-      <div class="modal-title">Warning</div>
-      <div class="modal-body">Your computer is about to explode!</div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-warning" data-dismiss="modal">OK</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Danger modal -->
-<div class="modal fade message-modal danger-modal" id="dangerModal" tabindex="-1" role="dialog"
-     aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm">
-    <div class="modal-content">
-      <div class="modal-header">
-        <i class="ion-flame"></i>
-      </div>
-      <div class="modal-title">Error</div>
-      <div class="modal-body">Your information hasn't been saved!</div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>
-      </div>
-    </div>
-  </div>
-</div>

src/app/pages/ui/modals/modals.module.js

@@ -14,6 +14,7 @@
         .state('ui.modals', {
           url: '/modals',
           templateUrl: 'app/pages/ui/modals/modals.html',
+          controller: 'ModalsPageCtrl',
           title: 'Modals',
           sidebarMeta: {
             order: 300,

src/app/pages/ui/modals/modalsPanel.html

@@ -1,5 +0,0 @@
-<div class="modal-buttons clearfix">
-  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Default modal</button>
-  <button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
-  <button type="button" class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
-</div>

src/app/pages/ui/notifications/NotificationsPageCtrl.js

@@ -9,7 +9,7 @@
       .controller('NotificationsPageCtrl', NotificationsPageCtrl);
 
   /** @ngInject */
-  function NotificationsPageCtrl($scope, toastr, toastrConfig) {
+  function NotificationsPageCtrl($scope, toastr) {
     $scope.types = ['success', 'error', 'info', 'warning'];
 
     $scope.quotes = [
@@ -75,21 +75,6 @@
       msg: "Type your message here"
     };
 
-    $scope.$watchCollection('options', function (newValue) {
-      toastrConfig.autoDismiss = newValue.autoDismiss;
-      toastrConfig.allowHtml = newValue.html;
-      toastrConfig.extendedTimeOut = parseInt(newValue.extendedTimeout, 10);
-      toastrConfig.positionClass = newValue.position;
-      toastrConfig.timeOut = parseInt(newValue.timeout, 10);
-      toastrConfig.closeButton = newValue.closeButton;
-      toastrConfig.tapToDismiss = newValue.tapToDismiss;
-      toastrConfig.progressBar = newValue.progressBar;
-      toastrConfig.newestOnTop = newValue.newestOnTop;
-      toastrConfig.maxOpened = newValue.maxOpened;
-      toastrConfig.preventDuplicates = newValue.preventDuplicates;
-      toastrConfig.preventOpenDuplicates = newValue.preventOpenDuplicates;
-    });
-
 
     $scope.clearLastToast = function () {
       var toast = openedToasts.pop();
@@ -110,7 +95,7 @@
     };
 
     $scope.openToast = function () {
-      openedToasts.push(toastr[$scope.options.type]($scope.options.msg, $scope.options.title));
+      openedToasts.push(toastr[$scope.options.type]($scope.options.msg, $scope.options.title, angular.copy($scope.options)));
       var strOptions = {};
       for (var o in  $scope.options) if (o != 'msg' && o != 'title')strOptions[o] = $scope.options[o];
       $scope.optionsStr = "toastr." + $scope.options.type + "(\'" + $scope.options.msg + "\', \'" + $scope.options.title + "\', " + JSON.stringify(strOptions, null, 2) + ")";

src/app/pages/ui/typography/typography.html

@@ -212,22 +212,13 @@
         <div class="row">
           <div class="col-sm-4">
             <h4>Column heading example</h4>
-          </div>
-          <div class="col-sm-4">
-            <h4>Yet another column heading example</h4>
-          </div>
-          <div class="col-sm-4">
-            <h4>Third column heading example</h4>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-4">
             <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo04.png' | appImage )}}" alt=""/></div>
             <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
               maecenas</p>
             <a href class="learn-more">Lean more</a>
           </div>
           <div class="col-sm-4">
+            <h4>Yet another column heading example</h4>
             <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo05.png' | appImage )}}" alt=""/></div>
             <p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
               in
@@ -235,6 +226,7 @@
             <a href class="learn-more">Lean more</a>
           </div>
           <div class="col-sm-4">
+            <h4>Third column heading example</h4>
             <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo06.png' | appImage )}}" alt=""/></div>
             <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
             <a href class="learn-more">Lean more</a>

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/theme/components/msgCenter/MsgCenterCtrl.js

@@ -12,20 +12,16 @@
   function MsgCenterCtrl($scope, $sce) {
     $scope.users = {
       0: {
-        name: 'Vladimir',
+        name: 'Vlad',
-        image: 'img/pic-vova.png'
       },
       1: {
-        name: 'Konstantin',
+        name: 'Kostya',
-        image: 'img/pic-kostia.png'
       },
       2: {
         name: 'Andrey',
-        image: 'img/pic-andrey.png'
       },
       3: {
-        name: 'Anastasiya',
+        name: 'Nasta',
-        image: 'img/pic-nasta.png'
       }
     };
 
@@ -41,7 +37,7 @@
         time: '2 hrs ago'
       },
       {
-        image: 'img/shopping-cart.svg',
+        image: 'assets/img/shopping-cart.svg',
         template: 'New orders received.',
         time: '5 hrs ago'
       },
@@ -56,7 +52,7 @@
         time: '2 days ago'
       },
       {
-        image: 'img/comments.svg',
+        image: 'assets/img/comments.svg',
         template: 'New comments on your post.',
         time: '3 days ago'
       },

src/app/theme/components/msgCenter/msgCenter.html

@@ -1,12 +1,12 @@
 <ul class="al-msg-center clearfix">
-  <li class="dropdown">
+  <li uib-dropdown>
-    <a href class="dropdown-toggle" data-toggle="dropdown">
+    <a href uib-dropdown-toggle>
       <i class="fa fa-bell-o"></i><span>5</span>
 
       <div class="notification-ring"></div>
     </a>
 
-    <div class="dropdown-menu top-dropdown-menu">
+    <div uib-dropdown-menu class="top-dropdown-menu">
       <i class="dropdown-arr"></i>
 
       <div class="header clearfix">
@@ -16,7 +16,7 @@
       </div>
       <div class="msg-list">
         <a href class="clearfix" ng-repeat="msg in notifications">
-          <div class="img-area"><img ng-src="{{ users[msg.userId].image || msg.image }}"></div>
+          <div class="img-area"><img ng-src="{{::( msg.image ||  (users[msg.userId].name | profilePicture) )}}"></div>
           <div class="msg-area">
             <div ng-bind-html="getMessage(msg)"></div>
             <span>{{ msg.time }}</span>
@@ -26,12 +26,12 @@
       <a href>See all notifications</a>
     </div>
   </li>
-  <li class="dropdown">
+  <li uib-dropdown>
-    <a href class="msg dropdown-toggle" data-toggle="dropdown">
+    <a href class="msg" uib-dropdown-toggle>
       <i class="fa fa-envelope-o"></i><span>5</span>
       <div class="notification-ring"></div>
     </a>
-    <div class="dropdown-menu top-dropdown-menu">
+    <div uib-dropdown-menu class="top-dropdown-menu">
       <i class="dropdown-arr"></i>
       <div class="header clearfix">
         <strong>Messages</strong>
@@ -40,7 +40,7 @@
       </div>
       <div class="msg-list">
         <a href class="clearfix" ng-repeat="msg in messages">
-          <div class="img-area"><img ng-src="{{ users[msg.userId].image || msg.image }}"></div>
+          <div class="img-area"><img ng-src="{{::( users[msg.userId].name | profilePicture )}}"></div>
           <div class="msg-area">
             <div>{{ msg.text }}</div>
             <span>{{ msg.time }}</span>

src/app/theme/components/pageTop/pageTop.html

@@ -8,23 +8,23 @@
   </div>
 
   <div class="user-profile clearfix">
-    <div class="al-user-profile dropdown">
+    <div class="al-user-profile" uib-dropdown>
-      <a href class="dropdown-toggle" data-toggle="dropdown">
+      <a uib-dropdown-toggle>
         <img ng-src="{{::( 'Nasta' | profilePicture )}}">
       </a>
-      <div class="dropdown-menu top-dropdown-menu profile-dropdown">
+      <ul  class="top-dropdown-menu profile-dropdown" uib-dropdown-menu>
-        <i class="dropdown-arr"></i>
+        <li><i class="dropdown-arr"></i></li>
-        <a href="#/profile"><i class="fa fa-user"></i>Profile</a>
+        <li><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
-        <a href><i class="fa fa-cog"></i>Settings</a>
+        <li><a href><i class="fa fa-cog"></i>Settings</a></li>
-        <a href class="signout"><i class="fa fa-power-off"></i>Sign out</a>
+        <li><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
-      </div>
+      </ul>
     </div>
     <msg-center></msg-center>
     <a href class="refresh-data"><i class="fa fa-refresh"></i></a>
 
-    <div class="dropdown al-skin-dropdown">
+    <div class="al-skin-dropdown" uib-dropdown>
-      <a href class="dropdown-toggle icon-palette" data-toggle="dropdown"></a>
+      <a href class=" icon-palette" uib-dropdown-toggle></a>
-      <div class="dropdown-menu dropdown-menu-right" tpl-skin-panel></div>
+      <div class=" dropdown-menu-right" uib-dropdown-menu tpl-skin-panel></div>
     </div>
   </div>
 </div>

src/app/tplSkin/tplSkin.constants.js

@@ -11,37 +11,43 @@
     {
       name: 'Default',
       bodyClass: '',
-      thumbnailUrl: 'img/01_default.jpg',
+      thumbnailUrl: 'assets/img/app/skin-thumbnails/01_default.jpg',
+      panelType: "panel-white",
       chartColorProfile: 'whitePanel'
     },
     {
       name: 'Peachy',
       bodyClass: SKIN_CLASS_PREFIX + '-peachy',
-      thumbnailUrl: 'img/04_peachy.jpg',
+      thumbnailUrl: 'assets/img/app/skin-thumbnails/04_peachy.jpg',
+      panelType: "panel-white",
       chartColorProfile: 'whitePanel'
     },
     {
       name: 'Blue',
       bodyClass: SKIN_CLASS_PREFIX + '-blue',
-      thumbnailUrl: 'img/03_blue.jpg',
+      thumbnailUrl: 'assets/img/app/skin-thumbnails/03_blue.jpg',
+      panelType: "panel-white",
       chartColorProfile: 'whitePanel'
     },
     {
       name: 'Material',
       bodyClass: SKIN_CLASS_PREFIX + '-material',
-      thumbnailUrl: 'img/05_material.jpg',
+      thumbnailUrl: 'assets/img/app/skin-thumbnails/05_material.jpg',
+      panelType: "panel-white",
       chartColorProfile: 'whitePanel'
     },
     {
       name: 'Transblue (beta)',
       bodyClass: SKIN_CLASS_PREFIX + '-transblue',
-      thumbnailUrl: 'img/06_transblue.jpg',
+      panelType: "panel-blur",
+      thumbnailUrl: 'assets/img/app/skin-thumbnails/06_transblue.jpg',
       chartColorProfile: 'transparent'
     },
     {
       name: 'Transparent (beta)',
       bodyClass: SKIN_CLASS_PREFIX + '-transparent',
-      thumbnailUrl: 'img/02_transparent.jpg',
+      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/404.scss

@@ -27,7 +27,7 @@ body {
   text-align: center;
 
   h1 {
-    font-weight: 100;
+    font-weight: $font-light;
     margin-bottom: 32px;
   }
   p {

src/sass/app/_email.scss

@@ -13,7 +13,7 @@
   width: 300px;
   .mail-navigation {
     cursor: pointer;
-    font-weight: 100;
+    font-weight: $font-light;
     font-size: 16px;
     padding: 10px;
     margin-left: 22px;
@@ -49,7 +49,7 @@
     .btn {
       width: 150px;
       color: white;
-      font-weight: 100;
+      font-weight: $font-light;
       background-color: $dribble-color;
     }
   }
@@ -75,7 +75,7 @@
 .add-label-container {
   padding-left: 10px;
   font-size: 16px;
-  font-weight: 100;
+  font-weight: $font-light;
   .label-input-stub {
     margin-left: 5px;
   }
@@ -88,11 +88,11 @@
   margin-left: 10px;
 }
 
-.messages-control {
+.mail-messages-control {
   padding: 10px;
 
-  .dropdown-menu {
+  ul.dropdown-menu {
-    margin-left: 10px;
+    margin-top: 5px;
   }
 
   .btn {
@@ -102,14 +102,13 @@
 
   .more-button {
     width: 60px;
-
+    font-size: 14px;
-    font-size: 12px;
+    padding: 6px 5px;
-    font-weight: 100;
   }
 
   span.select-all-label {
     font-size: 13px;
-    font-weight: 100;
+    font-weight: $font-light;
   }
 }
 
@@ -224,7 +223,7 @@
 .mail-panel .tag {
   text-transform: lowercase;
   font-size: 11px;
-  font-weight: 100;
+  font-weight: $font-light;
   width: 45px;
   cursor: pointer;
   display: inline-block;
@@ -306,7 +305,7 @@
     }
     .phone {
       font-size: 19px;
-      font-weight: 200;
+      font-weight: $font-light;
       vertical-align: super;
     }
     .ion-email {
@@ -316,7 +315,7 @@
     }
     .email {
       font-size: 16px;
-      font-weight: 200;
+      font-weight: $font-light;
       vertical-align: super;
     }
   }
@@ -327,12 +326,12 @@
     }
     .position {
       font-size: 20px;
-      font-weight: 100;
+      font-weight: $font-light;
     }
 
     .address {
       font-size: 16px;
-      font-weight: 100;
+      font-weight: $font-light;
     }
   }
 }
@@ -342,7 +341,7 @@
   .subject {
     font-size: 20px;
     margin-right: 10px;
-    font-weight: 100;
+    font-weight: $font-light;
   }
   .control-icons {
     float: right;
@@ -359,7 +358,7 @@
 
 .message-body {
   margin: 20px 0;
-  font-weight: 100;
+  font-weight: $font-light;
   line-height: 18px;
   p {
     margin-bottom: 0;
@@ -378,7 +377,7 @@
     margin-left: 3px;
     position: relative;
     top: -3px;
-    font-weight: 100;
+    font-weight: $font-light;
   }
 
   .file-links {
@@ -396,7 +395,7 @@
   margin-left: 20px;
   color: white;
   font-size: 16px;
-  font-weight: 100;
+  font-weight: $font-light;
   padding-left: 40px;
   padding-right: 40px;
   background-color: $dribble-color;
@@ -584,7 +583,7 @@
   .add-label-container {
     padding-left: 0;
     font-size: 13px;
-    font-weight: 100;
+    font-weight: $font-light;
   }
 
 }
@@ -592,7 +591,7 @@
 .compose-header {
   padding: 8px 3px 8px 10px;
   color: white;
-  font-weight: 100;
+  font-weight: $font-light;
   font-size: 13px;
   background-color: $github-color;
 }
@@ -630,7 +629,7 @@
     color: white;
     padding: 2px 10px;
     margin: 3px;
-    font-weight: 100;
+    font-weight: $font-light;
   }
   .btn-default {
     background-color: transparent;

src/sass/app/_form.scss

@@ -34,7 +34,7 @@
   label {
     margin-bottom: 5px;
     color: $default-text;
-    font-weight: normal;
+    font-weight: $font-normal;
     font-size: 13px;
   }
 }
@@ -85,6 +85,7 @@ textarea.form-control {
 
 .modal-content {
   border-radius: 0;
+  color: $default-text;
 }
 
 @mixin setSwitchBorder($color) {
@@ -217,14 +218,14 @@ label.custom-checkbox {
     display: inline-block;
     margin: 0;
     line-height: 16px;
-    font-weight: normal;
+    font-weight: $font-normal;
     cursor: pointer;
     padding-left: 22px;
     width: 100%;
     &:before {
       cursor: pointer;
       font-family: fontAwesome;
-      font-weight: 400;
+      font-weight: $font-normal;
       font-size: 12px;
       color: $input-border-focus;
       content: "\a0";

src/sass/app/_iconsPage.scss

@@ -10,7 +10,7 @@
     margin-bottom: 32px;
   }
   i {
-    font-weight: normal;
+    font-weight: $font-normal;
     font-size: 18px;
     cursor: pointer;
   }
@@ -33,6 +33,10 @@ a.see-all-icons {
   float: right;
 }
 
+.awesomeIcons{
+  height: 308px;
+}
+
 .kameleon-row {
   width: 20%;
   float: left;

src/sass/app/_modalNotifications.scss

@@ -7,7 +7,7 @@
 }
 
 .toast-title {
-  font-weight: bold;
+  font-weight: $font-bold;
 }
 
 .toast-message {
@@ -30,7 +30,7 @@
   top: -0.3em;
   float: right;
   font-size: 20px;
-  font-weight: bold;
+  font-weight: $font-bold;
   color: #ffffff;
   opacity: 0.8;
   &:hover, &:focus {

src/sass/app/_tplSkinPanel.scss

@@ -3,14 +3,13 @@
   .tpl-skin-option {
     padding: 10px;
     line-height: 83px;
-
+    color: $default-text;
     &:hover {
       cursor: pointer;
       background-color: $primary;
-      color: white;
     }
     + .tpl-skin-option {
-      border-top: 1px solid #999;
+      border-top: 1px solid $border-light;
     }
   }
   .skin-thumbnail {

src/sass/app/_typography.scss

@@ -18,17 +18,14 @@ a {
 
 h1 {
   font-size: 32px;
-  font-weight: 400;
 }
 
 h2 {
   font-size: 24px;
-  font-weight: 400;
 }
 
 h3 {
   font-size: 20px;
-  font-weight: 400;
 }
 
 h4 {
@@ -69,7 +66,7 @@ h5 {
   text-align: center;
   margin: 0;
   width: 100%;
-  font-weight: 100;
+  font-weight: $font-light;
 }
 
 .heading-widget {
@@ -77,12 +74,12 @@ h5 {
 
   h1, h2, h3, h4, h5, h6 {
     width: 100%;
-    font-weight: 100;
+    font-weight: $font-light;
   }
 
   p {
     line-height: 16px;
-    font-weight: 100;
+    font-weight: $font-normal;
   }
 }
 
@@ -103,11 +100,11 @@ h5 {
   }
 
   .light-text {
-    font-weight: 100;
+    font-weight: $font-light;
   }
 
   .regular-text {
-    font-weight: 600;
+    font-weight: $font-normal;
   }
 
   .upper-text {
@@ -115,14 +112,14 @@ h5 {
   }
 
   .bold-text {
-    font-weight: 900;
+    font-weight: $font-bold;
   }
 
   .small-text {
     padding: 5px 0 0 0;
     p {
       font-size: 9px;
-      font-weight: 100;
+      font-weight: $font-light;
       line-height: 10px;
     }
   }
@@ -131,7 +128,7 @@ h5 {
 .color-widget {
   text-align: center;
   font-size: 14px;
-  font-weight: 300;
+  font-weight: $font-normal;
   p {
     line-height: 17px;
   }
@@ -166,10 +163,9 @@ h5 {
 
 .lists-widget {
 
-  font-weight: 100;
+  font-weight: $font-normal;
   .list-header {
     width: 100%;
-    font-weight: 100;
     text-align: center;
   }
 
@@ -310,7 +306,7 @@ p.small-text {
 
 a.learn-more {
   font-size: 14px;
-  font-weight: bold;
+  font-weight: $font-bold;
   text-decoration: none;
   line-height: 24px;
 }
@@ -360,7 +356,7 @@ a.learn-more {
   color: #ffffff;
 
   h1 {
-    font-weight: bold;
+    font-weight: $font-bold;
     width: 100%;
     color: #ffffff;
     margin-bottom: 10px;
@@ -368,7 +364,7 @@ a.learn-more {
   p {
     font-size: 24px;
     line-height: 30px;
-    font-weight: 300;
+    font-weight: $font-light;
     color: $primary;
     margin-bottom: 0px;
   }
@@ -429,7 +425,7 @@ a.learn-more {
   padding: 0;
   margin-bottom: 50px;
 
-  .panel-content{
+  .panel-body{
     padding: 0;
   }
 }

src/sass/app/maps/_leaflet.scss

@@ -249,7 +249,7 @@
     height: 20px;
     line-height: 18px;
     font-family: Lato;
-    font-weight: 100;
+    font-weight: $font-thin;
     &:hover {
       background-color: $danger;
     }
@@ -470,7 +470,7 @@
   font: 16px/14px Tahoma, Verdana, sans-serif;
   color: #c3c3c3;
   text-decoration: none;
-  font-weight: bold;
+  font-weight: $font-bold;
   background: transparent;
 }
 

src/sass/auth.scss

@@ -24,7 +24,7 @@ html {
   color: #fff;
   padding: 32px;
   h1 {
-    font-weight: 100;
+    font-weight: $font-light;
     margin-bottom: 28px;
     text-align: center;
   }

src/sass/theme/_socicon.scss

@@ -6,7 +6,7 @@
   url('#{$fonts-root}socicon.woff2') format('woff2'),
   url('#{$fonts-root}socicon.ttf') format('truetype'),
   url('#{$fonts-root}socicon.svg#sociconregular') format('svg');
-  font-weight: normal;
+  font-weight: $font-normal;
   font-style: normal;
   text-transform: initial;
 }
@@ -21,7 +21,7 @@
   display: inline-block;
   font-family: 'socicon';
   font-style: normal;
-  font-weight: normal;
+  font-weight: $font-normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
 }

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

@@ -55,13 +55,11 @@ $panel-heading-font-size: 16px;
 }
 
 .panel-title {
-  font-weight: 400;
+  font-weight: $font-normal;
   //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;

src/sass/theme/components/_baWizard.scss

@@ -22,7 +22,7 @@
     display: table-cell;
     line-height: 1;
     text-align: center;
-    font-weight: 100;
+    font-weight: $font-light;
     font-size: 18px;
     &.active {
       color: $primary-dark;

src/sass/theme/components/_contentTop.scss

@@ -4,7 +4,7 @@
 }
 
 h1.al-title {
-  font-weight: normal;
+  font-weight: $font-normal;
   color: #ffffff;
   float: left;
   width: auto;
@@ -22,7 +22,7 @@ h1.al-title {
   padding-top: 11px;
   li {
     font-size: 18px;
-    font-weight: 100;
+    font-weight: $font-light;
   }
 }
 

src/sass/theme/components/_msgCenter.scss

@@ -203,14 +203,14 @@
 
   &.profile-dropdown {
     width: 145px;
-    top: 47px;
+    top: 55px;
     right: -25px;
-    & > a {
+    a {
       text-align: left;
       border: none;
       text-decoration: none;
       color: $default-text;
-      padding-left: 16px;
+      padding: 4px 16px 4px 20px;
       &.signout {
         border-top: 1px solid $border-light;
       }
@@ -222,7 +222,7 @@
       }
     }
     i.dropdown-arr {
-      right: 33px;
+      right: 25px;
     }
   }
 

src/sass/theme/components/_pageTop.scss

@@ -58,7 +58,7 @@ a.refresh-data {
   color: #ffffff;
   font-size: 13px;
   text-decoration: none;
-  font-weight: normal;
+  font-weight: $font-normal;
   float: right;
   margin-top: 13px;
   margin-right: 26px;

src/sass/theme/conf/_variables.scss

@@ -66,3 +66,8 @@ $default-animation-style: ease-out;
 $assets-root: '../assets/';
 $images-root: $assets-root + 'img/';
 $fonts-root: $assets-root + 'fonts/';
+$font-thin: 100;
+$font-light: 300;
+$font-normal: 400;
+$font-bold: 700;
+$font-ultraBold: 900;

src/sass/theme/dashboard/_blurFeed.scss

@@ -135,9 +135,10 @@
   }
 
   .message-header {
+    font-size: 12px;
     padding-bottom: 5px;
     .author {
-      font-weight: 600;
+      font-weight: $font-bold;
       padding-right: 5px;
     }
   }
@@ -170,13 +171,10 @@
     padding-top: 5px;
     color: $help-text;
     .post-time {
-      display: inline-block;
+      float: left;
-      width: 50%;
     }
     .ago-time {
-      display: inline-block;
+      float: right;
-      width: 50%;
-      text-align: right;
     }
   }
 

src/sass/theme/dashboard/_calendar.scss

@@ -1,3 +1,6 @@
+#calendar.blurCalendar{
+ font-size: 12px;
+}
 .fc {
   direction: ltr;
   text-align: left;
@@ -16,8 +19,8 @@
     }
     .fc-icon {
       position: relative;
-      top: .05em;
+      top: 0;
-      margin: 0 .1em;
+      margin: 0;
     }
   }
 
@@ -133,12 +136,14 @@
 
 .fc-icon-left-single-arrow:after {
   content: "\02039";
-  font-weight: bold;
+  font-weight: $font-bold;
+  font-size: 100%;
 }
 
 .fc-icon-right-single-arrow:after {
   content: "\0203A";
-  font-weight: bold;
+  font-weight: $font-bold;
+  font-size: 100%;
 }
 
 .fc-icon-left-double-arrow:after {
@@ -321,7 +326,7 @@
   line-height: 1.3;
   border: 1px solid $primary;
   background-color: $primary;
-  font-weight: normal;
+  font-weight: $font-normal;
 }
 
 .fc-event,
@@ -365,7 +370,7 @@
 }
 
 .fc-day-grid-event .fc-time {
-  font-weight: bold;
+  font-weight: $font-bold;
 }
 
 .fc-day-grid-event .fc-resizer {
@@ -541,7 +546,7 @@ a.fc-more {
 }
 
 .ui-widget td.fc-axis {
-  font-weight: normal;
+  font-weight: $font-normal;
 }
 
 .fc-time-grid-container,

src/sass/theme/skins/_03_blue.scss

@@ -1,3 +1,3 @@
 body.badmin-blue {
-  background-image: url(../img/blue-bg.jpg);
+  background-image: url(../../../assets/img/blue-bg.jpg);
 }

src/sass/theme/skins/_04_peachy.scss

@@ -1,3 +1,3 @@
 body.badmin-peachy {
-  background-image: url(../img/peachy-bg.jpg);
+  background-image: url(../../../assets/img/peachy-bg.jpg);
 }

src/sass/theme/skins/_06_transblue.scss

@@ -1,5 +1,5 @@
 body.badmin-transblue {
-  background-image: url(../img/transblue-bg.jpg);
+  background-image: url(../../../assets/img/transblue-bg.jpg);
 
   @include overrideColors(#fff);
   @include overridePanelBg(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));