UI improvements to search result list (larger click are for dashboard title link, plus UI look polish), Closes #709

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - [Issue #578](https://github.com/grafana/grafana/issues/578). Dashboard: Row option to display row title even when the row is visible
 - [Issue #672](https://github.com/grafana/grafana/issues/672). Dashboard: panel fullscreen & edit state is present in url, can now link to graph in edit & fullscreen mode.
+- [Issue #709](https://github.com/grafana/grafana/issues/709). Dashboard: Small UI look polish to search results, made dashboard title link are larger
 
 **Fixes**
 - [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13)

src/app/controllers/dashboardNavCtrl.js

@@ -87,7 +87,9 @@ function (angular, _, moment, config, store) {
         });
     };
 
-    $scope.deleteDashboard = function(id) {
+    $scope.deleteDashboard = function(id, $event) {
+      $event.stopPropagation();
+
       if (!confirm('Are you sure you want to delete dashboard?')) {
         return;
       }

src/app/controllers/graphiteTarget.js

@@ -289,7 +289,7 @@ function (angular, _, config, gfunc, Parser) {
       this.expandable = options.expandable;
 
       if (options.type === 'template') {
-        this.html = $sce.trustAsHtml("<span style='color: #ECEC09'>" + options.value + "</span>");
+        this.html = $sce.trustAsHtml(options.value);
       }
       else {
         this.html = $sce.trustAsHtml(this.value);

src/app/controllers/search.js

@@ -50,7 +50,12 @@ function (angular, _, config, $) {
       }
     };
 
-    $scope.shareDashboard = function(title, id) {
+    $scope.goToDashboard = function(id) {
+      $location.path("/dashboard/db/" + id);
+    };
+
+    $scope.shareDashboard = function(title, id, $event) {
+      $event.stopPropagation();
       var baseUrl = window.location.href.replace(window.location.hash,'');
 
       $scope.share = {

src/app/partials/search.html

@@ -47,50 +47,46 @@
 
         <h6 ng-hide="results.dashboards.length || results.metrics.length">No dashboards or metrics matching your query found</h6>
 
-        <table class="table table-condensed table-striped" ng-if="tagsOnly">
-          <tr ng-repeat="tag in results.tags" ng-class="{'selected-tag': $index === selectedIndex }">
-            <td>
-              <a ng-click="filterByTag(tag.term, $event)" class="label label-tag">
-                {{tag.term}} &nbsp;({{tag.count}})
-              </a>
-            </td>
-            <td style="width:100%;padding-left: 10px;font-weight: bold;">
-            </td>
-          </tr>
-        </table>
+        <div class="search-results-container" ng-if="tagsOnly">
+					<div ng-repeat="tag in results.tags"
+						   class="search-result-item pointer"
+							 ng-class="{'selected': $index === selectedIndex }"
+							 ng-click="filterByTag(tag.term, $event)">
+						<a class="search-result-link" >
+							<i class="icon icon-tag"></i>
+							<span class="label label-tag">{{tag.term}} &nbsp;({{tag.count}})</span>
+						</a>
+          </div>
+        </div>
+
+				<div class="search-results-container" ng-if="!tagsOnly">
+					<div class="search-result-item pointer"
+							bindonce ng-repeat="row in results.dashboards"
+							ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.id)">
+
+							<a class="search-result-link" href="#/dashboard/db/{{row.id}}">
+								<i class="icon icon-th-large"></i>
+								<span bo-text="row.id"></span>
+							</a>
+
+							<div class="search-result-actions">
+								<a ng-click="shareDashboard(row.id, row.id, $event)" config-modal="app/partials/dashLoaderShare.html">
+									<i class="icon-share"></i> share &nbsp;&nbsp;&nbsp;
+								</a>
+								<a ng-click="deleteDashboard(row.id, $event)">
+									<i class="icon-remove"></i> delete
+								</a>
+							</div>
+
+							<div class="search-result-tags">
+								<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" style="margin-right: 5px;" class="label label-tag">
+									{{tag}}
+								</a>
+							</div>
 
-        <table class="table table-condensed table-striped" ng-if="!tagsOnly">
-					<tbody style="max-height: 570px; overflow: auto; display: block">
-          <tr bindonce ng-repeat="row in results.metrics"
-              class="grafana-search-metric-result"
-              ng-class="{'selected': $index === selectedIndex }">
-            <td><span class="label label-info">metric</span></td>
-            <td class="grafana-search-metric-name">
-              {{row.id}}
-            </td>
-            <td style="width:100%;">
-              <div class="grafana-search-metric-actions">
-                <a ng-click="addMetricToCurrentDashboard(row.id)"><i class="icon-plus-sign"></i> Add to dashboard</a>
-              </div>
-            </td>
-          </tr>
+					</div>
+				</div>
 
-          <tr bindonce
-              ng-repeat="row in results.dashboards"
-              ng-class="{'selected': $index === selectedIndex }">
-            <td><a ng-click="deleteDashboard(row.id)"><i class="icon-remove"></i></a></td>
-            <td style="width:100%">
-              <a href="#/dashboard/db/{{row.id}}" bo-text="row.id"></a>
-            </td>
-            <td style="white-space: nowrap; text-align: right;">
-              <a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" style="margin-right: 5px;" class="label label-tag">
-                {{tag}}
-              </a>
-            </td>
-            <td><a><i class="icon-share" ng-click="shareDashboard(row.id, row.id)" config-modal="app/partials/dashLoaderShare.html"></i></a></td>
-          </tr>
-					</tbody>
-        </table>
       </div>
     </li>
 

src/app/services/dashboard/dashboardKeyBindings.js

@@ -18,8 +18,8 @@ function(angular, $) {
         keyboardManager.unbind('ctrl+s');
         keyboardManager.unbind('ctrl+r');
         keyboardManager.unbind('ctrl+z');
-        keyboardManager.unbind('esc');
       });
+      keyboardManager.unbind('esc');
 
       keyboardManager.bind('ctrl+f', function(evt) {
         scope.emitAppEvent('open-search', evt);

src/css/less/grafana.less

@@ -35,9 +35,8 @@
 // Search
 
 .grafana-search-panel {
-  padding: 6px 10px;
-
   .search-field-wrapper {
+    padding: 6px 10px;
     input {
       width: 100%;
     }
@@ -50,25 +49,55 @@
       padding-right: 25px;
     }
   }
+}
+
+.search-results-container {
+  .search-result-item a {
+  }
+
+  .search-result-item:hover, .search-result-item.selected {
+    .search-result-link, .icon {
+      color: @grafanaListHighlight;
+    }
+    .search-result-link .label {
+      background-color: @blue;
+    }
+  }
+
 
-  .selected td, tr.selected:nth-child(odd)>td {
-    background: @blue;
-    color: white;
-    text-shadow: -1px -1px 1px rgba(0,0,0,0.3);
-    a {
-      color: white;
+  .search-result-link {
+    color: @grafanaListMainLinkColor;
+    .icon {
+      padding-right: 10px;
+      color: @grafanaListHighlightContrast;
     }
   }
 
-  .selected-tag .label-tag {
-    background-color: @blue;
+  .search-result-item:nth-child(odd) {
+    background-color: @grafanaListAccent;
+  }
+
+  .search-result-item {
+    padding: 6px 10px;
+    white-space: nowrap;
+    border-top: 1px solid @grafanaListBorderTop;
+    border-bottom: 1px solid @grafanaListBorderBottom;
+  }
+
+  .search-result-tags {
+    float: right;
+  }
+
+  .search-result-actions {
+    float: right;
+    padding-left: 10px;
   }
 }
 
 .search-tagview-switch {
   position: absolute;
   top: 15px;
-  right: 263px;
+  right: 266px;
   color: darken(@linkColor, 30%);
   &.active {
     color: @linkColor;

src/css/less/variables.dark.less

@@ -57,7 +57,7 @@
 
 // Links
 // -------------------------
-@linkColor:             darken(@white,5%);
+@linkColor:             darken(@white,11%);
 @linkColorHover:        @white;
 
 
@@ -93,6 +93,14 @@
 @borderRadiusLarge:     4px;
 @borderRadiusSmall:     2px;
 
+// Lists
+@grafanaListBackground:  transparent;
+@grafanaListAccent:         #232323;
+@grafanaListBorderTop:      #3E3E3E;
+@grafanaListBorderBottom:   #1c1919;
+@grafanaListHighlight:      @blue;
+@grafanaListHighlightContrast: #4F4F4F;
+@grafanaListMainLinkColor: @linkColor;
 
 // Tables
 // -------------------------

src/css/less/variables.light.less

@@ -20,7 +20,7 @@
 
 // Accent colors
 // -------------------------
-@blue:                  #01A6E6;
+@blue:                  #007FFF;
 @blueDark:              #75CAEB;
 @green:                 #28B62C;
 @red:                   #FF4136;
@@ -97,6 +97,15 @@
 @borderRadiusLarge:     4px;
 @borderRadiusSmall:     2px;
 
+// Lists
+@grafanaListBackground:  transparent;
+@grafanaListAccent:         #f9f9f9;
+@grafanaListBorderTop:      #eee;
+@grafanaListBorderBottom:   #efefef;
+@grafanaListHighlight:      @blue;
+@grafanaListHighlightContrast: #ddd;
+@grafanaListMainLinkColor: @textColor;
+
 
 // Tables
 // -------------------------