New design work

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') {
@@ -48,11 +47,13 @@ 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" },
-        ]
+      });
+    }
+
+    if ($scope.grafana.user.isSignedIn) {
+      $scope.menu.push({
+        text: "Sign out", href: $scope.getUrl("/logout"),
+        icon: "fa fa-sign-out",
       });
     }
 
@@ -80,18 +81,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 +118,8 @@ function (angular, _, $, config) {
           }
         });
       });
+
+      //$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]);
     };
 
     $scope.init = function() {

src/app/directives/topnav.js

@@ -24,13 +24,12 @@ function (angular) {
             '<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>' +
+                '<i class="fa fa-chevron-down"></i>' +
               '</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">' +
@@ -69,13 +68,12 @@ function (angular) {
             '<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>' +
+                '<i class="fa fa-angle-right"></i>' +
               '</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">' +
@@ -85,9 +83,6 @@ function (angular) {
 
             '<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) {

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

@@ -1,19 +1,16 @@
 <div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
 
-	<div class="dashboard-editor-header">
-		<div class="dashboard-editor-title">
-			<i class="fa fa-bolt"></i>
-			Annotations
-		</div>
-
+	<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>
-
+		<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 +68,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/profile/partials/profile.html

@@ -6,7 +6,6 @@
 </topnav>
 
 
-
 <div class="editor-row">
 	<div class="section">
 

src/app/partials/dashboard_topnav.html

@@ -18,6 +18,21 @@
 							show-menu-btn="!grafana.sidemenu">
 			</topnav-dash>
 
+			<ul class="nav pull-left" style="font-size: 130%">
+				<li>
+					<a href="asd"><i class="fa fa-star-o" style="color: orange;"></i></a>
+				</li>
+				<li>
+					<a href="asd"><i class="fa fa-share-square-o"></i></a>
+				</li>
+				<li>
+					<a href="asd"><i class="fa fa-save"></i></a>
+				</li>
+				<li>
+					<a href="asd"><i class="fa fa-cog"></i></a>
+				</li>
+			</ul>
+
 			<ul class="nav pull-right">
 				<li ng-show="dashboardViewState.fullscreen">
 					<a ng-click="exitFullscreen()">
@@ -30,12 +45,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="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/sidemenu.html

@@ -1,34 +1,41 @@
+
 <div ng-controller="SideMenuCtrl" ng-init="init()">
 	<ul class="sidemenu">
-		<li class="sidemenu-logo-container">
-			<img ng-src="{{appSubUrl}}/img/logo_transparent_200x.png">
-			<a ng-click="toggleSideMenu()" class="pointer sidemenu-toggle">
-				<i class="fa fa-angle-right"></i>
+		<li>
+			<a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()">
+				<img class="logo-icon" src="img/fav32.png"></img>
+				<i class="pull-right fa fa-angle-left"></i>
 			</a>
 		</li>
+
 		<li ng-if="!grafana.user.isSignedIn">
 			<a href="login" class="sidemenu-item"><i class="fa fa-sign-in"></i>Sign in</a>
 		</li>
-		<li ng-repeat-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>
 
-		<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>
-			</a>
-			<ul class="dropdown-menu">
-				<li><a href="{{appSubUrl}}/logout">Logout</a></li>
-			</ul>
+		<li ng-repeat="item in menu" ng-class="{'active': item.active}">
+			<a href="{{item.href}}" class="sidemenu-item">
+				<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/templating_editor.html

@@ -1,17 +1,17 @@
-<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div class="dashboard-editor-header">
-		<div class="dashboard-editor-title">
-			<i class="fa fa-code"></i>
-			Templating
-		</div>
-
+<div ng-controller="TemplateEditorCtrl" ng-init="init()">
+	<div class="gf-box-header">
 		<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 +50,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/grafana.less

@@ -55,6 +55,10 @@
   padding-left: 0px;
 }
 
+.navbar .nav>li>a {
+  padding: 19px 15px 8px;
+}
+
 .top-nav {
   float: left;
 }
@@ -62,15 +66,17 @@
 .top-nav-menu-btn {
   display: block;
   float: left;
-  padding: 15px 13px 13px 14px;;
+  padding: 11px 6px 12px 14px;
   position: relative;
-  border-right: 2px solid black;
+  border-right: 1px solid @black;
   font-weight: bold;
   font-size: 90%;
-  span {
-    padding-left: 4px;
+  i {
+    font-size: 170%;
+    color: @gray;
+    padding: 0px 0px 0px 6px;
     position: relative;
-    top: 2px;
+    top: 4px;
   }
 }
 

src/css/less/sidemenu.less

@@ -34,35 +34,10 @@
 
 .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;
@@ -83,14 +58,44 @@
   border-bottom: 1px solid black;
 }
 
+.sidemenu-top-btn {
+  padding: 14px 0px 12px 20px;
+  background: @grafanaPanelBackground;
+  display: block;
+  i {
+    padding-right: 5px;
+    font-size: 170%;
+    color: @gray;
+  }
+  border-bottom: 10px solid @bodyBackground;
+}
+
+.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 {
-  font-size: 17px;
+  color: @orange;
+  line-height: 34px;
+  font-weight: bold;
   padding: 14px 10px 14px 20px;
   display: block;
-  i {
-    padding-right: 15px;
+
+  .sidemenu-item-text {
+    padding-left: 15px;
   }
-  border-bottom: 1px solid black;
 }
 
 .sidemenu-logo-container {