IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-30 10:47:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Templating: Support for search filtering and keyboard up/down filtering in the new multi variable value selector dropdown, #1144

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-04-30 09:09:00 +02:00
parent dbc64c21a7
commit 3ee1ea28e1
3 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/app/directives/templateParamSelector.js
View File

@ -21,9 +21,15 @@ function (angular, app, _) {
var variable = scope.variable;
scope.show = function() {
if (scope.selectorOpen) {
return;
}
scope.selectorOpen = true;
scope.giveFocus = 1;
scope.oldCurrentText = variable.current.text;
scope.highlightIndex = -1;
var currentValues = variable.current.value;
if (_.isString(currentValues)) {
@ -37,11 +43,39 @@ function (angular, app, _) {
return option;
});
scope.search = {query: '', options: scope.options};
$timeout(function() {
bodyEl.on('click', scope.bodyOnClick);
}, 0, false);
};
scope.queryChanged = function() {
scope.highlightIndex = -1;
scope.search.options = _.filter(scope.options, function(option) {
return option.text.toLowerCase().indexOf(scope.search.query.toLowerCase()) !== -1;
});
};
scope.keyDown = function (evt) {
if (evt.keyCode === 27) {
scope.hide();
}
if (evt.keyCode === 40) {
scope.moveHighlight(1);
}
if (evt.keyCode === 38) {
scope.moveHighlight(-1);
}
if (evt.keyCode === 13) {
scope.optionSelected(scope.search.options[scope.highlightIndex], {});
}
};
scope.moveHighlight = function(direction) {
scope.highlightIndex = (scope.highlightIndex + direction) % scope.search.options.length;
};
scope.optionSelected = function(option, event) {
option.selected = !option.selected;
@ -100,10 +134,6 @@ function (angular, app, _) {
scope.hide = function() {
scope.selectorOpen = false;
// if (scope.oldCurrentText !== variable.current.text) {
// scope.onUpdated();
// }
bodyEl.off('click', scope.bodyOnClick);
};

5
public/app/features/dashboard/partials/variableValueSelect.html
View File

@ -9,12 +9,13 @@
<div ng-if="selectorOpen" class="variable-value-dropdown">
<div class="variable-search-wrapper">
<span style="position: relative;">
<input type="text" placeholder="Search values..." give-focus="giveFocus" tabindex="1" ng-model="query.query" spellcheck='false' ng-change="search()" />
<input type="text" placeholder="Search values..." ng-keydown="keyDown($event)" give-focus="giveFocus" tabindex="1" ng-model="search.query" spellcheck='false' ng-change="queryChanged()" />
</span>
</div>
<div class="variable-options-container" ng-if="!query.tagcloud">
<a class="variable-option pointer" bindonce ng-repeat="option in options" ng-class="{'selected': option.selected}" ng-click="optionSelected(option, $event)">
<a class="variable-option pointer" bindonce ng-repeat="option in search.options"
ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
<span >{{option.text}}</label>
<span class="fa fa-fw variable-option-icon"></span>
</div>

2
public/css/less/submenu.less
View File

@ -49,7 +49,7 @@
display: block;
padding: 0 8px;
&:hover {
&:hover, &.highlighted {
background-color: @blueDark;
}