diff --git a/public/app/directives/variableValueSelect.js b/public/app/directives/variableValueSelect.js index 43c1014160e..e74564369c2 100644 --- a/public/app/directives/variableValueSelect.js +++ b/public/app/directives/variableValueSelect.js @@ -93,6 +93,7 @@ function (angular, app, _) { }); scope.search = {query: '', options: scope.options}; + scope.selectedValuesCount = currentValues.length; scope.openDropdown(); }; @@ -176,8 +177,10 @@ function (angular, app, _) { value: _.pluck(selected, 'value'), }; + scope.selectedValuesCount = variable.current.value.length; + // only single value - if (variable.current.value.length === 1) { + if (scope.selectedValuesCount === 1) { variable.current.value = selected[0].value; } diff --git a/public/app/features/dashboard/partials/variableValueSelect.html b/public/app/features/dashboard/partials/variableValueSelect.html index afa4bdbe649..3bbc5060c0e 100644 --- a/public/app/features/dashboard/partials/variableValueSelect.html +++ b/public/app/features/dashboard/partials/variableValueSelect.html @@ -10,19 +10,27 @@
-
- - - - {{option.text}} - +
+
+
+ Selected ({{selectedValuesCount}}) +
+ + + {{option.text}} + +
+
-
- - - - {{tag}}    - +
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less index a92cb163537..de12ca4a108 100644 --- a/public/css/less/submenu.less +++ b/public/css/less/submenu.less @@ -46,7 +46,10 @@ top: 47px; min-width: 150px; max-height: 400px; + min-height: 150px; background: @dropdownBackground; + overflow-y: auto; + overflow-x: hidden; box-shadow: 0px 0px 55px 0px black; border: 1px solid @grafanaTargetFuncBackground; z-index: 1000; @@ -62,7 +65,6 @@ .variable-options-column { max-height: 350px; - overflow: auto; display: table-cell; line-height: 26px; &:nth-child(2) { @@ -95,22 +97,27 @@ } } +.variable-options-column-header { + background-color: @bodyBackground; + text-align: center; + padding-top: 5px; + padding-bottom: 5px; + margin-bottom: 5px; +} + +.variable-options-footer { + background-color: @bodyBackground; + text-align: center; + padding-top: 5px; + padding-bottom: 5px; +} + .variable-option { &:hover, &.highlighted { background-color: @blueDark; } } -.variable-search-wrapper { - input { - width: 100%; - padding: 7px 8px; - height: 100%; - box-sizing: border-box; - margin-bottom: 6px; - } -} - .dash-nav-link { color: @textColor; }