diff --git a/public/app/directives/metric.segment.js b/public/app/directives/metric.segment.js index 05bf7e485e3..4f5677ca3ed 100644 --- a/public/app/directives/metric.segment.js +++ b/public/app/directives/metric.segment.js @@ -68,7 +68,7 @@ function (angular, app, _, $) { else { // need to have long delay because the blur // happens long before the click event on the typeahead options - cancelBlur = setTimeout($scope.switchToLink, 350); + cancelBlur = setTimeout($scope.switchToLink, 50); } }; diff --git a/public/app/directives/variableValueSelect.js b/public/app/directives/variableValueSelect.js index fa0e56acebc..42724a79df9 100644 --- a/public/app/directives/variableValueSelect.js +++ b/public/app/directives/variableValueSelect.js @@ -10,23 +10,72 @@ function (angular, app, _) { angular .module('grafana.directives') .directive('variableValueSelect', function($compile, $window, $timeout) { + + function openDropdown(inputEl, linkEl) { + inputEl.css('width', (linkEl.width() + 16) + 'px'); + + linkEl.hide(); + inputEl.show(); + inputEl.focus(); + }; + return { scope: { variable: "=", onUpdated: "&" }, + templateUrl: 'app/features/dashboard/partials/variableValueSelect.html', + link: function(scope, elem) { var bodyEl = angular.element($window.document.body); + var linkEl = elem.find('.variable-value-link'); + var inputEl = elem.find('input'); var variable = scope.variable; + var cancelBlur = null; - scope.show = function() { - if (scope.selectorOpen) { - return; + scope.openDropdown = function() { + inputEl.show(); + linkEl.hide(); + scope.dropdownVisible = true; + + inputEl.css('width', (linkEl.width() + 16) + 'px'); + + linkEl.hide(); + inputEl.show(); + inputEl.focus(); + + $timeout(function() { bodyEl.on('click', scope.bodyOnClick); }, 0, false); + }; + + scope.switchToLink = function(now) { + if (now === true || cancelBlur) { + clearTimeout(cancelBlur); + cancelBlur = null; + inputEl.hide(); + linkEl.show(); + scope.dropdownVisible = false; + scope.$digest(); + + scope.updateLinkText(); + scope.onUpdated(); + } + else { + // need to have long delay because the blur + // happens long before the click event on the typeahead options + cancelBlur = setTimeout(scope.switchToLink, 50); } - scope.selectorOpen = true; - scope.giveFocus = 1; + bodyEl.off('click', scope.bodyOnClick); + }; + + scope.bodyOnClick = function(e) { + if (elem.has(e.target).length === 0) { + scope.switchToLink(); + } + }; + + scope.show = function() { scope.oldCurrentText = variable.current.text; scope.highlightIndex = -1; @@ -45,9 +94,7 @@ function (angular, app, _) { scope.search = {query: '', options: scope.options}; - $timeout(function() { - bodyEl.on('click', scope.bodyOnClick); - }, 0, false); + scope.openDropdown(); }; scope.queryChanged = function() { @@ -79,7 +126,7 @@ function (angular, app, _) { scope.optionSelected = function(option, event) { option.selected = !option.selected; - var hideAfter = true; + var hideAfter = false; var setAllExceptCurrentTo = function(newValue) { _.each(scope.options, function(other) { if (option !== other) { other.selected = newValue; } @@ -91,13 +138,10 @@ function (angular, app, _) { } else if (!variable.multi) { setAllExceptCurrentTo(false); - } else { - if (event.ctrlKey || event.metaKey || event.shiftKey) { - hideAfter = false; - } - else { - setAllExceptCurrentTo(false); - } + hideAfter = true; + } else if (event.ctrlKey || event.metaKey || event.shiftKey) { + hideAfter = true; + setAllExceptCurrentTo(false); } var selected = _.filter(scope.options, {selected: true}); @@ -124,23 +168,8 @@ function (angular, app, _) { variable.current.value = selected[0].value; } - scope.updateLinkText(); - scope.onUpdated(); - if (hideAfter) { - scope.hide(); - } - }; - - scope.hide = function() { - scope.selectorOpen = false; - bodyEl.off('click', scope.bodyOnClick); - }; - - scope.bodyOnClick = function(e) { - var dropdown = elem.find('.variable-value-dropdown'); - if (dropdown.has(e.target).length === 0) { - scope.$apply(scope.hide); + scope.switchToLink(); } }; @@ -152,6 +181,9 @@ function (angular, app, _) { scope.$watchGroup(['variable.hideLabel', 'variable.name', 'variable.label', 'variable.current.text'], function() { scope.updateLinkText(); }); + + linkEl.click(scope.openDropdown); + //inputEl.blur(scope.switchToLink); }, }; }); diff --git a/public/app/features/dashboard/partials/variableValueSelect.html b/public/app/features/dashboard/partials/variableValueSelect.html index 481f2734876..afa4bdbe649 100644 --- a/public/app/features/dashboard/partials/variableValueSelect.html +++ b/public/app/features/dashboard/partials/variableValueSelect.html @@ -1,35 +1,28 @@ - + {{labelText}}:
- + {{linkText}} + -
-
- - - +
+
+ + + + {{option.text}} +
- -
-
- - {{option.text}} - - -
-
- - - {{tag}} - - -
+
+ + + + {{tag}}    +
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index d1232c72dcf..99b50d45866 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -226,41 +226,41 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+
value groups/tags
+
+
    +
  • + tags query +
    • +
  • + +
    • +
+
+
+
+
    +
  • + tags values query +
    • +
  • + +
    • +
+
+
+
+
    +
  • + +
    • +
+
+
+
+
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less index 4fefa50d5e7..a92cb163537 100644 --- a/public/css/less/submenu.less +++ b/public/css/less/submenu.less @@ -20,7 +20,7 @@ } .submenu-item { - padding: 8px 7px; +// padding: 8px 7px; margin-right: 20px; display: inline-block; border-radius: 3px; @@ -43,10 +43,10 @@ .variable-value-dropdown { position: absolute; - top: 27px; + top: 47px; min-width: 150px; max-height: 400px; - background: @grafanaPanelBackground; + background: @dropdownBackground; box-shadow: 0px 0px 55px 0px black; border: 1px solid @grafanaTargetFuncBackground; z-index: 1000; @@ -74,22 +74,23 @@ .variable-option, .variable-options-column-header { display: block; - padding: 0 27px 0 8px; + padding: 2px 27px 0 8px; position: relative; + white-space: nowrap; + min-width: 115px; - .variable-option-icon { display: none } + .variable-option-icon { + display: inline-block; + width: 24px; + height: 18px; + position: relative; + top: 4px; + background: url(@checkboxImageUrl) left top no-repeat; + } &.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-icon{ + background: url(@checkboxImageUrl) 0px -18px no-repeat; } } } diff --git a/public/css/less/tightform.less b/public/css/less/tightform.less index 5bd9cda8f43..71457a62141 100644 --- a/public/css/less/tightform.less +++ b/public/css/less/tightform.less @@ -23,7 +23,7 @@ .tight-form-container-no-item-borders { border: 1px solid @grafanaTargetBorder; - .tight-form, .tight-form-item, [type=text].tight-form-input { + .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input { border: none; } } @@ -132,7 +132,6 @@ input[type=text].tight-form-clear-input { border: none; margin: 0px; background: transparent; - float: left; color: @grafanaTargetColor; border-radius: 0; border-right: 1px solid @grafanaTargetSegmentBorder;