Trying out dark headers and footers for template dropdown

public/app/directives/variableValueSelect.js

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

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

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

public/css/less/submenu.less

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