Skip to content

N
nexpie-grafana-theme
Commit 36882ea2 by Torkel Ödegaard
Options

More work on dashboard tag colors

parent 3fec2cdf
Showing with 52 additions and 43 deletions
src/app/controllers/search.js
...@@ -9,32 +9,6 @@ function (angular, _, config, $) { ...@@ -9,32 +9,6 @@ function (angular, _, config, $) {
var module = angular.module('grafana.controllers'); 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) { module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv) {
$scope.init = function() { $scope.init = function() {
...@@ -177,4 +151,32 @@ function (angular, _, config, $) { ...@@ -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 @@ ...@@ -52,9 +52,9 @@
class="search-result-item pointer" class="search-result-item pointer"
ng-class="{'selected': $index === selectedIndex }" ng-class="{'selected': $index === selectedIndex }"
ng-click="filterByTag(tag.term, $event)"> 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> <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> </a>
</div> </div>
</div> </div>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
bindonce ng-repeat="row in results.dashboards" bindonce ng-repeat="row in results.dashboards"
ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.id)"> 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"> <a ng-click="shareDashboard(row.id, row.id, $event)" config-modal="app/partials/dashLoaderShare.html">
<i class="icon-share"></i> share &nbsp;&nbsp;&nbsp; <i class="icon-share"></i> share &nbsp;&nbsp;&nbsp;
</a> </a>
......
src/css/less/grafana.less
...@@ -55,19 +55,18 @@ ...@@ -55,19 +55,18 @@
max-height: 600px; max-height: 600px;
overflow: auto; overflow: auto;
display: block; display: block;
.search-result-item a { line-height: 28px;
}
.search-result-item:hover, .search-result-item.selected { .search-result-item:hover, .search-result-item.selected {
.search-result-link, .icon { .search-result-link, .search-result-link > .icon {
color: @grafanaListHighlight; color: @grafanaListHighlight;
} }
.search-result-link .label { .search-result-tag {
background-color: @blue; opacity: 0.70;
color: white;
} }
} }
.search-result-link { .search-result-link {
color: @grafanaListMainLinkColor; color: @grafanaListMainLinkColor;
.icon { .icon {
...@@ -81,7 +80,7 @@ ...@@ -81,7 +80,7 @@
} }
.search-result-item { .search-result-item {
padding: 6px 10px; padding: 0px 10px;
white-space: nowrap; white-space: nowrap;
border-top: 1px solid @grafanaListBorderTop; border-top: 1px solid @grafanaListBorderTop;
border-bottom: 1px solid @grafanaListBorderBottom; border-bottom: 1px solid @grafanaListBorderBottom;
...@@ -89,14 +88,16 @@ ...@@ -89,14 +88,16 @@
.search-result-tags { .search-result-tags {
float: right; float: right;
.label { .label-tag {
margin-left: 6px; margin-left: 6px;
font-size: 11px;
padding: 2px 6px;
} }
} }
.search-result-actions { .search-result-actions {
float: right; float: right;
padding-left: 10px; padding-left: 20px;
} }
} }
......
src/css/less/overrides.less
...@@ -589,14 +589,20 @@ div.flot-text { ...@@ -589,14 +589,20 @@ div.flot-text {
.label-tag { .label-tag {
background-color: @purple; background-color: @purple;
color: darken(@white, 5%); color: darken(@white, 5%);
border-radius: 2px;
text-shadow: none; text-shadow: none;
font-size: 13px; font-size: 13px;
padding: 3px 6px; padding: 4px 6px;
.icon-tag {
position: relative;
top: 1px;
padding-right: 4px;
}
} }
.label-tag:hover { .label-tag:hover {
opacity: 0.85;
background-color: darken(@purple, 10%); background-color: darken(@purple, 10%);
color: @white;
} }
.annotation-editor-table { .annotation-editor-table {
......
src/css/less/variables.light.less
...@@ -61,8 +61,8 @@ ...@@ -61,8 +61,8 @@
// Links // Links
// ------------------------- // -------------------------
@linkColor: @blue; @linkColor: @textColor;
@linkColorHover: darken(@linkColor, 10%); @linkColorHover: @blue;
// Typography // Typography
...@@ -219,7 +219,7 @@ ...@@ -219,7 +219,7 @@
@navbarText: #666; @navbarText: #666;
@navbarLinkColor: #666; @navbarLinkColor: #666;
@navbarLinkColorHover: #333; @navbarLinkColorHover: @blue;
@navbarLinkColorActive: #555; @navbarLinkColorActive: #555;
@navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%); @navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment