From 4dd4631b87b6133a65d3d94363209618a0f8ab25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Aug 2017 14:00:41 +0200 Subject: [PATCH] ux: sidemenu toggling --- public/app/core/components/grafana_app.ts | 35 +++---------- .../core/components/sidemenu/sidemenu.html | 51 +++++++++---------- .../app/core/components/sidemenu/sidemenu.ts | 12 +++-- public/app/core/services/context_srv.ts | 12 +---- public/sass/components/_navbar.scss | 8 ++- public/sass/components/_sidemenu.scss | 40 +++++++++++++++ 6 files changed, 89 insertions(+), 69 deletions(-) diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index e058e02286a..d13422a88b8 100644 --- a/public/app/core/components/grafana_app.ts +++ b/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 - scope.$watch('contextSrv.sidemenu', newVal => { - if (newVal !== undefined) { - body.toggleClass('sidemenu-open', scope.contextSrv.sidemenu); - if (!newVal) { - contextSrv.setPinnedState(false); - } - } - if (contextSrv.sidemenu) { - ignoreSideMenuHide = true; - setTimeout(() => { - ignoreSideMenuHide = false; - }, 300); - } - }); + sidemenuOpen = scope.contextSrv.sidemenu; + body.toggleClass('sidemenu-open', sidemenuOpen); - scope.$watch('contextSrv.pinned', newVal => { - if (newVal !== undefined) { - body.toggleClass('sidemenu-pinned', newVal); + scope.$watch('contextSrv.sidemenu', newVal => { + if (sidemenuOpen !== scope.contextSrv.sidemenu) { + sidemenuOpen = scope.contextSrv.sidemenu; + body.toggleClass('sidemenu-open', scope.contextSrv.sidemenu); } }); @@ -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) { diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index 1bbba2a2124..212e37199f8 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -1,11 +1,10 @@ + +
- - - - - - -
@@ -39,14 +38,14 @@
-
- - - - - - - +
diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts index 0c4bb881279..2e01cadf6f9 100644 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ b/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: '', diff --git a/public/app/core/services/context_srv.ts b/public/app/core/services/context_srv.ts index 6e69391f757..db443db45c1 100644 --- a/public/app/core/services/context_srv.ts +++ b/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); } } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index c4cb51cf6a4..5f79ed722a2 100644 --- a/public/sass/components/_navbar.scss +++ b/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; diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index a7a9e3ab7f9..14fbff54713 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -1,6 +1,9 @@ .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; + } +} +