Commit 9a741051 by Torkel Ödegaard

Trying out dark headers and footers for template dropdown

parent a433e0e7
......@@ -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;
}
......
......@@ -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>
<div class="variable-value-dropdown" ng-if="dropdownVisible">
<div class="variable-options-column">
<!-- <div class="variable&#45;options&#45;column&#45;header">Selected</div> -->
<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 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}" 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}}&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;</span>
</a>
</div>
</div>
<div class="variable-options-column" ng-if="variable.tags">
<!-- <div class="variable&#45;options&#45;column&#45;header">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}}&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;</span>
</a>
<div class="variable-options-footer" ng-if="variable.multi">
Update /
Cancel
</div>
</div>
</div>
......@@ -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;
}
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