From d08144e73091a96296387f927a2d69f52adede5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 18 Mar 2015 11:15:21 -0400 Subject: [PATCH] Began work on template multi select feature --- src/app/controllers/search.js | 18 --------- src/app/directives/all.js | 1 + src/app/directives/giveFocus.js | 26 ++++++++++++ src/app/directives/templateParamSelector.js | 40 +++++++++++++++++++ .../partials/variableValueSelect.html | 23 +++++++++++ src/app/partials/search.html | 2 +- src/app/partials/submenu.html | 24 +++++++---- src/css/less/submenu.less | 29 +++++++++++++- 8 files changed, 136 insertions(+), 27 deletions(-) create mode 100644 src/app/directives/giveFocus.js create mode 100644 src/app/features/dashboard/partials/variableValueSelect.html diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index e031559f3a8..00ad972e60a 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -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() { diff --git a/src/app/directives/all.js b/src/app/directives/all.js index 6190ef89099..3ef0b669d6c 100644 --- a/src/app/directives/all.js +++ b/src/app/directives/all.js @@ -16,4 +16,5 @@ define([ './grafanaVersionCheck', './dropdown.typeahead', './topnav', + './giveFocus', ], function () {}); diff --git a/src/app/directives/giveFocus.js b/src/app/directives/giveFocus.js new file mode 100644 index 00000000000..ac4a80e6197 --- /dev/null +++ b/src/app/directives/giveFocus.js @@ -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); + }; + }); +}); diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js index d9ad33512b5..a7ae67e363c 100644 --- a/src/app/directives/templateParamSelector.js +++ b/src/app/directives/templateParamSelector.js @@ -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() { + }); + }, + }; + }); + }); diff --git a/src/app/features/dashboard/partials/variableValueSelect.html b/src/app/features/dashboard/partials/variableValueSelect.html new file mode 100644 index 00000000000..2a923f14ab6 --- /dev/null +++ b/src/app/features/dashboard/partials/variableValueSelect.html @@ -0,0 +1,23 @@ + + {{variable.name}}: {{variable.current.text}} + + +
+
+ + + +
+ +
+
+ + + +
+
+
+ + diff --git a/src/app/partials/search.html b/src/app/partials/search.html index 76400cd3eba..1a28ddc74a2 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -2,7 +2,7 @@
-
diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index 416fb47558b..c5e2762985e 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -3,17 +3,27 @@
    -
  • - VARIABLES: -
    • -
  • - - ${{variable.name}}: - + +
  • +
    • + + + + + + + + + + + + +
    • diff --git a/src/css/less/submenu.less b/src/css/less/submenu.less index 74a2664d3ce..32820b9f051 100644 --- a/src/css/less/submenu.less +++ b/src/css/less/submenu.less @@ -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; + } +}