Merge branch 'new_top_menu_design' into pro

Conflicts:
	src/app/partials/sidemenu.html

src/app/controllers/grafanaCtrl.js

@@ -10,7 +10,7 @@ function (angular, config, _, $, store) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv) {
+  module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv, $timeout) {
 
     $scope.init = function() {
       $scope.grafana = {};
@@ -30,6 +30,7 @@ function (angular, config, _, $, store) {
       $scope.grafana.style = 'dark';
       $scope.grafana.user = userSrv.getSignedInUser();
       $scope.grafana.sidemenu = store.getBool('grafana.sidemenu');
+      $scope.topnav = { title: 'Grafana' };
 
       $scope.onAppEvent('logged-out', function() {
         $scope.grafana.sidemenu = false;
@@ -44,6 +45,10 @@ function (angular, config, _, $, store) {
     $scope.toggleSideMenu = function() {
       $scope.grafana.sidemenu = !$scope.grafana.sidemenu;
       store.set('grafana.sidemenu', $scope.grafana.sidemenu);
+
+      $timeout(function() {
+        $scope.$broadcast("render");
+      }, 50);
     };
 
     $rootScope.onAppEvent = function(name, callback) {

src/app/controllers/sidemenuCtrl.js

@@ -17,17 +17,16 @@ function (angular, _, $, config) {
 
     $scope.menu = [];
     $scope.menu.push({
-      text: "Dashbord",
+      text: "Dashbords",
+      icon: "fa fa-th-large",
       href: $scope.getUrl("/"),
       startsWith: config.appSubUrl + '/dashboard/',
-      icon: "fa fa-th-large",
-      links: [
-        { text: 'Settings',    editview: 'settings'},
-        { text: 'Templating',  editview: 'templating'},
-        { text: 'Annotations', editview: 'annotations'},
-        { text: 'Export', href:""},
-        { text: 'JSON', href:""},
-      ]
+    });
+
+    $scope.menu.push({
+      text: "Data Sources",
+      icon: "fa fa-database",
+      href: $scope.getUrl("/account/datasources"),
     });
 
     if ($scope.grafana.user.accountRole === 'Admin') {
@@ -35,12 +34,16 @@ function (angular, _, $, config) {
         text: "Account", href: $scope.getUrl("/account"),
         requireRole: "Admin",
         icon: "fa fa-shield",
-        links: [
-          { text: 'Info',         href: $scope.getUrl("/account")},
-          { text: 'Data sources', href: $scope.getUrl("/account/datasources")},
-          { text: 'Users',        href: $scope.getUrl("/account/users")},
-          { text: 'API Keys',     href: $scope.getUrl("/account/apikeys")},
-        ]
+      });
+      $scope.menu.push({
+        text: "Users", href: $scope.getUrl("/account/users"),
+        requireRole: "Admin",
+        icon: "fa fa-users",
+      });
+      $scope.menu.push({
+        text: "API Keys", href: $scope.getUrl("/account/apikeys"),
+        requireRole: "Admin",
+        icon: "fa fa-key",
       });
     }
 
@@ -48,11 +51,6 @@ function (angular, _, $, config) {
       $scope.menu.push({
         text: "Profile", href: $scope.getUrl("/profile"),
         icon: "fa fa-user",
-        requireSignedIn: true,
-        links: [
-          { text: 'Info',     href: $scope.getUrl("/profile"), icon: "fa fa-sitemap" },
-          { text: 'Password', href:"", icon: "fa fa-lock" },
-        ]
       });
     }
 
@@ -69,6 +67,14 @@ 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();
     });
@@ -80,18 +86,21 @@ function (angular, _, $, config) {
     $scope.updateState = function() {
       var currentPath = config.appSubUrl + $location.path();
       var search = $location.search();
+      var activeIndex;
 
-      _.each($scope.menu, function(item) {
+      _.each($scope.menu, function(item, index) {
         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;
           }
         }
 
@@ -114,6 +123,8 @@ function (angular, _, $, config) {
           }
         });
       });
+
+      //$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]);
     };
 
     $scope.init = function() {

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();
@@ -89,7 +92,7 @@ function (angular, $) {
             hideScrollbars(true);
 
             var src = "'" + payload.src + "'";
-            var view = $('<div class="dashboard-edit-view" ng-include="' + src + '"></div>');
+            var view = $('<div class="gf-box" ng-include="' + src + '"></div>');
             elem.append(view);
             $compile(elem.contents())(editorScope);
           }
@@ -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,51 @@
+define([
+  'angular',
+  'kbn'
+],
+function (angular) {
+  'use strict';
+
+  angular
+    .module('grafana.directives')
+    .directive('topnav', function() {
+      return {
+        restrict: 'E',
+        transclude: true,
+        scope: {
+          title: "@",
+          section: "@",
+          titleAction: "&",
+          toggle: "&",
+          showMenuBtn: "=",
+        },
+        template:
+          '<div class="navbar navbar-static-top"><div class="navbar-inner"><div class="container-fluid">' +
+          '<div class="top-nav">' +
+            '<a class="top-nav-menu-btn pointer" ng-if="showMenuBtn" ng-click="toggle()">' +
+              '<img class="logo-icon" src="img/fav32.png"></img> ' +
+              '<i class="fa fa-angle-right"></i>' +
+            '</a>' +
+
+            '<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}}' +
+              '<span class="small" ng-show="titleAction">' +
+                '<i class="fa fa-angle-down"></i>' +
+              '</span>' +
+            '</a>' +
+          '</div><div ng-transclude></div></div></div></div>',
+        link: function(scope, elem, attrs) {
+          scope.icon = attrs.icon;
+        }
+      };
+    });
+
+});

src/app/features/account/partials/account.html

@@ -1,15 +1,8 @@
-<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
+<topnav toggle="toggleSideMenu()" title="Details" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu"></topnav>
 
-<div class="dashboard-edit-view" style="min-height: 500px">
+<div class="gf-box" style="min-height: 500px">
 
-	<div class="dashboard-editor-header">
-		<div class="dashboard-editor-title">
-			<i class="fa fa-shield"></i>
-			  Account information
-		</div>
-	</div>
-
-	<div class="dashboard-editor-body">
+	<div class="gf-box-body">
 		<div class="row editor-row">
 			<div class="section">
 				<form name="accountForm">

src/app/features/account/partials/apikeys.html

@@ -1,15 +1,13 @@
-<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
+<topnav toggle="toggleSideMenu()"
+				title="API Keys"
+				icon="fa fa-shield"
+				section="Account"
+				show-menu-btn="!grafana.sidemenu">
+</topnav>
 
-<div class="dashboard-edit-view" style="min-height: 500px">
+<div class="gf-box" style="min-height: 500px">
 
-	<div class="dashboard-editor-header">
-		<div class="dashboard-editor-title">
-			<i class="fa fa-key"></i>
-			API Tokens
-		</div>
-	</div>
-
-	<div class="dashboard-editor-body">
+	<div class="gf-box-body">
 		<div class="editor-row">
 			<div class="section">
 				<form name="addTokenrForm" class="form-inline tight-form">

src/app/features/account/partials/datasources.html

@@ -1,127 +1,120 @@
-<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
+<topnav toggle="toggleSideMenu()"
+				title="Data sources"
+				icon="fa fa-shield"
+				section="Account"
+				show-menu-btn="!grafana.sidemenu">
+</topnav>
 
-<div class="dashboard-edit-view" style="min-height: 500px">
-	<div class="editor-row">
-		<div class="section">
-
-			<div class="dashboard-editor-header">
-				<div class="dashboard-editor-title">
-					<i class="fa fa-sitemap"></i>
-					Data sources
-				</div>
+<div class="gf-box" style="min-height: 500px">
+	<div class="gf-box-header">
+		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+			<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
+			</div>
+		</div>
+	</div>
 
-				<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-					<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
+	<form name="editForm">
+		<div class="gf-box-body">
+			<div class="editor-row row" ng-if="editor.index == 0">
+				<div class="span8">
+					<div ng-if="datasources.length === 0">
+						<em>No datasources defined</em>
 					</div>
+					<table class="grafana-options-table" ng-if="datasources.length > 0">
+						<tr>
+							<td><strong>Name</strong></td>
+							<td><strong>Url</strong></td>
+							<td></td>
+							<td></td>
+							<td></td>
+						</tr>
+						<tr ng-repeat="ds in datasources">
+							<td style="width:1%">
+								<i class="fa fa-database"></i> &nbsp;
+								{{ds.name}}
+							</td>
+							<td style="width:90%">
+								{{ds.url}}
+							</td>
+							<td style="width:2%" class="text-center">
+								<span ng-if="ds.isDefault">
+									<span class="label label-info">default</span>
+								</span>
+							</td>
+							<td style="width: 1%">
+								<a ng-click="edit(ds)" class="btn btn-success btn-mini">
+									<i class="fa fa-edit"></i>
+									Edit
+								</a>
+							</td>
+							<td style="width: 1%">
+								<a ng-click="remove(ds)" class="btn btn-danger btn-mini">
+									<i class="fa fa-remove"></i>
+								</a>
+							</td>
+						</tr>
+					</table>
 				</div>
-
 			</div>
 
-			<form name="editForm">
-				<div class="dashboard-editor-body">
-
-					<div class="editor-row row" ng-if="editor.index == 0">
-						<div class="span8">
-							<div ng-if="datasources.length === 0">
-								<em>No datasources defined</em>
-							</div>
-							<table class="grafana-options-table" ng-if="datasources.length > 0">
-								<tr>
-									<td><strong>Name<strong></td>
-									<td><strong>Url<strong></td>
-									<td><strong><strong></td>
-									<td><strong><strong></td>
-									<td><strong><strong></td>
-								</tr>
-								<tr ng-repeat="ds in datasources">
-									<td style="width:1%">
-										<i class="fa fa-database"></i> &nbsp;
-										{{ds.name}}
-									</td>
-									<td style="width:90%">
-										{{ds.url}}
-									</td>
-									<td style="width:2%" class="text-center">
-										<span ng-if="ds.isDefault">
-											<span class="label label-info">default</span>
-										</span>
-									</td>
-									<td style="width: 1%">
-										<a ng-click="edit(ds)" class="btn btn-success btn-mini">
-											<i class="fa fa-edit"></i>
-											Edit
-										</a>
-									</td>
-									<td style="width: 1%">
-										<a ng-click="remove(ds)" class="btn btn-danger btn-mini">
-											<i class="fa fa-remove"></i>
-										</a>
-									</td>
-								</tr>
-							</table>
-						</div>
+			<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
+				<div class="editor-row">
+					<div class="editor-option">
+						<label class="small">Data source name</label>
+						<input type="text" class="input-large" ng-model='current.name' placeholder="production" required></input>
+					</div>
+					<div class="editor-option">
+						<label class="small">Type</label>
+						<select class="input-medium" ng-model="current.type" ng-options="f.type as f.name for f in types" ng-change="typeChanged()"></select>
 					</div>
+					<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool>
+				</div>
 
-					<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
-						<div class="editor-row">
-							<div class="editor-option">
-								<label class="small">Data source name</label>
-								<input type="text" class="input-large" ng-model='current.name' placeholder="production" required></input>
-							</div>
-							<div class="editor-option">
-								<label class="small">Type</label>
-								<select class="input-medium" ng-model="current.type" ng-options="f.type as f.name for f in types" ng-change="typeChanged()"></select>
-							</div>
-							<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool>
-						</div>
+				<div class="editor-row">
+					<div class="editor-option">
+						<label class="small">Url</label>
+						<input type="text" class="input-xxlarge" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
+					</div>
+					<div class="editor-option">
+						<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
+						<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
+					</div>
+				</div>
 
-						<div class="editor-row">
-							<div class="editor-option">
-								<label class="small">Url</label>
-								<input type="text" class="input-xxlarge" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
-							</div>
-							<div class="editor-option">
-								<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
-								<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
-							</div>
+				<div class="editor-row" ng-if="current.type === 'influxdb'">
+					<div class="section">
+						<h5>InfluxDB Details</h5>
+						<div class="editor-option">
+							<label class="small">Database name</label>
+							<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
 						</div>
-
-						<div class="editor-row" ng-if="current.type === 'influxdb'">
-							<div class="section">
-								<h5>InfluxDB Details</h5>
-								<div class="editor-option">
-									<label class="small">Database name</label>
-									<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
-								</div>
-								<div class="editor-option">
-									<label class="small">User</label>
-									<input type="text" class="input-large" ng-model='current.user' placeholder=""></input>
-								</div>
-								<div class="editor-option">
-									<label class="small">Password</label>
-									<input type="password" class="input-large" ng-model='current.password' placeholder=""></input>
-								</div>
-							</div>
+						<div class="editor-option">
+							<label class="small">User</label>
+							<input type="text" class="input-large" ng-model='current.user' placeholder=""></input>
 						</div>
-						<div class="editor-row" ng-if="current.type === 'elasticsearch'">
-							<div class="section">
-								<h5>Elastic search details</h5>
-								<div class="editor-option">
-									<label class="small">Index name</label>
-									<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
-								</div>
-							</div>
+						<div class="editor-option">
+							<label class="small">Password</label>
+							<input type="password" class="input-large" ng-model='current.password' placeholder=""></input>
 						</div>
 					</div>
-
-					<div class="dashboard-editor-footer" style="margin-top: 20px">
-						<button type="submit" class="btn btn-success" ng-show="editor.index === 1" ng-click="add()">Add</button>
-						<button type="submit" class="btn btn-success" ng-show="editor.index === 2 && !currentIsNew" ng-click="update()">Update</button>
-						<button type="submit" class="btn btn-info" ng-show="editor.index === 2 && !currentIsNew" ng-click="cancel()">Cancel</button>
+				</div>
+				<div class="editor-row" ng-if="current.type === 'elasticsearch'">
+					<div class="section">
+						<h5>Elastic search details</h5>
+						<div class="editor-option">
+							<label class="small">Index name</label>
+							<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
+						</div>
 					</div>
+				</div>
+			</div>
 
-				</form>
+			<div class="dashboard-editor-footer" style="margin-top: 20px">
+				<button type="submit" class="btn btn-success" ng-show="editor.index === 1" ng-click="add()">Add</button>
+				<button type="submit" class="btn btn-success" ng-show="editor.index === 2 && !currentIsNew" ng-click="update()">Update</button>
+				<button type="submit" class="btn btn-info" ng-show="editor.index === 2 && !currentIsNew" ng-click="cancel()">Cancel</button>
 			</div>
-		</div>
+
+		</form>
 	</div>
 </div>

src/app/features/account/partials/users.html

@@ -1,15 +1,8 @@
-<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
+<topnav toggle="toggleSideMenu()" title="Users" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu"></topnav>
 
-<div class="dashboard-edit-view" style="min-height: 500px">
+<div class="gf-box" style="min-height: 500px">
 
-	<div class="dashboard-editor-header">
-		<div class="dashboard-editor-title">
-			<i class="fa fa-users"></i>
-			Users
-		</div>
-	</div>
-
-	<div class="dashboard-editor-body">
+	<div class="gf-box-body">
 
 		<div class="editor-row">
 			<div class="section">

src/app/features/admin/partials/admin.html

@@ -1,23 +1,9 @@
-<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin'"></div>
-
-<div class="dashboard-edit-view" style="min-height: 500px">
-	<div class="editor-row">
-		<div class="section">
-
-			<div class="dashboard-editor-header">
-				<div class="dashboard-editor-title">
-					<i class="fa fa-instiution"></i>
-					System administration
-				</div>
-
-				<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-					<div ng-repeat="tab in ['Settings','Users', 'Log', 'Audit']" data-title="{{tab}}">
-					</div>
-				</div>
-
-			</div>
-
-			</div>
-		</div>
-	</div>
+<topnav toggle="toggleSideMenu()"
+				title="Users"
+				icon="fa fa-cube"
+				section="Admin"
+				show-menu-btn="!grafana.sidemenu">
+</topnav>
+
+<div class="gf-box" style="min-height: 500px">
 </div>

src/app/features/admin/partials/users.html

@@ -1,9 +1,13 @@
-<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin > Users'"></div>
+<topnav toggle="toggleSideMenu()"
+				title="Users"
+				icon="fa fa-cube"
+				section="Admin"
+				show-menu-btn="!grafana.sidemenu">
+</topnav>
 
-<div class="dashboard-edit-view" style="min-height: 500px">
-
-	<div class="dashboard-editor-body">
+<div class="gf-box" style="min-height: 500px">
 
+	<div class="gf-box-body">
 		<div class="editor-row row">
 			<div class="section span6">
 				<table class="grafana-options-table">

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

@@ -1,7 +1,7 @@
 <div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
 
-	<div class="dashboard-editor-header">
-		<div class="dashboard-editor-title">
+	<div class="gf-box-header">
+		<div class="gf-box-title">
 			<i class="fa fa-bolt"></i>
 			Annotations
 		</div>
@@ -10,10 +10,12 @@
 			<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
 			</div>
 		</div>
-
+		<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
+			<i class="fa fa-remove"></i>
+		</button>
 	</div>
 
-	<div class="dashboard-editor-body">
+	<div class="gf-box-body">
 		<div class="editor-row row" ng-if="editor.index == 0">
 			<div class="span6">
 				<div ng-if="annotations.length === 0">
@@ -71,12 +73,10 @@
 			<div ng-include src="currentDatasource.editorSrc">
 			</div>
 
+			<div class="dashboard-editor-footer">
+				<button ng-show="editor.index === 1" type="button" class="btn btn-success" ng-click="add()">Add</button>
+				<button ng-show="editor.index === 2" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
+			</div>
 		</div>
 	</div>
-
-	<div class="dashboard-editor-footer">
-		<button ng-show="editor.index === 1" type="button" class="btn btn-success" ng-click="add()">Add</button>
-		<button ng-show="editor.index === 2" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
-		<button type="button" class="btn btn-success pull-right" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
-	</div>
 </div>

src/app/features/dashboard/dashboardCtrl.js

@@ -61,6 +61,9 @@ function (angular, $, config, _) {
     $scope.setWindowTitleAndTheme = function() {
       window.document.title = config.window_title_prefix + $scope.dashboard.title;
       $scope.grafana.style = $scope.dashboard.style;
+      $scope.topnav.title = $scope.dashboard.title;
+      $scope.topnav.icon = "fa fa-th-large";
+      $scope.topnav.titleAction = function() { alert("hej"); };
     };
 
     $scope.isPanel = function(obj) {

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/features/profile/partials/profile.html

@@ -1,17 +1,23 @@
-<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Profile'"></div>
+<topnav toggle="toggleSideMenu()"
+				title="Details"
+				icon="fa fa-user"
+				section="Profile"
+				show-menu-btn="!grafana.sidemenu">
+</topnav>
 
-<div class="dashboard-edit-view">
-	<div class="editor-row">
-		<div class="section">
 
-			<div class="dashboard-editor-header">
-				<div class="dashboard-editor-title">
+<div class="editor-row">
+	<div class="section">
+
+		<div class="gf-box">
+			<div class="gf-box-header">
+				<div class="gf-box-title">
 					<i class="fa fa-user"></i>
 					Personal information
 				</div>
 			</div>
 
-			<div class="dashboard-editor-body">
+			<div class="gf-box-body">
 				<div class="row">
 					<form name="userForm">
 						<div>
@@ -56,65 +62,66 @@
 				</div>
 			</div>
 		</div>
+	</div>
 
-		<div class="section">
-			<div class="dashboard-editor-header">
-				<div class="dashboard-editor-title">
-					<i class="fa fa-cubes"></i>
+	<div class="section">
+
+		<div class="gf-box">
+			<div class="gf-box-header">
+				<div class="gf-box-title">
+					<i class="fa fa-shield"></i>
 					Your accounts
 				</div>
 			</div>
-			<br>
-
-			<table class="grafana-options-table">
-				<tr ng-repeat="ac in accounts">
-					<td>Name: {{ac.name}}</td>
-					<td>Role: {{ac.role}}</td>
-					<td ng-show="ac.isUsing">
-						<span class="label label-info">
-							active now
-						</span>
-					</td>
-					<td ng-show="!ac.isUsing">
-						<a ng-click="setUsingAccount(ac)" class="btn btn-success btn-mini">
-							Select
-						</a>
-					</td>
-				</tr>
-			</table>
+			<div class="gf-box-body">
+				<table class="grafana-options-table">
+					<tr ng-repeat="ac in accounts">
+						<td>Name: {{ac.name}}</td>
+						<td>Role: {{ac.role}}</td>
+						<td ng-show="ac.isUsing">
+							<span class="label label-info">
+								active now
+							</span>
+						</td>
+						<td ng-show="!ac.isUsing">
+							<a ng-click="setUsingAccount(ac)" class="btn btn-success btn-mini">
+								Select
+							</a>
+						</td>
+					</tr>
+				</table>
+			</div>
 		</div>
+	</div>
 
-		<div class="section">
-
-			<div class="dashboard-editor-header">
-				<div class="dashboard-editor-title">
+	<div class="section">
+		<div class="gf-box">
+			<div class="gf-box-header">
+				<div class="gf-box-title">
 					<i class="fa fa-plus-square"></i>
 					Add account
 				</div>
 			</div>
-			<br>
-
-			<form name="form">
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item">
-							<strong>Account name</strong>
-						</li>
-						<li>
-							<input type="text" ng-model="newAccount.name" required class="input-xlarge tight-form-input" placeholder="account name">
-						</li>
-						<li>
-							<button class="btn btn-success tight-form-btn" ng-click="createAccount()">Create</button>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-			</form>
+			<div class="gf-box-body">
+				<form name="form">
+					<div class="tight-form">
+						<ul class="tight-form-list">
+							<li class="tight-form-item">
+								<strong>Account name</strong>
+							</li>
+							<li>
+								<input type="text" ng-model="newAccount.name" required class="input-xlarge tight-form-input" placeholder="account name">
+							</li>
+							<li>
+								<button class="btn btn-success tight-form-btn" ng-click="createAccount()">Create</button>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+				</form>
+			</div>
 		</div>
 	</div>
 </div>
-	</div>
-</div>
-</div>
 
 

src/app/panels/timepicker/editor.html

@@ -1,5 +1,6 @@
   <div class="editor-row">
 		<div class="section">
+			<div>
 			<div class="tight-form">
 				<ul class="tight-form-list">
 					<li class="tight-form-item" style="width: 148px">
@@ -34,6 +35,7 @@
 				</ul>
 				<div class="clearfix"></div>
 			</div>
+			</div>
 
 			<p>
 			<br>

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

@@ -1,20 +1,44 @@
 <div class="navbar navbar-static-top" ng-controller='DashboardNavCtrl' ng-init="init()">
 	<div class="navbar-inner">
 		<div class="container-fluid">
-			<span class="hamburger">
-				<a class="pointer" ng-click="toggleSideMenu()">
-					<i class="fa fa-bars"></i>
+
+			<div class="top-nav">
+				<a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
+					<img class="logo-icon" src="img/fav32.png"></img>
+					<i class="fa fa-angle-right"></i>
 				</a>
-			</span>
-			<span class="brand">
-				<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
-				<a ng-click="openSearch()" class="page-title">
-					{{dashboard.title}}
-					<span class="small">
-						<i class="fa fa-angle-down"></i>
-					</span>
+
+				<a class="top-nav-dashboards-btn pointer" ng-click="openSearch()">
+					<i class="fa fa-th-large"></i>
+					<i class="fa fa-angle-down"></i>
 				</a>
-			</span>
+
+				<a ng-click="asd()" class="top-nav-title pointer">
+					 {{dashboard.title}}
+				 </a>
+			 </div>
+
+			<ul class="nav pull-left">
+				<li>
+					<a class="pointer" ng-click="starDashboard()"><i class="fa fa-star-o" style="color: orange;"></i></a>
+				</li>
+				<li>
+					<a class="pointer" ng-click="asd()"><i class="fa fa-share-square-o"></i></a>
+				</li>
+				<li>
+					<a ng-click="saveDashboard()"><i class="fa fa-save"></i></a>
+				</li>
+				<li class="dropdown">
+					<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>
 
 			<ul class="nav pull-right">
 				<li ng-show="dashboardViewState.fullscreen">
@@ -28,14 +52,12 @@
 					</grafana-simple-panel>
 				</li>
 
-				<li class="dropdown grafana-menu-save">
-					<a bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="saveDashboard()">
-						<i class='fa fa-save'></i>
-					</a>
-				</li>
-
-				<!-- <li class="grafana&#45;menu&#45;home"><a bs&#45;tooltip="'Goto saved default'" data&#45;placement="bottom" href='#/'><i class='fa fa&#45;home'></i></a></li> -->
-
+				<!-- <li class="dropdown grafana&#45;menu&#45;save"> -->
+				<!-- 	<a bs&#45;tooltip="'Save'" data&#45;placement="bottom" class="dropdown&#45;toggle" data&#45;toggle="dropdown" ng&#45;click="saveDashboard()"> -->
+				<!-- 		<i class='fa fa&#45;save'></i> -->
+				<!-- 	</a> -->
+				<!-- </li> -->
+        <!--  -->
 				<li class="grafana-menu-stop-playlist hide">
 					<a class='small' ng-click='stopPlaylist(2)'>
 						Stop playlist

src/app/partials/dasheditor.html

@@ -1,7 +1,7 @@
-<div class="dashboard-editor-header">
-	<div class="dashboard-editor-title">
+<div class="gf-box-header">
+	<div class="gf-box-title">
 		<i class="fa fa-cogs"></i>
-		Dashboard settings
+		Settings
 	</div>
 
 	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
@@ -11,9 +11,13 @@
 		</div>
 	</div>
 
+	<button class="gf-box-header-close-btn" ng-click="dismiss();">
+		<i class="fa fa-remove"></i>
+	</button>
+
 </div>
 
-<div class="dashboard-editor-body">
+<div class="gf-box-body">
 
 		<div ng-if="editor.index == 0">
 			<div class="editor-row">
@@ -93,7 +97,7 @@
 	<div class="clearfix"></div>
 </div>
 
-<div class="dashboard-editor-footer">
+<div class="gf-box-footer">
 	<div class="grafana-version-info" ng-show="editor.index === 0">
 		<span class="editor-option small">
 			Grafana version: {{grafana.version}} &nbsp;&nbsp;
@@ -101,6 +105,4 @@
 		<span grafana-version-check>
 		</span>
 	</div>
-
-	<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
 </div>

src/app/partials/navbar.html

@@ -1,15 +1,12 @@
 <div class="navbar navbar-static-top">
 	<div class="navbar-inner">
 		<div class="container-fluid">
-			<span class="hamburger">
-				<a class="pointer" ng-click="toggleSideMenu()">
-					<i class="fa fa-bars"></i>
-				</a>
-			</span>
-			<span class="brand">
-				<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
-				<span class="page-title">{{pageTitle}}</span>
-			</span>
+			<topnav toggle="toggleSideMenu()"
+			        title="{{pageTitle}}"
+							icon="{{pageIcon}}"
+							section="{{pageSection}}"
+							show-menu-btn="!grafana.sidemenu">
+			</topnav>
 		</div>
 	</div>
 </div>

src/app/partials/sidemenu.html

@@ -1,28 +1,37 @@
-<div ng-controller="SideMenuCtrl" ng-init="init()">
 
+<div ng-controller="SideMenuCtrl" ng-init="init()">
 	<ul class="sidemenu">
-		<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>
+		<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>
-			<ul class="dropdown-menu">
-				<li><a href="{{appSubUrl}}/logout" target="_self">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>
-		<li ng-repeat-start="item in menu" ng-class="{'active': item.active}">
-			<a href="{{item.href}}" class="sidemenu-item"><i class="{{item.icon}}"></i>{{item.text}}</a>
 		</li>
-		<li ng-repeat-end ng-if="item.active">
-			<ul class="sidemenu-links">
-				<li ng-repeat="link in item.links">
-					<a href="{{link.href}}" class="sidemenu-link" ng-class="{active: link.active}"><i class="fa fa-angle-right"></i>{{link.text}}</a>
-				</li>
-			</ul>
+
+		<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>
+				<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 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>

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,17 +1,23 @@
-<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div class="dashboard-editor-header">
-		<div class="dashboard-editor-title">
+<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>
 		</div>
 
+		<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
+			<i class="fa fa-remove"></i>
+		</button>
+
 	</div>
 
-	<div class="dashboard-editor-body">
+	<div class="gf-box-body">
 
 		<div ng-if="editor.index == 0">
 
@@ -50,104 +56,97 @@
 		</div>
 
 		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
-			<div class="row">
-				<div class="editor-option">
+			<div class="editor-option">
+				<div class="editor-row">
+					<div class="editor-option">
+						<label class="small">Variable name</label>
+						<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input>
+					</div>
+					<div class="editor-option">
+						<label class="small">Type</label>
+						<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
+					</div>
+					<div class="editor-option" ng-show="current.type === 'query'">
+						<label class="small">Datasource</label>
+						<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
+					</div>
+
+					<editor-opt-bool text="Refresh on load" show-if="current.type === 'query'"
+						tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
+						model="current.refresh"></editor-opt-bool>
+				</div>
+
+				<div ng-show="current.type === 'interval'">
 					<div class="editor-row">
 						<div class="editor-option">
-							<label class="small">Variable name</label>
-							<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input>
-						</div>
-						<div class="editor-option">
-							<label class="small">Type</label>
-							<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
+							<label class="small">Values</label>
+							<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="name"></input>
 						</div>
-						<div class="editor-option" ng-show="current.type === 'query'">
-							<label class="small">Datasource</label>
-							<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
+					</div>
+					<div class="editor-row">
+						<editor-opt-bool text="Include auto interval" model="current.auto" change="runQuery()"></editor-opt-bool>
+						<div class="editor-option" ng-show="current.auto">
+							<label class="small">Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip></label>
+							<select class="input-mini" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
 						</div>
-
-						<editor-opt-bool text="Refresh on load" show-if="current.type === 'query'"
-						                 tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
-						                 model="current.refresh"></editor-opt-bool>
 					</div>
+				</div>
 
-					<div ng-show="current.type === 'interval'">
-						<div class="editor-row">
-							<div class="editor-option">
-								<label class="small">Values</label>
-								<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="name"></input>
-							</div>
-						</div>
-						<div class="editor-row">
-							<editor-opt-bool text="Include auto interval" model="current.auto" change="runQuery()"></editor-opt-bool>
-							<div class="editor-option" ng-show="current.auto">
-								<label class="small">Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip></label>
-								<select class="input-mini" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
-							</div>
+				<div ng-show="current.type === 'custom'">
+					<div class="editor-row">
+						<div class="editor-option">
+							<label class="small">Values seperated by comma</label>
+							<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
 						</div>
 					</div>
+				</div>
 
-					<div ng-show="current.type === 'custom'">
-						<div class="editor-row">
-							<div class="editor-option">
-								<label class="small">Values seperated by comma</label>
-								<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
-							</div>
+				<div ng-show="current.type === 'query'">
+					<div class="editor-row">
+						<div class="editor-option form-inline">
+							<label class="small">Variable values query</label>
+							<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
+							<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="fa fa-play"></i></button>
 						</div>
 					</div>
 
-					<div ng-show="current.type === 'query'">
-						<div class="editor-row">
-							<div class="editor-option form-inline">
-								<label class="small">Variable values query</label>
-								<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
-								<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="fa fa-play"></i></button>
-							</div>
+					<div class="editor-row" style="margin: 15px 0">
+						<div class="editor-option form-inline">
+							<label class="small">regex (optional, if you want to extract part of a series name or metric node segment)</label>
+							<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
+							<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'execute query'" data-placement="right"><i class="fa fa-play"></i></button>
 						</div>
+					</div>
 
-						<div class="editor-row" style="margin: 15px 0">
-							<div class="editor-option form-inline">
-								<label class="small">regex (optional, if you want to extract part of a series name or metric node segment)</label>
-								<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
-								<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'execute query'" data-placement="right"><i class="fa fa-play"></i></button>
-							</div>
+					<div class="editor-row" style="margin: 15px 0">
+						<editor-opt-bool text="All option" model="current.includeAll" change="runQuery()"></editor-opt-bool>
+						<div class="editor-option" ng-show="current.includeAll">
+							<label class="small">All format</label>
+							<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
 						</div>
-
-						<div class="editor-row" style="margin: 15px 0">
-							<editor-opt-bool text="All option" model="current.includeAll" change="runQuery()"></editor-opt-bool>
-							<div class="editor-option" ng-show="current.includeAll">
-								<label class="small">All format</label>
-								<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
-							</div>
-							<div class="editor-option" ng-show="current.includeAll">
-								<label class="small">All value</label>
-								<input type="text" class="input-xlarge" ng-model='current.options[0].value'></input>
-							</div>
+						<div class="editor-option" ng-show="current.includeAll">
+							<label class="small">All value</label>
+							<input type="text" class="input-xlarge" ng-model='current.options[0].value'></input>
 						</div>
 					</div>
 				</div>
-				<div class="editor-option">
-					<div class="editor-row">
-						<div class="editor-option" >
-							<label class="small">Variable values (showing 20/{{current.options.length}})</label>
-							<ul class="grafana-options-list">
-								<li ng-repeat="option in current.options | limitTo: 20">
-									{{option.text}}
-								</li>
-							</ul>
-						</div>
+			</div>
+			<div class="editor-option">
+				<div class="editor-row">
+					<div class="editor-option" >
+						<label class="small">Variable values (showing 20/{{current.options.length}})</label>
+						<ul class="grafana-options-list">
+							<li ng-repeat="option in current.options | limitTo: 20">
+								{{option.text}}
+							</li>
+						</ul>
 					</div>
 				</div>
 			</div>
-
 		</div>
 
-	</div>
-
-	<div class="dashboard-editor-footer">
-		<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="update();">Update</button>
-		<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="add();">Add</button>
-		<button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button>
+		<button type="button" class="btn btn-success" ng-show="editor.index === 2" ng-click="update();">Update</button>
+		<button type="button" class="btn btn-success" ng-show="editor.index === 1" ng-click="add();">Add</button>
 	</div>
 </div>
 

src/css/less/bootswatch.dark.less

@@ -212,7 +212,7 @@ div.subnav {
 
 .nav-tabs {
 
-	border-bottom: 1px solid @fullEditBorder;
+	border-bottom: none;
 
 	& > li > a {
 		.border-radius(0);

src/css/less/gfbox.less

@@ -0,0 +1,57 @@
+.gf-box {
+  margin: 15px;
+  background-color: @grafanaPanelBackground;
+  position: relative;
+  border: 1px solid @grafanaTargetFuncBackground;
+}
+
+.gf-box-header-close-btn {
+  float: right;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: none;
+  padding: 8px;
+  font-size: 120%;
+  color: @textColor;
+  &:hover {
+    color: @white;
+  }
+}
+
+.gf-box-body {
+  padding: 20px;
+  min-height: 150px;
+}
+
+.gf-box-footer {
+  overflow: hidden;
+}
+
+.gf-box-header {
+  border-bottom: 1px solid @grafanaTargetFuncBackground;
+  overflow: hidden;
+  background-color: @grafanaTargetBackground;
+  .tabs {
+    float: left;
+  }
+  .nav {
+    margin: 0;
+  }
+}
+
+.gf-box-title {
+  padding-right: 20px;
+  padding-left: 10px;
+  float: left;
+  color: @linkColor;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 38px;
+  margin: 0;
+  .fa {
+    padding: 0 8px 0 5px;
+    color: @textColor;
+  }
+}
+

src/css/less/grafana.less

@@ -9,6 +9,9 @@
 @import "forms.less";
 @import "singlestat.less";
 @import "tightform.less";
+@import "sidemenu.less";
+@import "gfbox.less";
+@import "navbar.less";
 
 .row-control-inner {
   padding:0px;
@@ -47,25 +50,6 @@
 
 .logo-icon {
   width: 24px;
-  padding: 13px 11px 0 0;
-  display: block;
-  float: left;
-}
-
-.navbar .brand {
-  margin-left: 0;
-}
-
-.hamburger {
-  float: left;
-  padding: 15px 0 14px 0;
-  font-size: 1.4em;
-}
-
-.page-title {
- padding: 15px 0;
- display: block;
- float: left;
 }
 
 .row-button {
@@ -81,24 +65,6 @@
   top: 30%;
 }
 
-.grafana-search-metric-actions {
-  visibility: hidden;
-  padding-left: 20px;
-}
-
-.grafana-search-metric-name {
-  white-space: nowrap;
-}
-
-.grafana-search-metric-result:hover {
-  .grafana-search-metric-actions {
-    visibility: visible;
-  }
-  .grafana-search-metric-name {
-    color: @blue;
-  }
-}
-
 .dashboard-fullscreen {
   .main-view-container {
     overflow: hidden;
@@ -254,46 +220,6 @@
   max-width: 400px;
 }
 
-.dashboard-edit-view {
-  padding: 20px;
-  background-color: @grafanaPanelBackground;
-  position: relative;
-}
-
-.dashboard-editor-body {
-  padding: 20px 10px;
-  min-height: 100px;
-}
-
-.dashboard-editor-footer {
-  overflow: hidden;
-}
-
-.dashboard-editor-header {
-  overflow: hidden;
-  .tabs {
-    float: left;
-  }
-  .nav {
-    margin: 0;
-  }
-}
-
-.dashboard-editor-title {
-  border-bottom: 1px solid @fullEditBorder;
-  padding-right: 20px;
-  float: left;
-  color: @linkColor;
-  font-size: 20px;
-  font-weight: normal;
-  line-height: 38px;
-  margin: 0;
-  .fa {
-    padding: 0 8px 0 5px;
-    color: @textColor;
-  }
-}
-
 .grafana-version-info {
   position: absolute;
   bottom: 2px;

src/css/less/navbar.less

@@ -0,0 +1,93 @@
+.navbar-inner {
+  padding-left: 0px;
+}
+
+.navbar .nav>li>a {
+  padding: 19px 15px 8px;
+  .fa { font-size: 130%; }
+}
+
+.top-nav {
+  float: left;
+}
+
+.top-nav-menu-btn {
+  display: block;
+  float: left;
+  padding: 11px 9px 11px 14px;
+  background: @grafanaTargetBackground;
+  border: 1px solid rgb(55, 54, 54);
+  i {
+    font-size: 160%;
+    color: darken(@gray, 15%);
+    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 {
+  display: block;
+  float: left;
+  padding: 18px 9px 8px 12px;
+  font-size: 1.4em;
+  font-weight: bold;
+  color: darken(@gray, 10%);
+  i {
+    padding-left: 9px;
+  }
+}
+
+.top-nav-section {
+  display: block;
+  float: left;
+  padding: 19px 9px 8px 0;
+  font-weight: bold;
+  i {
+    padding-left: 8px;
+  }
+}
+
+.top-nav-title {
+  display: block;
+  float: left;
+  padding: 18px 10px 10px 0px;
+  font-size: 1.3em;
+  font-weight: bold;
+  i {
+    padding-left: 4px;
+    position: relative;
+    top: 2px;
+  }
+}
+
+

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,100 @@
+.sidemenu-wrapper {
+  display: none;
+  a:focus {
+    text-decoration: none;
+  }
+}
+
+.sidemenu-open {
+  .sidemenu-wrapper {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    background: @bodyBackground;
+    min-height: 100%;
+    z-index: 101;
+  }
+
+  .dashboard-notice {
+    margin-left: 200px;
+    width: auto;
+  }
+
+  .main-view {
+    padding-left: 200px;
+  }
+
+  .panel-fullscreen {
+    left: 200px;
+  }
+}
+
+.sidemenu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.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-top-btn {
+  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;
+  }
+}
+
+.sidemenu-icon {
+  border-radius: 50%;
+  background: black;
+  box-shadow: 0 0 10px 6px #2E2E2E;
+  width: 35px;
+  height: 35px;
+  display: inline-block;
+  i {
+    color: @textColor;
+    position: relative;
+    left: 9px;
+    top: 2px;
+    font-size: 120%;
+  }
+}
+
+.sidemenu-item {
+  color: @orange;
+  line-height: 34px;
+  font-weight: bold;
+  padding: 14px 10px 14px 20px;
+  display: block;
+
+  .sidemenu-item-text {
+    padding-left: 15px;
+    text-shadow: 1px 0px 10px @orange;
+  }
+}
+

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="main-view-wrapper" ng-class="{'sidemenu-open': grafana.sidemenu}">
 
-			<aside class="pro-sidemenu" ng-if="grafana.sidemenu">
+			<aside class="sidemenu-wrapper" ng-if="grafana.sidemenu">
 				<div ng-include="'app/partials/sidemenu.html'"></div>
 			</aside>
 
@@ -43,7 +43,7 @@
 				</div>
 			</div>
 
-			<div ng-view class="pro-main-view"></div>
+			<div ng-view class="main-view"></div>
 
 		</div>