Further progress on new design

src/app/directives/all.js

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

src/app/directives/dashEditLink.js

@@ -6,9 +6,9 @@ function (angular, $) {
   'use strict';
 
   var editViewMap = {
-    'settings': 'app/partials/dasheditor.html',
-    'annotations': 'app/features/annotations/partials/editor.html',
-    'templating': 'app/partials/templating_editor.html',
+    'settings':    { src: 'app/partials/dasheditor.html', title: "Settings" },
+    'annotations': { src: 'app/features/annotations/partials/editor.html', title: "Annotations" },
+    'templating':  { src: 'app/partials/templating_editor.html', title: "Templating" }
   };
 
   angular
@@ -55,7 +55,10 @@ function (angular, $) {
           }
 
           function showEditorPane(evt, payload, editview) {
-            if (editview) { payload.src = editViewMap[editview]; }
+            if (editview) {
+              scope.grafana.editview = editViewMap[editview];
+              payload.src = scope.grafana.editview.src;
+            }
 
             if (lastEditor === payload.src) {
               hideEditorPane();
@@ -98,10 +101,12 @@ function (angular, $) {
             if (newValue) {
               showEditorPane(null, {}, newValue);
             } else if (oldValue) {
+              scope.grafana.editview = null;
               hideEditorPane();
             }
           });
 
+          scope.grafana.editview = null;
           scope.$on("$destroy", hideEditorPane);
           scope.onAppEvent('hide-dash-editor', hideEditorPane);
           scope.onAppEvent('show-dash-editor', showEditorPane);

src/app/directives/topnav.js

@@ -0,0 +1,52 @@
+define([
+  'angular',
+  'kbn'
+],
+function (angular) {
+  'use strict';
+
+  angular
+    .module('grafana.directives')
+    .directive('topnav', function() {
+      return {
+        restrict: 'E',
+        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>' +
+                '<span>menu</span>' +
+              '</a>' +
+            '</span>' +
+
+            '<span class="top-nav-breadcrumb">' +
+              '<i class="top-nav-icon" ng-class="icon"></i>' +
+              '<i class="fa fa-angle-right"></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}}' +
+              '<span class="small" ng-show="titleAction">' +
+                '<i class="fa fa-angle-down"></i>' +
+              '</span>' +
+            '</a>' +
+          '</div>',
+        link: function(scope, elem, attrs) {
+          scope.icon = attrs.icon;
+        }
+      };
+    });
+
+});

src/app/partials/dashboard_topnav.html

@@ -2,26 +2,20 @@
 	<div class="navbar-inner">
 		<div class="container-fluid">
 
-			<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"></img>
-						<span>menu</span>
-					</a>
-				</span>
+			<topnav ng-if="!grafana.editview"
+			        title="{{dashboard.title}}"
+			        icon="fa fa-th-large"
+							title-action="openSearch()"
+							toggle="toggleSideMenu()"
+							show-menu-btn="!grafana.sidemenu">
+			</topnav>
 
-				<span class="top-nav-breadcrumb">
-					<i class="top-nav-icon" ng-class="topnav.icon"></i>
-					<i class="fa fa-angle-right"></i>
-				</span>
-
-				<a ng-click="topnav.titleAction()" class="top-nav-title">
-					{{topnav.title}}
-					<span class="small" ng-show="topnav.titleAction">
-						<i class="fa fa-angle-down"></i>
-					</span>
-				</a>
-			</div>
+			<topnav ng-if="grafana.editview"
+			        title="{{grafana.editview.title}}"
+			        icon="fa fa-th-large"
+							section="{{dashboard.title}}"
+							show-menu-btn="!grafana.sidemenu">
+			</topnav>
 
 			<ul class="nav pull-right">
 				<li ng-show="dashboardViewState.fullscreen">

src/css/less/grafana.less

@@ -67,6 +67,7 @@
   font-weight: bold;
   font-size: 90%;
   span {
+    padding-left: 4px;
     position: relative;
     top: 2px;
   }
@@ -75,14 +76,22 @@
 .top-nav-breadcrumb {
   display: block;
   float: left;
-  padding: 18px 9px 12px 12px;
+  padding: 18px 9px 8px 12px;
   font-size: 1.4em;
   font-weight: bold;
   color: darken(@gray, 10%);
   i {
-    padding-left: 4px;
+    padding-left: 9px;
   }
-  .fa-angle-right {
+}
+
+.top-nav-section {
+  display: block;
+  float: left;
+  padding: 19px 9px 8px 0;
+  font-weight: bold;
+  i {
+    padding-left: 8px;
   }
 }
 
@@ -93,8 +102,9 @@
   font-size: 1.3em;
   font-weight: bold;
   i {
+    padding-left: 4px;
     position: relative;
-    top: 3px;
+    top: 2px;
   }
 }