More work on dashboard tag colors

src/app/controllers/search.js

@@ -9,32 +9,6 @@ function (angular, _, config, $) {
 
   var module = angular.module('grafana.controllers');
 
-  function djb2(str) {
-    var hash = 5381;
-    for (var i = 0; i < str.length; i++) {
-      hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
-    }
-    return hash;
-  }
-
-  module.directive('tagColorFromName', function() {
-    return function (scope, element) {
-      var name = _.isString(scope.tag) ? scope.tag : scope.tag.term;
-      var hash = djb2(name.toLowerCase());
-      var colors = [
-        "#E24D42","#1F78C1","#BA43A9","#705DA0",
-        "#508642","#447EBC","#C15C17","#890F02",
-        "#0A437C","#6D1F62","#584477","#629E51",
-        "#BF1B00","#EA6460","#D683CE","#806EB7",
-        "#3F6833","#2F575E","#99440A","#E0752D",
-        "#58140C","#052B51","#511749","#3F2B5B",
-      ];
-      var color = colors[Math.abs(hash % colors.length)];
-      console.log("namei "  + name + " color: " + color, hash % 4);
-      element.css("background-color", color);
-    };
-  });
-
   module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv) {
 
     $scope.init = function() {
@@ -177,4 +151,32 @@ function (angular, _, config, $) {
     };
   });
 
+  module.directive('tagColorFromName', function() {
+
+    function djb2(str) {
+      var hash = 5381;
+      for (var i = 0; i < str.length; i++) {
+        hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
+      }
+      return hash;
+    }
+
+    return function (scope, element) {
+      var name = _.isString(scope.tag) ? scope.tag : scope.tag.term;
+      var hash = djb2(name.toLowerCase());
+      var colors = [
+        "#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
+        "#508642","#447EBC","#C15C17","#890F02","#757575",
+        "#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
+        "#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
+        "#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
+        "#58140C","#052B51","#511749","#3F2B5B",
+      ];
+      var color = colors[Math.abs(hash % colors.length)];
+      console.log("namei "  + name + " color: " + color, hash % 4);
+      element.css("background-color", color);
+    };
+
+  });
+
 });

src/app/partials/search.html

@@ -52,9 +52,9 @@
 						   class="search-result-item pointer"
 							 ng-class="{'selected': $index === selectedIndex }"
 							 ng-click="filterByTag(tag.term, $event)">
-						<a class="search-result-link" >
+						<a class="search-result-tag label label-tag" tag-color-from-name>
 							<i class="icon icon-tag"></i>
-							<span class="label label-tag" tag-color-from-name>{{tag.term}} &nbsp;({{tag.count}})</span>
+							<span>{{tag.term}} &nbsp;({{tag.count}})</span>
 						</a>
           </div>
         </div>
@@ -64,7 +64,7 @@
 							bindonce ng-repeat="row in results.dashboards"
 							ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.id)">
 
-							<div class="search-result-actions">
+							<div class="search-result-actions small">
 								<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>

src/css/less/grafana.less

@@ -55,19 +55,18 @@
   max-height: 600px;
   overflow: auto;
   display: block;
-  .search-result-item a {
+  line-height: 28px;
-  }
 
   .search-result-item:hover, .search-result-item.selected {
-    .search-result-link, .icon {
+    .search-result-link, .search-result-link > .icon {
       color: @grafanaListHighlight;
     }
-    .search-result-link .label {
+    .search-result-tag {
-      background-color: @blue;
+      opacity: 0.70;
+      color: white;
     }
   }
 
-
   .search-result-link {
     color: @grafanaListMainLinkColor;
     .icon {
@@ -81,7 +80,7 @@
   }
 
   .search-result-item {
-    padding: 6px 10px;
+    padding: 0px 10px;
     white-space: nowrap;
     border-top: 1px solid @grafanaListBorderTop;
     border-bottom: 1px solid @grafanaListBorderBottom;
@@ -89,14 +88,16 @@
 
   .search-result-tags {
     float: right;
-    .label {
+    .label-tag {
       margin-left: 6px;
+      font-size: 11px;
+      padding: 2px 6px;
     }
   }
 
   .search-result-actions {
     float: right;
-    padding-left: 10px;
+    padding-left: 20px;
   }
 }
 

src/css/less/overrides.less

@@ -589,14 +589,20 @@ div.flot-text {
 .label-tag {
   background-color: @purple;
   color: darken(@white, 5%);
+  border-radius: 2px;
   text-shadow: none;
   font-size: 13px;
-  padding: 3px 6px;
+  padding: 4px 6px;
+  .icon-tag {
+    position: relative;
+    top: 1px;
+    padding-right: 4px;
+  }
 }
 
 .label-tag:hover {
+  opacity: 0.85;
   background-color: darken(@purple, 10%);
-  color: @white;
 }
 
 .annotation-editor-table {

src/css/less/variables.light.less

@@ -61,8 +61,8 @@
 
 // Links
 // -------------------------
-@linkColor:             @blue;
+@linkColor:             @textColor;
-@linkColorHover:        darken(@linkColor, 10%);
+@linkColorHover:        @blue;
 
 
 // Typography
@@ -219,7 +219,7 @@
 
 @navbarText:                      #666;
 @navbarLinkColor:                 #666;
-@navbarLinkColorHover:            #333;
+@navbarLinkColorHover:            @blue;
 @navbarLinkColorActive:           #555;
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundActive:      darken(@navbarBackground, 6.5%);