From 4f227ae92e982a12a5c5f1f9c3602418159d1807 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Thu, 14 Jan 2016 22:26:41 +0100
Subject: [PATCH] poc(new sidenav/topnaav)

---
 .../dashboard/partials/dashboardTopNav.html   |  2 +-
 public/app/partials/sidemenu.html             |  8 +--
 public/less/sidemenu.less                     | 70 +++++++++----------
 public/less/variables.dark.less               |  2 +-
 public/views/index.html                       |  4 +-
 5 files changed, 37 insertions(+), 49 deletions(-)

diff --git a/public/app/features/dashboard/partials/dashboardTopNav.html b/public/app/features/dashboard/partials/dashboardTopNav.html
index 200dc872926..9a29a00c259 100644
--- a/public/app/features/dashboard/partials/dashboardTopNav.html
+++ b/public/app/features/dashboard/partials/dashboardTopNav.html
@@ -4,7 +4,7 @@
 
 			<div class="top-nav">
 				<div class="top-nav-btn top-nav-menu-btn">
-					<a class="pointer" ng-click="openSearch()">
+					<a class="pointer" ng-click="contextSrv.toggleSideMenu()">
 						<span class="top-nav-logo-background">
 							<img class="logo-icon" src="img/fav32.png"></img>
 						</span>
diff --git a/public/app/partials/sidemenu.html b/public/app/partials/sidemenu.html
index c03d20697f4..24ec4905d0a 100644
--- a/public/app/partials/sidemenu.html
+++ b/public/app/partials/sidemenu.html
@@ -1,12 +1,6 @@
 <div ng-controller="SideMenuCtrl" ng-init="init()">
 
 	<ul class="sidemenu sidemenu-main">
-		<li style="margin-bottom: 15px;">
-			<a class="pointer sidemenu-top-btn" ng-click="contextSrv.toggleSideMenu()">
-				<img class="logo-icon" src="img/fav32.png"></img>
-				<i class="pull-right fa fa-angle-left"></i>
-			</a>
-		</li>
 
 		<li class="sidemenu-org-section dropdown" ng-if="contextSrv.isSignedIn">
 			<div class="sidemenu-org" data-toggle="dropdown" ng-click="openUserDropdown()">
@@ -17,7 +11,7 @@
 					<span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span>
 					<span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span>
 				</div>
-				<i class="fa fa-caret-down small"></i>
+				<i class="fa fa-caret-right small"></i>
 			</div>
 			<ul class="dropdown-menu" role="menu">
 				<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less
index 6e9691eaa11..69601046f0d 100644
--- a/public/less/sidemenu.less
+++ b/public/less/sidemenu.less
@@ -4,12 +4,11 @@
 
 .sidemenu-wrapper {
   position: absolute;
-  display: none;
-  top: 0;
+  top: 51px;
   bottom: 0;
   left: 0;
   width: 200px;
-  background: @bodyBackground;
+  background-color: darken(@grafanaTargetFuncBackground, 2%);
   min-height: 100%;
   z-index: 101;
 
@@ -39,7 +38,6 @@
   padding: 0;
 
   >li {
-    margin-bottom: 9px;
   }
 
   .fa-caret-down {
@@ -61,25 +59,6 @@
   text-overflow: ellipsis;
 }
 
-.sidemenu-top-btn {
-  display: block;
-  padding: 8px 0 4px 22px;
-  background-color: @navbarBackground;
-  img {
-    border-radius: 50%;
-    background: @iconContainerBackground;
-    border: 1px solid @bodyBackground;
-    width: 30px;
-    padding: 4px;
-  }
-  i {
-    padding-right: 5px;
-    padding-top: 5px;
-    font-size: 170%;
-    color: @linkColor;
-  }
-}
-
 .icon-circle {
   width: 40px;
   height: 40px;
@@ -100,10 +79,13 @@
 
 .sidemenu-item {
   color: @linkColor;
-  line-height: 40px;
+  line-height: 45px;
   padding: 0px 10px 0px 20px;
   display: block;
   white-space: nowrap;
+  &:hover {
+    background-color: @grafanaTargetFuncBackground;
+  }
 
   .sidemenu-item-text {
     padding-left: 11px;
@@ -186,19 +168,28 @@
   }
 }
 
+.sidemenu-org-section {
+  box-shadow: inset 0 4px 15px -4px #161616;
+  border-bottom: 2px solid @sideMenuOrgBorder;
+  padding: 17px 10px 15px 21px;
+  cursor: pointer;
+  &:hover {
+    background-color: @grafanaTargetFuncBackground;
+  }
+}
+
 .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 {
+.sidemenu-org .fa-caret-right {
   position: absolute;
-  top: 33px;
-  right: 2px;
+  top: 17px;
+  right: -12px;
+  font-size: 80%;
+  color: @linkColor;
 }
 
 .sidemenu-org-avatar,
@@ -212,22 +203,25 @@
 }
 
 .sidemenu-org-avatar > img {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
+  position: absolute;
 }
 
 .sidemenu-org-details {
-  padding-left: 12px;
+  padding-left: 16px;
   color: @linkColor;
 }
 
-.sidemenu-org-user,
 .sidemenu-org-name {
   display: block;
+  font-size: 13px;
+  color: @linkColorDisabled;
+}
+
+
+.sidemenu-org-user {
+  display: block;
 }
 
-.sidemenu-org-user {
-  font-size: 14px;
-}
-
diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less
index fa2dcbfb2ca..3a46efced47 100644
--- a/public/less/variables.dark.less
+++ b/public/less/variables.dark.less
@@ -58,7 +58,7 @@
 // Links
 // -------------------------
 @linkColor:             darken(@white,11%);
-@linkColorDisabled:     darken(@linkColor,45%);
+@linkColorDisabled:     darken(@linkColor,30%);
 @linkColorHover:        @white;
 
 
diff --git a/public/views/index.html b/public/views/index.html
index c70be25ef9e..2b4b5c4e37b 100644
--- a/public/views/index.html
+++ b/public/views/index.html
@@ -25,10 +25,10 @@
 
 	</head>
 
-	<body ng-cloak ng-controller="GrafanaCtrl" ng-class="{'sidemenu-open': contextSrv.sidemenu}">
+	<body ng-cloak ng-controller="GrafanaCtrl" ng-class="{'sidemenu-open': contextSrv.sidemenuPinned}">
 		<div class="sidemenu-canvas">
 
-			<aside class="sidemenu-wrapper" ng-if="contextSrv.sidemenu">
+			<aside class="sidemenu-wrapper" ng-if="contextSrv.sidemenu" >
 				<div ng-include="'app/partials/sidemenu.html'"></div>
 			</aside>