More progress on new design

src/app/directives/all.js

@@ -16,5 +16,4 @@ define([
   './graphiteSegment',
   './grafanaVersionCheck',
   './dropdown.typeahead',
-  './navHeader',
 ], function () {});

src/app/partials/dashboard_topnav.html

@@ -5,7 +5,7 @@
 			<div class="top-nav">
 				<span class="top-nav-menu-btn" ng-if="!grafana.sidemenu">
 					<a class="pointer" ng-click="toggleSideMenu()">
-						<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
+						<img class="logo-icon" src="img/fav32.png"></img>
 						<span>menu</span>
 					</a>
 				</span>

src/app/partials/sidemenu.html

@@ -1,21 +1,11 @@
 <div ng-controller="SideMenuCtrl" ng-init="init()">
 	<ul class="sidemenu">
 		<li class="sidemenu-logo-container">
-			<img ng-src="{{appSubUrl}}/img/logo_transparent_200x.png" style="width: 80px">
-			<a ng-click="toggleSideMenu()" class="pull-right pointer">
-				<i class="fa fa-chevron-right"></i>
+			<img ng-src="{{appSubUrl}}/img/logo_transparent_200x.png">
+			<a ng-click="toggleSideMenu()" class="pointer sidemenu-toggle">
+				<i class="fa fa-angle-right"></i>
 			</a>
 		</li>
-		<li class="dropdown" ng-if="grafana.user.isSignedIn">
-			<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}">
-				<span class="gravatar-missing">f</span>
-				<img ng-src="{{grafana.user.gravatarUrl}}" width="35">
-				<span class="gravatar-email small">{{grafana.user.login}}</span>
-			</a>
-			<ul class="dropdown-menu">
-				<li><a href="{{appSubUrl}}/login?logout">Logout</a></li>
-			</ul>
-		</li>
 		<li ng-if="!grafana.user.isSignedIn">
 			<a href="login" class="sidemenu-item"><i class="fa fa-sign-in"></i>Sign in</a>
 		</li>
@@ -29,5 +19,16 @@
 				</li>
 			</ul>
 		</li>
+
+		<li class="dropdown" ng-if="grafana.user.isSignedIn">
+			<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}">
+				<span class="gravatar-missing">f</span>
+				<img ng-src="{{grafana.user.gravatarUrl}}" width="35">
+				<span class="gravatar-email small">{{grafana.user.login}}</span>
+			</a>
+			<ul class="dropdown-menu">
+				<li><a href="{{appSubUrl}}/login?logout">Logout</a></li>
+			</ul>
+		</li>
 	</ul>
 </div>

src/css/less/grafana.less

@@ -9,6 +9,7 @@
 @import "forms.less";
 @import "singlestat.less";
 @import "tightform.less";
+@import "sidemenu.less";
 
 .row-control-inner {
   padding:0px;
@@ -62,7 +63,7 @@
   float: left;
   padding: 15px 13px 13px 14px;;
   position: relative;
-  background: @black;
+  border-right: 2px solid black;
   font-weight: bold;
   font-size: 90%;
   span {

src/css/less/p_pro.less

@@ -1,98 +1,3 @@
-.pro-sidemenu {
-  display: none;
-  a:focus {
-    text-decoration: none;
-  }
-}
-
-.pro-sidemenu-open {
-  .pro-sidemenu {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 200px;
-    background: @bodyBackground;
-    border-right: 2px solid black;
-    min-height: 100%;
-    z-index: 101;
-  }
-
-  .dashboard-notice {
-    margin-left: 200px;
-    width: auto;
-  }
-
-  .pro-main-view {
-    padding-left: 200px;
-  }
-
-  .panel-fullscreen {
-    left: 200px;
-  }
-}
-
-.sidemenu {
-  list-style: none;
-  background: @grafanaPanelBackground;
-  margin: 0;
-  padding: 0;
-}
-
-.sidemenu-links {
-  margin: 0;
-  padding: 5px 0;
-  list-style: none;
-  background: @grafanaTargetFuncBackground;
-  li {
-    display: block;
-  }
-}
-
-.sidemenu-link {
-  display: block;
-  padding: 6px 0 6px 30px;
-  font-size: 15px;
-  color: @gray;
-  i {
-    padding-right: 15px;
-  }
-  &.active {
-    color: white;
-    font-weight: bold;
-  }
-}
-
-.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;
-  }
-  img {
-    width: 35px;
-    padding-right: 10px;
-  }
-  border-bottom: 1px solid black;
-}
-
-.sidemenu-item {
-  font-size: 17px;
-  padding: 14px 10px 14px 20px;
-  display: block;
-  i {
-    padding-right: 15px;
-  }
-  border-bottom: 1px solid black;
-}
-
 
 .login-form {
   width: 50%;

src/css/less/sidemenu.less

@@ -0,0 +1,114 @@
+.sidemenu-container {
+  display: none;
+  a:focus {
+    text-decoration: none;
+  }
+}
+
+.sidemenu-open {
+  .sidemenu-container {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    background: @bodyBackground;
+    border-right: 2px solid black;
+    min-height: 100%;
+    z-index: 101;
+  }
+
+  .dashboard-notice {
+    margin-left: 200px;
+    width: auto;
+  }
+
+  .pro-main-view {
+    padding-left: 200px;
+  }
+
+  .panel-fullscreen {
+    left: 200px;
+  }
+}
+
+.sidemenu {
+  list-style: none;
+  background: @grafanaPanelBackground;
+  margin: 0;
+  padding: 0;
+}
+
+.sidemenu-links {
+  margin: 0;
+  padding: 5px 0;
+  list-style: none;
+  background: @grafanaTargetFuncBackground;
+  li {
+    display: block;
+  }
+}
+
+.sidemenu-link {
+  display: block;
+  padding: 6px 0 6px 30px;
+  font-size: 15px;
+  color: @gray;
+  i {
+    padding-right: 15px;
+  }
+  &.active {
+    color: white;
+    font-weight: bold;
+  }
+}
+
+.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;
+  }
+  img {
+    width: 35px;
+    padding-right: 10px;
+  }
+  border-bottom: 1px solid black;
+}
+
+.sidemenu-item {
+  font-size: 17px;
+  padding: 14px 10px 14px 20px;
+  display: block;
+  i {
+    padding-right: 15px;
+  }
+  border-bottom: 1px solid black;
+}
+
+.sidemenu-logo-container {
+  background: @grafanaPanelBackground;
+  text-align: center;
+  border-bottom: 2px solid black;
+  img {
+    display: inline-block;
+    width: 102px;
+    padding: 6px 0px 7px 11px;
+  }
+}
+
+.sidemenu-toggle {
+  float: right;
+  display: block;
+  font-size: 200%;
+  padding: 11px 8px 11px 8px;
+  background: @grafanaTargetFuncBackground;
+}
+

src/views/index.html

@@ -27,9 +27,9 @@
   <body ng-cloak ng-controller="GrafanaCtrl">
     <link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css" ng-if="grafana.style === 'light'">
 
-		<div class="pro-container" ng-class="{'pro-sidemenu-open': grafana.sidemenu}">
+		<div class="pro-container" ng-class="{'sidemenu-open': grafana.sidemenu}">
 
-			<aside class="pro-sidemenu" ng-if="grafana.sidemenu">
+			<aside class="sidemenu-container" ng-if="grafana.sidemenu">
 				<div ng-include="'app/partials/sidemenu.html'"></div>
 			</aside>