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

Removed selection state for single select variables

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-05-29 08:21:44 +02:00
parent 7d25d6f191
commit 6ed17fe62f
3 changed files with 27 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/directives/variableValueSelect.js
View File

@ -11,20 +11,8 @@ function (angular, app, _) {
.module('grafana.directives') .module('grafana.directives')
.directive('variableValueSelect', function($compile, $window, $timeout) { .directive('variableValueSelect', function($compile, $window, $timeout) {
function openDropdown(inputEl, linkEl) {
inputEl.css('width', (linkEl.width() + 16) + 'px');
linkEl.hide();
inputEl.show();
inputEl.focus();
};
return { return {
scope: { scope: { variable: "=", onUpdated: "&" },
variable: "=",
onUpdated: "&"
},
templateUrl: 'app/features/dashboard/partials/variableValueSelect.html', templateUrl: 'app/features/dashboard/partials/variableValueSelect.html',
link: function(scope, elem) { link: function(scope, elem) {
@ -94,6 +82,7 @@ function (angular, app, _) {
scope.search = {query: '', options: scope.options}; scope.search = {query: '', options: scope.options};
scope.selectedValuesCount = currentValues.length; scope.selectedValuesCount = currentValues.length;
scope.selectedTags = scope.selectedTag || [];
if (!scope.tags) { if (!scope.tags) {
scope.tags = _.map(variable.tags, function(value) { scope.tags = _.map(variable.tags, function(value) {

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

@ -2,7 +2,7 @@
{{labelText}}: {{labelText}}:
</span> </span>
<div style="position: relative; display: inline-block"> <div class="variable-link-wrapper">
<a ng-click="show()" class="variable-value-link tight-form-item"> <a ng-click="show()" class="variable-value-link tight-form-item">
{{linkText}} {{linkText}}
<span class="label-tag" ng-repeat="tag in selectedTags" tag-color-from-name="tag.text"> <span class="label-tag" ng-repeat="tag in selectedTags" tag-color-from-name="tag.text">
@ -11,6 +11,7 @@
</span> </span>
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<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">
@ -19,12 +20,12 @@
<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}" 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, 'multi': variable.multi}" ng-click="optionSelected(option, $event)">
<span class="fa fa-fw variable-option-icon"></span> <span class="variable-option-icon"></span>
<span>{{option.text}}</span> <span>{{option.text}}</span>
</a> </a>
</div> </div>
<div class="variable-options-column" ng-if="variable.tags.length"> <div class="variable-options-column" ng-if="tags.length">
<div class="variable-options-column-header" ng-if="variable.tags.length">Tags</div> <div class="variable-options-column-header" ng-if="variable.tags.length">Tags</div>
<a class="variable-option-tag pointer" ng-repeat="tag in tags" ng-click="selectTag(tag, $event)" ng-class="{'selected': tag.selected}"> <a class="variable-option-tag pointer" ng-repeat="tag in tags" ng-click="selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
<span class="fa fa-fw variable-option-icon"></span> <span class="fa fa-fw variable-option-icon"></span>

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

@ -44,6 +44,11 @@
} }
} }
.variable-link-wrapper {
display: inline-block;
position: relative;
}
.variable-value-dropdown { .variable-value-dropdown {
position: absolute; position: absolute;
top: 47px; top: 47px;
@ -57,7 +62,6 @@
border: 1px solid @grafanaTargetFuncBackground; border: 1px solid @grafanaTargetFuncBackground;
z-index: 1000; z-index: 1000;
font-size: @baseFontSize; font-size: @baseFontSize;
padding: 0;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
@ -84,20 +88,22 @@
white-space: nowrap; white-space: nowrap;
min-width: 115px; min-width: 115px;
.variable-option-icon { &.multi {
display: inline-block; .variable-option-icon {
width: 24px; display: inline-block;
height: 18px; width: 24px;
position: relative; height: 18px;
top: 4px; position: relative;
background: url(@checkboxImageUrl) left top no-repeat; top: 4px;
} background: url(@checkboxImageUrl) left top no-repeat;
}
&.selected { &.selected {
.variable-option-icon{ .variable-option-icon{
background: url(@checkboxImageUrl) 0px -18px no-repeat; background: url(@checkboxImageUrl) 0px -18px no-repeat;
} }
} }
}
} }
.variable-options-column-header { .variable-options-column-header {