ux: fixed sidenav issues

public/app/core/components/grafana_app.ts

@@ -65,7 +65,7 @@ export class GrafanaCtrl {
 }
 
 /** @ngInject */
-export function grafanaAppDirective(playlistSrv, contextSrv) {
+export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScope) {
   return {
     restrict: 'E',
     controller: GrafanaCtrl,
@@ -118,6 +118,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
       var lastActivity = new Date().getTime();
       var activeUser = true;
       var inActiveTimeLimit = 60 * 1000;
+      var sidemenuHidden = false;
 
       function checkForInActiveUser() {
         if (!activeUser) {
@@ -131,6 +132,14 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
         if ((new Date().getTime() - lastActivity) > inActiveTimeLimit) {
           activeUser = false;
           body.addClass('user-activity-low');
+          // hide sidemenu
+          if (sidemenuOpen) {
+            sidemenuHidden = true;
+            body.removeClass('sidemenu-open');
+            $timeout(function() {
+              $rootScope.$broadcast("render");
+            }, 100);
+          }
         }
       }
 
@@ -139,6 +148,15 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
         if (!activeUser) {
           activeUser = true;
           body.removeClass('user-activity-low');
+
+          // restore sidemenu
+          if (sidemenuHidden) {
+            sidemenuHidden = false;
+            body.addClass('sidemenu-open');
+            $timeout(function() {
+              $rootScope.$broadcast("render");
+            }, 100);
+          }
         }
       }
 

public/app/features/org/user_group_details_ctrl.ts

@@ -9,7 +9,7 @@ export default class UserGroupDetailsCtrl {
   navModel: any;
 
   constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) {
-    this.navModel = navModelSrv.getOrgNav(3);
+    this.navModel = navModelSrv.getNav('cfg', 'users');
     this.get();
   }
 

public/app/features/org/user_groups_ctrl.ts

@@ -15,7 +15,7 @@ export class UserGroupsCtrl {
 
   /** @ngInject */
   constructor(private $scope, private $http, private backendSrv, private $location, navModelSrv) {
-    this.navModel = navModelSrv.getOrgNav(3);
+    this.navModel = navModelSrv.getNav('cfg', 'users');
     this.get();
   }
 

public/sass/components/_navbar.scss

@@ -3,6 +3,7 @@
   display: block;
   overflow: visible;
   position: relative;
+  margin-left: $side-menu-width;
 }
 
 .navbar-inner {
@@ -10,12 +11,11 @@
   padding-right: $spacer;
   background-color: $navbarBackground;
   border-bottom: $navbarBorder;
-  margin-left: $side-menu-width;
   @include clearfix();
 }
 
 .sidemenu-open {
-  .navbar-inner {
+  .navbar {
     margin-left: 0;
   }
 }
@@ -61,46 +61,6 @@
   background-color: $navbarLinkBackgroundActive;
 }
 
-.navbar-brand-btn {
-  display: block;
-  margin-bottom: 3rem;
-  background-color: $side-menu-bg;
-  padding: 0.4rem 1.0rem 0.4rem 0.65rem;
-  min-height: $navbarHeight;
-
-  .fa-caret-down {
-    font-size: 70%;
-  }
-
-  &:hover {
-    background: $navbarButtonBackgroundHighlight;
-  }
-
-  img {
-    width: 30px;
-    position: relative;
-    top: -1px;
-  }
-
-  .navbar-brand-btn-background {
-    display: inline-block;
-    border: 1px solid $body-bg;
-    padding: 4px;
-    border-radius: 50%;
-    background: $iconContainerBackground;
-    width: 40px;
-    height: 40px;
-  }
-
-  .icon-gf-grafana_wordmark {
-    font-size: 21px;
-    position: relative;
-    top: 6px;
-    padding-left: 5px;
-    display: none;
-  }
-}
-
 .navbar-page-btn-wrapper {
   float: left;
   &:hover {

public/sass/components/_sidemenu.scss

@@ -1,14 +1,10 @@
-
-
 .sidemenu {
   position: fixed;
-  height: 30px;
-
   display: flex;
   flex-flow: column;
   flex-direction: column;
   width: $side-menu-width;
-  background-color: $side-menu-bg;
+  background: $navbarBackground;
   z-index: 1;
 
   a:focus {
@@ -18,6 +14,7 @@
 
 .sidemenu-open {
   .sidemenu {
+    background: $side-menu-bg;
     position: initial;
     height: auto;
   }
@@ -28,6 +25,7 @@
 }
 
 .sidemenu__top {
+  padding-top: 3rem;
   flex-grow: 1;
   display: none;
 }
@@ -153,8 +151,6 @@ li.sidemenu-org-switcher {
 
 .sidemenu__logo {
   display: block;
-  margin-bottom: 3rem;
-  background-color: $side-menu-bg;
   padding: 0.4rem 1.0rem 0.4rem 0.65rem;
   min-height: $navbarHeight;
 

public/sass/components/_view_states.scss

@@ -38,7 +38,6 @@
   }
 
   // navbar buttons
-  .navbar-brand-btn,
   .navbar-inner {
     border-color: transparent;
     background: transparent;
@@ -52,7 +51,7 @@
   .navbar-page-btn {
     border-color: transparent;
     background: transparent;
-    transform: translate3d(-50px, 0, 0);
+    transform: translate3d(-40px, 0, 0);
     transition: all 1.5s ease-in-out 1s;
     .icon-gf {
       opacity: 0;