Style changes and polish to multi variable value selection, #1144

public/app/directives/templateParamSelector.js

@@ -42,26 +42,38 @@ function (angular, app, _) {
             }, 0, false);
           };
 
-          scope.optionSelected = function(option) {
+          scope.optionSelected = function(option, event) {
             option.selected = !option.selected;
 
-            if (!variable.multi || option.text === 'All') {
+            var hideAfter = true;
+            var setAllExceptCurrentTo = function(newValue) {
               _.each(scope.options, function(other) {
-                if (option !== other) {
-                  other.selected = false;
-                }
+                if (option !== other) { other.selected = newValue; }
               });
+            };
+
+            if (option.text === 'All') {
+              setAllExceptCurrentTo(false);
+            }
+            else if (!variable.multi) {
+              setAllExceptCurrentTo(false);
+            } else {
+              if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                hideAfter = false;
+              }
+              else {
+                setAllExceptCurrentTo(false);
+              }
             }
 
             var selected = _.filter(scope.options, {selected: true});
 
-            // enfore the first selected if no option is selected
             if (selected.length === 0) {
-              scope.options[0].selected = true;
-              selected = [scope.options[0]];
+              option.selected = true;
+              selected = [option];
             }
 
-            if (selected.length > 1) {
+            if (selected.length > 1 && selected.length !== scope.options.length) {
               if (selected[0].text === 'All') {
                 selected[0].selected = false;
                 selected = selected.slice(1, selected.length);
@@ -80,6 +92,10 @@ function (angular, app, _) {
 
             scope.updateLinkText();
             scope.onUpdated();
+
+            if (hideAfter) {
+              scope.hide();
+            }
           };
 
           scope.hide = function() {

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

@@ -14,11 +14,9 @@
 	</div>
 
 	<div class="variable-options-container" ng-if="!query.tagcloud">
-		<a class="variable-option pointer" bindonce ng-repeat="option in options"
-				ng-class="{'selected': option.selected}" ng-click="optionSelected(option)">
-				<i class="fa fa-fw fa-square-o"></i>
-				<i class="fa fa-fw fa-check-square-o"></i>
+		<a class="variable-option pointer" bindonce ng-repeat="option in options" ng-class="{'selected': option.selected}" ng-click="optionSelected(option, $event)">
 				<span >{{option.text}}</label>
+				<span class="fa fa-fw variable-option-icon"></span>
 			</div>
 		</a>
 	</div>

public/css/less/submenu.less

@@ -26,40 +26,42 @@
 
 .variable-value-dropdown {
   position: absolute;
-  top: 43px;
-  min-width: 200px;
+  top: 35px;
+  min-width: 150px;
   max-height: 400px;
   background: @grafanaPanelBackground;
   box-shadow: 0px 0px 55px 0px black;
   border: 1px solid @grafanaTargetFuncBackground;
   z-index: 1000;
   font-size: @baseFontSize;
-  padding: 4px 4px 8px 4px;
+  padding: 0;
+  border-radius: 3px 3px 0 0;
 }
 
 .variable-options-container {
   max-height: 350px;
   overflow: auto;
   display: block;
-  line-height: 28px;
+  line-height: 26px;
 }
 
 .variable-option {
   display: block;
+  padding: 0 8px;
+
+  &:hover {
+    background-color: @blueDark;
+  }
+
   .fa {
-    font-size: 130%;
-    position: relative;
-    top: 2px;
-    padding-right: 4px;
+    line-height: 26px;
+    float: right;
+    padding-left: 4px;
   }
-  .fa-check-square-o { display: none; }
 
   &.selected {
-    .fa-square-o {
-      display: none;
-    }
-    .fa-check-square-o {
-      display: inline-block;
+    .variable-option-icon:before {
+      content: "\f00c";
     }
   }
 }