diff --git a/public/app/controllers/search.js b/public/app/controllers/search.js
index 9083ef74705..1a88b25ef3f 100644
--- a/public/app/controllers/search.js
+++ b/public/app/controllers/search.js
@@ -123,32 +123,4 @@ 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 {
- scope: { tag: "=" },
- link: function (scope, element) {
- var name = scope.tag;
- 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)];
- element.css("background-color", color);
- }
- };
- });
});
diff --git a/public/app/directives/tip.js b/public/app/directives/tip.js
index 8553faad279..a58adce981d 100644
--- a/public/app/directives/tip.js
+++ b/public/app/directives/tip.js
@@ -78,4 +78,43 @@ function (angular, kbn) {
};
});
-});
+ angular
+ .module('grafana.directives')
+ .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 {
+ scope: { tagColorFromName: "=" },
+ link: function (scope, element) {
+ var hash = djb2(scope.tagColorFromName.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 borderColors = [
+ "#FF7368","#459EE7","#E069CF","#9683C6","#6C8E29",
+ "#76AC68","#6AA4E2","#E7823D","#AF3528","#9B9B9B",
+ "#3069A2","#934588","#7E6A9D","#88C477","#557575",
+ "#E54126","#A694DD","#B054DE", "#8FC426","#262626",
+ "#658E59","#557D84","#BF6A30","#FF9B53","#3470DA",
+ "#7E3A32","#2B5177","#773D6F","#655181",
+ ];
+ var color = colors[Math.abs(hash % colors.length)];
+ var borderColor = borderColors[Math.abs(hash % borderColors.length)];
+
+ element.css("background-color", color);
+ element.css("border-color", borderColor);
+ }
+ };
+ });});
diff --git a/public/app/features/dashboard/partials/variableValueSelect.html b/public/app/features/dashboard/partials/variableValueSelect.html
index 30a61072626..c055c1151ae 100644
--- a/public/app/features/dashboard/partials/variableValueSelect.html
+++ b/public/app/features/dashboard/partials/variableValueSelect.html
@@ -15,12 +15,21 @@
-
diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js
index f48452e4569..1363a774ef5 100644
--- a/public/app/features/templating/editorCtrl.js
+++ b/public/app/features/templating/editorCtrl.js
@@ -82,6 +82,14 @@ function (angular, _) {
};
$scope.update = function() {
+ $scope.current.tags = {
+ "Europe": ["backend_03", "backend_04"],
+ "USA": ["backend_01", "backend_02"],
+ "Asia": ["backend_01"],
+ "South America": ["backend_02"],
+ "Africa": ["backend_03"],
+ };
+
if ($scope.isValid()) {
$scope.runQuery().then(function() {
$scope.reset();
diff --git a/public/app/partials/search.html b/public/app/partials/search.html
index 66e5fd3b7f4..18754010f0d 100644
--- a/public/app/partials/search.html
+++ b/public/app/partials/search.html
@@ -46,7 +46,7 @@
ng-class="{'selected': $index == selectedIndex}" ng-href="{{row.url}}">
-
+
{{tag}}
diff --git a/public/css/less/overrides.less b/public/css/less/overrides.less
index 345837e01e8..425777f1597 100644
--- a/public/css/less/overrides.less
+++ b/public/css/less/overrides.less
@@ -542,10 +542,13 @@ div.flot-text {
.label-tag {
background-color: @purple;
color: darken(@white, 5%);
+ white-space: nowrap;
border-radius: 2px;
text-shadow: none;
font-size: 13px;
- padding: 4px 6px;
+ padding: 2px 6px;
+ border-width: 1px;
+ border-style: solid;
.icon-tag {
position: relative;
top: 1px;
diff --git a/public/css/less/sidemenu.less b/public/css/less/sidemenu.less
index 4b1e5f481e7..1b8ee3f1fdd 100644
--- a/public/css/less/sidemenu.less
+++ b/public/css/less/sidemenu.less
@@ -91,7 +91,6 @@
display: block;
padding: 8px 0 4px 22px;
background-color: @navbarBackground;
- border-right: 3px solid @bodyBackground;
img {
border-radius: 50%;
background: @iconContainerBackground;
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less
index a9fecffefcf..4fefa50d5e7 100644
--- a/public/css/less/submenu.less
+++ b/public/css/less/submenu.less
@@ -55,31 +55,48 @@
border-radius: 3px 3px 0 0;
}
-.variable-options-container {
- max-height: 350px;
- overflow: auto;
- display: block;
- line-height: 26px;
+.variable-options-wrapper {
+ display: table;
+ width: 100%;
}
-.variable-option {
+.variable-options-column {
+ max-height: 350px;
+ overflow: auto;
+ display: table-cell;
+ line-height: 26px;
+ &:nth-child(2) {
+ border-left: 1px solid @grafanaTargetFuncBackground;
+ }
+}
+
+.variable-option-tag,
+.variable-option,
+.variable-options-column-header {
display: block;
- padding: 0 8px;
+ padding: 0 27px 0 8px;
+ position: relative;
- &:hover, &.highlighted {
- background-color: @blueDark;
- }
-
- .fa {
- line-height: 26px;
- float: right;
- padding-left: 4px;
- }
+ .variable-option-icon { display: none }
&.selected {
.variable-option-icon:before {
content: "\f00c";
}
+ .variable-option-icon {
+ display: block;
+ padding-left: 4px;
+ line-height: 26px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+ }
+}
+
+.variable-option {
+ &:hover, &.highlighted {
+ background-color: @blueDark;
}
}