Skip to content

N
nexpie-grafana-theme
Commit f81d2595 by Torkel Ödegaard
Options

Merge branch 'sidebar-consolidation' of github.com:nchristus/grafana into sidebar-consolidation

parents 3362d6bc 0ee0ea55
Showing with 125 additions and 4 deletions
public/app/partials/sidemenu.html
...@@ -8,6 +8,38 @@ ...@@ -8,6 +8,38 @@
</a> </a>
</li> </li>
<li class="sidemenu-org-section dropdown" ng-if="contextSrv.user.isSignedIn">
<div class="sidemenu-org" data-toggle="dropdown" ng-click="loadOrgs()">
<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>
</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">
<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 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>
...@@ -28,14 +60,14 @@ ...@@ -28,14 +60,14 @@
<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="!systemSection"> <ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="!systemSection">
<li ng-if="contextSrv.user.isSignedIn"> <!-- <li ng-if="contextSrv.user.isSignedIn">
<a href="profile" class="sidemenu-item"> <a href="profile" class="sidemenu-item">
<img ng-src="{{contextSrv.user.gravatarUrl}}"> <img ng-src="{{contextSrv.user.gravatarUrl}}">
<span class="sidemenu-item-text">{{contextSrv.user.name}}</span> <span class="sidemenu-item-text">{{contextSrv.user.name}}</span>
</a> </a>
</li> </li> -->
<li class="dropdown"> <!-- <li class="dropdown">
<a class="sidemenu-item pointer" data-toggle="dropdown" ng-click="loadOrgs()" tabindex="0"> <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="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> <span class="sidemenu-item-text">{{contextSrv.user.orgName}}</span><i class="fa fa-caret-down small"></i>
...@@ -52,7 +84,7 @@ ...@@ -52,7 +84,7 @@
</a> </a>
</li> </li>
</ul> </ul>
</li> </li> -->
<li ng-if="contextSrv.isGrafanaAdmin"> <li ng-if="contextSrv.isGrafanaAdmin">
<a href="admin/settings" class="sidemenu-item"> <a href="admin/settings" class="sidemenu-item">
......
public/less/sidemenu.less
...@@ -162,6 +162,7 @@ ...@@ -162,6 +162,7 @@
padding: 0 15px; padding: 0 15px;
} }
} }
.sidemenu-section-tagline { .sidemenu-section-tagline {
font-style: italic; font-style: italic;
font-size: 75%; font-size: 75%;
...@@ -171,3 +172,80 @@ ...@@ -171,3 +172,80 @@
.sidemenu-section-text-wrapper { .sidemenu-section-text-wrapper {
padding-top: 4px; padding-top: 4px;
} }
.sidemenu-org-section .dropdown-menu {
top: 51%;
left: 100px;
}
.sidemenu-org-section .dropdown-menu-title {
margin: 0 10px 0 6px;
padding: 10px 0 0;
overflow: hidden;
color: @dropdownTitle;
font-weight: bold;
}
.sidemenu-org-section .dropdown-menu-title > span {
display: inline-block;
position: relative;
&:after {
display: block;
position: absolute;
top: 50%;
right: 0;
left: 100%;
width: 200px;
height: 1px;
margin-left: 5px;
background: @dropdownDivider;
content: '';
}
}
.sidemenu-org {
display: table;
position: relative;
width: 159px;
padding: 2px 10px 20px 21px;
border-bottom: 1px solid @sideMenuOrgBorder;
cursor: pointer;
}
.sidemenu-org .fa-caret-down {
position: absolute;
top: 33px;
right: 2px;
}
.sidemenu-org-avatar,
.sidemenu-org-details {
display: table-cell;
vertical-align: top;
}
.sidemenu-org-avatar {
width: 44px;
}
.sidemenu-org-avatar > img {
width: 44px;
height: 44px;
border-radius: 50%;
}
.sidemenu-org-details {
padding-left: 12px;
color: @linkColor;
}
.sidemenu-org-user,
.sidemenu-org-name {
display: block;
}
.sidemenu-org-user {
font-size: 14px;
}
public/less/variables.dark.less
...@@ -157,6 +157,9 @@ ...@@ -157,6 +157,9 @@
@formActionsBackground: transparent; @formActionsBackground: transparent;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
// Sidemenu
// -------------------------
@sideMenuOrgBorder: rgb(37,37,37);
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
...@@ -164,6 +167,8 @@ ...@@ -164,6 +167,8 @@
@dropdownBorder: rgba(0,0,0,.2); @dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: transparent; @dropdownDividerTop: transparent;
@dropdownDividerBottom: #444; @dropdownDividerBottom: #444;
@dropdownDivider: @dropdownDividerBottom;
@dropdownTitle: @white;
@dropdownLinkColor: @textColor; @dropdownLinkColor: @textColor;
@dropdownLinkColorHover: @white; @dropdownLinkColorHover: @white;
......
public/less/variables.light.less
...@@ -171,12 +171,18 @@ ...@@ -171,12 +171,18 @@
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
@inputText: #020202; @inputText: #020202;
// Sidemenu
// -------------------------
@sideMenuOrgBorder: #555;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@dropdownBackground: @white; @dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2); @dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: #e5e5e5; @dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white; @dropdownDividerBottom: @white;
@dropdownDivider: @dropdownDividerTop;
@dropdownTitle: #333;
@dropdownLinkColor: @grayDark; @dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white; @dropdownLinkColorHover: @white;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment