Skip to content

N
nexpie-grafana-theme
Commit dfcb82d2 by Torkel Ödegaard
Options

feat(sidenav): more work on new side nav

parent aa9a92d2
Showing with 196 additions and 88 deletions
public/app/features/all.js
define([ define([
'./panellinks/module', './panellinks/module',
'./sidemenu/sidemenu',
'./dashlinks/module', './dashlinks/module',
'./annotations/annotations_srv', './annotations/annotations_srv',
'./templating/templateSrv', './templating/templateSrv',
......
public/app/features/dashboard/timepicker/timepicker.ts
...@@ -144,7 +144,6 @@ export class TimePickerCtrl { ...@@ -144,7 +144,6 @@ export class TimePickerCtrl {
} }
export function settingsDirective() { export function settingsDirective() {
'use strict';
return { return {
restrict: 'E', restrict: 'E',
templateUrl: 'app/features/dashboard/timepicker/settings.html', templateUrl: 'app/features/dashboard/timepicker/settings.html',
...@@ -158,7 +157,6 @@ export function settingsDirective() { ...@@ -158,7 +157,6 @@ export function settingsDirective() {
} }
export function timePickerDirective() { export function timePickerDirective() {
'use strict';
return { return {
restrict: 'E', restrict: 'E',
templateUrl: 'app/features/dashboard/timepicker/timepicker.html', templateUrl: 'app/features/dashboard/timepicker/timepicker.html',
......
public/app/partials/sidemenu.html → public/app/features/sidemenu/sidemenu.html
<div ng-controller="SideMenuCtrl" ng-init="init()"> <ul class="sidemenu sidemenu-main">
<ul class="sidemenu sidemenu-main"> <li class="sidemenu-org-section dropdown" ng-if="ctrl.isSignedIn">
<div class="sidemenu-org" data-toggle="dropdown" ng-click="ctrl.openUserDropdown()">
<li class="sidemenu-org-section dropdown" ng-if="contextSrv.isSignedIn">
<div class="sidemenu-org" data-toggle="dropdown" ng-click="openUserDropdown()">
<div class="sidemenu-org-avatar"> <div class="sidemenu-org-avatar">
<img ng-src="{{contextSrv.user.gravatarUrl}}"> <img ng-src="{{ctrl.user.gravatarUrl}}">
</div> </div>
<div class="sidemenu-org-details"> <div class="sidemenu-org-details">
<span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span> <span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span> <span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span>
</div> </div>
<i class="fa fa-caret-right small"></i> <i class="fa fa-caret-right small"></i>
</div> </div>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass"> <li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass">
<span ng-if="menuItem.section">{{menuItem.section}}</span> <span ng-if="menuItem.section">{{menuItem.section}}</span>
<a href="{{menuItem.url}}" ng-if="menuItem.url" target="{{menuItem.target}}"> <a href="{{menuItem.url}}" ng-if="menuItem.url" target="{{menuItem.target}}">
<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i> <i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
...@@ -28,17 +26,17 @@ ...@@ -28,17 +26,17 @@
</ul> </ul>
</li> </li>
<li class="sidemenu-system-section" ng-if="systemSection"> <li class="sidemenu-system-section" ng-if="ctrl.systemSection">
<div class="sidemenu-system-section-inner"> <div class="sidemenu-system-section-inner">
<i class="fa fa-fw fa-cubes"></i> <i class="fa fa-fw fa-cubes"></i>
<div class="sidemenu-section-text-wrapper"> <div class="sidemenu-section-text-wrapper">
<div class="sidemenu-section-heading">Grafana Admin</div> <div class="sidemenu-section-heading">Grafana Admin</div>
<div class="sidemenu-section-tagline">v {{grafanaVersion}}</div> <div class="sidemenu-section-tagline">v {{ctrl.grafanaVersion}}</div>
</div> </div>
</div> </div>
</li> </li>
<li ng-repeat="item in mainLinks"> <li ng-repeat="item in ctrl.mainLinks">
<a href="{{item.url}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}"> <a href="{{item.url}}" class="sidemenu-item sidemenu-main-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>
...@@ -48,22 +46,21 @@ ...@@ -48,22 +46,21 @@
</a> </a>
</li> </li>
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="systemSection"> <ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="ctrl.systemSection">
<li> <li>
<a href="{{appSubUrl}}/" class="sidemenu-item"> <a href="{{ctrl.appSubUrl}}/" class="sidemenu-item">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span> <span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span>
<span class="sidemenu-item-text">Exit admin</span> <span class="sidemenu-item-text">Exit admin</span>
</a> </a>
</li> </li>
</ul> </ul>
<li ng-if="!contextSrv.isSignedIn"> <li ng-if="!ctrl.isSignedIn">
<a href="login" class="sidemenu-item" target="_self"> <a href="login" class="sidemenu-item" target="_self">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span> <span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
<span class="sidemenu-item-text">Sign in</span> <span class="sidemenu-item-text">Sign in</span>
</a> </a>
</li> </li>
</ul> </ul>
</div>
public/app/features/sidemenu/sidemenu.ts 0 → 100644
///<reference path="../../headers/common.d.ts" />
import config from 'app/core/config';
import store from 'app/core/store';
import _ from 'lodash';
import angular from 'angular';
import $ from 'jquery';
class SideMenuCtrl {
isSignedIn: boolean;
showSignout: boolean;
user: any;
mainLinks: any;
orgMenu: any;
systemSection: any;
grafanaVersion: any;
appSubUrl: string;
constructor(private $scope, private $location, private contextSrv, private backendSrv) {
this.isSignedIn = contextSrv.isSignedIn;
this.user = contextSrv.user;
this.appSubUrl = config.appSubUrl;
this.showSignout = this.contextSrv.isSignedIn && !config['authProxyEnabled'];
this.updateMenu();
this.$scope.$on('$routeChangeSuccess', () => this.updateMenu());
}
getUrl(url) {
return config.appSubUrl + url;
}
setupMainNav() {
this.mainLinks = config.bootData.mainNavLinks.map(item => {
return {text: item.text, icon: item.icon, img: item.img, url: this.getUrl(item.url)};
});
}
openUserDropdown() {
this.orgMenu = [
{section: 'You', cssClass: 'dropdown-menu-title'},
{text: 'Profile', url: this.getUrl('/profile')},
];
if (this.contextSrv.hasRole('Admin')) {
this.orgMenu.push({section: this.user.orgName, cssClass: 'dropdown-menu-title'});
this.orgMenu.push({
text: "Settings",
url: this.getUrl("/org"),
});
this.orgMenu.push({
text: "Users",
url: this.getUrl("/org/users"),
});
this.orgMenu.push({
text: "API Keys",
url: this.getUrl("/org/apikeys"),
});
}
this.orgMenu.push({cssClass: "divider"});
if (config.allowOrgCreate) {
this.orgMenu.push({text: "New organization", icon: "fa fa-fw fa-plus", url: this.getUrl('/org/new')});
}
this.backendSrv.get('/api/user/orgs').then(orgs => {
orgs.forEach(org => {
if (org.orgId === this.contextSrv.user.orgId) {
return;
}
this.orgMenu.push({
text: "Switch to " + org.name,
icon: "fa fa-fw fa-random",
click: () => {
this.switchOrg(org.orgId);
}
});
});
this.orgMenu.push({cssClass: "divider"});
if (this.contextSrv.isGrafanaAdmin) {
this.orgMenu.push({text: "Server admin", url: this.getUrl("/admin/settings")});
}
if (this.isSignedIn) {
this.orgMenu.push({text: "Sign out", url: this.getUrl("/logout"), target: "_self"});
}
});
}
switchOrg(orgId) {
this.backendSrv.post('/api/user/using/' + orgId).then(() => {
window.location.href = window.location.href;
});
};
setupAdminNav() {
this.systemSection = true;
this.grafanaVersion = config.buildInfo.version;
this.mainLinks.push({
text: "System info",
icon: "fa fa-fw fa-info",
href: this.getUrl("/admin/settings"),
});
this.mainLinks.push({
text: "Global Users",
icon: "fa fa-fw fa-user",
href: this.getUrl("/admin/users"),
});
this.mainLinks.push({
text: "Global Orgs",
icon: "fa fa-fw fa-users",
href: this.getUrl("/admin/orgs"),
});
}
updateMenu() {
this.systemSection = false;
this.mainLinks = [];
this.orgMenu = [];
var currentPath = this.$location.path();
if (currentPath.indexOf('/admin') === 0) {
this.setupAdminNav();
} else {
this.setupMainNav();
}
};
}
function sideMenuDirective() {
return {
restrict: 'E',
templateUrl: 'app/features/sidemenu/sidemenu.html',
controller: SideMenuCtrl,
bindToController: true,
controllerAs: 'ctrl',
scope: {},
};
}
angular.module('grafana.directives').directive('sidemenu', sideMenuDirective);
public/less/navbar.less
...@@ -20,70 +20,28 @@ ...@@ -20,70 +20,28 @@
color: @textColor; color: @textColor;
} }
// .top-nav-menu-btn {
// float: left;
// .top-nav-menu-circle {
// border: 1px solid @bodyBackground;
// margin: 6px 6px 3px 9px;
// display: inline-block;
// padding: 4px;
// border-radius: 50%;
// background: @iconContainerBackground;
// width: 30px;
// height: 30px;
// float: left;
// }
// .fa-bars {
// color: @textColor;
// width: 30px;
// height: 30px;
// left: 9px;
// top: 7px;
// font-size: 150%;
// opacity: 0;
// position: absolute;
// transition: opacity .20s ease-in-out;
// }
// .fa-caret-down {
// position: relative;
// font-size: 80%;
// }
// img {
// width: 30px;
// position: absolute;
// opacity: 1;
// transition: opacity .20s ease-in-out;
// }
// &:hover {
// .fa {
// opacity: .7;
// }
// img {
// opacity: 0;
// }
// }
// }
.top-nav-btn { .top-nav-btn {
display: block; display: block;
position: relative;
float: left; float: left;
margin: 0; margin: 0;
font-size: 1.4em; font-size: 1.4em;
color: #a2a2a2; border-right: 1px solid @grafanaTargetBorder;
border-right: 1px solid black;
.fa-caret-down { .fa-caret-down {
font-size: 60%; font-size: 50%;
position: relative; position: absolute;
top: 4px; right: 7px;
top: 21px;
} }
a { a {
background-color: darken(@grafanaTargetFuncBackground, 2%); color: darken(@linkColor, 5%);
background-color: @navbarButtonBackground;
border-bottom: 1px solid @navbarButtonBackground;
display: inline-block; display: inline-block;
color: #a2a2a2;
&:hover { &:hover {
background: @grafanaTargetFuncBackground; background: @navbarButtonBackgroundHighlight;
color: @linkColor; color: @linkColor;
border-bottom: 1px solid @blue; border-bottom: 1px solid @blue;
} }
...@@ -92,7 +50,7 @@ ...@@ -92,7 +50,7 @@
.top-nav-menu-btn { .top-nav-menu-btn {
a { a {
padding: 6px 15px 6px 10px; padding: 6px 20px 6px 13px;
} }
img { img {
width: 30px; width: 30px;
...@@ -111,7 +69,7 @@ ...@@ -111,7 +69,7 @@
.top-nav-dashboards-btn { .top-nav-dashboards-btn {
a { a {
padding: 14px 15px 14px 10px; padding: 14px 17px 14px 13px;
} }
.fa-th-large { .fa-th-large {
...@@ -122,7 +80,6 @@ ...@@ -122,7 +80,6 @@
.dashboard-title { .dashboard-title {
padding: 0px 6px 5px 5px; padding: 0px 6px 5px 5px;
color: @linkColorHover;
font-size: 17px; font-size: 17px;
} }
......
public/less/sidemenu.less
...@@ -3,12 +3,13 @@ ...@@ -3,12 +3,13 @@
} }
.sidemenu-wrapper { .sidemenu-wrapper {
position: absolute; position: fixed;
top: 51px; top: 53px;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 200px; width: 200px;
background-color: darken(@grafanaTargetFuncBackground, 2%); background-color: @sideMenuBackground;
border: @sideMenuBorder;
min-height: 100%; min-height: 100%;
z-index: 101; z-index: 101;
...@@ -83,18 +84,15 @@ ...@@ -83,18 +84,15 @@
padding: 0px 10px 0px 20px; padding: 0px 10px 0px 20px;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
background-color: @grafanaTargetFuncBackground; background-color: @sideMenuBackgroundHighlight;
} }
.sidemenu-item-text { .sidemenu-item-text {
padding-left: 11px; padding-left: 11px;
transition: color 100ms ease-out;
&.no-icon {
padding-left: 59px;
}
} }
img { img {
border-radius: 50%; border-radius: 50%;
width: 28px; width: 28px;
...@@ -169,8 +167,8 @@ ...@@ -169,8 +167,8 @@
} }
.sidemenu-org-section { .sidemenu-org-section {
box-shadow: inset 0 4px 15px -4px #161616; box-shadow: @sideMenuTopShadow;
border-bottom: 2px solid @sideMenuOrgBorder; border-bottom: @sideMenuBorder;
padding: 17px 10px 15px 21px; padding: 17px 10px 15px 21px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
......
public/less/variables.dark.less
...@@ -159,7 +159,10 @@ ...@@ -159,7 +159,10 @@
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
@sideMenuOrgBorder: rgb(37,37,37); @sideMenuTopShadow: inset 0 4px 15px -4px @black;
@sideMenuBorder: 1px solid @bodyBackground;
@sideMenuBackground: @grayDark;
@sideMenuBackgroundHighlight: lighten(@grayDark, 4%);
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
...@@ -239,6 +242,8 @@ ...@@ -239,6 +242,8 @@
@navbarBrandColor: @linkColor; @navbarBrandColor: @linkColor;
@navbarDropdownShadow: inset 0px 4px 10px -4px @bodyBackground; @navbarDropdownShadow: inset 0px 4px 10px -4px @bodyBackground;
@navbarButtonBackground: lighten(@navbarBackground, 3%);
@navbarButtonBackgroundHighlight: lighten(@navbarBackground, 5%);
// Pagination // Pagination
// ------------------------- // -------------------------
......
public/less/variables.light.less
...@@ -173,7 +173,10 @@ ...@@ -173,7 +173,10 @@
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
@sideMenuOrgBorder: #555; @sideMenuTopShadow: @navbarDropdownShadow;
@sideMenuBorder: 1px solid @grafanaTargetBorder;
@sideMenuBackground: @grafanaPanelBackground;
@sideMenuBackgroundHighlight: darken(@sideMenuBackground, 4%);
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
...@@ -255,6 +258,9 @@ ...@@ -255,6 +258,9 @@
@navbarBrandColor: @navbarLinkColor; @navbarBrandColor: @navbarLinkColor;
@navbarButtonBackground: lighten(@navbarBackground, 3%);
@navbarButtonBackgroundHighlight: lighten(@navbarBackground, 5%);
// Pagination // Pagination
// ------------------------- // -------------------------
......
public/views/index.html
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<div class="sidemenu-canvas"> <div class="sidemenu-canvas">
<aside class="sidemenu-wrapper" ng-if="contextSrv.sidemenu" > <aside class="sidemenu-wrapper" ng-if="contextSrv.sidemenu" >
<div ng-include="'app/partials/sidemenu.html'"></div> <sidemenu></sidemenu>
</aside> </aside>
<div class="page-alert-list"> <div class="page-alert-list">
......
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