From 0ee0ea554df11a001c9a59e9213ad63d772f9396 Mon Sep 17 00:00:00 2001
From: Nick Christus <nick.christus@gmail.com>
Date: Thu, 7 Jan 2016 22:49:14 -0600
Subject: [PATCH] sidebar-consolidation: added new org menu to sidebar

---
 public/app/partials/sidemenu.html | 40 ++++++++++++++--
 public/less/sidemenu.less         | 78 +++++++++++++++++++++++++++++++
 public/less/variables.dark.less   |  5 ++
 public/less/variables.light.less  |  6 +++
 4 files changed, 125 insertions(+), 4 deletions(-)

diff --git a/public/app/partials/sidemenu.html b/public/app/partials/sidemenu.html
index f73ef658fba..dffc9d6704c 100644
--- a/public/app/partials/sidemenu.html
+++ b/public/app/partials/sidemenu.html
@@ -8,6 +8,38 @@
 			</a>
 		</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">
 			<div class="sidemenu-system-section-inner">
 				<i class="fa fa-fw fa-cubes"></i>
@@ -28,14 +60,14 @@
 
 	<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">
 				<img ng-src="{{contextSrv.user.gravatarUrl}}">
 				<span class="sidemenu-item-text">{{contextSrv.user.name}}</span>
 	   	</a>
-		</li>
+		</li> -->
 
-		<li class="dropdown">
+		<!-- <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>
@@ -52,7 +84,7 @@
 					</a>
 				</li>
 			</ul>
-		</li>
+		</li> -->
 
 		<li ng-if="contextSrv.isGrafanaAdmin">
 			<a href="admin/settings" class="sidemenu-item">
diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less
index 1d0fff1baaf..420749067f1 100644
--- a/public/less/sidemenu.less
+++ b/public/less/sidemenu.less
@@ -162,6 +162,7 @@
     padding: 0 15px;
   }
 }
+
 .sidemenu-section-tagline {
   font-style: italic;
   font-size: 75%;
@@ -171,3 +172,80 @@
 .sidemenu-section-text-wrapper {
   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;
+}
+
diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less
index f2b4cba1706..fa2dcbfb2ca 100644
--- a/public/less/variables.dark.less
+++ b/public/less/variables.dark.less
@@ -157,6 +157,9 @@
 @formActionsBackground:         transparent;
 @inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 
+// Sidemenu
+// -------------------------
+@sideMenuOrgBorder:             rgb(37,37,37);
 
 // Dropdowns
 // -------------------------
@@ -164,6 +167,8 @@
 @dropdownBorder:                rgba(0,0,0,.2);
 @dropdownDividerTop:            transparent;
 @dropdownDividerBottom:         #444;
+@dropdownDivider:               @dropdownDividerBottom;
+@dropdownTitle:                 @white;
 
 @dropdownLinkColor:             @textColor;
 @dropdownLinkColorHover:        @white;
diff --git a/public/less/variables.light.less b/public/less/variables.light.less
index d4c0cd18998..9e2056743ca 100644
--- a/public/less/variables.light.less
+++ b/public/less/variables.light.less
@@ -171,12 +171,18 @@
 @inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 @inputText:                     #020202;
 
+// Sidemenu
+// -------------------------
+@sideMenuOrgBorder:             #555;
+
 // Dropdowns
 // -------------------------
 @dropdownBackground:            @white;
 @dropdownBorder:                rgba(0,0,0,.2);
 @dropdownDividerTop:            #e5e5e5;
 @dropdownDividerBottom:         @white;
+@dropdownDivider:               @dropdownDividerTop;
+@dropdownTitle:                 #333;
 
 @dropdownLinkColor:             @grayDark;
 @dropdownLinkColorHover:        @white;