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) {
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
sidemenuOpen = scope.contextSrv.sidemenu;
body.toggleClass('sidemenu-open', sidemenuOpen);
scope.$watch('contextSrv.sidemenu', newVal => {
if (newVal !== undefined) {
if (sidemenuOpen !== scope.contextSrv.sidemenu) {
sidemenuOpen = 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) {
}
}
// 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) {
......
public/app/core/components/sidemenu/sidemenu.html
<div class="sidemenu__top">
<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<span class="navbar-brand-btn-background">
<img src="public/img/grafana_icon.svg"></img>
</span>
</a>
<a class="sidemenu__logo" ng-click="ctrl.toggleSideMenu()">
<span class="navbar-brand-btn-background">
<img src="public/img/grafana_icon.svg"></img>
</span>
</a>
<div class="sidemenu__top">
<div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown">
<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
<span class="icon-circle sidemenu-icon">
......@@ -39,14 +38,14 @@
</ul>
</div>
<div ng-repeat="item in ::ctrl.bottomNav" class="sidemenu-item dropdown dropup">
<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
<span class="icon-circle sidemenu-icon">
<i class="{{::item.icon}}" ng-show="::item.icon"></i>
<img ng-src="{{::item.img}}" ng-show="::item.img">
</span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
<div ng-repeat="item in ::ctrl.bottomNav" class="sidemenu-item dropdown dropup">
<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
<span class="icon-circle sidemenu-icon">
<i class="{{::item.icon}}" ng-show="::item.icon"></i>
<img ng-src="{{::item.img}}" ng-show="::item.img">
</span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
<li ng-if="item.showOrgSwitcher" class="sidemenu-org-switcher">
<a ng-click="ctrl.switchOrg()">
<div>
......@@ -56,16 +55,16 @@
<div class="sidemenu-org-switcher__switch"><i class="fa fa-fw fa-random"></i>Switch</div>
</a>
</li>
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}" ng-hide="::child.hideFromMenu">
<a href="{{::child.url}}" target="{{::child.target}}">
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
{{::child.text}}
</a>
</li>
<li class="side-menu-header">
<span class="sidemenu-item-text">{{::item.text}}</span>
</li>
</ul>
</div>
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}" ng-hide="::child.hideFromMenu">
<a href="{{::child.url}}" target="{{::child.target}}">
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
{{::child.text}}
</a>
</li>
<li class="side-menu-header">
<span class="sidemenu-item-text">{{::item.text}}</span>
</li>
</ul>
</div>
</div>
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: '<org-switcher dismiss="dismiss()"></org-switcher>',
......
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);
}
}
......
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;
......
public/sass/components/_sidemenu.scss
.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;
}
}
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