Skip to content

N
nexpie-grafana-theme
Commit 4dd4631b by Torkel Ödegaard
Options

ux: sidemenu toggling

parent 6609dbff
Showing with 88 additions and 68 deletions
public/app/core/components/grafana_app.ts
...@@ -70,31 +70,19 @@ export function grafanaAppDirective(playlistSrv, contextSrv) { ...@@ -70,31 +70,19 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
restrict: 'E', restrict: 'E',
controller: GrafanaCtrl, controller: GrafanaCtrl,
link: (scope, elem) => { link: (scope, elem) => {
var ignoreSideMenuHide; var sidemenuOpen;
var body = $('body'); var body = $('body');
// see https://github.com/zenorocha/clipboard.js/issues/155 // see https://github.com/zenorocha/clipboard.js/issues/155
$.fn.modal.Constructor.prototype.enforceFocus = function() {}; $.fn.modal.Constructor.prototype.enforceFocus = function() {};
// handle sidemenu open state sidemenuOpen = scope.contextSrv.sidemenu;
body.toggleClass('sidemenu-open', sidemenuOpen);
scope.$watch('contextSrv.sidemenu', newVal => { scope.$watch('contextSrv.sidemenu', newVal => {
if (newVal !== undefined) { if (sidemenuOpen !== scope.contextSrv.sidemenu) {
sidemenuOpen = scope.contextSrv.sidemenu;
body.toggleClass('sidemenu-open', scope.contextSrv.sidemenu); body.toggleClass('sidemenu-open', scope.contextSrv.sidemenu);
if (!newVal) {
contextSrv.setPinnedState(false);
}
}
if (contextSrv.sidemenu) {
ignoreSideMenuHide = true;
setTimeout(() => {
ignoreSideMenuHide = false;
}, 300);
}
});
scope.$watch('contextSrv.pinned', newVal => {
if (newVal !== undefined) {
body.toggleClass('sidemenu-pinned', newVal);
} }
}); });
...@@ -199,15 +187,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv) { ...@@ -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 // hide popovers
var popover = elem.find('.popover'); var popover = elem.find('.popover');
if (popover.length > 0 && target.parents('.graph-legend').length === 0) { if (popover.length > 0 && target.parents('.graph-legend').length === 0) {
......
public/app/core/components/sidemenu/sidemenu.html
<div class="sidemenu__top"> <a class="sidemenu__logo" ng-click="ctrl.toggleSideMenu()">
<span class="navbar-brand-btn-background">
<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()"> <img src="public/img/grafana_icon.svg"></img>
<span class="navbar-brand-btn-background"> </span>
<img src="public/img/grafana_icon.svg"></img> </a>
</span>
</a>
<div class="sidemenu__top">
<div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown"> <div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown">
<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}"> <a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
<span class="icon-circle sidemenu-icon"> <span class="icon-circle sidemenu-icon">
...@@ -39,14 +38,14 @@ ...@@ -39,14 +38,14 @@
</ul> </ul>
</div> </div>
<div ng-repeat="item in ::ctrl.bottomNav" class="sidemenu-item dropdown dropup"> <div ng-repeat="item in ::ctrl.bottomNav" class="sidemenu-item dropdown dropup">
<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}"> <a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
<span class="icon-circle sidemenu-icon"> <span class="icon-circle sidemenu-icon">
<i class="{{::item.icon}}" ng-show="::item.icon"></i> <i class="{{::item.icon}}" ng-show="::item.icon"></i>
<img ng-src="{{::item.img}}" ng-show="::item.img"> <img ng-src="{{::item.img}}" ng-show="::item.img">
</span> </span>
</a> </a>
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu"> <ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
<li ng-if="item.showOrgSwitcher" class="sidemenu-org-switcher"> <li ng-if="item.showOrgSwitcher" class="sidemenu-org-switcher">
<a ng-click="ctrl.switchOrg()"> <a ng-click="ctrl.switchOrg()">
<div> <div>
...@@ -56,16 +55,16 @@ ...@@ -56,16 +55,16 @@
<div class="sidemenu-org-switcher__switch"><i class="fa fa-fw fa-random"></i>Switch</div> <div class="sidemenu-org-switcher__switch"><i class="fa fa-fw fa-random"></i>Switch</div>
</a> </a>
</li> </li>
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}" ng-hide="::child.hideFromMenu"> <li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}" ng-hide="::child.hideFromMenu">
<a href="{{::child.url}}" target="{{::child.target}}"> <a href="{{::child.url}}" target="{{::child.target}}">
<i class="{{::child.icon}}" ng-show="::child.icon"></i> <i class="{{::child.icon}}" ng-show="::child.icon"></i>
{{::child.text}} {{::child.text}}
</a> </a>
</li> </li>
<li class="side-menu-header"> <li class="side-menu-header">
<span class="sidemenu-item-text">{{::item.text}}</span> <span class="sidemenu-item-text">{{::item.text}}</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
public/app/core/components/sidemenu/sidemenu.ts
...@@ -13,7 +13,7 @@ export class SideMenuCtrl { ...@@ -13,7 +13,7 @@ export class SideMenuCtrl {
isSignedIn: boolean; isSignedIn: boolean;
/** @ngInject */ /** @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.isSignedIn = contextSrv.isSignedIn;
this.user = contextSrv.user; this.user = contextSrv.user;
this.mainLinks = _.filter(config.bootData.navTree, item => !item.hideFromMenu); this.mainLinks = _.filter(config.bootData.navTree, item => !item.hideFromMenu);
...@@ -28,13 +28,17 @@ export class SideMenuCtrl { ...@@ -28,13 +28,17 @@ export class SideMenuCtrl {
} }
this.$scope.$on('$routeChangeSuccess', () => { this.$scope.$on('$routeChangeSuccess', () => {
if (!this.contextSrv.pinned) {
this.contextSrv.sidemenu = false;
}
this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path()); this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
}); });
} }
toggleSideMenu() {
this.contextSrv.toggleSideMenu();
this.$timeout(() => {
this.$rootScope.$broadcast('render');
});
}
switchOrg() { switchOrg() {
this.$rootScope.appEvent('show-modal', { this.$rootScope.appEvent('show-modal', {
templateHtml: '<org-switcher dismiss="dismiss()"></org-switcher>', templateHtml: '<org-switcher dismiss="dismiss()"></org-switcher>',
......
public/app/core/services/context_srv.ts
...@@ -31,10 +31,7 @@ export class ContextSrv { ...@@ -31,10 +31,7 @@ export class ContextSrv {
sidemenu: any; sidemenu: any;
constructor() { constructor() {
this.pinned = store.getBool('grafana.sidemenu.pinned', false); this.sidemenu = store.getBool('grafana.sidemenu', false);
if (this.pinned) {
this.sidemenu = true;
}
if (!config.buildInfo) { if (!config.buildInfo) {
config.buildInfo = {}; config.buildInfo = {};
...@@ -54,18 +51,13 @@ export class ContextSrv { ...@@ -54,18 +51,13 @@ export class ContextSrv {
return this.user.orgRole === role; return this.user.orgRole === role;
} }
setPinnedState(val) {
this.pinned = val;
store.set('grafana.sidemenu.pinned', val);
}
isGrafanaVisible() { isGrafanaVisible() {
return !!(document.visibilityState === undefined || document.visibilityState === 'visible'); return !!(document.visibilityState === undefined || document.visibilityState === 'visible');
} }
toggleSideMenu() { toggleSideMenu() {
this.sidemenu = !this.sidemenu; this.sidemenu = !this.sidemenu;
this.setPinnedState(this.sidemenu); store.set('grafana.sidemenu',this.sidemenu);
} }
} }
......
public/sass/components/_navbar.scss
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
display: block; display: block;
overflow: visible; overflow: visible;
position: relative; position: relative;
z-index: 110;
} }
.navbar-inner { .navbar-inner {
...@@ -11,9 +10,16 @@ ...@@ -11,9 +10,16 @@
padding-right: $spacer; padding-right: $spacer;
background-color: $navbarBackground; background-color: $navbarBackground;
border-bottom: $navbarBorder; border-bottom: $navbarBorder;
margin-left: $side-menu-width;
@include clearfix(); @include clearfix();
} }
.sidemenu-open {
.navbar-inner {
margin-left: 0;
}
}
.navbar .nav { .navbar .nav {
position: relative; position: relative;
left: 0; left: 0;
......
public/sass/components/_sidemenu.scss
.sidemenu { .sidemenu {
position: fixed;
height: 30px;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex-direction: column; flex-direction: column;
...@@ -13,12 +16,25 @@ ...@@ -13,12 +16,25 @@
} }
} }
.sidemenu-open {
.sidemenu {
position: initial;
height: auto;
}
.sidemenu__top,
.sidemenu__bottom {
display: block;
}
}
.sidemenu__top { .sidemenu__top {
flex-grow: 1; flex-grow: 1;
display: none;
} }
.sidemenu__bottom { .sidemenu__bottom {
padding-bottom: $spacer; padding-bottom: $spacer;
display: none;
} }
.sidemenu-item { .sidemenu-item {
...@@ -134,3 +150,27 @@ li.sidemenu-org-switcher { ...@@ -134,3 +150,27 @@ li.sidemenu-org-switcher {
top: 1px; 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;
}
}
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