From dfef4727b689d408b86d75c575646705bac79496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 3 Feb 2015 10:46:33 +0100
Subject: [PATCH] Updated to sidemenu style

---
 src/app/controllers/sidemenuCtrl.js | 29 +--------------
 src/app/partials/sidemenu.html      | 40 ++++++++++----------
 src/css/less/panel.less             |  2 +-
 src/css/less/sidemenu.less          | 58 ++++++++++++++++-------------
 4 files changed, 55 insertions(+), 74 deletions(-)

diff --git a/src/app/controllers/sidemenuCtrl.js b/src/app/controllers/sidemenuCtrl.js
index 93954006309..ec6cab8d8ef 100644
--- a/src/app/controllers/sidemenuCtrl.js
+++ b/src/app/controllers/sidemenuCtrl.js
@@ -47,13 +47,6 @@ function (angular, _, $, config) {
       });
     }
 
-    if ($scope.grafana.user.isSignedIn) {
-      $scope.menu.push({
-        text: "Profile", href: $scope.getUrl("/profile"),
-        icon: "fa fa-user",
-      });
-    }
-
     if ($scope.grafana.user.isGrafanaAdmin) {
       $scope.menu.push({
         text: "Admin", href: $scope.getUrl("/admin/users"),
@@ -67,40 +60,21 @@ function (angular, _, $, config) {
       });
     }
 
-    if ($scope.grafana.user.isSignedIn) {
-      $scope.menu.push({
-        text: "Sign out", href: $scope.getUrl("/logout"),
-        target: "_self",
-        icon: "fa fa-sign-out",
-      });
-    }
-
-    $scope.onAppEvent('$routeUpdate', function() {
-      $scope.updateState();
-    });
-
-    $scope.onAppEvent('$routeChangeSuccess', function() {
-      $scope.updateState();
-    });
-
     $scope.updateState = function() {
       var currentPath = config.appSubUrl + $location.path();
       var search = $location.search();
-      var activeIndex;
 
-      _.each($scope.menu, function(item, index) {
+      _.each($scope.menu, function(item) {
         item.active = false;
 
         if (item.href === currentPath) {
           item.active = true;
-          activeIndex = index;
         }
 
         if (item.startsWith) {
           if (currentPath.indexOf(item.startsWith) === 0) {
             item.active = true;
             item.href = currentPath;
-            activeIndex = index;
           }
         }
 
@@ -124,7 +98,6 @@ function (angular, _, $, config) {
         });
       });
 
-      //$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]);
     };
 
     $scope.init = function() {
diff --git a/src/app/partials/sidemenu.html b/src/app/partials/sidemenu.html
index 33ccd1566f4..52770d725ba 100644
--- a/src/app/partials/sidemenu.html
+++ b/src/app/partials/sidemenu.html
@@ -1,37 +1,39 @@
 
 <div ng-controller="SideMenuCtrl" ng-init="init()">
 	<ul class="sidemenu">
-		<li style="margin-bottom: 15px;">
+		<li style="margin-bottom: 2px;">
 			<a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()">
 				<img class="logo-icon" src="img/fav32.png"></img>
 				<i class="pull-right fa fa-angle-left"></i>
 			</a>
 		</li>
 
-		<li ng-repeat="item in menu" ng-class="{'active': item.active}">
+		<li ng-repeat="item in menu">
 			<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
 				<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
 				<span class="sidemenu-item-text">{{item.text}}</span>
 	   	</a>
 		</li>
 
-		<!-- <li ng&#45;repeat&#45;end ng&#45;if="item.active"> -->
-		<!-- 	<ul class="sidemenu&#45;links"> -->
-		<!-- 		<li ng&#45;repeat="link in item.links"> -->
-		<!-- 			<a href="{{link.href}}" class="sidemenu&#45;link" ng&#45;class="{active: link.active}"><i class="fa fa&#45;angle&#45;right"></i>{{link.text}}</a> -->
-		<!-- 		</li> -->
-		<!-- 	</ul> -->
-		<!-- </li> -->
+		<li ng-if="grafana.user.isSignedIn" style="margin-top:50px">
+			<a href="profile" class="sidemenu-item sidemenu-user">
+				<img ng-src="{{grafana.user.gravatarUrl}}">
+				<span class="sidemenu-item-text">{{grafana.user.name}}</a>
+			</a>
+		</li>
+
+		<li ng-if="grafana.user.isSignedIn">
+			<a href="logout" class="sidemenu-item" target="_self">
+				<span class="sidemenu-item-text no-icon">Sign out</span>
+	   	</a>
+		</li>
+
+		<li ng-if="!grafana.user.isSignedIn" style="margin-top:50px">
+			<a href="/login" class="sidemenu-item" target="_self">
+				<span class="sidemenu-icon"><i class="fa fa-sign-in"></i></span>
+				<span class="sidemenu-item-text">Sign in</span>
+	   	</a>
+		</li>
 
-		<!-- <li class="dropdown" ng&#45;if="grafana.user.isSignedIn"> -->
-		<!-- 	<a class="sidemenu&#45;user pointer" data&#45;toggle="dropdown" title="{{grafana.user.email}}"> -->
-		<!-- 		<span class="gravatar&#45;missing">f</span> -->
-		<!-- 		<img ng&#45;src="{{grafana.user.gravatarUrl}}" width="35"> -->
-		<!-- 		<span class="gravatar&#45;email small">{{grafana.user.login}}</span> -->
-		<!-- 	</a> -->
-		<!-- 	<ul class="dropdown&#45;menu"> -->
-		<!-- 		<li><a href="{{appSubUrl}}/?logout">Logout</a></li> -->
-		<!-- 	</ul> -->
-		<!-- </li> -->
 	</ul>
 </div>
diff --git a/src/css/less/panel.less b/src/css/less/panel.less
index 5af0bcd6326..2c684e9d2a9 100644
--- a/src/css/less/panel.less
+++ b/src/css/less/panel.less
@@ -6,7 +6,7 @@
 }
 
 .panel-margin {
-  margin: 4px;
+  margin: 5px;
   display: block;
 }
 
diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less
index e22ef250d2c..491a50d517b 100644
--- a/src/css/less/sidemenu.less
+++ b/src/css/less/sidemenu.less
@@ -31,31 +31,31 @@
   list-style: none;
   margin: 0;
   padding: 0;
+  li {
+    height: 50px;
+  }
 }
 
 .sidemenu-user {
-  padding: 8px 10px 7px 15px;
-  display: block;
-  width: 170px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  .gravatar-missing {
-    display: none;
-  }
-  .gravatar-email {
-    padding-left: 4px;
+  .sidemenu-item-text {
+    width: 110px;
+    display: inline-block;
+    vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   img {
-    width: 35px;
-    padding-right: 10px;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
   }
-  border-bottom: 1px solid black;
 }
 
 .sidemenu-top-btn {
   display: block;
-  padding: 14px 0px 10px 20px;
+  padding: 14px 0px 10px 27px;
   background: @grafanaTargetBackground;
   border: 1px solid rgb(55, 54, 54);
   i {
@@ -67,30 +67,36 @@
 
 .sidemenu-icon {
   border-radius: 50%;
-  background: black;
-  box-shadow: 0 0 10px 6px #2E2E2E;
-  width: 35px;
-  height: 35px;
+  background: #000;
+  box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
+  width: 40px;
+  height: 40px;
   display: inline-block;
   i {
     color: @textColor;
+    opacity: .7;
     position: relative;
-    left: 9px;
-    top: 2px;
-    font-size: 120%;
+    left: 11px;
+    top: 5px;
+    font-size: 135%;
   }
 }
 
 .sidemenu-item {
-  color: @orange;
+  color: #f80;
   line-height: 34px;
+	padding: 14px 10px 14px 20px;
   font-weight: bold;
-  padding: 14px 10px 14px 20px;
-  display: block;
+	display: block;
 
   .sidemenu-item-text {
     padding-left: 15px;
-    text-shadow: 1px 0px 10px @orange;
+    &.no-icon {
+      padding-left: 59px;
+    }
+    //text-shadow: 1px 0 10px #A25803;
+    //text-shadow: 1px 0 10px #f80;
   }
 }
 
+