ux(): general ux polish

public/app/core/directives/topnav.js

@@ -11,7 +11,7 @@ function (coreModule) {
       scope: {
         title: "@",
         section: "@",
-        titleAction: "&",
+        titleUrl: "@",
         subnav: "=",
       },
       template:
@@ -35,7 +35,7 @@ function (coreModule) {
         '<i class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
         '</span>' +
 
-        '<a ng-click="titleAction()" class="top-nav-title">' +
+        '<a ng-href="{{titleUrl}}" class="top-nav-title">' +
         '{{title}}' +
         '</a>' +
         '<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
@@ -45,7 +45,7 @@ function (coreModule) {
         scope.contextSrv = contextSrv;
 
         scope.toggle = function() {
-          $rootScope.appEvent('toggle-sidemenu');
+          contextSrv.toggleSideMenu();
         };
       }
     };

public/app/core/services/context_srv.js

@@ -8,8 +8,7 @@ define([
 function (angular, _, coreModule, store, config) {
   'use strict';
 
-  coreModule.default.service('contextSrv', function($rootScope, $timeout) {
-    var self = this;
+  coreModule.default.service('contextSrv', function() {
 
     function User() {
       if (config.bootData.user) {
@@ -17,30 +16,16 @@ function (angular, _, coreModule, store, config) {
       }
     }
 
-    // events
-    $rootScope.$on('toggle-sidemenu', function() {
-      self.toggleSideMenu();
-    });
-
     this.hasRole = function(role) {
       return this.user.orgRole === role;
     };
 
     this.setSideMenuState = function(state) {
       this.sidemenu = state;
-      store.set('grafana.sidemenu', state);
     };
 
     this.toggleSideMenu = function() {
       this.setSideMenuState(!this.sidemenu);
-
-      $timeout(function() {
-        $rootScope.$broadcast("render");
-      }, 50);
-    };
-
-    this.getSidemenuDefault = function() {
-      return this.hasRole('Admin');
     };
 
     this.version = config.buildInfo.version;
@@ -48,17 +33,6 @@ function (angular, _, coreModule, store, config) {
     this.user = new User();
     this.isSignedIn = this.user.isSignedIn;
     this.isGrafanaAdmin = this.user.isGrafanaAdmin;
-    this.sidemenu = store.getBool('grafana.sidemenu', this.getSidemenuDefault());
-
-    if (this.isSignedIn && !store.exists('grafana.sidemenu')) {
-      // If the sidemenu has never been set before, set it to false.
-      // This will result in this.sidemenu and the localStorage grafana.sidemenu
-      // to be out of sync if the user has an admin role.  But this is
-      // intentional and results in the user seeing the sidemenu only on
-      // their first login.
-      store.set('grafana.sidemenu', false);
-    }
-
     this.isEditor = this.hasRole('Editor') || this.hasRole('Admin');
   });
 });

public/app/features/datasources/partials/edit.html

@@ -1,8 +1,7 @@
-<topnav title="Data sources" icon="fa fa-fw fa-database" subnav="true">
+<topnav title="Data sources" title-url="datasources" icon="fa fa-fw fa-database" subnav="true">
 	<ul class="nav">
-		<li><a href="datasources">Overview</a></li>
-		<li ng-class="{active: isNew}"><a href="datasources/new">Add new</a></li>
-		<li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">Edit</a></li>
+		<li ng-class="{active: isNew}" ng-show="isNew"><a href="datasources/new">Add new</a></li>
+		<li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">{{current.name}}</a></li>
 	</ul>
 </topnav>
 
@@ -59,7 +58,7 @@
 				<button type="submit" class="btn btn-inverse" ng-show="!isNew" ng-click="saveChanges(true)">
 					Test Connection
 				</button>
-				<a class="btn btn-inverse" ng-show="!isNew" href="datasources">Cancel</a>
+				<a class="btn btn-inverse" href="datasources">Cancel</a>
 			</div>
 			<br>
 		</form>

public/app/features/datasources/partials/http_settings.html

@@ -1,5 +1,5 @@
 <br>
-<h5>Http settings</h5>
+<h4>Http settings</h4>
 <div class="tight-form-container">
 	<div class="tight-form">
 		<ul class="tight-form-list">

public/app/features/datasources/partials/list.html

@@ -1,16 +1,18 @@
-<topnav title="Data sources" icon="fa fa-fw fa-database" subnav="true">
-	<ul class="nav">
-		<li class="active" ><a href="datasources">Overview</a></li>
-		<li><a href="datasources/new">Add new</a></li>
-	</ul>
+<topnav title="Data sources" icon="fa fa-fw fa-database" subnav="false">
 </topnav>
 
-<div class="page-container" style="background: transparent; border: 0;">
+<div class="page-container">
 	<div class="page-wide">
-		<h2>Data sources</h2>
+
+		<a type="submit" class="btn btn-inverse pull-right" href="datasources/new">
+			<i class="fa fa-plus"></i>
+			Add data source
+		</a>
+
+		<h1>Data sources</h1>
 
 		<div ng-if="datasources.length === 0">
-			<em>No datasources defined</em>
+			<em>No data sources defined</em>
 		</div>
 
 		<table class="filter-table" ng-if="datasources.length > 0">

public/app/features/org/partials/orgUsers.html

@@ -7,13 +7,12 @@
 <div class="page-container" style="background: transparent; border: 0;">
 	<div class="page-wide">
 
-		<h2>Organization users</h2>
-
-		<button class="btn btn-success pull-right" ng-click="openInviteModal()">
+		<button class="btn btn-inverse pull-right" ng-click="openInviteModal()">
 			<i class="fa fa-plus"></i>
 			Add or Invite
 		</button>
 
+		<h1>Organization users</h1>
 		<br>
 
 		<tabset>

public/app/features/playlist/partials/playlist.html

@@ -1,18 +1,23 @@
-<topnav icon="fa fa-fw fa-list" title="Playlists"></topnav>
+<topnav icon="fa fa-fw fa-list" title="Playlists" title-url="playlists" subnav="true">
+	<ul class="nav">
+		<li ng-class="{active: isNew()}" ng-show="isNew()"><a href="datasources/create">New</a></li>
+		<li class="active" ng-show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a></li>
+	</ul>
+</topnav>
 
 <div class="page-container" ng-form="playlistEditForm">
   <div class="page">
     <h2 ng-show="isNew()">New playlist</h2>
     <h2 ng-show="!isNew()">Edit playlist</h2>
 
-    <h5>1. Name and interval</h5>
+    <h4>Name and interval</h4>
 
     <div style="margin-bottom: 10px;">
       <div>
         <div class="tight-form">
           <ul class="tight-form-list">
             <li class="tight-form-item" style="width: 100px">
-              <strong>Title</strong>
+              Name
             </li>
             <li>
               <input type="text" required ng-model="playlist.title" class="input-xlarge tight-form-input">
@@ -23,7 +28,7 @@
         <div class="tight-form last">
           <ul class="tight-form-list">
             <li class="tight-form-item" style="width: 100px">
-              <strong>Interval</strong>
+              Interval
             </li>
             <li>
               <input type="text" required ng-model="playlist.interval" placeholder="5m" class="input-xlarge tight-form-input">
@@ -34,11 +39,14 @@
       </div>
 
       <br>
-      <h5>2. Add dashboards</h5>
+      <h4>Add dashboards</h4>
 
       <div style="display: inline-block">
         <div class="tight-form last">
           <ul class="tight-form-list">
+						<li class="tight-form-item">
+							Search
+						</li>
             <li>
               <input type="text"
                      class="tight-form-input input-xlarge last"
@@ -47,9 +55,6 @@
                      ng-trim="true"
                      ng-change="search()">
             </li>
-            <li class="tight-form-item last" style="padding: 5px 4px">
-              <button ng-click="search()" class="btn btn-mini btn-inverse">Search</button>
-            </li>
           </ul>
           <div class="clearfix"></div>
         </div>
@@ -57,9 +62,9 @@
     </div>
   </div>
 
-  <div>
+  <div class="row">
     <div class="span5 pull-left">
-      <h5>Search results ({{filteredPlaylistItems.length}})</h5>
+			<h5>Search results ({{filteredPlaylistItems.length}})</h5>
        <table class="grafana-options-table">
         <tr ng-repeat="playlistItem in filteredPlaylistItems">
           <td style="white-space: nowrap;">
@@ -72,7 +77,7 @@
             </button>
           </td>
         </tr>
-        <tr ng-if="isSearchResultsEmpty() || isSearchQueryEmpty()">
+        <tr ng-if="isSearchResultsEmpty()">
           <td colspan="2">
             <i class="fa fa-warning"></i> Search results empty
           </td>
@@ -80,7 +85,7 @@
       </table>
     </div>
     <div class="span5 pull-left">
-      <h5>Playlist dashboards</h5>
+      <h5>Added dashboards</h5>
       <table class="grafana-options-table">
         <tr ng-repeat="playlistItem in playlistItems">
           <td style="white-space: nowrap;">
@@ -111,7 +116,7 @@
               ng-disabled="playlistEditForm.$invalid || isPlaylistEmpty()"
               ng-click="savePlaylist(playlist, playlistItems)">Save</button>
       <button type="button"
-              class="btn btn-default"
+              class="btn btn-inverse"
               ng-click="backToList()">Cancel</button>
     <!-- </div> -->
   </div>

public/app/features/playlist/partials/playlists.html

@@ -2,24 +2,26 @@
 
 <div class="page-container" style="background: transparent; border: 0;">
   <div class="page-wide">
-    <h2>Saved playlists</h2>
 
-    <button type="submit" class="btn btn-success pull-right" ng-click="createPlaylist()">
-    <i class="fa fa-plus"></i> New playlist</button>
-    <br />
+		<button type="submit" class="btn btn-inverse pull-right" ng-click="createPlaylist()">
+			<i class="fa fa-plus"></i>
+			New playlist
+		</button>
+
+    <h2>Saved playlists</h2>
 
-    <table class="filter-table" style="margin-top: 20px">
+     <table class="filter-table" style="margin-top: 20px">
       <thead>
-        <th><strong>Title</strong></th>
-        <th><strong>Url</strong></th>
+        <th><strong>Name</strong></th>
+        <th><strong>Start url</strong></th>
         <th style="width: 61px"></th>
         <th style="width: 61px"></th>
         <th style="width: 25px"></th>
 
       </thead>
       <tr ng-repeat="playlist in playlists">
-        <td >
-          {{playlist.title}}
+        <td>
+					<a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a>
         </td>
         <td >
 					<a href="playlists/play/{{playlist.id}}">playlists/play/{{playlist.id}}</a>

public/app/features/playlist/playlist_edit_ctrl.js

@@ -35,11 +35,10 @@ function (angular, config, _) {
     };
 
     $scope.search = function() {
-      var query = {starred: true, limit: 10};
+      var query = {limit: 10};
 
       if ($scope.searchQuery) {
         query.query = $scope.searchQuery;
-        query.starred = false;
       }
 
       $scope.loading = true;

public/app/plugins/datasource/elasticsearch/partials/edit_view.html

@@ -1,6 +1,6 @@
 <datasource-http-settings></datasource-http-settings>
 
-<h5>Elasticsearch details</h5>
+<h4>Elasticsearch details</h4>
 
 <div class="tight-form">
 	<ul class="tight-form-list">
@@ -43,7 +43,8 @@
 </div>
 
 <br>
-<h5>Default query settings</h5>
+
+<h4>Default query settings</h4>
 
 <div class="tight-form last">
 	<ul class="tight-form-list">

public/app/plugins/datasource/influxdb/partials/config.html

@@ -1,6 +1,6 @@
 <datasource-http-settings></datasource-http-settings>
 
-<h5>InfluxDB Details</h5>
+<h4>InfluxDB Details</h4>
 
 <div class="tight-form">
 	<ul class="tight-form-list">

public/less/gfbox.less

@@ -69,11 +69,8 @@
 }
 
 .page-container {
-  margin: 15px;
-  background: @grafanaPanelBackground;
   position: relative;
-  border: @grafanaPanelBorder;
-  padding: 20px 20px 60px 49px;
+  padding: 20px 20px 60px 81px;
 }
 
 .page {

public/less/variables.dark.less

@@ -75,7 +75,7 @@
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    bold;    // instead of browser default, bold
+@headingsFontWeight:    normal;    // instead of browser default, bold
 @headingsColor:         darken(@white,11%); // empty to use BS default, @textColor
 @inputText:             @black;