Sub nav for account page, some css changes

src/app/directives/topnav.js

@@ -13,9 +13,11 @@ function (angular) {
         transclude: true,
         scope: {
           title: "@",
+          section: "@",
           titleAction: "&",
           toggle: "&",
           showMenuBtn: "=",
+          subnav: "=",
         },
         template:
           '<div class="navbar navbar-static-top"><div class="navbar-inner"><div class="container-fluid">' +
@@ -29,9 +31,15 @@ function (angular) {
               '<i ng-class="icon"></i>' +
             '</span>' +
 
+            '<span ng-show="section">' +
+              '<span class="top-nav-title">{{section}}</span>' +
+              '<i class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
+            '</span>' +
+
             '<a ng-click="titleAction()" class="top-nav-title">' +
               '{{title}}' +
             '</a>' +
+            '<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
           '</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,4 +1,9 @@
-<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu">
+<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu" subnav="true">
+	<ul class="nav">
+		<li class="active"><a href="account">Overview</a></li>
+		<li><a href="account/users">Users</a></li>
+		<li><a href="account/import">Import</a></li>
+	</ul>
 </topnav>
 
 <div class="admin-page">
@@ -32,60 +37,6 @@
 		</div>
 	</div>
 
-	<h2>
-		Account users
-	</h2>
-
-	<div class="gf-box" ng-controller="AccountUsersCtrl">
-		<div class="gf-box-body">
-			<div class="editor-row">
-				<div class="section">
-					<form name="form">
-						<div class="tight-form">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 160px">
-									<strong>Username or Email</strong>
-								</li>
-								<li>
-									<input type="text" ng-model="user.loginOrEmail" required class="input-xlarge tight-form-input" placeholder="user@email.com or username">
-								</li>
-								<li class="tight-form-item">
-									role
-								</li>
-								<li>
-									<select type="text" ng-model="user.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Admin']">
-									</select>
-								</li>
-								<li>
-									<button class="btn btn-success tight-form-btn" ng-click="addUser()">Add</button>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-					</form>
-				</div>
-			</div>
-
-
-			<div class="editor-row row">
-				<table class="grafana-options-table span5">
-					<tr ng-repeat="user in users">
-						<td>{{user.email}}</td>
-						<td>
-							{{user.role}}
-						</td>
-						<td style="width: 1%">
-							<a ng-click="removeUser(user)" class="btn btn-danger btn-mini">
-								<i class="fa fa-remove"></i>
-							</a>
-						</td>
-					</tr>
-				</table>
-			</div>
-
-		</div>
-	</div>
-
 	<h2>
 		API Keys
 	</h2>
@@ -136,54 +87,6 @@
 		</div>
 	</div>
 
-	<h2>Import dashboards</h2>
-	<div class="gf-box" ng-controller="ImportCtrl">
-		<div class="gf-box-body">
-			<div class="editor-row">
-				<div class="section">
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 150px">
-								<strong>Dashboard source</strong>
-							</li>
-							<li>
-								<select type="text" ng-model="sourceName" class="input-medium tight-form-input" ng-options="f for f in datasources">
-								</select>
-							</li>
-							<li class="tight-form-item">
-								<strong>Destination</strong>
-							</li>
-							<li>
-								<select type="text" ng-model="destName" class="input-medium tight-form-input" ng-options="f for f in datasources">
-								</select>
-							</li>
-							<li>
-								<button class="btn btn-success tight-form-btn" ng-click="startImport()">Import</button>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-				</div>
-			</div>
-
-			<div class="editor-row" ng-if="importing">
-				<section class="section">
-					<h5>{{infoText}}</h5>
-
-					<div class="editor-row row">
-						<table class="grafana-options-table span5">
-							<tr ng-repeat="dash in imported">
-								<td>{{dash.name}}</td>
-								<td>
-									{{dash.info}}
-								</td>
-							</tr>
-						</table>
-					</div>
-				</section>
-			</div>
-		</div>
-	</div>
 </div>
 
 

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

@@ -1,7 +1,9 @@
-<topnav toggle="toggleSideMenu()"
-				title="Import"
-				icon="fa fa-download"
-				show-menu-btn="!grafana.sidemenu">
+<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu" subnav="true">
+	<ul class="nav">
+		<li><a href="account">Overview</a></li>
+		<li><a href="account/users">Users</a></li>
+		<li class="active"><a href="account/import">Import</a></li>
+	</ul>
 </topnav>
 
 <div class="gf-box" style="min-height: 500px">

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

@@ -1,4 +1,11 @@
-<topnav toggle="toggleSideMenu()" title="Users" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu"></topnav>
+<topnav toggle="toggleSideMenu()" title="Account" icon="fa fa-shield" show-menu-btn="!grafana.sidemenu" subnav="true">
+	<ul class="nav">
+		<li><a href="account">Overview</a></li>
+		<li class="active"><a href="account/users">Users</a></li>
+		<li><a href="account/import">Import</a></li>
+	</ul>
+</topnav>
+
 
 <div class="gf-box" style="min-height: 500px">
 

src/app/features/admin/adminSettingsCtrl.js

@@ -1,18 +0,0 @@
-define([
-  'angular',
-],
-function (angular) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('AdminSettingsCtrl', function($scope) {
-
-    $scope.init = function() {
-
-    };
-
-    $scope.init();
-
-  });
-});

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

@@ -1,8 +1,10 @@
-<topnav toggle="toggleSideMenu()"
-				title="Admin"
-				icon="fa fa-cube"
-				show-menu-btn="!grafana.sidemenu">
+<topnav toggle="toggleSideMenu()" icon="fa fa-cube" title="Admin" show-menu-btn="!grafana.sidemenu" subnav="true">
+	<ul class="nav">
+		<li class="active"><a href="admin">Settings</a></li>
+		<li><a href="admin/users">Users</a></li>
+	</ul>
 </topnav>
 
+
 <div class="gf-box" style="min-height: 500px">
 </div>

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

@@ -1,11 +0,0 @@
-<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin > Settings'"></div>
-
-<div class="dashboard-edit-view" style="min-height: 500px">
-	<div class="dashboard-editor-body">
-		<div class="editor-row row">
-			<div class="section span6">
-
-			</div>
-		</div>
-	</div>
-</div>

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

@@ -1,11 +1,12 @@
-<topnav toggle="toggleSideMenu()"
-				title="Admin"
-				icon="fa fa-cube"
-				show-menu-btn="!grafana.sidemenu">
+<topnav toggle="toggleSideMenu()" icon="fa fa-cube" title="Admin" show-menu-btn="!grafana.sidemenu" subnav="true">
+	<ul class="nav">
+		<li><a href="admin">Settings</a></li>
+		<li class="active"><a href="admin/users">Users</a></li>
+	</ul>
 </topnav>
 
 <div class="admin-page">
-	<h2> Users </h2>
+	<h2>Users</h2>
 	<div class="gf-box" style="min-height: 500px">
 
 		<div class="gf-box-body">

src/app/features/all.js

@@ -15,6 +15,6 @@ define([
   './account/importCtrl',
   './account/accountCtrl',
   './admin/adminUsersCtrl',
-  './admin/adminSettingsCtrl',
+  './admin/adminCtrl',
   './grafanaDatasource/datasource',
 ], function () {});

src/app/features/profile/partials/profile.html

@@ -1,5 +1,6 @@
 <topnav toggle="toggleSideMenu()"
-				title="Profile"
+        title="{{grafana.user.name}}"
+				section="Profile"
 				icon="fa fa-user"
 				show-menu-btn="!grafana.sidemenu">
 </topnav>

src/app/routes/backend/all.js

@@ -54,9 +54,9 @@ define([
         templateUrl: 'app/features/profile/partials/profile.html',
         controller : 'ProfileCtrl',
       })
-      .when('/admin/settings', {
-        templateUrl: 'app/features/admin/partials/settings.html',
-        controller : 'AdminSettingsCtrl',
+      .when('/admin', {
+        templateUrl: 'app/features/admin/partials/admin.html',
+        controller : 'AdminCtrl',
       })
       .when('/admin/users', {
         templateUrl: 'app/features/admin/partials/users.html',

src/css/less/navbar.less

@@ -9,12 +9,13 @@
 
 .top-nav {
   float: left;
+  font-size: 16px;
 }
 
 .fa.top-nav-breadcrumb-icon {
-  margin: 15px 21px 8px 0px;
+  margin: 17px 0 6px 5px;
   float: left;
-  font-size: 160%;
+  font-size: 120%;
   color: @textColor;
 }
 
@@ -27,7 +28,7 @@
   width: 30px;
   height: 30px;
   padding: 4px;
-  margin: 7px 6px 3px 9px;
+  margin: 6px 6px 3px 9px;
   .fa {
     color: @textColor;
     width: 30px;
@@ -87,9 +88,9 @@
 }
 
 .top-nav-icon {
+  margin: 5px 0px 0 11px;
   line-height: 34px;
   float: left;
-  margin: 5px 11px;
 }
 
 .top-nav-section {
@@ -105,9 +106,9 @@
 .top-nav-title {
   display: block;
   float: left;
-  padding: 16px 10px 10px 0px;
-  font-size: 1.3em;
+  padding: 17px 10px 10px 13px;
   font-weight: bold;
+  color: @textColor;
   i {
     padding-left: 4px;
     position: relative;

src/css/less/sidemenu.less

@@ -28,6 +28,7 @@
 }
 
 .sidemenu {
+  font-size: 16px;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -85,7 +86,7 @@
     position: relative;
     left: 11px;
     top: 5px;
-    font-size: 135%;
+    font-size: 125%;
   }
 }
 
@@ -96,7 +97,6 @@
   color: #f80;
   line-height: 34px;
 	padding: 14px 10px 14px 20px;
-  font-weight: bold;
 	display: block;
 
   .sidemenu-item-text {