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

Began work on template multi select feature

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-03-18 11:15:21 -04:00
parent bb5eeee82e
commit d08144e730
8 changed files with 136 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/controllers/search.js
View File

@ -136,24 +136,6 @@ function (angular, _, config) {
});
module.directive('xngFocus', function() {
return function(scope, element, attrs) {
element.click(function(e) {
e.stopPropagation();
});
scope.$watch(attrs.xngFocus,function (newValue) {
if (!newValue) {
return;
}
setTimeout(function() {
element.focus();
var pos = element.val().length * 2;
element[0].setSelectionRange(pos, pos);
}, 200);
},true);
};
});
module.directive('tagColorFromName', function() {

1
src/app/directives/all.js
View File

@ -16,4 +16,5 @@ define([
'./grafanaVersionCheck',
'./dropdown.typeahead',
'./topnav',
'./giveFocus',
], function () {});

26
src/app/directives/giveFocus.js Normal file
View File

@ -0,0 +1,26 @@
define([
'angular',
],
function (angular) {
'use strict';
var module = angular.module('grafana.directives');
module.directive('giveFocus', function() {
return function(scope, element, attrs) {
element.click(function(e) {
e.stopPropagation();
});
scope.$watch(attrs.giveFocus, function (newValue) {
if (!newValue) { return; }
setTimeout(function() {
element.focus();
var pos = element.val().length * 2;
element[0].setSelectionRange(pos, pos);
}, 200);
},true);
};
});
});

40
src/app/directives/templateParamSelector.js
View File

@ -84,4 +84,44 @@ function (angular, app, _, $) {
}
};
});
angular
.module('grafana.directives')
.directive('variableValueSelect', function($compile, $window, $timeout) {
return {
scope: {
variable: "=",
},
templateUrl: 'app/features/dashboard/partials/variableValueSelect.html',
link: function(scope, elem) {
var bodyEl = angular.element($window.document.body);
scope.show = function() {
scope.selectorOpen = true;
scope.giveFocus = 1;
$timeout(function() {
bodyEl.on('click', scope.bodyOnClick);
}, 0, false);
};
scope.hide = function() {
scope.selectorOpen = false;
bodyEl.off('click', scope.bodyOnClick);
};
scope.bodyOnClick = function(e) {
var dropdown = elem.find('.variable-value-dropdown');
if (dropdown.has(e.target).length === 0) {
scope.$apply(scope.hide);
}
};
scope.$on('$destroy', function() {
});
},
};
});
});

23
src/app/features/dashboard/partials/variableValueSelect.html Normal file
View File

@ -0,0 +1,23 @@
<a ng-click="show()" class="variable-value-link">
{{variable.name}}: {{variable.current.text}} <i class="fa fa-caret-down"></i>
</a>
<div ng-if="selectorOpen" class="variable-value-dropdown">
<div class="search-field-wrapper">
<span style="position: relative;">
<input type="text" placeholder="Search variable values" give-focus="giveFocus" tabindex="1"
ng-keydown="keyDown($event)" ng-model="query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="search()" />
</span>
</div>
<div class="variable-options-container" ng-if="!query.tagcloud">
<div class="variable-option pointer" bindonce ng-repeat="option in variable.options"
ng-class="{'selected': $index === selectedIndex }" ng-href="{{row.url}}">
<input class="cr1" id="var.option.{{$id}}" type="checkbox" ng-model="option.selected" ng-checked="asd">
<label for="var.option.{{$id}}" class="cr1"></label>
<label for="var.option.{{$id}}" class="checkbox-label">{{option.text}}</label>
</div>
</div>
</div>
</div>

2
src/app/partials/search.html
View File

@ -2,7 +2,7 @@
<div class="search-field-wrapper">
<span style="position: relative;">
<input type="text" placeholder="Find dashboards by name" xng-focus="giveSearchFocus" tabindex="1"
<input type="text" placeholder="Find dashboards by name" give-focus="giveSearchFocus" tabindex="1"
ng-keydown="keyDown($event)" ng-model="query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="search()" />
</span>
<div class="search-switches">

24
src/app/partials/submenu.html
View File

@ -3,17 +3,27 @@
<ul class="tight-form-list" ng-if="dashboard.templating.list.length > 0">
<li class="tight-form-item">
<strong>VARIABLES:</strong>
</li>
<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
<span class="template-variable ">
${{variable.name}}:
</span>
<li ng-repeat="variable in variables" class="tight-form-item template-param-name dropdown">
<variable-value-select variable="variable"></variable-value-select>
</li>
<!-- <li class="dropdown" ng&#45;repeat&#45;end> -->
<!-- <a class="tight&#45;form&#45;item" tabindex="1" data&#45;toggle="dropdown">{{variable.current.text}} <i class="fa fa&#45;caret&#45;down"></i></a> -->
<!-- <div class="dropdown&#45;menu variable&#45;values&#45;dropdown"> -->
<!-- <input type="text" class="fluid&#45;width"> -->
<!-- <div class="variable&#45;values&#45;list"> -->
<!-- <div class="variable&#45;values&#45;list&#45;item" ng&#45;repeat="option in variable.options"> -->
<!-- <editor&#45;checkbox text="{{option.text}}" model="asd" change="buildUrl()"></editor&#45;checkbox> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </li> -->
<!-- -->
<!--
<li ng-repeat-end template-param-selector>
</li>
-->
<li class="tight-form-item" style="width: 15px">
</li>

29
src/css/less/submenu.less
View File

@ -5,7 +5,7 @@
}
.submenu-controls {
margin: 10px 10px 0 10px;
margin: 20px 0px 15px 20px;
}
.annotation-disabled, .annotation-disabled a {
@ -18,3 +18,30 @@
}
}
.variable-value-link {
font-size: 16px;
margin-right: 20px;
}
.variable-value-dropdown {
position: absolute;
top: 30px;
width: 300px;
height: 400px;
background: @grafanaPanelBackground;
box-shadow: 0px 0px 55px 0px black;
border: 1px solid @grafanaTargetFuncBackground;
z-index: 1000;
padding: 10px;
.variable-options-container {
height: 350px;
overflow: auto;
display: block;
line-height: 28px;
}
.variable-option {
display: block;
}
}