Skip to content

N
nexpie-grafana-theme
Commit 0736b8a1 by Johannes Schill
Options

chore: Move sidemenu out of context service and use the logic we have in the… 

chore: Move sidemenu out of context service and use the logic we have in the router already for hiding the sidemenu
parent 06e9c116
Showing with 34 additions and 73 deletions
public/app/core/services/context_srv.ts
...@@ -28,7 +28,6 @@ export class ContextSrv { ...@@ -28,7 +28,6 @@ export class ContextSrv {
isSignedIn: any; isSignedIn: any;
isGrafanaAdmin: any; isGrafanaAdmin: any;
isEditor: any; isEditor: any;
sidemenu = true;
sidemenuSmallBreakpoint = false; sidemenuSmallBreakpoint = false;
hasEditPermissionInFolders: boolean; hasEditPermissionInFolders: boolean;
......
public/app/routes/GrafanaCtrl.ts
...@@ -75,27 +75,22 @@ export class GrafanaCtrl { ...@@ -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--tv');
body.removeClass('view-mode--kiosk'); body.removeClass('view-mode--kiosk');
body.removeClass('view-mode--inactive'); body.removeClass('view-mode--inactive');
switch (mode) { switch (mode) {
case 'tv': { case 'tv': {
body.removeClass('sidemenu-open');
body.addClass('view-mode--tv'); body.addClass('view-mode--tv');
break; break;
} }
// 1 & true for legacy states // 1 & true for legacy states
case '1': case '1':
case true: { case true: {
body.removeClass('sidemenu-open');
body.addClass('view-mode--kiosk'); body.addClass('view-mode--kiosk');
break; break;
} }
default: {
body.toggleClass('sidemenu-open', sidemenuOpen);
}
} }
} }
...@@ -105,7 +100,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -105,7 +100,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
restrict: 'E', restrict: 'E',
controller: GrafanaCtrl, controller: GrafanaCtrl,
link: (scope, elem) => { link: (scope, elem) => {
let sidemenuOpen;
const body = $('body'); const body = $('body');
// see https://github.com/zenorocha/clipboard.js/issues/155 // see https://github.com/zenorocha/clipboard.js/issues/155
...@@ -113,9 +107,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -113,9 +107,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
$('.preloader').remove(); $('.preloader').remove();
sidemenuOpen = scope.contextSrv.sidemenu;
body.toggleClass('sidemenu-open', sidemenuOpen);
appEvents.on('toggle-sidemenu-mobile', () => { appEvents.on('toggle-sidemenu-mobile', () => {
body.toggleClass('sidemenu-open--xs'); body.toggleClass('sidemenu-open--xs');
}); });
...@@ -158,7 +149,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -158,7 +149,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
$('#tooltip, .tooltip').remove(); $('#tooltip, .tooltip').remove();
// check for kiosk url param // check for kiosk url param
setViewModeBodyClass(body, data.params.kiosk, sidemenuOpen); setViewModeBodyClass(body, data.params.kiosk);
// close all drops // close all drops
for (const drop of Drop.drops) { for (const drop of Drop.drops) {
...@@ -193,7 +184,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -193,7 +184,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
} }
$timeout(() => $location.search(search)); $timeout(() => $location.search(search));
setViewModeBodyClass(body, search.kiosk, sidemenuOpen); setViewModeBodyClass(body, search.kiosk);
}); });
// handle in active view state class // handle in active view state class
...@@ -213,7 +204,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -213,7 +204,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
if (new Date().getTime() - lastActivity > inActiveTimeLimit) { if (new Date().getTime() - lastActivity > inActiveTimeLimit) {
activeUser = false; activeUser = false;
body.addClass('view-mode--inactive'); body.addClass('view-mode--inactive');
body.removeClass('sidemenu-open');
} }
} }
...@@ -222,7 +212,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -222,7 +212,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
if (!activeUser) { if (!activeUser) {
activeUser = true; activeUser = true;
body.removeClass('view-mode--inactive'); body.removeClass('view-mode--inactive');
body.toggleClass('sidemenu-open', sidemenuOpen);
} }
} }
......
public/sass/components/_navbar.scss
...@@ -157,15 +157,9 @@ ...@@ -157,15 +157,9 @@
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
.navbar { .navbar {
padding-left: 60px; padding-left: 20px;
}
.sidemenu-open {
.navbar {
padding-left: 25px;
margin-left: 0; margin-left: 0;
} }
}
.navbar-page-btn { .navbar-page-btn {
.gicon { .gicon {
......
public/sass/components/_sidemenu.scss
...@@ -16,41 +16,39 @@ ...@@ -16,41 +16,39 @@
.sidemenu__close { .sidemenu__close {
display: none; display: none;
} }
}
// body class that hides sidemenu
.sidemenu-hidden {
.sidemenu {
display: none;
}
}
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
.sidemenu-open {
.sidemenu {
background: $side-menu-bg; background: $side-menu-bg;
height: auto; height: auto;
box-shadow: $side-menu-shadow; box-shadow: $side-menu-shadow;
position: relative; position: relative;
z-index: $zindex-sidemenu; z-index: $zindex-sidemenu;
} }
}
.sidemenu__top, // body class that hides sidemenu
.sidemenu__bottom { .sidemenu-hidden {
display: block; .sidemenu {
} display: none;
} }
} }
.sidemenu__top { .sidemenu__top {
padding-top: 3rem; padding-top: 3rem;
flex-grow: 1; flex-grow: 1;
display: none;
} }
.sidemenu__bottom { .sidemenu__bottom {
padding-bottom: $spacer; padding-bottom: $spacer;
}
.sidemenu__top,
.sidemenu__bottom {
display: none; display: none;
@include media-breakpoint-up(sm) {
display: block;
}
} }
.sidemenu-item { .sidemenu-item {
......
public/sass/components/_view_states.scss
...@@ -29,6 +29,21 @@ ...@@ -29,6 +29,21 @@
.view-mode--tv { .view-mode--tv {
@extend .view-mode--inactive; @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 { .submenu-controls {
display: none; display: none;
} }
......
public/sass/pages/_explore.scss
...@@ -25,20 +25,13 @@ ...@@ -25,20 +25,13 @@
} }
} }
.sidemenu-open {
.explore-toolbar-header {
padding: 0;
margin-left: 0;
}
}
.explore-toolbar { .explore-toolbar {
background: inherit; background: inherit;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: flex-start; justify-content: flex-start;
height: auto; height: auto;
padding: 0px $dashboard-padding 0 25px; padding: 0 $dashboard-padding;
border-bottom: 1px solid #0000; border-bottom: 1px solid #0000;
transition-duration: 0.35s; transition-duration: 0.35s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
...@@ -73,11 +66,6 @@ ...@@ -73,11 +66,6 @@
min-height: 55px; min-height: 55px;
line-height: 55px; line-height: 55px;
justify-content: space-between; justify-content: space-between;
margin-left: $panel-margin * 3;
}
.explore-toolbar-header {
justify-content: space-between;
align-items: center; align-items: center;
} }
...@@ -134,20 +122,6 @@ ...@@ -134,20 +122,6 @@
} }
@media only screen and (max-width: 803px) { @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 { .btn-title {
display: none; display: none;
} }
...@@ -161,14 +135,6 @@ ...@@ -161,14 +135,6 @@
} }
@media only screen and (max-width: 544px) { @media only screen and (max-width: 544px) {
.sidemenu-open {
.explore-toolbar-header-title {
.navbar-page-btn {
margin-left: $dashboard-padding;
}
}
}
.explore-toolbar-header-title { .explore-toolbar-header-title {
.navbar-page-btn { .navbar-page-btn {
margin-left: $dashboard-padding; margin-left: $dashboard-padding;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment