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)">
-
+
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%);