IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-18 12:33:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Removed selection state for single select variables

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-05-29 08:21:44 +02:00
parent 7d25d6f191
commit 6ed17fe62f
3 changed files with 27 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/directives/variableValueSelect.js
View File

@ -11,20 +11,8 @@ function (angular, app, _) {
.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: "&"
},
scope: { variable: "=", onUpdated: "&" },
templateUrl: 'app/features/dashboard/partials/variableValueSelect.html',
link: function(scope, elem) {
@ -94,6 +82,7 @@ function (angular, app, _) {
scope.search = {query: '', options: scope.options};
scope.selectedValuesCount = currentValues.length;
scope.selectedTags = scope.selectedTag || [];
if (!scope.tags) {
scope.tags = _.map(variable.tags, function(value) {

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

@ -2,7 +2,7 @@
{{labelText}}:
</span>
<div style="position: relative; display: inline-block">
<div class="variable-link-wrapper">
<a ng-click="show()" class="variable-value-link tight-form-item">
{{linkText}}
<span class="label-tag" ng-repeat="tag in selectedTags" tag-color-from-name="tag.text">
@ -11,6 +11,7 @@
</span>
<i class="fa fa-caret-down"></i>
</a>
<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="keyDown($event)" ng-model="search.query" ng-change="queryChanged()" ></input>
<div class="variable-value-dropdown" ng-if="dropdownVisible">
@ -19,12 +20,12 @@
<div class="variable-options-column-header" ng-if="variable.multi">
Selected ({{selectedValuesCount}})
</div>
<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 class="fa fa-fw variable-option-icon"></span>
<a class="variable-option pointer" bindonce ng-repeat="option in search.options" ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex, 'multi': variable.multi}" ng-click="optionSelected(option, $event)">
<span class="variable-option-icon"></span>
<span>{{option.text}}</span>
</a>
</div>
<div class="variable-options-column" ng-if="variable.tags.length">
<div class="variable-options-column" ng-if="tags.length">
<div class="variable-options-column-header" ng-if="variable.tags.length">Tags</div>
<a class="variable-option-tag pointer" ng-repeat="tag in tags" ng-click="selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
<span class="fa fa-fw variable-option-icon"></span>

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

@ -44,6 +44,11 @@
}
}
.variable-link-wrapper {
display: inline-block;
position: relative;
}
.variable-value-dropdown {
position: absolute;
top: 47px;
@ -57,7 +62,6 @@
border: 1px solid @grafanaTargetFuncBackground;
z-index: 1000;
font-size: @baseFontSize;
padding: 0;
border-radius: 3px 3px 0 0;
}
@ -84,20 +88,22 @@
white-space: nowrap;
min-width: 115px;
.variable-option-icon {
display: inline-block;
width: 24px;
height: 18px;
position: relative;
top: 4px;
background: url(@checkboxImageUrl) left top no-repeat;
}
&.multi {
.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{
background: url(@checkboxImageUrl) 0px -18px no-repeat;
}
}
&.selected {
.variable-option-icon{
background: url(@checkboxImageUrl) 0px -18px no-repeat;
}
}
}
}
.variable-options-column-header {