mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Trying out dark headers and footers for template dropdown
This commit is contained in:
parent
a433e0e79c
commit
9a74105103
@ -93,6 +93,7 @@ function (angular, app, _) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
scope.search = {query: '', options: scope.options};
|
scope.search = {query: '', options: scope.options};
|
||||||
|
scope.selectedValuesCount = currentValues.length;
|
||||||
|
|
||||||
scope.openDropdown();
|
scope.openDropdown();
|
||||||
};
|
};
|
||||||
@ -176,8 +177,10 @@ function (angular, app, _) {
|
|||||||
value: _.pluck(selected, 'value'),
|
value: _.pluck(selected, 'value'),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
scope.selectedValuesCount = variable.current.value.length;
|
||||||
|
|
||||||
// only single value
|
// only single value
|
||||||
if (variable.current.value.length === 1) {
|
if (scope.selectedValuesCount === 1) {
|
||||||
variable.current.value = selected[0].value;
|
variable.current.value = selected[0].value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -10,19 +10,27 @@
|
|||||||
<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">
|
||||||
<div class="variable-options-column">
|
<div class="variable-options-wrapper">
|
||||||
<!-- <div class="variable-options-column-header">Selected</div> -->
|
<div class="variable-options-column">
|
||||||
<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)">
|
<div class="variable-options-column-header" ng-if="variable.multi">
|
||||||
<span class="fa fa-fw variable-option-icon"></span>
|
Selected ({{selectedValuesCount}})
|
||||||
<span>{{option.text}}</span>
|
</div>
|
||||||
</a>
|
<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>
|
||||||
|
<span>{{option.text}}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="variable-options-column" ng-if="variable.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 variable.tags" ng-click="selectTag(option, $event)">
|
||||||
|
<span class="fa fa-fw variable-option-icon"></span>
|
||||||
|
<span class="label-tag" tag-color-from-name="tag">{{tag}} <i class="fa fa-tag"></i> </span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="variable-options-column" ng-if="variable.tags">
|
<div class="variable-options-footer" ng-if="variable.multi">
|
||||||
<!-- <div class="variable-options-column-header">Tags</div> -->
|
Update /
|
||||||
<a class="variable-option-tag pointer" ng-repeat="tag in variable.tags" ng-click="selectTag(option, $event)">
|
Cancel
|
||||||
<span class="fa fa-fw variable-option-icon"></span>
|
|
||||||
<span class="label-tag" tag-color-from-name="tag">{{tag}} <i class="fa fa-tag"></i> </span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -46,7 +46,10 @@
|
|||||||
top: 47px;
|
top: 47px;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
|
min-height: 150px;
|
||||||
background: @dropdownBackground;
|
background: @dropdownBackground;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
box-shadow: 0px 0px 55px 0px black;
|
box-shadow: 0px 0px 55px 0px black;
|
||||||
border: 1px solid @grafanaTargetFuncBackground;
|
border: 1px solid @grafanaTargetFuncBackground;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
@ -62,7 +65,6 @@
|
|||||||
|
|
||||||
.variable-options-column {
|
.variable-options-column {
|
||||||
max-height: 350px;
|
max-height: 350px;
|
||||||
overflow: auto;
|
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
&:nth-child(2) {
|
&: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 {
|
.variable-option {
|
||||||
&:hover, &.highlighted {
|
&:hover, &.highlighted {
|
||||||
background-color: @blueDark;
|
background-color: @blueDark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.variable-search-wrapper {
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 7px 8px;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dash-nav-link {
|
.dash-nav-link {
|
||||||
color: @textColor;
|
color: @textColor;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user