ux: sidemenu toggling

public/app/core/components/grafana_app.ts

@@ -70,31 +70,19 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
     restrict: 'E',
     controller: GrafanaCtrl,
     link: (scope, elem) => {
-      var ignoreSideMenuHide;
+      var sidemenuOpen;
       var body = $('body');
 
       // see https://github.com/zenorocha/clipboard.js/issues/155
       $.fn.modal.Constructor.prototype.enforceFocus = function() {};
 
-      // handle sidemenu open state
+      sidemenuOpen = scope.contextSrv.sidemenu;
+      body.toggleClass('sidemenu-open', sidemenuOpen);
+
       scope.$watch('contextSrv.sidemenu', newVal => {
-        if (newVal !== undefined) {
+        if (sidemenuOpen !== scope.contextSrv.sidemenu) {
+          sidemenuOpen = scope.contextSrv.sidemenu;
           body.toggleClass('sidemenu-open', scope.contextSrv.sidemenu);
-          if (!newVal) {
-            contextSrv.setPinnedState(false);
-          }
-        }
-        if (contextSrv.sidemenu) {
-          ignoreSideMenuHide = true;
-          setTimeout(() => {
-            ignoreSideMenuHide = false;
-          }, 300);
-        }
-      });
-
-      scope.$watch('contextSrv.pinned', newVal => {
-        if (newVal !== undefined) {
-          body.toggleClass('sidemenu-pinned', newVal);
         }
       });
 
@@ -199,15 +187,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
           }
         }
 
-        // hide sidemenu
-        if (!ignoreSideMenuHide && !contextSrv.pinned && body.find('.sidemenu').length > 0) {
-          if (target.parents('.sidemenu').length === 0) {
-            scope.$apply(function() {
-              scope.contextSrv.toggleSideMenu();
-            });
-          }
-        }
-
         // hide popovers
         var popover = elem.find('.popover');
         if (popover.length > 0 && target.parents('.graph-legend').length === 0) {

public/app/core/components/sidemenu/sidemenu.html

-<div class="sidemenu__top">
-
-	<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
+<a class="sidemenu__logo" ng-click="ctrl.toggleSideMenu()">
 	<span class="navbar-brand-btn-background">
 		<img src="public/img/grafana_icon.svg"></img>
 	</span>
-	</a>
+</a>
 
+<div class="sidemenu__top">
 	<div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown">
 		<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
 			<span class="icon-circle sidemenu-icon">

public/app/core/components/sidemenu/sidemenu.ts

@@ -13,7 +13,7 @@ export class SideMenuCtrl {
   isSignedIn: boolean;
 
   /** @ngInject */
-  constructor(private $scope, private $rootScope, private $location, private contextSrv, private backendSrv, private $element) {
+  constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) {
     this.isSignedIn = contextSrv.isSignedIn;
     this.user = contextSrv.user;
     this.mainLinks = _.filter(config.bootData.navTree, item => !item.hideFromMenu);
@@ -28,13 +28,17 @@ export class SideMenuCtrl {
     }
 
     this.$scope.$on('$routeChangeSuccess', () => {
-      if (!this.contextSrv.pinned) {
-        this.contextSrv.sidemenu = false;
-      }
       this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
     });
   }
 
+  toggleSideMenu() {
+    this.contextSrv.toggleSideMenu();
+    this.$timeout(() => {
+      this.$rootScope.$broadcast('render');
+    });
+  }
+
   switchOrg() {
     this.$rootScope.appEvent('show-modal', {
       templateHtml: '<org-switcher dismiss="dismiss()"></org-switcher>',

public/app/core/services/context_srv.ts

@@ -31,10 +31,7 @@ export class ContextSrv {
   sidemenu: any;
 
   constructor() {
-    this.pinned = store.getBool('grafana.sidemenu.pinned', false);
-    if (this.pinned) {
-      this.sidemenu = true;
-    }
+    this.sidemenu = store.getBool('grafana.sidemenu', false);
 
     if (!config.buildInfo) {
       config.buildInfo = {};
@@ -54,18 +51,13 @@ export class ContextSrv {
     return this.user.orgRole === role;
   }
 
-  setPinnedState(val) {
-    this.pinned = val;
-    store.set('grafana.sidemenu.pinned', val);
-  }
-
   isGrafanaVisible() {
     return !!(document.visibilityState === undefined || document.visibilityState === 'visible');
   }
 
   toggleSideMenu() {
     this.sidemenu = !this.sidemenu;
-    this.setPinnedState(this.sidemenu);
+    store.set('grafana.sidemenu',this.sidemenu);
   }
 }
 

public/sass/components/_navbar.scss

@@ -3,7 +3,6 @@
   display: block;
   overflow: visible;
   position: relative;
-  z-index: 110;
 }
 
 .navbar-inner {
@@ -11,9 +10,16 @@
   padding-right: $spacer;
   background-color: $navbarBackground;
   border-bottom: $navbarBorder;
+  margin-left: $side-menu-width;
   @include clearfix();
 }
 
+.sidemenu-open {
+  .navbar-inner {
+    margin-left: 0;
+  }
+}
+
 .navbar .nav {
   position: relative;
   left: 0;

public/sass/components/_sidemenu.scss

 
 
 .sidemenu {
+  position: fixed;
+  height: 30px;
+
   display: flex;
   flex-flow: column;
   flex-direction: column;
@@ -13,12 +16,25 @@
   }
 }
 
+.sidemenu-open {
+  .sidemenu {
+    position: initial;
+    height: auto;
+  }
+  .sidemenu__top,
+  .sidemenu__bottom {
+    display: block;
+  }
+}
+
 .sidemenu__top {
   flex-grow: 1;
+  display: none;
 }
 
 .sidemenu__bottom {
   padding-bottom: $spacer;
+  display: none;
 }
 
 .sidemenu-item {
@@ -134,3 +150,27 @@ li.sidemenu-org-switcher {
     top: 1px;
   }
 }
+
+.sidemenu__logo {
+  display: block;
+  margin-bottom: 3rem;
+  background-color: $side-menu-bg;
+  padding: 0.4rem 1.0rem 0.4rem 0.65rem;
+  min-height: $navbarHeight;
+
+  &:hover {
+    background: $navbarButtonBackgroundHighlight;
+
+    .sidemenu__logo-expand {
+      display: block;
+    }
+  }
+
+  img {
+    width: 30px;
+    position: relative;
+    top: 3px;
+    left: 4px;
+  }
+}
+