Began work on template multi select feature

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() {
 

src/app/directives/all.js

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

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);
+    };
+  });
+});

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() {
+          });
+        },
+      };
+    });
+
 });

src/app/features/dashboard/partials/variableValueSelect.html

@@ -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>
+

src/app/partials/search.html

@@ -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">

src/app/partials/submenu.html

@@ -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>

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;
+  }
+}