mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux: more work on sidemenu
This commit is contained in:
Torkel Ödegaard
@@ -1,77 +1,89 @@
|
||||
|
||||
<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>
|
||||
<div class="sidemenu__top">
|
||||
|
||||
<ul class="sidemenu">
|
||||
<li>
|
||||
<a class="sidemenu-item" ng-click="ctrl.search()">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
<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>
|
||||
|
||||
<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
|
||||
<a href="{{::item.url}}" class="sidemenu-item" 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" ng-if="::item.children">
|
||||
<li class="side-menu-header">
|
||||
<span class="sidemenu-item-text">{{::item.text}}</span>
|
||||
</li>
|
||||
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
|
||||
<a href="{{::child.url}}">
|
||||
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
|
||||
{{::child.text}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<div class="sidemenu-item">
|
||||
<a class="sidemenu-link" ng-click="ctrl.search()">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<li ng-show="::!ctrl.isSignedIn">
|
||||
<a href="{{ctrl.loginUrl}}" 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>
|
||||
<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">
|
||||
<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" ng-if="::item.children">
|
||||
<li class="side-menu-header">
|
||||
<span class="sidemenu-item-text">{{::item.text}}</span>
|
||||
</li>
|
||||
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
|
||||
<a href="{{::child.url}}">
|
||||
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
|
||||
{{::child.text}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
|
||||
<a class="sidemenu-item" href="profile">
|
||||
<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
|
||||
<img ng-src="{{::ctrl.user.gravatarUrl}}">
|
||||
<span class="sidemenu-org-avatar--missing">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
|
||||
<li class="side-menu-header">
|
||||
<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
|
||||
<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
|
||||
</li>
|
||||
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
|
||||
<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
|
||||
<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
|
||||
<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
|
||||
{{::menuItem.text}}
|
||||
</a>
|
||||
</li>
|
||||
<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
|
||||
<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
|
||||
<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
|
||||
</li>
|
||||
<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
|
||||
<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
|
||||
<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
|
||||
{{::orgItem.text}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<div class="sidemenu__bottom">
|
||||
<div ng-show="::!ctrl.isSignedIn" class="sidemenu-item">
|
||||
<a href="{{ctrl.loginUrl}}" class="sidemenu-link" 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>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="sidemenu-item dropup dropdown" ng-if="::ctrl.isSignedIn">
|
||||
<a class="sidemenu-link" href="profile">
|
||||
<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
|
||||
<img ng-src="{{::ctrl.user.gravatarUrl}}">
|
||||
<span class="sidemenu-org-avatar--missing">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
|
||||
<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
|
||||
<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
|
||||
<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
|
||||
</li>
|
||||
<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
|
||||
<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
|
||||
<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
|
||||
{{::orgItem.text}}
|
||||
</a>
|
||||
</li>
|
||||
<li ng-repeat="menuItem in ctrl.userMenu" ng-class="::menuItem.cssClass">
|
||||
<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
|
||||
<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
|
||||
{{::menuItem.text}}
|
||||
</a>
|
||||
</li>
|
||||
<li class="side-menu-header">
|
||||
<span class="sidemenu-item-text">{{::ctrl.user.name}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="sidemenu-item">
|
||||
<a href="http://docs.grafana.org" class="sidemenu-link" target="_blank">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-question"></i></span>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
|
||||
<li class="side-menu-header">
|
||||
<span class="sidemenu-item-text">Documentation</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ export class SideMenuCtrl {
|
||||
showSignout: boolean;
|
||||
user: any;
|
||||
mainLinks: any;
|
||||
orgMenu: any;
|
||||
userMenu: any;
|
||||
appSubUrl: string;
|
||||
loginUrl: string;
|
||||
orgFilter: string;
|
||||
@@ -49,40 +49,39 @@ export class SideMenuCtrl {
|
||||
}
|
||||
|
||||
openUserDropdown() {
|
||||
this.orgMenu = [
|
||||
{section: 'You', cssClass: 'dropdown-menu-title'},
|
||||
{text: 'Profile', url: this.getUrl('/profile')},
|
||||
];
|
||||
this.userMenu = [ ];
|
||||
|
||||
if (this.showSignout) {
|
||||
this.orgMenu.push({text: "Sign out", url: this.getUrl("/logout"), target: "_self"});
|
||||
this.userMenu.push({text: "Sign out", url: this.getUrl("/logout"), target: "_self", icon: 'fa fa-sign-out'});
|
||||
}
|
||||
|
||||
if (this.contextSrv.hasRole('Admin')) {
|
||||
this.orgMenu.push({section: this.user.orgName, cssClass: 'dropdown-menu-title'});
|
||||
this.orgMenu.push({
|
||||
text: "Preferences",
|
||||
url: this.getUrl("/org")
|
||||
});
|
||||
this.orgMenu.push({
|
||||
text: "Users",
|
||||
url: this.getUrl("/org/users")
|
||||
});
|
||||
this.orgMenu.push({
|
||||
text: "User Groups",
|
||||
url: this.getUrl("/org/user-groups")
|
||||
});
|
||||
this.orgMenu.push({
|
||||
text: "API Keys",
|
||||
url: this.getUrl("/org/apikeys")
|
||||
});
|
||||
}
|
||||
this.userMenu.push({text: 'Profile', url: this.getUrl('/profile'), icon: 'fa fa-user'});
|
||||
|
||||
this.orgMenu.push({cssClass: "divider"});
|
||||
this.backendSrv.get('/api/user/orgs').then(orgs => {
|
||||
this.orgs = orgs;
|
||||
this.loadOrgsItems();
|
||||
});
|
||||
// if (this.contextSrv.hasRole('Admin')) {
|
||||
// this.orgMenu.push({section: this.user.orgName, cssClass: 'dropdown-menu-title'});
|
||||
// this.orgMenu.push({
|
||||
// text: "Preferences",
|
||||
// url: this.getUrl("/org")
|
||||
// });
|
||||
// this.orgMenu.push({
|
||||
// text: "Users",
|
||||
// url: this.getUrl("/org/users")
|
||||
// });
|
||||
// this.orgMenu.push({
|
||||
// text: "User Groups",
|
||||
// url: this.getUrl("/org/user-groups")
|
||||
// });
|
||||
// this.orgMenu.push({
|
||||
// text: "API Keys",
|
||||
// url: this.getUrl("/org/apikeys")
|
||||
// });
|
||||
// }
|
||||
|
||||
// this.orgMenu.push({cssClass: "divider"});
|
||||
// this.backendSrv.get('/api/user/orgs').then(orgs => {
|
||||
// this.orgs = orgs;
|
||||
// this.loadOrgsItems();
|
||||
// });
|
||||
}
|
||||
|
||||
loadOrgsItems(){
|
||||
|
||||
@@ -44,6 +44,12 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
|
||||
templateUrl: 'public/app/features/dashboard/partials/dash_list.html',
|
||||
controller : 'DashListCtrl',
|
||||
})
|
||||
.when('/configuration', {
|
||||
templateUrl: 'public/app/features/admin/partials/configuration_home.html',
|
||||
controller : 'ConfigurationHomeCtrl',
|
||||
controllerAs: 'ctrl',
|
||||
resolve: loadAdminBundle,
|
||||
})
|
||||
.when('/datasources', {
|
||||
templateUrl: 'public/app/features/plugins/partials/ds_list.html',
|
||||
controller : 'DataSourcesCtrl',
|
||||
|
||||
Reference in New Issue
Block a user