refactor: sidemenu toggle & hiding logic

public/app/core/components/grafana_app.ts

@@ -79,21 +79,16 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
       sidemenuOpen = scope.contextSrv.sidemenu;
       body.toggleClass('sidemenu-open', sidemenuOpen);
 
-      scope.$watch('contextSrv.sidemenu', newVal => {
-        if (sidemenuOpen !== scope.contextSrv.sidemenu) {
-          sidemenuOpen = scope.contextSrv.sidemenu;
-          body.toggleClass('sidemenu-open', scope.contextSrv.sidemenu);
-        }
+      appEvents.on('toggle-sidemenu', () => {
+        body.toggleClass('sidemenu-open');
       });
 
-      let sidemenuOpenSmallBreakpoint = scope.contextSrv.sidemenuSmallBreakpoint;
-      body.toggleClass('sidemenu-open--xs', sidemenuOpenSmallBreakpoint);
+      appEvents.on('toggle-sidemenu-mobile', () => {
+        body.toggleClass('sidemenu-open--xs');
+      });
 
-      scope.$watch('contextSrv.sidemenuSmallBreakpoint', newVal => {
-        if (sidemenuOpenSmallBreakpoint !== scope.contextSrv.sidemenuSmallBreakpoint) {
-          sidemenuOpenSmallBreakpoint = scope.contextSrv.sidemenuSmallBreakpoint;
-          body.toggleClass('sidemenu-open--xs', scope.contextSrv.sidemenuSmallBreakpoint);
-        }
+      appEvents.on('toggle-sidemenu-hidden', () => {
+        body.toggleClass('sidemenu-hidden');
       });
 
       // tooltip removal fix
@@ -111,6 +106,9 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
           }
         }
 
+        // clear body class sidemenu states
+        body.removeClass('sidemenu-open--xs');
+
         $("#tooltip, .tooltip").remove();
 
         // check for kiosk url param

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

@@ -3,11 +3,10 @@
 </a>
 
 <a class="sidemenu__logo_small_breakpoint" ng-click="ctrl.toggleSideMenuSmallBreakpoint()">
-  <img src="public/img/grafana_icon.svg"></img>
-  <p class="sidemenu__close"><i class="fa fa-times"></i>&nbsp;Close</p>
+  <i class="fa fa-bars"></i>
+  <span class="sidemenu__close"><i class="fa fa-times"></i>&nbsp;Close</span>
 </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}}">

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

@@ -1,9 +1,8 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import config from 'app/core/config';
 import $ from 'jquery';
 import coreModule from '../../core_module';
+import appEvents from 'app/core/app_events';
 
 export class SideMenuCtrl {
   user: any;
@@ -11,7 +10,7 @@ export class SideMenuCtrl {
   bottomNav: any;
   loginUrl: string;
   isSignedIn: boolean;
-  smallBPSideMenuOpen = false;
+  isOpenMobile: boolean;
 
   /** @ngInject */
   constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) {
@@ -29,24 +28,21 @@ export class SideMenuCtrl {
     }
 
     this.$scope.$on('$routeChangeSuccess', () => {
-      if (this.smallBPSideMenuOpen) {
-        this.contextSrv.setSideMenuForSmallBreakpoint(false, true);
-        this.smallBPSideMenuOpen = false;
-      }
       this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
     });
   }
 
   toggleSideMenu() {
     this.contextSrv.toggleSideMenu();
+    appEvents.emit('toggle-sidemenu');
+
     this.$timeout(() => {
       this.$rootScope.$broadcast('render');
     });
   }
 
   toggleSideMenuSmallBreakpoint() {
-    this.smallBPSideMenuOpen = !this.smallBPSideMenuOpen;
-    this.contextSrv.setSideMenuForSmallBreakpoint(this.smallBPSideMenuOpen, false);
+    appEvents.emit('toggle-sidemenu-mobile');
   }
 
   switchOrg() {
@@ -75,10 +71,6 @@ export function sideMenuDirective() {
           parent.append(menu);
         }, 100);
       });
-
-      scope.$on("$destory", function() {
-        elem.off('click.dropdown');
-      });
     }
   };
 }

public/app/core/controllers/error_ctrl.ts

@@ -1,5 +1,6 @@
 import config from 'app/core/config';
 import coreModule from '../core_module';
+import appEvents from 'app/core/app_events';
 
 export class ErrorCtrl {
 
@@ -8,11 +9,14 @@ export class ErrorCtrl {
     $scope.navModel = navModelSrv.getNotFoundNav();
     $scope.appSubUrl = config.appSubUrl;
 
-    var showSideMenu = contextSrv.sidemenu;
-    contextSrv.sidemenu = false;
+    if (!contextSrv.isSignedIn) {
+      appEvents.emit('toggle-sidemenu-hidden');
+    }
 
-    $scope.$on('$destroy', function() {
-      contextSrv.sidemenu = showSideMenu;
+    $scope.$on("destroy", () => {
+      if (!contextSrv.isSignedIn) {
+        appEvents.emit('toggle-sidemenu-hidden');
+      }
     });
   }
 }

public/app/core/nav_model_srv.ts

@@ -70,13 +70,15 @@ export class NavModelSrv {
 
   getNotFoundNav() {
     var node = {
-      text: "Page not found ",
+      text: "Page not found",
       icon: "fa fa-fw fa-warning",
+      subTitle: "404 Error"
     };
 
     return {
       breadcrumbs: [node],
-      node: node
+      node: node,
+      main: node
     };
   }
 

public/app/core/routes/routes.ts

@@ -178,23 +178,27 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
   .when('/login', {
     templateUrl: 'public/app/partials/login.html',
     controller : 'LoginCtrl',
-    pageClass: 'page-login',
+    pageClass: 'sidemenu-hidden',
   })
   .when('/invite/:code', {
     templateUrl: 'public/app/partials/signup_invited.html',
     controller : 'InvitedCtrl',
+    pageClass: 'sidemenu-hidden',
   })
   .when('/signup', {
     templateUrl: 'public/app/partials/signup_step2.html',
     controller : 'SignUpCtrl',
+    pageClass: 'sidemenu-hidden',
   })
   .when('/user/password/send-reset-email', {
     templateUrl: 'public/app/partials/reset_password.html',
     controller : 'ResetPasswordCtrl',
+    pageClass: 'sidemenu-hidden',
   })
   .when('/user/password/reset', {
     templateUrl: 'public/app/partials/reset_password.html',
     controller : 'ResetPasswordCtrl',
+    pageClass: 'sidemenu-hidden',
   })
   .when('/dashboard/snapshots', {
     templateUrl: 'public/app/features/snapshot/partials/snapshots.html',

public/app/core/services/context_srv.ts

@@ -58,10 +58,6 @@ export class ContextSrv {
     this.sidemenu = !this.sidemenu;
     store.set('grafana.sidemenu', this.sidemenu);
   }
-
-  setSideMenuForSmallBreakpoint(show: boolean, persistToggle: boolean) {
-    this.sidemenuSmallBreakpoint = show;
-  }
 }
 
 var contextSrv = new ContextSrv();

public/app/features/dashboard/dashnav/dashnav.ts

@@ -1,5 +1,3 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import moment from 'moment';
 import angular from 'angular';
@@ -18,7 +16,6 @@ export class DashNavCtrl {
     private dashboardSrv,
     private $location,
     private backendSrv,
-    private contextSrv,
     public playlistSrv,
     navModelSrv) {
       this.navModel = navModelSrv.getDashboardNav(this.dashboard, this);
@@ -35,10 +32,6 @@ export class DashNavCtrl {
       }
     }
 
-    toggleSideMenu() {
-      this.contextSrv.toggleSideMenu();
-    }
-
     openEditView(editview) {
       var search = _.extend(this.$location.search(), {editview: editview});
       this.$location.search(search);

public/app/partials/error.html

@@ -1,60 +1,47 @@
-<div class="page-container">
-  <div class="page-header">
-    <div class="page-header__inner">
-      <span class="page-header__logo">
-        <i class="page-header__icon fa fa-fw fa-exclamation-triangle"></i>
-      </span>
-      <div class="page-header__info-block">
-        <h1 class="page-header__title">
-          Page not found
-        </h1>
-        <div class="page-header__sub-title">
-          404 Error
+<page-header model="navModel"></page-header>
+
+<div class="page-container page-body">
+  <div class="panel-container error-container">
+    <div class="error-column graph-box">
+      <div class="error-row">
+        <div class="error-column error-space-between graph-percentage">
+          <p>100%</p>
+          <p>80%</p>
+          <p>60%</p>
+          <p>40%</p>
+          <p>20%</p>
+          <p>0%</p>
         </div>
-      </div>
-    </div>
-  </div>
-    <div class="panel-container error-container">
-      <div class="error-column graph-box">
-        <div class="error-row">
-          <div class="error-column error-space-between graph-percentage">
-            <p>100%</p>
-            <p>80%</p>
-            <p>60%</p>
-            <p>40%</p>
-            <p>20%</p>
-            <p>0%</p>
-          </div>
-          <div class="error-column image-box">
-            <img src="public/img/graph404.svg" width="100%">
-            <div class="error-row error-space-between">
-              <p class="graph-text">Then</p>
-              <p class="graph-text">Now</p>
-            </div>
+        <div class="error-column image-box">
+          <img src="public/img/graph404.svg" width="100%">
+          <div class="error-row error-space-between">
+            <p class="graph-text">Then</p>
+            <p class="graph-text">Now</p>
           </div>
         </div>
       </div>
-      <div class="error-column info-box">
-        <div class="error-row current-box">
-          <p class="current-text">current</p>
-        </div>
-        <div class="error-row" style="flex: 1">
-          <i class="fa fa-minus error-minus"></i>
-          <div class="error-column error-space-between error-full-width">
-            <div class="error-row error-space-between">
-              <p>Chances you are on the page you are looking for.</p>
-              <p class="left-margin">0%</p>
-            </div>
-            <div>
-              <h3>Sorry for the inconvenience</h3>
-              <p>Please go back to your
-                <a href="{{appSubUrl}}/" class="error-link">home dashboard</a> and try again.</p>
-              <p>If the error persists, seek help on the
-                <a href="https://community.grafana.com" target="_blank" class="error-link">community site</a>.</p>
-            </div>
+    </div>
+    <div class="error-column info-box">
+      <div class="error-row current-box">
+        <p class="current-text">current</p>
+      </div>
+      <div class="error-row" style="flex: 1">
+        <i class="fa fa-minus error-minus"></i>
+        <div class="error-column error-space-between error-full-width">
+          <div class="error-row error-space-between">
+            <p>Chances you are on the page you are looking for.</p>
+            <p class="left-margin">0%</p>
+          </div>
+          <div>
+            <h3>Sorry for the inconvenience</h3>
+            <p>Please go back to your
+            <a href="{{appSubUrl}}/" class="error-link">home dashboard</a> and try again.</p>
+            <p>If the error persists, seek help on the
+            <a href="https://community.grafana.com" target="_blank" class="error-link">community site</a>.</p>
           </div>
         </div>
       </div>
-      <span class="react-resizable-handle" style="cursor: default"></span>
     </div>
+    <span class="react-resizable-handle" style="cursor: default"></span>
+  </div>
 </div>

public/app/partials/reset_password.html

@@ -58,13 +58,14 @@
 					</button>
 				</div>
 			</form>
-		</div>
 
-		<div class="row" style="margin-top: 20px">
-			<div class="text-center">
-				<a href="login">Back to login</a>
-			</div>
-		</div>
-	</div>
+      <div style="margin-top: 20px">
+        <div class="text-center">
+          <a href="login">Back to login</a>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </div>
 

public/sass/components/_sidemenu.scss

@@ -16,6 +16,14 @@
   .sidemenu__close {
     display: none;
   }
+
+}
+
+// body class that hides sidemenu
+.sidemenu-hidden {
+  .sidemenu {
+    display: none;
+  }
 }
 
 @include media-breakpoint-up(sm) {
@@ -164,7 +172,7 @@ li.sidemenu-org-switcher {
   }
 }
 
-.sidemenu__logo, .sidemenu__logo_small_breakpoint {
+.sidemenu__logo {
   display: block;
   padding: 0.4rem 1.0rem 0.4rem 0.65rem;
   min-height: $navbarHeight;
@@ -203,6 +211,8 @@ li.sidemenu-org-switcher {
     .sidemenu__close {
       display: block;
       font-size: $font-size-md;
+      position: relative;
+      top: -3px;
     }
 
     .sidemenu__top,
@@ -215,14 +225,16 @@ li.sidemenu-org-switcher {
     .sidemenu__logo {
       display: none;
     }
+
     .sidemenu__logo_small_breakpoint {
+      padding: 12px 10px 26px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: baseline;
 
-      &:hover {
-        background: transparent;
+      .fa-bars {
+        font-size: 25px;
       }
     }
 

public/sass/pages/_login.scss

@@ -8,12 +8,6 @@
   padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
 }
 
-.page-login {
-  .sidemenu {
-    display: none;
-  }
-}
-
 .login-form {
   display: inline-block;
   max-width: 24rem;