More work on topnav and gf-box redesign

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 = {};
@@ -45,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/directives/topnav.js

@@ -10,6 +10,53 @@ function (angular) {
     .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">' +
+            '<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><div ng-transclude></div></div></div></div>',
+        link: function(scope, elem, attrs) {
+          scope.icon = attrs.icon;
+        }
+      };
+    });
+
+   angular
+    .module('grafana.directives')
+    .directive('topnavDash', function() {
+      return {
+        restrict: 'E',
+        transclude: true,
         scope: {
           title: "@",
           section: "@",
@@ -49,4 +96,5 @@ function (angular) {
       };
     });
 
+
 });

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

@@ -1,17 +1,24 @@
-<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 +63,66 @@
 				</div>
 			</div>
 		</div>
+	</div>
+
+	<div class="section">
 
-		<div class="section">
-			<div class="dashboard-editor-header">
-				<div class="dashboard-editor-title">
-					<i class="fa fa-cubes"></i>
+		<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/partials/dashboard_topnav.html

@@ -2,20 +2,21 @@
 	<div class="navbar-inner">
 		<div class="container-fluid">
 
-			<topnav ng-if="!grafana.editview"
+			<topnav-dash ng-if="!grafana.editview"
 			        title="{{dashboard.title}}"
 			        icon="fa fa-th-large"
 							title-action="openSearch()"
 							toggle="toggleSideMenu()"
 							show-menu-btn="!grafana.sidemenu">
-			</topnav>
+			</topnav-dash>
 
-			<topnav ng-if="grafana.editview"
+			<topnav-dash ng-if="grafana.editview"
+							toggle="toggleSideMenu()"
 			        title="{{grafana.editview.title}}"
 			        icon="fa fa-th-large"
 							section="{{dashboard.title}}"
 							show-menu-btn="!grafana.sidemenu">
-			</topnav>
+			</topnav-dash>
 
 			<ul class="nav pull-right">
 				<li ng-show="dashboardViewState.fullscreen">
@@ -35,8 +36,6 @@
 					</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="grafana-menu-stop-playlist hide">
 					<a class='small' ng-click='stopPlaylist(2)'>
 						Stop playlist

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/css/less/gfbox.less

@@ -1,9 +1,8 @@
 .gf-box {
-  margin: 30px;
+  margin: 15px;
   background-color: @grafanaPanelBackground;
   position: relative;
   border: 1px solid @grafanaTargetFuncBackground;
-  border-top: none;
 }
 
 .gf-box-header-close-btn {
@@ -30,10 +29,9 @@
 }
 
 .gf-box-header {
+  border-bottom: 1px solid @grafanaTargetFuncBackground;
   overflow: hidden;
   background-color: @grafanaTargetBackground;
-  border-top: 1px solid @grafanaTargetFuncBackground;
-  border-bottom: 1px solid @grafanaTargetFuncBackground;
   .tabs {
     float: left;
   }
@@ -43,8 +41,8 @@
 }
 
 .gf-box-title {
-  border-bottom: 1px solid @fullEditBorder;
   padding-right: 20px;
+  padding-left: 10px;
   float: left;
   color: @linkColor;
   font-size: 18px;

src/css/less/grafana.less

@@ -295,7 +295,6 @@
   max-width: 400px;
 }
 
-
 .grafana-version-info {
   position: absolute;
   bottom: 2px;

src/css/less/sidemenu.less

@@ -13,7 +13,7 @@
     left: 0;
     width: 200px;
     background: @bodyBackground;
-    border-right: 2px solid black;
+    border-right: 1px solid black;
     min-height: 100%;
     z-index: 101;
   }