From 3dbfd494144a7fb65a838219fce0e7802ffc96f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 29 Mar 2016 22:23:29 +0200
Subject: [PATCH] ux(): templating forms polish

---
 public/app/features/dashboard/dashboardSrv.js |  9 +++-
 .../features/dashboard/submenu/submenu.html   |  4 +-
 public/app/features/templating/editorCtrl.js  |  7 +++
 .../features/templating/partials/editor.html  | 48 +++++++++++--------
 4 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/public/app/features/dashboard/dashboardSrv.js b/public/app/features/dashboard/dashboardSrv.js
index 00610624867..b3194868d97 100644
--- a/public/app/features/dashboard/dashboardSrv.js
+++ b/public/app/features/dashboard/dashboardSrv.js
@@ -401,11 +401,18 @@ function (angular, $, _, moment) {
         });
       }
 
-      if (oldVersion < 11) {
+      if (oldVersion < 12) {
         // update template variables
         _.each(this.templating.list, function(templateVariable) {
           if (templateVariable.refresh) { templateVariable.refresh = 1; }
           if (!templateVariable.refresh) { templateVariable.refresh = 0; }
+          if (templateVariable.hideVariable) {
+            templateVariable.hide = 2;
+          } else if (templateVariable.hideLabel) {
+            templateVariable.hide = 1;
+          } else {
+            templateVariable.hide = 0;
+          }
         });
       }
 
diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html
index 21a9744b359..464d8c4cecf 100644
--- a/public/app/features/dashboard/submenu/submenu.html
+++ b/public/app/features/dashboard/submenu/submenu.html
@@ -1,7 +1,7 @@
 <div class="submenu-controls">
 	<ul ng-if="ctrl.dashboard.templating.list.length > 0">
-		<li ng-repeat="variable in ctrl.variables" ng-show="!variable.hideVariable" class="submenu-item">
-			<span class="submenu-item-label template-variable " ng-show="!variable.hideLabel">
+		<li ng-repeat="variable in ctrl.variables" ng-hide="variable.hide === 2" class="submenu-item">
+			<span class="submenu-item-label template-variable " ng-hide="variable.hide === 1">
 				{{variable.label || variable.name}}:
 			</span>
 			<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js
index b2916e1bcc7..291915ee99f 100644
--- a/public/app/features/templating/editorCtrl.js
+++ b/public/app/features/templating/editorCtrl.js
@@ -14,6 +14,7 @@ function (angular, _) {
       datasource: null,
       refresh: 0,
       name: '',
+      hide: 0,
       options: [],
       includeAll: false,
       multi: false,
@@ -25,6 +26,12 @@ function (angular, _) {
       {value: 2, text: "On Time Range Change"},
     ];
 
+    $scope.hideOptions = [
+      {value: 0, text: ""},
+      {value: 1, text: "Label"},
+      {value: 2, text: "Variable"},
+    ];
+
     $scope.init = function() {
       $scope.mode = 'list';
 
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html
index 7bd1fd0940f..d1cab90ac9d 100644
--- a/public/app/features/templating/partials/editor.html
+++ b/public/app/features/templating/partials/editor.html
@@ -74,32 +74,33 @@
 			<h5 class="section-heading">Variable</h5>
 			<div class="gf-form-group">
 				<div class="gf-form-inline">
-					<div class="gf-form">
+					<div class="gf-form max-width-19">
 						<span class="gf-form-label width-7">Name</span>
-						<input type="text" class="gf-form-input max-width-14" placeholder="name" ng-model='current.name'></input>
+						<input type="text" class="gf-form-input max-width-12" placeholder="name" ng-model='current.name'></input>
 					</div>
 					<div class="gf-form">
 						<span class="gf-form-label width-4">Type</span>
-						<div class="gf-form-select-wrapper max-width-10">
-							<select class="gf-form-input  max-width-10" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
+						<div class="gf-form-select-wrapper">
+							<select class="gf-form-input width-7" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
 						</div>
 					</div>
-					<div class="gf-form">
+					<div class="gf-form max-width-19">
 						<span class="gf-form-label width-7" ng-show="current.type === 'query'">Data source</span>
-						<div class="gf-form-select-wrapper" ng-show="current.type === 'query'">
-							<select class="gf-form-input max-width-14" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
+						<div class="gf-form-select-wrapper max-width-12" ng-show="current.type === 'query'">
+							<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
 						</div>
 					</div>
 				</div>
 				<div class="gf-form-inline">
-					<div class="gf-form">
+					<div class="gf-form max-width-19">
 						<span class="gf-form-label width-7">Label</span>
-						<input type="text" class="gf-form-input max-width-14" ng-model='current.label' placeholder="optional display name"></input>
+						<input type="text" class="gf-form-input max-width-12" ng-model='current.label' placeholder="optional display name"></input>
 					</div>
 					<div class="gf-form">
 						<span class="gf-form-label width-4">Hide</span>
-						<editor-checkbox text="Label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
-						<editor-checkbox text="Variable" model="current.hideVariable" change="runQuery()"></editor-checkbox>
+            <div class="gf-form-select-wrapper">
+							<select class="gf-form-input width-7" ng-model="current.hide" ng-options="f.value as f.text for f in hideOptions"></select>
+						</div>
 					</div>
 				</div>
 
@@ -176,17 +177,22 @@
 				</div>
 			</div>
 
-			<div class="gf-form-group" >
+			<div class="section gf-form-group" >
 				<h5 class="section-heading">Selection Options</h5>
-				<div class="gf-form">
-					<span class="gf-form-label width-10">Multi-value</span>
-					<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
-					<tip>Enables multiple values to be selected at the same time</tip>
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label width-10">Include All option</span>
-					<editor-checkbox class="width-13" text="Enable" model="current.includeAll" change="runQuery()"></editor-checkbox>
-				</div>
+        <gf-form-switch class="gf-form"
+                        label="Multi-value"
+                        label-class="width-10"
+                        tooltip="Enables multiple values to be selected at the same time"
+                        checked="current.multi"
+                        on-change="runQuery()">
+        </gf-form-switch>
+        <gf-form-switch class="gf-form"
+                        label="Include All option"
+                        label-class="width-10"
+                        checked="current.includeAll"
+                        on-change="runQuery()">
+        </gf-form-switch>
+
 				<div class="gf-form" ng-if="current.includeAll">
 					<span class="gf-form-label width-10">Custom all value</span>
 					<input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>