progress on new design

src/app/directives/topnav.js

@@ -21,12 +21,10 @@ function (angular) {
         template:
           '<div class="navbar navbar-static-top"><div class="navbar-inner"><div class="container-fluid">' +
           '<div class="top-nav">' +
-            '<span class="top-nav-menu-btn" ng-if="showMenuBtn">' +
+            '<a class="top-nav-menu-btn pointer" ng-if="showMenuBtn" ng-click="toggle()">' +
-              '<a class="pointer" ng-click="toggle()">' +
+              '<img class="logo-icon" src="img/fav32.png"></img> ' +
-                '<img class="logo-icon" src="img/fav32.png"></img>' +
+              '<i class="fa fa-angle-right"></i>' +
-                '<i class="fa fa-chevron-down"></i>' +
+            '</a>' +
-              '</a>' +
-            '</span>' +
 
             '<span class="top-nav-breadcrumb">' +
               '<i class="top-nav-icon" ng-class="icon"></i>' +
@@ -50,46 +48,4 @@ function (angular) {
       };
     });
 
-   angular
-    .module('grafana.directives')
-    .directive('topnavDash', function() {
-      return {
-        restrict: 'E',
-        transclude: true,
-        scope: {
-          title: "@",
-          section: "@",
-          titleAction: "&",
-          toggle: "&",
-          showMenuBtn: "=",
-        },
-        template:
-          '<div class="top-nav">' +
-            '<span class="top-nav-menu-btn" ng-if="showMenuBtn">' +
-              '<a class="pointer" ng-click="toggle()">' +
-                '<img class="logo-icon" src="img/fav32.png"></img>' +
-                '<i class="fa fa-angle-right"></i>' +
-              '</a>' +
-            '</span>' +
-
-            '<span class="top-nav-breadcrumb">' +
-              '<i class="top-nav-icon" ng-class="icon"></i>' +
-            '</span>' +
-
-           '<span class="top-nav-section" ng-show="section">' +
-              '{{section}}' +
-              '<i class="fa fa-angle-right"></i>' +
-           '</span>' +
-
-            '<a ng-click="titleAction()" class="top-nav-title">' +
-              '{{title}}' +
-            '</a>' +
-          '</div>',
-        link: function(scope, elem, attrs) {
-          scope.icon = attrs.icon;
-        }
-      };
-    });
-
-
 });

src/app/features/annotations/partials/editor.html

@@ -1,6 +1,11 @@
 <div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
 
 	<div class="gf-box-header">
+		<div class="gf-box-title">
+			<i class="fa fa-bolt"></i>
+			Annotations
+		</div>
+
 		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
 			<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
 			</div>

src/app/features/dashboard/dashboardNavCtrl.js

@@ -22,7 +22,6 @@ function (angular, _, moment, config, store) {
       $scope.onAppEvent('zoom-out', function() {
         $scope.zoom(2);
       });
-
     };
 
     $scope.set_default = function() {
@@ -35,6 +34,11 @@ function (angular, _, moment, config, store) {
       alertSrv.set('Local Default Clear','Your default dashboard has been reset to the default','success', 5000);
     };
 
+    $scope.openEditView = function(editview) {
+      var search = _.extend($location.search(), {editview: editview});
+      $location.search(search);
+    };
+
     $scope.saveForSharing = function() {
       var clone = angular.copy($scope.dashboard);
       clone.temp = true;

src/app/panels/timepicker/module.html

@@ -21,6 +21,7 @@
 			<li class="dropdown">
 
 				<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" href="" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="dismiss();">
+					<i class="fa fa-clock-o"></i>
 					<span ng-bind="time.rangeString"></span>
 					<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
 					<i class="fa fa-caret-down"></i>

src/app/partials/dashboard_topnav.html

@@ -2,34 +2,41 @@
 	<div class="navbar-inner">
 		<div class="container-fluid">
 
-			<topnav-dash ng-if="!grafana.editview"
+			<div class="top-nav">
-			        title="{{dashboard.title}}"
+				<a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
-			        icon="fa fa-th-large"
+					<img class="logo-icon" src="img/fav32.png"></img>
-							title-action="openSearch()"
+					<i class="fa fa-angle-right"></i>
-							toggle="toggleSideMenu()"
+				</a>
-							show-menu-btn="!grafana.sidemenu">
-			</topnav-dash>
 
-			<topnav-dash ng-if="grafana.editview"
+				<a class="top-nav-dashboards-btn pointer" ng-click="openSearch()">
-							toggle="toggleSideMenu()"
+					<i class="fa fa-th-large"></i>
-			        title="{{grafana.editview.title}}"
+					<i class="fa fa-angle-down"></i>
-			        icon="fa fa-th-large"
+				</a>
-							section="{{dashboard.title}}"
-							show-menu-btn="!grafana.sidemenu">
-			</topnav-dash>
 
-			<ul class="nav pull-left" style="font-size: 130%">
+				<a ng-click="asd()" class="top-nav-title pointer">
+					 {{dashboard.title}}
+				 </a>
+			 </div>
+
+			<ul class="nav pull-left">
 				<li>
-					<a href="asd"><i class="fa fa-star-o" style="color: orange;"></i></a>
+					<a class="pointer" ng-click="starDashboard()"><i class="fa fa-star-o" style="color: orange;"></i></a>
 				</li>
 				<li>
-					<a href="asd"><i class="fa fa-share-square-o"></i></a>
+					<a class="pointer" ng-click="asd()"><i class="fa fa-share-square-o"></i></a>
 				</li>
 				<li>
-					<a href="asd"><i class="fa fa-save"></i></a>
+					<a ng-click="saveDashboard()"><i class="fa fa-save"></i></a>
 				</li>
-				<li>
+				<li class="dropdown">
-					<a href="asd"><i class="fa fa-cog"></i></a>
+					<a class="pointer" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
+					<ul class="dropdown-menu">
+						<li><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
+						<li><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
+						<li><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
+						<li><a class="pointer" ng-click="openEditView('settings');">Export</a></li>
+						<li><a class="pointer" ng-click="openEditView('settings');">View JSON</a></li>
+					</ul>
 				</li>
 			</ul>
 

src/app/partials/dasheditor.html

@@ -1,4 +1,8 @@
 <div class="gf-box-header">
+	<div class="gf-box-title">
+		<i class="fa fa-cogs"></i>
+		Settings
+	</div>
 
 	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
 		<div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}">

src/app/partials/sidemenu.html

@@ -1,17 +1,13 @@
 
 <div ng-controller="SideMenuCtrl" ng-init="init()">
 	<ul class="sidemenu">
-		<li>
+		<li style="margin-bottom: 15px;">
 			<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-if="!grafana.user.isSignedIn">
-			<a href="login" class="sidemenu-item"><i class="fa fa-sign-in"></i>Sign in</a>
-		</li>
-
 		<li ng-repeat="item in menu" ng-class="{'active': item.active}">
 			<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
 				<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>

src/app/partials/submenu.html

@@ -1,20 +1,6 @@
 <div class="submenu-controls" ng-controller="SubmenuCtrl">
 	<div class="tight-form" style="border-top: none">
 
-		<ul class="tight-form-list">
-			<li class="tight-form-item">
-				<div class="dropdown">
-					<a class="pointer" data-toggle="dropdown">
-						<i class="fa fa-cog"></i>
-					</a>
-					<ul class="dropdown-menu">
-						<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
-						<li><a class="pointer" dash-editor-link="app/features/annotations/partials/editor.html">Annotations</a></li>
-					</ul>
-				</div>
-			</li>
-		</ul>
-
 		<ul class="tight-form-list" ng-if="dashboard.templating.enable">
 			<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
 				<span class="template-variable ">

src/app/partials/templating_editor.html

@@ -1,5 +1,11 @@
 <div ng-controller="TemplateEditorCtrl" ng-init="init()">
 	<div class="gf-box-header">
+		<div class="gf-box-title">
+			<i class="fa fa-code"></i>
+			Templating
+		</div>
+
+
 		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
 			<div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
 			</div>

src/css/less/navbar.less

@@ -4,6 +4,7 @@
 
 .navbar .nav>li>a {
   padding: 19px 15px 8px;
+  .fa { font-size: 130%; }
 }
 
 .top-nav {
@@ -13,18 +14,45 @@
 .top-nav-menu-btn {
   display: block;
   float: left;
-  padding: 11px 6px 12px 14px;
+  padding: 11px 9px 11px 14px;
-  position: relative;
+  background: @grafanaTargetBackground;
-  border-right: 1px solid @black;
+  border: 1px solid rgb(55, 54, 54);
-  font-weight: bold;
-  font-size: 90%;
   i {
-    font-size: 170%;
+    font-size: 160%;
-    color: @gray;
+    color: darken(@gray, 15%);
-    padding: 0px 0px 0px 6px;
+    padding: 0px 0px 0px 0px;
     position: relative;
     top: 4px;
   }
+  &:hover {
+    background: lighten(@grafanaTargetBackground, 3%);
+  }
+}
+
+.top-nav-dashboards-btn {
+  display: block;
+  float: left;
+  padding: 15px 7px 9px 14px;
+  font-size: 1.4em;
+  font-weight: bold;
+  color: #a2a2a2;
+  margin: 0 18px 0 0;
+  border: 1px solid rgb(55, 54, 54);
+  border-left: none;
+  background: @grafanaTargetBackground;
+  .fa-th-large {
+    font-size: 123%;
+  }
+  .fa-angle-down {
+    position: relative;
+    top: 4px;
+  }
+  &:hover {
+    background: lighten(@grafanaTargetBackground, 3%);
+    .fa {
+      color: @textColor;
+    }
+  }
 }
 
 .top-nav-breadcrumb {

src/css/less/sidemenu.less

@@ -13,7 +13,6 @@
     left: 0;
     width: 200px;
     background: @bodyBackground;
-    border-right: 1px solid black;
     min-height: 100%;
     z-index: 101;
   }
@@ -59,15 +58,15 @@
 }
 
 .sidemenu-top-btn {
-  padding: 14px 0px 12px 20px;
-  background: @grafanaPanelBackground;
   display: block;
+  padding: 14px 0px 10px 20px;
+  background: @grafanaTargetBackground;
+  border: 1px solid rgb(55, 54, 54);
   i {
     padding-right: 5px;
     font-size: 170%;
     color: @gray;
   }
-  border-bottom: 10px solid @bodyBackground;
 }
 
 .sidemenu-icon {