diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index de0ec44045a..a32aa64acf0 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -151,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); + }; + + }); + }); diff --git a/src/app/partials/search.html b/src/app/partials/search.html index d149b5a9970..b9974207d3b 100644 --- a/src/app/partials/search.html +++ b/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)"> - + - {{tag.term}}  ({{tag.count}}) + {{tag.term}}  ({{tag.count}}) @@ -64,7 +64,7 @@ bindonce ng-repeat="row in results.dashboards" ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.id)"> -
+
share     @@ -74,7 +74,7 @@
- + {{tag}}
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index fdc6051bc67..ca006b2b015 100644 --- a/src/css/less/grafana.less +++ b/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 { - background-color: @blue; + .search-result-tag { + 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,11 +88,16 @@ .search-result-tags { float: right; + .label-tag { + margin-left: 6px; + font-size: 11px; + padding: 2px 6px; + } } .search-result-actions { float: right; - padding-left: 10px; + padding-left: 20px; } } diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index eddf9c6e4f9..eeff1ef0087 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -588,11 +588,20 @@ div.flot-text { .label-tag { background-color: @purple; color: darken(@white, 5%); + border-radius: 2px; + text-shadow: none; + font-size: 13px; + 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 { diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index 562114a9e54..1e0b38413fb 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -61,8 +61,8 @@ // Links // ------------------------- -@linkColor: @blue; -@linkColorHover: darken(@linkColor, 10%); +@linkColor: @textColor; +@linkColorHover: @blue; // Typography @@ -219,7 +219,7 @@ @navbarText: #666; @navbarLinkColor: #666; -@navbarLinkColorHover: #333; +@navbarLinkColorHover: @blue; @navbarLinkColorActive: #555; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%);