Skip to content

Commit f81d259

Browse files
torkelotorkelo
committed
Merge branch 'sidebar-consolidation' of github.com:nchristus/grafana into sidebar-consolidation
2 parents 3362d6b + 0ee0ea5 commit f81d259

File tree

4 files changed

+125
-4
lines changed

4 files changed

+125
-4
lines changed

‎public/app/partials/sidemenu.html

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,38 @@
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()">
13+
<div class="sidemenu-org-avatar">
14+
<img ng-src="{{contextSrv.user.gravatarUrl}}">
15+
</div>
16+
<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>
19+
</div>
20+
<i class="fa fa-caret-down small"></i>
21+
</div>
22+
<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>
30+
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
31+
<a href="{{menuItem.href}}" ng-if="menuItem.href">
32+
<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
33+
{{menuItem.text}}
34+
</a>
35+
<a ng-click="menuItem.click()" ng-if="menuItem.click">
36+
<i class="{{menuItem.icon}}"></i>
37+
{{menuItem.text}}
38+
</a>
39+
</li>
40+
</ul>
41+
</li>
42+
1143
<li class="sidemenu-system-section" ng-if="systemSection">
1244
<div class="sidemenu-system-section-inner">
1345
<i class="fa fa-fw fa-cubes"></i>
@@ -28,14 +60,14 @@
2860

2961
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="!systemSection">
3062

31-
<li ng-if="contextSrv.user.isSignedIn">
63+
<!-- <li ng-if="contextSrv.user.isSignedIn">
3264
<a href="profile" class="sidemenu-item">
3365
<img ng-src="{{contextSrv.user.gravatarUrl}}">
3466
<span class="sidemenu-item-text">{{contextSrv.user.name}}</span>
3567
</a>
36-
</li>
68+
</li> -->
3769

38-
<li class="dropdown">
70+
<!-- <li class="dropdown">
3971
<a class="sidemenu-item pointer" data-toggle="dropdown" ng-click="loadOrgs()" tabindex="0">
4072
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-users"></i></span>
4173
<span class="sidemenu-item-text">{{contextSrv.user.orgName}}</span><i class="fa fa-caret-down small"></i>
@@ -52,7 +84,7 @@
5284
</a>
5385
</li>
5486
</ul>
55-
</li>
87+
</li> -->
5688

5789
<li ng-if="contextSrv.isGrafanaAdmin">
5890
<a href="admin/settings" class="sidemenu-item">

‎public/less/sidemenu.less

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@
162162
padding: 0 15px;
163163
}
164164
}
165+
165166
.sidemenu-section-tagline {
166167
font-style: italic;
167168
font-size: 75%;
@@ -171,3 +172,80 @@
171172
.sidemenu-section-text-wrapper {
172173
padding-top: 4px;
173174
}
175+
176+
.sidemenu-org-section .dropdown-menu {
177+
top: 51%;
178+
left: 100px;
179+
}
180+
181+
.sidemenu-org-section .dropdown-menu-title {
182+
margin: 0 10px 0 6px;
183+
padding: 10px 0 0;
184+
overflow: hidden;
185+
color: @dropdownTitle;
186+
font-weight: bold;
187+
}
188+
189+
.sidemenu-org-section .dropdown-menu-title > span {
190+
display: inline-block;
191+
position: relative;
192+
193+
&:after {
194+
display: block;
195+
position: absolute;
196+
top: 50%;
197+
right: 0;
198+
left: 100%;
199+
width: 200px;
200+
height: 1px;
201+
margin-left: 5px;
202+
background: @dropdownDivider;
203+
content: '';
204+
}
205+
}
206+
207+
.sidemenu-org {
208+
display: table;
209+
position: relative;
210+
width: 159px;
211+
padding: 2px 10px 20px 21px;
212+
border-bottom: 1px solid @sideMenuOrgBorder;
213+
cursor: pointer;
214+
}
215+
216+
.sidemenu-org .fa-caret-down {
217+
position: absolute;
218+
top: 33px;
219+
right: 2px;
220+
}
221+
222+
.sidemenu-org-avatar,
223+
.sidemenu-org-details {
224+
display: table-cell;
225+
vertical-align: top;
226+
}
227+
228+
.sidemenu-org-avatar {
229+
width: 44px;
230+
}
231+
232+
.sidemenu-org-avatar > img {
233+
width: 44px;
234+
height: 44px;
235+
border-radius: 50%;
236+
}
237+
238+
.sidemenu-org-details {
239+
padding-left: 12px;
240+
color: @linkColor;
241+
}
242+
243+
.sidemenu-org-user,
244+
.sidemenu-org-name {
245+
display: block;
246+
}
247+
248+
.sidemenu-org-user {
249+
font-size: 14px;
250+
}
251+

‎public/less/variables.dark.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,13 +157,18 @@
157157
@formActionsBackground: transparent;
158158
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
159159

160+
// Sidemenu
161+
// -------------------------
162+
@sideMenuOrgBorder: rgb(37,37,37);
160163

161164
// Dropdowns
162165
// -------------------------
163166
@dropdownBackground: @heroUnitBackground;
164167
@dropdownBorder: rgba(0,0,0,.2);
165168
@dropdownDividerTop: transparent;
166169
@dropdownDividerBottom: #444;
170+
@dropdownDivider: @dropdownDividerBottom;
171+
@dropdownTitle: @white;
167172

168173
@dropdownLinkColor: @textColor;
169174
@dropdownLinkColorHover: @white;

‎public/less/variables.light.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,12 +171,18 @@
171171
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
172172
@inputText: #020202;
173173

174+
// Sidemenu
175+
// -------------------------
176+
@sideMenuOrgBorder: #555;
177+
174178
// Dropdowns
175179
// -------------------------
176180
@dropdownBackground: @white;
177181
@dropdownBorder: rgba(0,0,0,.2);
178182
@dropdownDividerTop: #e5e5e5;
179183
@dropdownDividerBottom: @white;
184+
@dropdownDivider: @dropdownDividerTop;
185+
@dropdownTitle: #333;
180186

181187
@dropdownLinkColor: @grayDark;
182188
@dropdownLinkColorHover: @white;

0 commit comments

Comments
 (0)