mirror of
https://github.com/grafana/grafana.git
synced 2024-11-29 20:24:18 -06:00
feat(sidemenu): improved user dropdown and sidemenu, will be improved further, #3687
This commit is contained in:
Torkel Ödegaard
parent
f81d2595f9
commit
6c1fee736b
@ -24,26 +24,32 @@ function (angular, _, $, coreModule, config) {
|
||||
});
|
||||
};
|
||||
|
||||
$scope.loadOrgs = function() {
|
||||
$scope.orgMenu = [];
|
||||
$scope.openUserDropdown = function() {
|
||||
$scope.orgMenu = [
|
||||
{section: 'You', cssClass: 'dropdown-menu-title'},
|
||||
{text: 'Profile', url: $scope.getUrl('/profile')},
|
||||
];
|
||||
|
||||
if (contextSrv.hasRole('Admin')) {
|
||||
$scope.orgMenu.push({section: contextSrv.user.orgName, cssClass: 'dropdown-menu-title'});
|
||||
$scope.orgMenu.push({
|
||||
text: "Organization settings",
|
||||
href: $scope.getUrl("/org"),
|
||||
text: "Settings",
|
||||
url: $scope.getUrl("/org"),
|
||||
});
|
||||
$scope.orgMenu.push({
|
||||
text: "Users",
|
||||
href: $scope.getUrl("/org/users"),
|
||||
url: $scope.getUrl("/org/users"),
|
||||
});
|
||||
$scope.orgMenu.push({
|
||||
text: "API Keys",
|
||||
href: $scope.getUrl("/org/apikeys"),
|
||||
url: $scope.getUrl("/org/apikeys"),
|
||||
});
|
||||
}
|
||||
|
||||
if ($scope.orgMenu.length > 0) {
|
||||
$scope.orgMenu.push({ cssClass: 'divider' });
|
||||
$scope.orgMenu.push({cssClass: "divider"});
|
||||
|
||||
if (config.allowOrgCreate) {
|
||||
$scope.orgMenu.push({text: "New organization", icon: "fa fa-fw fa-plus", url: $scope.getUrl('/org/new')});
|
||||
}
|
||||
|
||||
backendSrv.get('/api/user/orgs').then(function(orgs) {
|
||||
@ -61,12 +67,12 @@ function (angular, _, $, coreModule, config) {
|
||||
});
|
||||
});
|
||||
|
||||
if (config.allowOrgCreate) {
|
||||
$scope.orgMenu.push({
|
||||
text: "New Organization",
|
||||
icon: "fa fa-fw fa-plus",
|
||||
href: $scope.getUrl('/org/new')
|
||||
});
|
||||
$scope.orgMenu.push({cssClass: "divider"});
|
||||
if (contextSrv.isGrafanaAdmin) {
|
||||
$scope.orgMenu.push({text: "Server admin", url: $scope.getUrl("/admin/settings")});
|
||||
}
|
||||
if (contextSrv.isSignedIn) {
|
||||
$scope.orgMenu.push({text: "Sign out", url: $scope.getUrl("/logout"), target: "_self"});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -8,27 +8,21 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="sidemenu-org-section dropdown" ng-if="contextSrv.user.isSignedIn">
|
||||
<div class="sidemenu-org" data-toggle="dropdown" ng-click="loadOrgs()">
|
||||
<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">{{contextSrv.user.name}}</span>
|
||||
<span class="sidemenu-org-name">{{contextSrv.user.orgName}}</span>
|
||||
<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-down small"></i>
|
||||
</div>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li class="dropdown-menu-title"><span>You</span></li>
|
||||
<li>
|
||||
<a href="profile" class="sidemenu-item">
|
||||
Update profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-menu-title"><span>{{contextSrv.user.orgName}}</span></li>
|
||||
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
|
||||
<a href="{{menuItem.href}}" ng-if="menuItem.href">
|
||||
<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>
|
||||
@ -40,6 +34,13 @@
|
||||
</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="systemSection">
|
||||
<div class="sidemenu-system-section-inner">
|
||||
<i class="fa fa-fw fa-cubes"></i>
|
||||
@ -51,75 +52,20 @@
|
||||
</li>
|
||||
|
||||
<li ng-repeat="item in mainLinks">
|
||||
<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
|
||||
<a href="{{item.href}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}">
|
||||
<span class="icon-circle sidemenu-icon"><i class="{{item.icon}}"></i></span>
|
||||
<span class="sidemenu-item-text">{{item.text}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="!systemSection">
|
||||
|
||||
<!-- <li ng-if="contextSrv.user.isSignedIn">
|
||||
<a href="profile" class="sidemenu-item">
|
||||
<img ng-src="{{contextSrv.user.gravatarUrl}}">
|
||||
<span class="sidemenu-item-text">{{contextSrv.user.name}}</span>
|
||||
</a>
|
||||
</li> -->
|
||||
|
||||
<!-- <li class="dropdown">
|
||||
<a class="sidemenu-item pointer" data-toggle="dropdown" ng-click="loadOrgs()" tabindex="0">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-users"></i></span>
|
||||
<span class="sidemenu-item-text">{{contextSrv.user.orgName}}</span><i class="fa fa-caret-down small"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" style="left: 65px">
|
||||
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
|
||||
<a href="{{menuItem.href}}" ng-if="menuItem.href">
|
||||
<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.isGrafanaAdmin">
|
||||
<a href="admin/settings" class="sidemenu-item">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-cog"></i></span>
|
||||
<span class="sidemenu-item-text">Grafana admin</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-if="showSignout">
|
||||
<a href="logout" class="sidemenu-item" target="_self">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-out"></i></span>
|
||||
<span class="sidemenu-item-text">Sign out</span>
|
||||
</a>
|
||||
</a>
|
||||
</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>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
<li ng-if="showSignout">
|
||||
<a href="logout" class="sidemenu-item" target="_self">
|
||||
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-out"></i></span>
|
||||
<span class="sidemenu-item-text">Sign out</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>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
}
|
||||
|
||||
.sidemenu {
|
||||
font-size: 16px;
|
||||
font-weight: @baseFontWeight;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -48,32 +47,11 @@
|
||||
top: 2px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
&.sidemenu-small {
|
||||
font-size: 14px;
|
||||
|
||||
.icon-circle {
|
||||
border-radius: 50%;
|
||||
background: @iconContainerBackground;
|
||||
box-shadow: @iconContainerShadow;
|
||||
border: @iconContainerBorder;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
i {
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-item {
|
||||
// color: @textColor;
|
||||
line-height: 28px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-main-link {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sidemenu-item-text {
|
||||
width: 110px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user