IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(sidemenu): improved user dropdown and sidemenu, will be improved further, #3687

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-01-08 17:58:46 +01:00
parent f81d2595f9
commit 6c1fee736b
3 changed files with 46 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/app/core/controllers/sidemenu_ctrl.js
View File

@ -24,26 +24,32 @@ function (angular, _, $, coreModule, config) {
}); });
}; };
$scope.loadOrgs = function() { $scope.openUserDropdown = function() {
$scope.orgMenu = []; $scope.orgMenu = [
{section: 'You', cssClass: 'dropdown-menu-title'},
{text: 'Profile', url: $scope.getUrl('/profile')},
];
if (contextSrv.hasRole('Admin')) { if (contextSrv.hasRole('Admin')) {
$scope.orgMenu.push({section: contextSrv.user.orgName, cssClass: 'dropdown-menu-title'});
$scope.orgMenu.push({ $scope.orgMenu.push({
text: "Organization settings", text: "Settings",
href: $scope.getUrl("/org"), url: $scope.getUrl("/org"),
}); });
$scope.orgMenu.push({ $scope.orgMenu.push({
text: "Users", text: "Users",
href: $scope.getUrl("/org/users"), url: $scope.getUrl("/org/users"),
}); });
$scope.orgMenu.push({ $scope.orgMenu.push({
text: "API Keys", 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) { backendSrv.get('/api/user/orgs').then(function(orgs) {
@ -61,12 +67,12 @@ function (angular, _, $, coreModule, config) {
}); });
}); });
if (config.allowOrgCreate) { $scope.orgMenu.push({cssClass: "divider"});
$scope.orgMenu.push({ if (contextSrv.isGrafanaAdmin) {
text: "New Organization", $scope.orgMenu.push({text: "Server admin", url: $scope.getUrl("/admin/settings")});
icon: "fa fa-fw fa-plus", }
href: $scope.getUrl('/org/new') if (contextSrv.isSignedIn) {
}); $scope.orgMenu.push({text: "Sign out", url: $scope.getUrl("/logout"), target: "_self"});
} }
}); });
}; };

100
public/app/partials/sidemenu.html
View File

@ -8,27 +8,21 @@
</a> </a>
</li> </li>
<li class="sidemenu-org-section dropdown" ng-if="contextSrv.user.isSignedIn"> <li class="sidemenu-org-section dropdown" ng-if="contextSrv.isSignedIn">
<div class="sidemenu-org" data-toggle="dropdown" ng-click="loadOrgs()"> <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="{{contextSrv.user.gravatarUrl}}">
</div> </div>
<div class="sidemenu-org-details"> <div class="sidemenu-org-details">
<span class="sidemenu-org-user">{{contextSrv.user.name}}</span> <span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span>
<span class="sidemenu-org-name">{{contextSrv.user.orgName}}</span> <span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span>
</div> </div>
<i class="fa fa-caret-down small"></i> <i class="fa fa-caret-down small"></i>
</div> </div>
<ul class="dropdown-menu" role="menu"> <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"> <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> <i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
{{menuItem.text}} {{menuItem.text}}
</a> </a>
@ -40,6 +34,13 @@
</ul> </ul>
</li> </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"> <li class="sidemenu-system-section" ng-if="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>
@ -51,75 +52,20 @@
</li> </li>
<li ng-repeat="item in mainLinks"> <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="icon-circle sidemenu-icon"><i class="{{item.icon}}"></i></span>
<span class="sidemenu-item-text">{{item.text}}</span> <span class="sidemenu-item-text">{{item.text}}</span>
</a> </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>
</li> </li>
<li ng-if="!contextSrv.isSignedIn"> <ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="systemSection">
<a href="login" class="sidemenu-item" target="_self"> <li>
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span> <a href="{{appSubUrl}}/" class="sidemenu-item">
<span class="sidemenu-item-text">Sign in</span> <span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span>
</a> <span class="sidemenu-item-text">Exit admin</span>
</li> </a>
</ul> </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> </ul>
</div> </div>

28
public/less/sidemenu.less
View File

@ -33,7 +33,6 @@
} }
.sidemenu { .sidemenu {
font-size: 16px;
font-weight: @baseFontWeight; font-weight: @baseFontWeight;
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -48,32 +47,11 @@
top: 2px; top: 2px;
font-size: 90%; 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 { .sidemenu-item-text {
width: 110px; width: 110px;