mirror of
https://github.com/grafana/grafana.git
synced 2024-11-26 02:40:26 -06:00
feat(sidenav): more work on new side nav
This commit is contained in:
Torkel Ödegaard
parent
aa9a92d2e0
commit
dfcb82d233
@ -1,5 +1,6 @@
|
||||
define([
|
||||
'./panellinks/module',
|
||||
'./sidemenu/sidemenu',
|
||||
'./dashlinks/module',
|
||||
'./annotations/annotations_srv',
|
||||
'./templating/templateSrv',
|
||||
|
||||
@ -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',
|
||||
|
||||
66
public/app/features/sidemenu/sidemenu.html
Normal file
66
public/app/features/sidemenu/sidemenu.html
Normal file
@ -0,0 +1,66 @@
|
||||
<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()">
|
||||
<div class="sidemenu-org-avatar">
|
||||
<img ng-src="{{ctrl.user.gravatarUrl}}">
|
||||
</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>
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
|
||||
146
public/app/features/sidemenu/sidemenu.ts
Normal file
146
public/app/features/sidemenu/sidemenu.ts
Normal file
@ -0,0 +1,146 @@
|
||||
///<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);
|
||||
@ -1,69 +0,0 @@
|
||||
<div ng-controller="SideMenuCtrl" ng-init="init()">
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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
|
||||
// -------------------------
|
||||
|
||||
@ -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
|
||||
// -------------------------
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user