Просмотр исходного кода

Single variable select state highlight fixed, Closes #2073

Torkel Ödegaard 10 лет назад
Родитель
Сommit
6f783f5a3b

+ 2 - 2
public/app/features/dashboard/partials/variableValueSelect.html

@@ -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>

+ 24 - 18
public/css/less/submenu.less

@@ -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 {