From 137cbe5bb4572959f0a8144fde7b43cc82a12543 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Fri, 29 May 2015 10:00:53 +0200
Subject: [PATCH] work on variable multi select

---
 public/app/directives/variableValueSelect.js  |   9 +++++-
 .../partials/variableValueSelect.html         |   9 ++++--
 public/css/less/submenu.less                  |  27 +++++++++++-------
 public/img/checkbox.png                       | Bin 870 -> 1461 bytes
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/public/app/directives/variableValueSelect.js b/public/app/directives/variableValueSelect.js
index f51c706bfe5..1b25544bb50 100644
--- a/public/app/directives/variableValueSelect.js
+++ b/public/app/directives/variableValueSelect.js
@@ -200,6 +200,14 @@ function (angular, app, _) {
             }
           };
 
+          scope.clearSelections = function() {
+            _.each(scope.options, function(option) {
+              option.selected = false;
+            });
+
+            scope.selectionsChanged(scope.options[0], false);
+          };
+
           scope.selectTag = function(tag) {
             tag.selected = !tag.selected;
             if (!tag.values) {
@@ -231,7 +239,6 @@ function (angular, app, _) {
           });
 
           linkEl.click(scope.openDropdown);
-          //inputEl.blur(scope.switchToLink);
         },
       };
     });
diff --git a/public/app/features/dashboard/partials/variableValueSelect.html b/public/app/features/dashboard/partials/variableValueSelect.html
index a910d647059..e0a4cf2f3c2 100644
--- a/public/app/features/dashboard/partials/variableValueSelect.html
+++ b/public/app/features/dashboard/partials/variableValueSelect.html
@@ -17,16 +17,19 @@
 	<div class="variable-value-dropdown" ng-if="dropdownVisible" ng-class="{'multi': variable.multi, 'single': !variable.multi}">
 		<div class="variable-options-wrapper">
 			<div class="variable-options-column">
-				<div class="variable-options-column-header" ng-if="variable.multi">
+				<a class="variable-options-column-header" ng-if="variable.multi" ng-class="{'many-selected': selectedValuesCount > 1}" bs-tooltip="'Clear selections'" data-placement="top" ng-click="clearSelections()">
+					<span class="variable-option-icon"></span>
 					Selected ({{selectedValuesCount}})
-				</div>
+				</a>
 				<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="variable-option-icon"></span>
 					<span>{{option.text}}</span>
 				</a>
 			</div>
 			<div class="variable-options-column" ng-if="tags.length">
-				<div class="variable-options-column-header" ng-if="variable.tags.length">Tags</div>
+				<div class="variable-options-column-header text-center">
+					Tags
+				</div>
 				<a class="variable-option-tag pointer" ng-repeat="tag in tags" ng-click="selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
 					<span class="fa fa-fw variable-option-icon"></span>
 					<span class="label-tag" tag-color-from-name="tag.text">{{tag.text}}&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;</span>
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less
index bd0a14da22f..6efcf4fe4aa 100644
--- a/public/css/less/submenu.less
+++ b/public/css/less/submenu.less
@@ -65,15 +65,6 @@
   border-radius: 3px 3px 0 0;
 
   &.multi {
-   .variable-option-icon {
-     display: inline-block;
-     width: 24px;
-     height: 18px;
-     position: relative;
-     top: 4px;
-     background: url(@checkboxImageUrl) left top no-repeat;
-   }
-
    .selected {
      .variable-option-icon{
        background: url(@checkboxImageUrl) 0px -18px no-repeat;
@@ -82,12 +73,24 @@
  }
 
  &.single {
+   .variable-option-icon {
+     display: none;
+   }
    .selected {
      background-color: @grafanaTargetFuncHightlight;
    }
  }
 }
 
+.variable-option-icon {
+  display: inline-block;
+  width: 24px;
+  height: 18px;
+  position: relative;
+  top: 4px;
+  background: url(@checkboxImageUrl) left top no-repeat;
+}
+
 .variable-options-wrapper {
   display: table;
   width: 100%;
@@ -113,10 +116,14 @@
 }
 
 .variable-options-column-header {
-  text-align: center;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-bottom: 5px;
+  &.many-selected {
+    .variable-option-icon {
+      background: url(@checkboxImageUrl) 0px -36px no-repeat;
+    }
+  }
 }
 
 .variable-option {
diff --git a/public/img/checkbox.png b/public/img/checkbox.png
index 86927a0d3cb92195c21733c75ac0d047f35b9f93..a1256ec8b95ec93a31883140e5afafb09f4458d6 100644
GIT binary patch
delta 1394
zcmV-&1&#XV2DJ;27aTeW1^@s6QuAUm00006VoOIv0RI600RN!9r<0K(9tz(D9S0vb
zHHW!;kx3_i1szF5K~z}7?Uy@j990xR&->1Loe+Ou9Xl}?K?Dv#AW$L-gajcVXlQ6a
z6qM<r6o60=1t}7sL<s1hfCAC*ktk>o9pWeP%f|{>KuF}+vE%*E&U=?))|<7xc5DS`
z;7LzfX?D)MdH23^@4(+U6ySH=GWjCN(@Low8@Wk;M9zYGd+OAQmw>bbyJd3n6>ID>
z);Y8`Xsy--#VEuW$XYG3kiB~9#EEA+uv>TUsV0dpTI(=Iqm*VXoB$$`5F%ODqS;Jq
zCx8C2f9bl7F%-2n7^5-9<S@0?>w$=Buh0-<D0W}B09vayM5DD{dxI6k2uexM?a<wk
zP-+8z5mT(W4f^j)jsIa+0h4wfUHK^G|Lrv_fJ8wgBBI)Pv|iH2e8$yCYpo;1fC{>u
zN3x;g6k@<yw;VPwd|mC*+)Q!lh-~JdZyPGrmcd4Lj=!!H&&<!wlC|m^+Gy)MgV&ZQ
zjg7y#{58|+3u8Mc%-HzElc2V5EN*fh;XRsvi_h~<jjJ+kknrIzr%!*?ZQA43*ylED
z+GexKH8<~K{`ARr2;q&Xsi`kbX=MBR&ig)V9o8C*u^4T7&ZUPnn<+aVd6c_eevN_a
z$M5{}i_hKAz`&<wXn6Q|k`&sY_6;VN<jSd(rdF#l`q0Bn96G|(A7%P(+{G5vymRh<
zr=R9FW!g$*k&y=<V&c#drq5LYIQPTPT=@7SvS$75o~8{UtOAwGi<I^sSO!XeJHyPe
z!?Y@k2dAf}7j&<i>fTc>FK!5wRm%sbPM&;gm4Ygj3Z?xAc;JIiDD6K$xxBb8C{!yf
zfjZUzNLwj``|e@l&=Gz(v%timBb|qT^a8n%5qc>Iz*)!4H(w)PeviNYCZ^9-JHVBo
zf(Y6<8jZ#prA{gO6wDkuO#0iI4rC>$s1-?)T-mfqQlO~yGT?HMCP@lwnpQ72Z6rw&
ziduDmD_68>(>m)YG@HyEI}AWU1ZO=Vgw2_DDRH&Y^tCID(wbJ*+PrC1n<ndjl&W=2
zJG$crQ`$cER1`{`dZ$!w3u`xQS_N?T-hHD+n;~OuKj4&7#2C|%Wz`VF?6+TkHM1ep
z-nQrV@hH3?5+5_hj3}k@#YrTJAYJoHJ*^oY96WBVJ?OmOVvWW71n(Wrdz^E4=kY$D
zNs{24$69-hg8PPshYNGFv!8W;R<`^0JL=B4f;D+7ihwqzQ;3&VBqE(69HaE^Y12l%
zka&N&r!^L0=tQ;a)w+7xfYv>FT5Sy4n#-mIMCr>gkxuWaVkC-c8#%6VHmyVX0=iIu
zwzj3cniymLTLD_3tVVlJ>|tXoBKUpxqi4_4KRm#;y?Y6b2I;~AcI#Gu{J<dT!U8eN
zD30wQwo=mhd8}4^cl_uIpNZh^z85=s17bB{<T`MkSgsJfr<EkMYIR}=)Qf$DERfdf
zj5g0RG&#wWM~|uZo_JjHJuCE~3jJvB2_jsYFM|j%O;PQD#Iy+rX|;xA8CpZN(WEwW
zfhAD>g;K9kd-pZmu03dfYmti=@|@Ya4XG?bbrH4>fJEftEI3C@`l+0q0$CmetBfK1
zdJ6sfFNk-jC?JA32U!LtkF3&p?ukUm0%_JFEth-L0BgZnP#WcQw+3>ncIDi<J+1Q|
z1Y(Tj2Yf|Os}vwzNxP0|jkbu&r3YbEPuqPGuGrIV*)~wSG&fT{blwxAMyaq0vgw|7
z;o=-IrX7=}jYhuNSJTrjSwgM*z4$NmwEvOu7nW}c!{Rw!aR2}S07*qoM6N<$g32wc
ATmS$7

delta 824
zcmV-81IPTe3+4up7cwLW1^@s6YcB!W00009a7bBm000XU000XU0RWnu7ytkO2XskI
zMF-vq7!NoT<REb7ky|H!0^mtRK~zY`?UlVxlt~<bpZR*<Wi=;)E{b5*oJ28K5DQ~1
zherPdD@!{<p_dEB!UjLe%SG+9x#D7TYGP~bh<A;if^0AwqheNxx?k|_zB6+L%Z7zr
zT+}N}oMft*d1mG}zuz<P6`KHpfqjGL!JiUB>}qF`_x=@#8<}T+Qx||r9ky?9@Um9=
zj5Y=-6;g_ILC$%cv&7XZv5l`ho0>XXhwVS`Qz;CCq}B$dBtl49;XL5I!&*liSBauZ
zdHU(Uo0iA5b2cfZLMe$-Y6&J<T@Sn$wG%3wv&og?8bC@>gGi*5tphB;IS|4(4ToI$
z5<;}`VuF@okY6)@HNL~X0Oo6X^yyMsn%k^t0Pj5BJG>XQJX$Yl-BNdJky>kmbrxY|
zEsuO#<z$^jYtsnp?A~7fIG;-{m&is6eM?uW+yLw8>;GK{&b*(0M_gTKE6~~mY~7Y3
z)!Toq@tT#=x!%6C>g`XT1hJ#Nck^%X{6UoemH(@Kk!h`ew|_mKnR&R<v=_C~ziiaB
zQ55mR-T~gvOy9)XtC>t@Ql)x!{Aq%qLu-T93Z*nks-}H;vnZ<2cl-ngFa1X6?*5_I
z5AK_;&dz(PtGoMR7$$0<+5)vC$<<v5Nx58R=h0)NN5{#$EYPuMfXyNrnt$?SenX}$
z7W4G{e3bNm=s4NA5&(0LpYrz3ZQ^L*MpM&TYuA7Zg*>U@kp@uZ#VomrF{;J<>1;Op
zK{i{o5Cjwo`L;lDsc<?oJ$-$Rf{Mi=so@ch+`3C@c!WYBzb?p@iY$Zb)&QtfD{MV<
znDpp4k7qxS9v!c5(hOv5jBTbM0HY1LfBwc#J|ftA{Uh1AQXRM&l<*#D42z44ExtM-
z=n#;b7^CuHwhmbhN=iW(hMzWV7$!(c*#K+=Ny0GE(zLSCw2m+gNlH-%u0GL*O>49v
z5k=%C#sElokI@0v+RrnsRFaO`4<n?c8dtwz)BXntzqnb)8VRca0000<MNUMnLSTZm
C--TcR