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 238 additions and 130 deletions
public/app/features/all.js
define([
'./panellinks/module',
'./sidemenu/sidemenu',
'./dashlinks/module',
'./annotations/annotations_srv',
'./templating/templateSrv',
......
public/app/features/dashboard/timepicker/timepicker.ts
......@@ -144,7 +144,6 @@ export class TimePickerCtrl {
}
export function settingsDirective() {
'use strict';
return {
restrict: 'E',
templateUrl: 'app/features/dashboard/timepicker/settings.html',
......@@ -158,7 +157,6 @@ export function settingsDirective() {
}
export function timePickerDirective() {
'use strict';
return {
restrict: 'E',
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="contextSrv.isSignedIn">
<div class="sidemenu-org" data-toggle="dropdown" ng-click="openUserDropdown()">
<div class="sidemenu-org-avatar">
<img ng-src="{{contextSrv.user.gravatarUrl}}">
</div>
<div class="sidemenu-org-details">
<span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span>
</div>
<i class="fa fa-caret-right small"></i>
<li class="sidemenu-org-section dropdown" ng-if="ctrl.isSignedIn">
<div class="sidemenu-org" data-toggle="dropdown" ng-click="ctrl.openUserDropdown()">
<div class="sidemenu-org-avatar">
<img ng-src="{{ctrl.user.gravatarUrl}}">
</div>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
<span ng-if="menuItem.section">{{menuItem.section}}</span>
<a href="{{menuItem.url}}" ng-if="menuItem.url" target="{{menuItem.target}}">
<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
{{menuItem.text}}
</a>
<a ng-click="menuItem.click()" ng-if="menuItem.click">
<i class="{{menuItem.icon}}"></i>
{{menuItem.text}}
</a>
</li>
</ul>
</li>
<li class="sidemenu-system-section" ng-if="systemSection">
<div class="sidemenu-system-section-inner">
<i class="fa fa-fw fa-cubes"></i>
<div class="sidemenu-section-text-wrapper">
<div class="sidemenu-section-heading">Grafana Admin</div>
<div class="sidemenu-section-tagline">v {{grafanaVersion}}</div>
</div>
<div class="sidemenu-org-details">
<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span>
</div>
</li>
<li ng-repeat="item in mainLinks">
<a href="{{item.url}}" class="sidemenu-item sidemenu-main-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>
<span class="sidemenu-item-text">{{item.text}}</span>
</a>
</li>
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="systemSection">
<li>
<a href="{{appSubUrl}}/" class="sidemenu-item">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span>
<span class="sidemenu-item-text">Exit admin</span>
<i class="fa fa-caret-right small"></i>
</div>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass">
<span ng-if="menuItem.section">{{menuItem.section}}</span>
<a href="{{menuItem.url}}" ng-if="menuItem.url" target="{{menuItem.target}}">
<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
{{menuItem.text}}
</a>
<a ng-click="menuItem.click()" ng-if="menuItem.click">
<i class="{{menuItem.icon}}"></i>
{{menuItem.text}}
</a>
</li>
</ul>
</li>
<li ng-if="!contextSrv.isSignedIn">
<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="sidemenu-item-text">Sign in</span>
</a>
</li>
<li class="sidemenu-system-section" ng-if="ctrl.systemSection">
<div class="sidemenu-system-section-inner">
<i class="fa fa-fw fa-cubes"></i>
<div class="sidemenu-section-text-wrapper">
<div class="sidemenu-section-heading">Grafana Admin</div>
<div class="sidemenu-section-tagline">v {{ctrl.grafanaVersion}}</div>
</div>
</div>
</li>
<li ng-repeat="item in ctrl.mainLinks">
<a href="{{item.url}}" class="sidemenu-item sidemenu-main-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>
<span class="sidemenu-item-text">{{item.text}}</span>
</a>
</li>
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="ctrl.systemSection">
<li>
<a href="{{ctrl.appSubUrl}}/" class="sidemenu-item">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span>
<span class="sidemenu-item-text">Exit admin</span>
</a>
</li>
</ul>
</div>
<li ng-if="!ctrl.isSignedIn">
<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="sidemenu-item-text">Sign in</span>
</a>
</li>
</ul>
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 @@
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 {
display: block;
position: relative;
float: left;
margin: 0;
font-size: 1.4em;
color: #a2a2a2;
border-right: 1px solid black;
border-right: 1px solid @grafanaTargetBorder;
.fa-caret-down {
font-size: 60%;
position: relative;
top: 4px;
font-size: 50%;
position: absolute;
right: 7px;
top: 21px;
}
a {
background-color: darken(@grafanaTargetFuncBackground, 2%);
color: darken(@linkColor, 5%);
background-color: @navbarButtonBackground;
border-bottom: 1px solid @navbarButtonBackground;
display: inline-block;
color: #a2a2a2;
&:hover {
background: @grafanaTargetFuncBackground;
background: @navbarButtonBackgroundHighlight;
color: @linkColor;
border-bottom: 1px solid @blue;
}
......@@ -92,7 +50,7 @@
.top-nav-menu-btn {
a {
padding: 6px 15px 6px 10px;
padding: 6px 20px 6px 13px;
}
img {
width: 30px;
......@@ -111,7 +69,7 @@
.top-nav-dashboards-btn {
a {
padding: 14px 15px 14px 10px;
padding: 14px 17px 14px 13px;
}
.fa-th-large {
......@@ -122,7 +80,6 @@
.dashboard-title {
padding: 0px 6px 5px 5px;
color: @linkColorHover;
font-size: 17px;
}
......
public/less/sidemenu.less
......@@ -3,12 +3,13 @@
}
.sidemenu-wrapper {
position: absolute;
top: 51px;
position: fixed;
top: 53px;
bottom: 0;
left: 0;
width: 200px;
background-color: darken(@grafanaTargetFuncBackground, 2%);
background-color: @sideMenuBackground;
border: @sideMenuBorder;
min-height: 100%;
z-index: 101;
......@@ -83,18 +84,15 @@
padding: 0px 10px 0px 20px;
display: block;
white-space: nowrap;
&:hover {
background-color: @grafanaTargetFuncBackground;
background-color: @sideMenuBackgroundHighlight;
}
.sidemenu-item-text {
padding-left: 11px;
transition: color 100ms ease-out;
&.no-icon {
padding-left: 59px;
}
}
img {
border-radius: 50%;
width: 28px;
......@@ -169,8 +167,8 @@
}
.sidemenu-org-section {
box-shadow: inset 0 4px 15px -4px #161616;
border-bottom: 2px solid @sideMenuOrgBorder;
box-shadow: @sideMenuTopShadow;
border-bottom: @sideMenuBorder;
padding: 17px 10px 15px 21px;
cursor: pointer;
&:hover {
......
public/less/variables.dark.less
......@@ -159,7 +159,10 @@
// Sidemenu
// -------------------------
@sideMenuOrgBorder: rgb(37,37,37);
@sideMenuTopShadow: inset 0 4px 15px -4px @black;
@sideMenuBorder: 1px solid @bodyBackground;
@sideMenuBackground: @grayDark;
@sideMenuBackgroundHighlight: lighten(@grayDark, 4%);
// Dropdowns
// -------------------------
......@@ -239,6 +242,8 @@
@navbarBrandColor: @linkColor;
@navbarDropdownShadow: inset 0px 4px 10px -4px @bodyBackground;
@navbarButtonBackground: lighten(@navbarBackground, 3%);
@navbarButtonBackgroundHighlight: lighten(@navbarBackground, 5%);
// Pagination
// -------------------------
......
public/less/variables.light.less
......@@ -173,7 +173,10 @@
// Sidemenu
// -------------------------
@sideMenuOrgBorder: #555;
@sideMenuTopShadow: @navbarDropdownShadow;
@sideMenuBorder: 1px solid @grafanaTargetBorder;
@sideMenuBackground: @grafanaPanelBackground;
@sideMenuBackgroundHighlight: darken(@sideMenuBackground, 4%);
// Dropdowns
// -------------------------
......@@ -255,6 +258,9 @@
@navbarBrandColor: @navbarLinkColor;
@navbarButtonBackground: lighten(@navbarBackground, 3%);
@navbarButtonBackgroundHighlight: lighten(@navbarBackground, 5%);
// Pagination
// -------------------------
......
public/views/index.html
......@@ -29,7 +29,7 @@
<div class="sidemenu-canvas">
<aside class="sidemenu-wrapper" ng-if="contextSrv.sidemenu" >
<div ng-include="'app/partials/sidemenu.html'"></div>
<sidemenu></sidemenu>
</aside>
<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