sidebar refactoring, fix amcharts pie chart on small screens, fix top…

… right dashboard widget, etc.
bilazik · Sep 24, 2015 · f3d20d6 · f3d20d6
1 parent d4a61e2
commit f3d20d6
Show file tree

Hide file tree

Showing 16 changed files with 168 additions and 141 deletions.
diff --git a/bower.json b/bower.json
@@ -15,7 +15,6 @@
     "tests"
   ],
   "dependencies": {
-    "AngularHammer": "ryanmullins-angular-hammer#~2.1.10",
     "Chart.js": "~1.0.2",
     "Ionicons": "ionicons#~2.0.1",
     "amcharts": "~3.15.2",
@@ -26,6 +25,7 @@
     "angular-slimscroll": "~1.1.5",
     "angular-smart-table": "~2.1.3",
     "angular-toastr": "~1.5.0",
+    "angular-touch": "~1.4.6",
     "angular-ui-sortable": "~0.13.4",
     "animate.css": "~3.4.0",
     "bootstrap": "~3.3.5",
@@ -34,7 +34,6 @@
     "bootstrap-tagsinput": "~0.5.0",
     "font-awesome": "fontawesome#~4.4.0",
     "fullcalendar": "~2.4.0",
-    "hammerjs": "hammer.js#~2.0.4",
     "highlight": "~8.8.0",
     "jquery": "~2.1.4",
     "jquery-ui": "~1.11.4",

diff --git a/gulpfile.js b/gulpfile.js
@@ -81,6 +81,7 @@ gulp.task('js', function () {
     'bower_components/angular/angular.min.js',
     'src/assets/js/global-variables.js',
     'bower_components/angular-route/angular-route.min.js',
+    'bower_components/angular-touch/angular-touch.min.js',
     'bower_components/jquery-ui/jquery-ui.min.js',
     'bower_components/bootstrap/dist/js/bootstrap.min.js',
     'bower_components/highlight/src/highlight.js',
@@ -89,7 +90,7 @@ gulp.task('js', function () {
     'bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js',
     'bower_components/moment/min/moment.min.js',
     'bower_components/amcharts/dist/amcharts/amcharts.js',
-    'bower_components/amcharts/dist/amcharts/plugins/responsive/responsive.js',
+    'bower_components/amcharts/dist/amcharts/plugins/responsive/responsive.min.js',
     'bower_components/amcharts/dist/amcharts/serial.js',
     'bower_components/amcharts/dist/amcharts/funnel.js',
     'bower_components/amcharts/dist/amcharts/pie.js',

diff --git a/src/app/app.js b/src/app/app.js
@@ -3,6 +3,7 @@
 var blurAdminApp = angular.module('BlurAdmin', [
   'ui.sortable',
   'ngRoute',
+  'ngTouch',
   'BlurAdmin.dashboard',
   'BlurAdmin.buttonsPage',
   'BlurAdmin.chartsPage',
@@ -16,8 +17,7 @@ var blurAdminApp = angular.module('BlurAdmin', [
   'BlurAdmin.typographyPage',
   'toastr',
   'smart-table',
-  'ui.slimscroll',
-  'hmTouchEvents'
+  'ui.slimscroll'
 ]).config(['$routeProvider', 'toastrConfig', function ($routeProvider, toastrConfig) {
   $routeProvider.otherwise({redirectTo: '/dashboard'});
 

diff --git a/src/app/common/controllers/mainCtrl.js b/src/app/common/controllers/mainCtrl.js
@@ -8,4 +8,6 @@ blurAdminApp.controller('mainCtrl', ['$scope', '$timeout', function ($scope, $ti
   $timeout(function () {
     pageLoaded = true;
   }, 4000);
+
+  $scope.isMenuCollapsed = window.innerWidth <= resWidthCollapseSidebar;
 }]);
diff --git a/src/app/components/sidebar/_sidebar.scss b/src/app/components/sidebar/_sidebar.scss
@@ -116,11 +116,6 @@ a.al-sidebar-list-link {
   }
 }
 
-.sidebar-overlap {
-  background: rgba(0, 0, 0, .75);
-  @extend .sidebar-full-width;
-}
-
 .slimScrollBar, .slimScrollRail {
   border-radius: 0px !important;
   width: 4px !important;
@@ -157,6 +152,20 @@ a.al-sidebar-list-link {
   }
 }
 
+@mixin layout-collapsed() {
+  .al-main {
+    margin-left: 70px;
+  }
+
+  .al-footer {
+    padding-left: 83px
+  }
+
+  .back-top {
+    left: 0;
+  }
+}
+
 @mixin default-sublist() {
   margin: 0;
   padding: 0;
@@ -299,66 +308,84 @@ a.al-sidebar-list-link {
   }
 }
 
-.collapsed-sidebar {
-  @include layout-collapsed();
-  @include sidebar-collapsed();
-}
+@mixin sidebar-overlap() {
+  .al-sidebar {
+    width: $sidebar-width;
+    background: rgba(0, 0, 0, .75);
+    a.al-logo {
+      display: block;
+      span {
+        padding-left: 0;
+      }
+    }
+    a.al-logo-small-rez {
+      display: none;
+    }
+    .fa-angle-down, .fa-angle-up {
+      opacity: 1;
+    }
 
-@media (max-width: 1120px) and (min-width: $resXS) {
-  body {
-    @include layout-collapsed();
+    .al-sidebar-list-block {
+      display: block;
+    }
+
+    .al-sidebar-sublist {
+      @include default-sublist();
+      top: auto;
+      left: auto;
+      background: none;
+      width: auto;
+      overflow: visible;
+      transition: none;
+    }
+
+    a.collapse-menu-link {
+      @include bg-translucent-dark(0.75);
+      i {
+        transform: rotate(0deg);
+      }
+    }
+
+    .sidebar-hover-elem, .sidebar-select-elem {
+      left: $sidebar-width - 4;
+    }
+
+    .search {
+      width: 162px;
+    }
   }
-  @include sidebar-collapsed();
 }
 
-@media (max-width: $resXS) {
-  @include sidebar-hidden();
-  .collapsed-sidebar {
-    @include sidebar-hidden();
+@media (min-width: 1120px) {
+  .menu-collapsed {
+    @include layout-collapsed();
   }
 }
 
-.sidebar-full-width {
-  width: $sidebar-width;
-  a.al-logo {
-    display: block;
-    span {
-      padding-left: 0;
-    }
-  }
-  a.al-logo-small-rez {
-    display: none;
-  }
-  .fa-angle-down, .fa-angle-up {
-    opacity: 1;
+@media (min-width: $resXS) {
+  .menu-collapsed {
+    @include sidebar-collapsed();
   }
+}
 
-  .al-sidebar-list-block {
-    display: block;
-  }
+@media (max-width: 1120px) and (min-width: $resXS) {
+  @include layout-collapsed();
+}
 
-  .al-sidebar-sublist {
-    @include default-sublist();
-    top: auto;
-    left: auto;
-    background: none;
-    width: auto;
-    overflow: visible;
-    transition: none;
+@media (max-width: 1120px) {
+  .menu-expand {
+    @include sidebar-overlap();
   }
+}
 
-  a.collapse-menu-link {
-    @include bg-translucent-dark(0.75);
-    i {
-      transform: rotate(0deg);
-    }
+@media (max-width: $resXS) {
+  .menu-collapsed {
+    @include sidebar-hidden();
   }
-
-  .sidebar-hover-elem, .sidebar-select-elem {
-    left: $sidebar-width - 4;
+  .al-main {
+    margin-left: 0;
   }
-
-  .search {
-    width: 162px;
+  .al-footer {
+    padding-left: 0;
   }
 }
diff --git a/src/app/components/sidebar/sidebar.html b/src/app/components/sidebar/sidebar.html
@@ -1,24 +1,23 @@
-<aside class="al-sidebar" ng-class="{'sidebar-overlap': showSidebar}">
+<aside class="al-sidebar" ng-swipe-right="menuExpand()" ng-swipe-left="menuCollapse()">
   <a href="#/dashboard" class="al-logo clearfix">
     B<span>lur Admin</span>
   </a>
 
-  <a href class="collapse-menu-link clearfix" ng-click="menuExpand()">
+  <a href class="collapse-menu-link clearfix" ng-click="menuToggle()">
     <i class="fa fa-angle-double-left"></i>
   </a>
 
   <div class="search">
-    <!--<label for="searchInput" ng-click="openSidebar()"><i class="ion-ios-search-strong"></i></label>-->
     <i class="ion-ios-search-strong" ng-click="startSearch()"></i>
-    <input id="searchInput" type="text" placeholder="Search for..." ng-keypress="search($event)" ng-blur="collapseSidebar()">
+    <input id="searchInput" type="text" placeholder="Search for..." ng-keypress="search($event)" ng-blur="collapseSidebarIfSmallRes()">
   </div>
 
   <div class="al-sidebar-list-block" ng-mouseleave="hideHoverElement()">
     <ul class="al-sidebar-list" slimscroll="{height: '100%'}">
       <li ng-repeat="item in menuItems" class="al-sidebar-list-item"
           ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}" ng-mouseover="hoverItem($event, item)">
 
-        <a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link" ng-click="collapseSidebar()">
+        <a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link" ng-click="collapseSidebarIfSmallRes()">
           <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
         </a>
 
@@ -31,7 +30,7 @@
 
         <ul ng-if="item.subMenu" class="al-sidebar-sublist" ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
           <li ng-repeat="subitem in item.subMenu" ng-class="{selected: subitem.selected}">
-            <a href="{{ subitem.root }}" ng-click="collapseSidebar()">{{ subitem.title }}</a>
+            <a href="{{ subitem.root }}" ng-click="collapseSidebarIfSmallRes()">{{ subitem.title }}</a>
           </li>
         </ul>
       </li>

diff --git a/src/app/components/sidebar/sidebar.js b/src/app/components/sidebar/sidebar.js
@@ -4,13 +4,10 @@ blurAdminApp.directive('sidebar', function () {
   return {
     restrict: 'E',
     templateUrl: 'app/components/sidebar/sidebar.html',
+    scope: {
+      isMenuCollapsed: '='
+    },
     controller: ['$scope', '$element', '$window', '$timeout', '$location', function ($scope, $element, $window, $timeout, $location) {
-
-      var resWidthCollapseSidebar = 1120;
-      var resWidthHideSidebar = 500;
-      var body = $('body');
-      var collapsedClass = 'collapsed-sidebar';
-
       $scope.menuItems = [
         {
           title: 'Dashboard',
@@ -118,34 +115,33 @@ blurAdminApp.directive('sidebar', function () {
         selectMenuItem();
       });
 
-      $scope.menuExpand = function () {
-        if (window.innerWidth > resWidthCollapseSidebar) {
-          body.toggleClass(collapsedClass);
-          $scope.showSidebar = false;
-        } else {
-          body.removeClass(collapsedClass);
-          if (!$scope.selectElemTop) {
-            changeSelectElemTopValue();
-          }
+      $scope.menuExpand = function() {
+        $scope.isMenuCollapsed = false;
+      };
 
-          if ($scope.showSidebar) {
-            $scope.showSidebar = false;
-          } else {
-            $timeout(function () {
-              $scope.showSidebar = true;
-            }, 20);
-          }
+      $scope.menuCollapse = function() {
+        $scope.isMenuCollapsed = true;
+      };
+
+      $scope.menuToggle = function () {
+        $scope.isMenuCollapsed = !$scope.isMenuCollapsed;
+
+        if (!$scope.isMenuCollapsed && !$scope.selectElemTop) {
+          changeSelectElemTopValue();
         }
       };
 
-      function isSidebarCollapsed() {
-        return body.hasClass(collapsedClass) || (!$scope.showSidebar && window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar);
-      }
+      // watch window resize to change menu collapsed state if needed
+      $(window).resize(function(){
+        $scope.$apply(function(){
+          $scope.isMenuCollapsed = $(window).width() <= resWidthCollapseSidebar;
+        });
+      });
 
       $scope.toggleSubMenu = function ($event, item) {
         var submenu = $($event.currentTarget).next();
 
-        if (isSidebarCollapsed()) {
+        if ($scope.isMenuCollapsed) {
           if (!item.slideRight) {
             $timeout(function () {
               item.slideRight = true;
@@ -181,9 +177,9 @@ blurAdminApp.directive('sidebar', function () {
         $scope.showHoverElem = false;
       };
 
-      $scope.collapseSidebar = function() {
+      $scope.collapseSidebarIfSmallRes = function() {
         if (window.innerWidth <= resWidthCollapseSidebar) {
-          $scope.showSidebar = false;
+          $scope.isMenuCollapsed = true;
         }
       };
 
@@ -192,26 +188,19 @@ blurAdminApp.directive('sidebar', function () {
       }
 
       $scope.startSearch = function() {
-        if (window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar) {
-          $scope.showSidebar = true;
+        if ($scope.isMenuCollapsed) {
+          $scope.isMenuCollapsed = false;
           $timeout(function(){
             focusSearchInput();
           }, 900);
         } else {
-          if (body.hasClass(collapsedClass)) {
-            body.removeClass(collapsedClass);
-            $timeout(function(){
-              focusSearchInput();
-            }, 900);
-          } else {
-            focusSearchInput();
-          }
+          focusSearchInput();
         }
       };
 
       $scope.search = function(event) {
         if (event.which === 13) {
-          $scope.collapseSidebar();
+          $scope.collapseSidebarIfSmallRes();
         }
       }
     }]

diff --git a/src/app/pages/charts/_chartsPage.scss b/src/app/pages/charts/_chartsPage.scss
@@ -13,12 +13,9 @@
   height: 360px;
 }
 
-#pieChart {
-  height: 400px;
-}
-
 #pieChart {
   max-width: 1120px;
+  height: 400px;
 }
 
 .amcharts-pie-slice {