Skip to content

Commit 6c1fee7

Browse files
torkelotorkelo
committed
feat(sidemenu): improved user dropdown and sidemenu, will be improved further, grafana#3687 
1 parent f81d259 commit 6c1fee7

File tree

3 files changed

+46
-116
lines changed

3 files changed

+46
-116
lines changed

‎public/app/core/controllers/sidemenu_ctrl.js

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,32 @@ function (angular, _, $, coreModule, config) {
2424
});
2525
};
2626

27-
$scope.loadOrgs = function() {
28-
$scope.orgMenu = [];
27+
$scope.openUserDropdown = function() {
28+
$scope.orgMenu = [
29+
{section: 'You', cssClass: 'dropdown-menu-title'},
30+
{text: 'Profile', url: $scope.getUrl('/profile')},
31+
];
2932

3033
if (contextSrv.hasRole('Admin')) {
34+
$scope.orgMenu.push({section: contextSrv.user.orgName, cssClass: 'dropdown-menu-title'});
3135
$scope.orgMenu.push({
32-
text: "Organization settings",
33-
href: $scope.getUrl("/org"),
36+
text: "Settings",
37+
url: $scope.getUrl("/org"),
3438
});
3539
$scope.orgMenu.push({
3640
text: "Users",
37-
href: $scope.getUrl("/org/users"),
41+
url: $scope.getUrl("/org/users"),
3842
});
3943
$scope.orgMenu.push({
4044
text: "API Keys",
41-
href: $scope.getUrl("/org/apikeys"),
45+
url: $scope.getUrl("/org/apikeys"),
4246
});
4347
}
4448

45-
if ($scope.orgMenu.length > 0) {
46-
$scope.orgMenu.push({ cssClass: 'divider' });
49+
$scope.orgMenu.push({cssClass: "divider"});
50+
51+
if (config.allowOrgCreate) {
52+
$scope.orgMenu.push({text: "New organization", icon: "fa fa-fw fa-plus", url: $scope.getUrl('/org/new')});
4753
}
4854

4955
backendSrv.get('/api/user/orgs').then(function(orgs) {
@@ -61,12 +67,12 @@ function (angular, _, $, coreModule, config) {
6167
});
6268
});
6369

64-
if (config.allowOrgCreate) {
65-
$scope.orgMenu.push({
66-
text: "New Organization",
67-
icon: "fa fa-fw fa-plus",
68-
href: $scope.getUrl('/org/new')
69-
});
70+
$scope.orgMenu.push({cssClass: "divider"});
71+
if (contextSrv.isGrafanaAdmin) {
72+
$scope.orgMenu.push({text: "Server admin", url: $scope.getUrl("/admin/settings")});
73+
}
74+
if (contextSrv.isSignedIn) {
75+
$scope.orgMenu.push({text: "Sign out", url: $scope.getUrl("/logout"), target: "_self"});
7076
}
7177
});
7278
};

‎public/app/partials/sidemenu.html

Lines changed: 23 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,21 @@
88
</a>
99
</li>
1010

11-
<li class="sidemenu-org-section dropdown" ng-if="contextSrv.user.isSignedIn">
12-
<div class="sidemenu-org" data-toggle="dropdown" ng-click="loadOrgs()">
11+
<li class="sidemenu-org-section dropdown" ng-if="contextSrv.isSignedIn">
12+
<div class="sidemenu-org" data-toggle="dropdown" ng-click="openUserDropdown()">
1313
<div class="sidemenu-org-avatar">
1414
<img ng-src="{{contextSrv.user.gravatarUrl}}">
1515
</div>
1616
<div class="sidemenu-org-details">
17-
<span class="sidemenu-org-user">{{contextSrv.user.name}}</span>
18-
<span class="sidemenu-org-name">{{contextSrv.user.orgName}}</span>
17+
<span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span>
18+
<span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span>
1919
</div>
2020
<i class="fa fa-caret-down small"></i>
2121
</div>
2222
<ul class="dropdown-menu" role="menu">
23-
<li class="dropdown-menu-title"><span>You</span></li>
24-
<li>
25-
<a href="profile" class="sidemenu-item">
26-
Update profile
27-
</a>
28-
</li>
29-
<li class="dropdown-menu-title"><span>{{contextSrv.user.orgName}}</span></li>
3023
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
31-
<a href="{{menuItem.href}}" ng-if="menuItem.href">
24+
<span ng-if="menuItem.section">{{menuItem.section}}</span>
25+
<a href="{{menuItem.url}}" ng-if="menuItem.url" target="{{menuItem.target}}">
3226
<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
3327
{{menuItem.text}}
3428
</a>
@@ -40,6 +34,13 @@
4034
</ul>
4135
</li>
4236

37+
<li ng-if="!contextSrv.isSignedIn">
38+
<a href="login" class="sidemenu-item" target="_self">
39+
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
40+
<span class="sidemenu-item-text">Sign in</span>
41+
</a>
42+
</li>
43+
4344
<li class="sidemenu-system-section" ng-if="systemSection">
4445
<div class="sidemenu-system-section-inner">
4546
<i class="fa fa-fw fa-cubes"></i>
@@ -51,75 +52,20 @@
5152
</li>
5253

5354
<li ng-repeat="item in mainLinks">
54-
<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
55+
<a href="{{item.href}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}">
5556
<span class="icon-circle sidemenu-icon"><i class="{{item.icon}}"></i></span>
5657
<span class="sidemenu-item-text">{{item.text}}</span>
57-
</a>
58-
</li>
59-
</ul>
60-
61-
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="!systemSection">
62-
63-
<!-- <li ng-if="contextSrv.user.isSignedIn">
64-
<a href="profile" class="sidemenu-item">
65-
<img ng-src="{{contextSrv.user.gravatarUrl}}">
66-
<span class="sidemenu-item-text">{{contextSrv.user.name}}</span>
67-
</a>
68-
</li> -->
69-
70-
<!-- <li class="dropdown">
71-
<a class="sidemenu-item pointer" data-toggle="dropdown" ng-click="loadOrgs()" tabindex="0">
72-
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-users"></i></span>
73-
<span class="sidemenu-item-text">{{contextSrv.user.orgName}}</span><i class="fa fa-caret-down small"></i>
74-
</a>
75-
<ul class="dropdown-menu" role="menu" style="left: 65px">
76-
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
77-
<a href="{{menuItem.href}}" ng-if="menuItem.href">
78-
<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
79-
{{menuItem.text}}
80-
</a>
81-
<a ng-click="menuItem.click()" ng-if="menuItem.click">
82-
<i class="{{menuItem.icon}}"></i>
83-
{{menuItem.text}}
84-
</a>
85-
</li>
86-
</ul>
87-
</li> -->
88-
89-
<li ng-if="contextSrv.isGrafanaAdmin">
90-
<a href="admin/settings" class="sidemenu-item">
91-
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-cog"></i></span>
92-
<span class="sidemenu-item-text">Grafana admin</span>
93-
</a>
94-
</li>
95-
<li ng-if="showSignout">
96-
<a href="logout" class="sidemenu-item" target="_self">
97-
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-out"></i></span>
98-
<span class="sidemenu-item-text">Sign out</span>
99-
</a>
100-
</li>
101-
102-
<li ng-if="!contextSrv.isSignedIn">
103-
<a href="login" class="sidemenu-item" target="_self">
104-
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
105-
<span class="sidemenu-item-text">Sign in</span>
106-
</a>
58+
</a>
10759
</li>
108-
</ul>
10960

110-
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="systemSection">
111-
<li>
112-
<a href="{{appSubUrl}}/" class="sidemenu-item">
113-
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span>
114-
<span class="sidemenu-item-text">Exit admin</span>
115-
</a>
116-
</li>
117-
<li ng-if="showSignout">
118-
<a href="logout" class="sidemenu-item" target="_self">
119-
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-out"></i></span>
120-
<span class="sidemenu-item-text">Sign out</span>
121-
</a>
122-
</li>
61+
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="systemSection">
62+
<li>
63+
<a href="{{appSubUrl}}/" class="sidemenu-item">
64+
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span>
65+
<span class="sidemenu-item-text">Exit admin</span>
66+
</a>
67+
</li>
68+
</ul>
12369
</ul>
12470

12571
</div>

‎public/less/sidemenu.less

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
}
3434

3535
.sidemenu {
36-
font-size: 16px;
3736
font-weight: @baseFontWeight;
3837
list-style: none;
3938
margin: 0;
@@ -48,32 +47,11 @@
4847
top: 2px;
4948
font-size: 90%;
5049
}
51-
52-
&.sidemenu-small {
53-
font-size: 14px;
54-
55-
.icon-circle {
56-
border-radius: 50%;
57-
background: @iconContainerBackground;
58-
box-shadow: @iconContainerShadow;
59-
border: @iconContainerBorder;
60-
width: 28px;
61-
height: 28px;
62-
i {
63-
top: 1px;
64-
left: 4px;
65-
font-size: 110%;
66-
}
67-
}
68-
69-
.sidemenu-item {
70-
// color: @textColor;
71-
line-height: 28px;
72-
padding-left: 25px;
73-
}
74-
}
7550
}
7651

52+
.sidemenu-main-link {
53+
font-size: 16px;
54+
}
7755

7856
.sidemenu-item-text {
7957
width: 110px;

0 commit comments

Comments
 (0)