From 0736b8a1fb42473cdb13bb136e87c147ca434d51 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 11 Mar 2019 13:18:22 +0100 Subject: [PATCH] chore: Move sidemenu out of context service and use the logic we have in the router already for hiding the sidemenu --- public/app/core/services/context_srv.ts | 1 - public/app/routes/GrafanaCtrl.ts | 17 ++--------- public/sass/components/_navbar.scss | 10 ++----- public/sass/components/_sidemenu.scss | 34 +++++++++++----------- public/sass/components/_view_states.scss | 15 ++++++++++ public/sass/pages/_explore.scss | 36 +----------------------- 6 files changed, 37 insertions(+), 76 deletions(-) diff --git a/public/app/core/services/context_srv.ts b/public/app/core/services/context_srv.ts index b186d1fde87..e3b10f129d1 100644 --- a/public/app/core/services/context_srv.ts +++ b/public/app/core/services/context_srv.ts @@ -28,7 +28,6 @@ export class ContextSrv { isSignedIn: any; isGrafanaAdmin: any; isEditor: any; - sidemenu = true; sidemenuSmallBreakpoint = false; hasEditPermissionInFolders: boolean; diff --git a/public/app/routes/GrafanaCtrl.ts b/public/app/routes/GrafanaCtrl.ts index 45a06706cd9..a37222091d0 100644 --- a/public/app/routes/GrafanaCtrl.ts +++ b/public/app/routes/GrafanaCtrl.ts @@ -75,27 +75,22 @@ export class GrafanaCtrl { } } -function setViewModeBodyClass(body: JQuery, mode: KioskUrlValue, sidemenuOpen: boolean) { +function setViewModeBodyClass(body: JQuery, mode: KioskUrlValue) { body.removeClass('view-mode--tv'); body.removeClass('view-mode--kiosk'); body.removeClass('view-mode--inactive'); switch (mode) { case 'tv': { - body.removeClass('sidemenu-open'); body.addClass('view-mode--tv'); break; } // 1 & true for legacy states case '1': case true: { - body.removeClass('sidemenu-open'); body.addClass('view-mode--kiosk'); break; } - default: { - body.toggleClass('sidemenu-open', sidemenuOpen); - } } } @@ -105,7 +100,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop restrict: 'E', controller: GrafanaCtrl, link: (scope, elem) => { - let sidemenuOpen; const body = $('body'); // see https://github.com/zenorocha/clipboard.js/issues/155 @@ -113,9 +107,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop $('.preloader').remove(); - sidemenuOpen = scope.contextSrv.sidemenu; - body.toggleClass('sidemenu-open', sidemenuOpen); - appEvents.on('toggle-sidemenu-mobile', () => { body.toggleClass('sidemenu-open--xs'); }); @@ -158,7 +149,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop $('#tooltip, .tooltip').remove(); // check for kiosk url param - setViewModeBodyClass(body, data.params.kiosk, sidemenuOpen); + setViewModeBodyClass(body, data.params.kiosk); // close all drops for (const drop of Drop.drops) { @@ -193,7 +184,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop } $timeout(() => $location.search(search)); - setViewModeBodyClass(body, search.kiosk, sidemenuOpen); + setViewModeBodyClass(body, search.kiosk); }); // handle in active view state class @@ -213,7 +204,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop if (new Date().getTime() - lastActivity > inActiveTimeLimit) { activeUser = false; body.addClass('view-mode--inactive'); - body.removeClass('sidemenu-open'); } } @@ -222,7 +212,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop if (!activeUser) { activeUser = true; body.removeClass('view-mode--inactive'); - body.toggleClass('sidemenu-open', sidemenuOpen); } } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index a86b8c450a0..eef101c98b4 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -157,14 +157,8 @@ @include media-breakpoint-up(sm) { .navbar { - padding-left: 60px; - } - - .sidemenu-open { - .navbar { - padding-left: 25px; - margin-left: 0; - } + padding-left: 20px; + margin-left: 0; } .navbar-page-btn { diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index f30bdb5c79e..c16e037c2ad 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -16,6 +16,14 @@ .sidemenu__close { display: none; } + + @include media-breakpoint-up(sm) { + background: $side-menu-bg; + height: auto; + box-shadow: $side-menu-shadow; + position: relative; + z-index: $zindex-sidemenu; + } } // body class that hides sidemenu @@ -25,32 +33,22 @@ } } -@include media-breakpoint-up(sm) { - .sidemenu-open { - .sidemenu { - background: $side-menu-bg; - height: auto; - box-shadow: $side-menu-shadow; - position: relative; - z-index: $zindex-sidemenu; - } - - .sidemenu__top, - .sidemenu__bottom { - display: block; - } - } -} - .sidemenu__top { padding-top: 3rem; flex-grow: 1; - display: none; } .sidemenu__bottom { padding-bottom: $spacer; +} + +.sidemenu__top, +.sidemenu__bottom { display: none; + + @include media-breakpoint-up(sm) { + display: block; + } } .sidemenu-item { diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index b92bd596193..e1ca3d44f83 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -29,6 +29,21 @@ .view-mode--tv { @extend .view-mode--inactive; + .sidemenu { + position: fixed; + background-color: transparent; + box-shadow: none; + + .sidemenu__top, + .sidemenu__bottom { + display: none; + } + } + + .navbar { + padding-left: $side-menu-width; + } + .submenu-controls { display: none; } diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 90579ff67ad..0358adb9787 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -25,20 +25,13 @@ } } -.sidemenu-open { - .explore-toolbar-header { - padding: 0; - margin-left: 0; - } -} - .explore-toolbar { background: inherit; display: flex; flex-flow: row wrap; justify-content: flex-start; height: auto; - padding: 0px $dashboard-padding 0 25px; + padding: 0 $dashboard-padding; border-bottom: 1px solid #0000; transition-duration: 0.35s; transition-timing-function: ease-in-out; @@ -72,11 +65,6 @@ font-size: 18px; min-height: 55px; line-height: 55px; - justify-content: space-between; - margin-left: $panel-margin * 3; -} - -.explore-toolbar-header { justify-content: space-between; align-items: center; } @@ -134,20 +122,6 @@ } @media only screen and (max-width: 803px) { - .sidemenu-open { - .explore-toolbar-header-title { - .navbar-page-btn { - margin-left: 0; - } - } - } - - .explore-toolbar-header-title { - .navbar-page-btn { - margin-left: $dashboard-padding; - } - } - .btn-title { display: none; } @@ -161,14 +135,6 @@ } @media only screen and (max-width: 544px) { - .sidemenu-open { - .explore-toolbar-header-title { - .navbar-page-btn { - margin-left: $dashboard-padding; - } - } - } - .explore-toolbar-header-title { .navbar-page-btn { margin-left: $dashboard-padding;