Commit 6f783f5a by Torkel Ödegaard

Single variable select state highlight fixed, Closes #2073

parent 6ed17fe6
......@@ -14,13 +14,13 @@
<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">
<div class="variable-value-dropdown" ng-if="dropdownVisible" ng-class="{'multi': variable.multi, 'single': !variable.multi}">
<div class="variable-options-wrapper">
<div class="variable-options-column">
<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, 'multi': variable.multi}" 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 class="variable-option-icon"></span>
<span>{{option.text}}</span>
</a>
......
......@@ -55,7 +55,7 @@
min-width: 150px;
max-height: 400px;
min-height: 150px;
background: @dropdownBackground;
background-color: @dropdownBackground;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0px 0px 55px 0px black;
......@@ -63,6 +63,29 @@
z-index: 1000;
font-size: @baseFontSize;
border-radius: 3px 3px 0 0;
&.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;
}
}
}
&.single {
.selected {
background-color: @grafanaTargetFuncHightlight;
}
}
}
.variable-options-wrapper {
......@@ -87,23 +110,6 @@
position: relative;
white-space: nowrap;
min-width: 115px;
&.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;
}
}
}
}
.variable-options-column-header {
......
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