From b5ef793ae415ee4adc423dca7e3d9b6cb421ed51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 29 Jan 2016 15:12:56 -0500 Subject: [PATCH] feat(sidemenu): pinned work started --- public/app/core/components/grafana_app.ts | 11 ++++++++++- public/app/core/components/navbar/navbar.html | 2 +- .../core/components/sidemenu/sidemenu.html | 6 ++++++ .../app/core/components/sidemenu/sidemenu.ts | 5 ++++- public/app/core/core_module.js | 3 +++ public/app/core/services/context_srv.js | 13 +++++++++++++ public/less/navbar.less | 5 +++++ public/less/sidemenu.less | 19 ++++++++++++++----- 8 files changed, 56 insertions(+), 8 deletions(-) create mode 100644 public/app/core/core_module.js diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index 15c7f7fdb3b..efcd1f2ec25 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -150,6 +150,9 @@ export function grafanaAppDirective(playlistSrv) { scope.$watch('contextSrv.sidemenu', newVal => { if (newVal !== undefined) { elem.toggleClass('sidemenu-open', scope.contextSrv.sidemenu); + if (!newVal) { + scope.contextSrv.setPinnedState(false); + } } if (scope.contextSrv.sidemenu) { 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 scope.$on("$routeChangeSuccess", function() { $("#tooltip, .tooltip").remove(); @@ -182,7 +191,7 @@ export function grafanaAppDirective(playlistSrv) { } } // 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) { scope.$apply(() => scope.contextSrv.toggleSideMenu()); } diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 5c1e08de1f6..588b1c81b9a 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,4 +1,4 @@ -
+
diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index 49431683db6..f9911eed943 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -62,5 +62,11 @@ +
  • + + + Pin + +
    • diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts index 8f0c57bfade..2b452f646c7 100644 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ b/public/app/core/components/sidemenu/sidemenu.ts @@ -22,8 +22,11 @@ export class SideMenuCtrl { this.appSubUrl = config.appSubUrl; this.showSignout = this.contextSrv.isSignedIn && !config['authProxyEnabled']; this.updateMenu(); + this.$scope.$on('$routeChangeSuccess', () => { - this.contextSrv.sidemenu = false; + if (!this.contextSrv.pinned) { + this.contextSrv.sidemenu = false; + } }); } diff --git a/public/app/core/core_module.js b/public/app/core/core_module.js new file mode 100644 index 00000000000..c073779ebaa --- /dev/null +++ b/public/app/core/core_module.js @@ -0,0 +1,3 @@ +/// +var angular_1 = require('angular'); +exports["default"] = angular_1["default"].module('grafana.core', ['ngRoute']); diff --git a/public/app/core/services/context_srv.js b/public/app/core/services/context_srv.js index c2cf69e467a..b4a133afea3 100644 --- a/public/app/core/services/context_srv.js +++ b/public/app/core/services/context_srv.js @@ -20,10 +20,23 @@ function (angular, _, coreModule, store, config) { return this.user.orgRole === role; }; + this.setPinnedState = function(val) { + this.pinned = val; + store.set('grafana.sidemenu.pinned', val); + }; + this.toggleSideMenu = function() { 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.lightTheme = false; this.user = new User(); diff --git a/public/less/navbar.less b/public/less/navbar.less index 619a1cd6a71..a1045a8e283 100644 --- a/public/less/navbar.less +++ b/public/less/navbar.less @@ -1,3 +1,8 @@ +.navbar { + position: relative; + z-index: 1000; +} + .navbar .navbar-inner { padding-left: 0px; border: none; diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less index 61882f0e4c3..1e06a570346 100644 --- a/public/less/sidemenu.less +++ b/public/less/sidemenu.less @@ -3,16 +3,14 @@ } .sidemenu-wrapper { - position: fixed; + position: absolute; top: 53px; - bottom: 0; left: 0; width: 200px; background-color: @sideMenuBackground; border: @sideMenuBorder; - min-height: 100%; z-index: 101; - transform: translate3d(-100%, 0, 0); + transform: translate3d(0, -100%, 0); visibility: hidden; a:focus { @@ -23,12 +21,23 @@ .sidemenu-open { .sidemenu-wrapper { visibility: visible; - -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all 0.2s; } } +.sidemenu-pinned { + .sidemenu-wrapper { + min-height: 100%; + } + .main-view-container { + padding-left: 210px; + } + .page-container { + padding-left: 210px; + } +} + .sidemenu { font-weight: @baseFontWeight; list-style: none;