feat(sidemenu): pinned work started

public/app/core/components/grafana_app.ts

@@ -150,6 +150,9 @@ export function grafanaAppDirective(playlistSrv) {
       scope.$watch('contextSrv.sidemenu', newVal => {
       scope.$watch('contextSrv.sidemenu', newVal => {
         if (newVal !== undefined) {
         if (newVal !== undefined) {
           elem.toggleClass('sidemenu-open', scope.contextSrv.sidemenu);
           elem.toggleClass('sidemenu-open', scope.contextSrv.sidemenu);
+          if (!newVal) {
+            scope.contextSrv.setPinnedState(false);
+          }
         }
         }
         if (scope.contextSrv.sidemenu) {
         if (scope.contextSrv.sidemenu) {
           ignoreSideMenuHide = true;
           ignoreSideMenuHide = true;
@@ -159,6 +162,12 @@ export function grafanaAppDirective(playlistSrv) {
         }
         }
       });
       });
 
 
+      scope.$watch('contextSrv.pinned', newVal => {
+        if (newVal !== undefined) {
+          elem.toggleClass('sidemenu-pinned', newVal);
+        }
+      });
+
       // tooltip removal fix
       // tooltip removal fix
       scope.$on("$routeChangeSuccess", function() {
       scope.$on("$routeChangeSuccess", function() {
         $("#tooltip, .tooltip").remove();
         $("#tooltip, .tooltip").remove();
@@ -182,7 +191,7 @@ export function grafanaAppDirective(playlistSrv) {
           }
           }
         }
         }
         // hide sidemenu
         // hide sidemenu
-        if (!ignoreSideMenuHide &&  elem.find('.sidemenu').length > 0) {
+        if (!ignoreSideMenuHide && !scope.contextSrv.pinned && elem.find('.sidemenu').length > 0) {
           if (target.parents('.sidemenu').length === 0) {
           if (target.parents('.sidemenu').length === 0) {
             scope.$apply(() => scope.contextSrv.toggleSideMenu());
             scope.$apply(() => scope.contextSrv.toggleSideMenu());
           }
           }

public/app/core/components/navbar/navbar.html

-<div class="navbar navbar-static-top">
+<div class="navbar">
 	<div class="navbar-inner"><div class="container-fluid">
 	<div class="navbar-inner"><div class="container-fluid">
 			<div class="top-nav-btn top-nav-menu-btn">
 			<div class="top-nav-btn top-nav-menu-btn">
 				<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
 				<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">

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

@@ -62,5 +62,11 @@
 		</a>
 		</a>
 	</li>
 	</li>
 
 
+	<li>
+		<a class="sidemenu-item" target="_self" ng-click="ctrl.contextSrv.setPinnedState(true)">
+			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-flag-o"></i></span>
+			<span class="sidemenu-item-text">Pin</span>
+		</a>
+	</li>
 </ul>
 </ul>
 
 

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

@@ -22,8 +22,11 @@ export class SideMenuCtrl {
     this.appSubUrl = config.appSubUrl;
     this.appSubUrl = config.appSubUrl;
     this.showSignout = this.contextSrv.isSignedIn && !config['authProxyEnabled'];
     this.showSignout = this.contextSrv.isSignedIn && !config['authProxyEnabled'];
     this.updateMenu();
     this.updateMenu();
+
     this.$scope.$on('$routeChangeSuccess', () => {
     this.$scope.$on('$routeChangeSuccess', () => {
-      this.contextSrv.sidemenu = false;
+      if (!this.contextSrv.pinned) {
+        this.contextSrv.sidemenu = false;
+      }
     });
     });
   }
   }
 
 

public/app/core/core_module.js

+///<reference path="../headers/common.d.ts" />
+var angular_1 = require('angular');
+exports["default"] = angular_1["default"].module('grafana.core', ['ngRoute']);

public/app/core/services/context_srv.js

@@ -20,10 +20,23 @@ function (angular, _, coreModule, store, config) {
       return this.user.orgRole === role;
       return this.user.orgRole === role;
     };
     };
 
 
+    this.setPinnedState = function(val) {
+      this.pinned = val;
+      store.set('grafana.sidemenu.pinned', val);
+    };
+
     this.toggleSideMenu = function() {
     this.toggleSideMenu = function() {
       this.sidemenu = !this.sidemenu;
       this.sidemenu = !this.sidemenu;
+      if (!this.sidemenu) {
+        this.setPinnedState(false);
+      }
     };
     };
 
 
+    this.pinned = store.getBool('grafana.sidemenu.pinned', false);
+    if (this.pinned) {
+      this.sidemenu = true;
+    }
+
     this.version = config.buildInfo.version;
     this.version = config.buildInfo.version;
     this.lightTheme = false;
     this.lightTheme = false;
     this.user = new User();
     this.user = new User();

public/less/navbar.less

+.navbar {
+  position: relative;
+  z-index: 1000;
+}
+
 .navbar .navbar-inner {
 .navbar .navbar-inner {
   padding-left: 0px;
   padding-left: 0px;
   border: none;
   border: none;

public/less/sidemenu.less

@@ -3,16 +3,14 @@
 }
 }
 
 
 .sidemenu-wrapper {
 .sidemenu-wrapper {
-  position: fixed;
+  position: absolute;
   top: 53px;
   top: 53px;
-  bottom: 0;
   left: 0;
   left: 0;
   width: 200px;
   width: 200px;
   background-color: @sideMenuBackground;
   background-color: @sideMenuBackground;
   border: @sideMenuBorder;
   border: @sideMenuBorder;
-  min-height: 100%;
   z-index: 101;
   z-index: 101;
-  transform: translate3d(-100%, 0, 0);
+  transform: translate3d(0, -100%, 0);
   visibility: hidden;
   visibility: hidden;
 
 
   a:focus {
   a:focus {
@@ -23,12 +21,23 @@
 .sidemenu-open {
 .sidemenu-open {
   .sidemenu-wrapper {
   .sidemenu-wrapper {
     visibility: visible;
     visibility: visible;
-    -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     transition: all 0.2s;
     transition: all 0.2s;
   }
   }
 }
 }
 
 
+.sidemenu-pinned {
+  .sidemenu-wrapper {
+    min-height: 100%;
+  }
+  .main-view-container {
+    padding-left: 210px;
+  }
+  .page-container {
+    padding-left: 210px;
+  }
+}
+
 .sidemenu {
 .sidemenu {
   font-weight: @baseFontWeight;
   font-weight: @baseFontWeight;
   list-style: none;
   list-style: none;