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

Single variable select state highlight fixed, Closes #2073

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-05-29 08:40:14 +02:00
parent 6ed17fe62f
commit 6f783f5a3b
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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> <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-wrapper">
<div class="variable-options-column"> <div class="variable-options-column">
<div class="variable-options-column-header" ng-if="variable.multi"> <div class="variable-options-column-header" ng-if="variable.multi">
Selected ({{selectedValuesCount}}) Selected ({{selectedValuesCount}})
</div> </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 class="variable-option-icon"></span>
<span>{{option.text}}</span> <span>{{option.text}}</span>
</a> </a>

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

@ -55,7 +55,7 @@
min-width: 150px; min-width: 150px;
max-height: 400px; max-height: 400px;
min-height: 150px; min-height: 150px;
background: @dropdownBackground; background-color: @dropdownBackground;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
box-shadow: 0px 0px 55px 0px black; box-shadow: 0px 0px 55px 0px black;
@ -63,6 +63,29 @@
z-index: 1000; z-index: 1000;
font-size: @baseFontSize; font-size: @baseFontSize;
border-radius: 3px 3px 0 0; 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 { .variable-options-wrapper {
@ -87,23 +110,6 @@
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
min-width: 115px; 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 { .variable-options-column-header {