New checkbox change is complete

src/app/controllers/templateEditorCtrl.js

@@ -72,6 +72,9 @@ function (angular, _) {
       if ($scope.current.type === 'interval') {
         $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d';
       }
+      if ($scope.current.type === 'query') {
+        $scope.current.query = '';
+      }
     };
 
     $scope.removeVariable = function(variable) {

src/app/directives/tip.js

@@ -26,11 +26,12 @@ function (angular, kbn) {
         link: function(scope, elem, attrs) {
           var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : '';
           var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
+          var showIf = attrs.showIf ? (' ng-show="' + attrs.showIf + '" ') : '';
 
-          var template = '<div class="editor-option text-center">' +
+          var template = '<div class="editor-option text-center"' + showIf + '>' +
                          ' <label for="' + attrs.model + '" class="small">' +
                            attrs.text + tip + '</label>' +
-                          '<input id="' + attrs.model + '" type="checkbox" ' +
+                          '<input class="cr1" id="' + attrs.model + '" type="checkbox" ' +
                           '       ng-model="' + attrs.model + '"' + ngchange +
                           '       ng-checked="' + attrs.model + '"></input>' +
                           ' <label for="' + attrs.model + '" class="cr1"></label>';

src/app/partials/dasheditor.html

@@ -72,7 +72,7 @@
 					<editor-opt-bool text="Annotations" model="dashboard.annotations.enable"></editor-opt-bool>
 					<div class="editor-option text-center" ng-repeat="pulldown in dashboard.nav">
 						<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label>
-						<input id="pulldown{{pulldown.type}}" type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
+						<input class="cr1" id="pulldown{{pulldown.type}}" type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
 						<label for="pulldown{{pulldown.type}}" class="cr1"></label>
 					</div>
 				</div>

src/app/partials/playlist.html

@@ -22,7 +22,8 @@
 								{{dashboard.title}}
 							</td>
 							<td style="text-align: center">
-								<input type="checkbox" ng-model="dashboard.include" ng-checked="dashboard.include" />
+								<input id="dash-{{$index}}" class="cr1" type="checkbox" ng-model="dashboard.include" ng-checked="dashboard.include" />
+								<label for="dash-{{$index}}" class="cr1"></label>
 							</td>
 							<td style="text-align: center">
 								<i class="icon-remove pointer" ng-click="removeAsFavorite(dashboard)"></i>

src/app/partials/roweditor.html

@@ -20,12 +20,8 @@
     <div class="editor-option">
       <label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input>
     </div>
-    <div class="editor-option">
-      <label class="small"> Editable </label><input type="checkbox" ng-model="row.editable" ng-checked="row.editable" />
-    </div>
-    <div class="editor-option">
-      <label class="small"> Show title </label><input type="checkbox" ng-model="row.showTitle" ng-checked="row.showTitle" />
-    </div>
+		<editor-opt-bool text="Editable" model="row.editable"></editor-opt-bool>
+		<editor-opt-bool text="Show title" model="row.showTitle"></editor-opt-bool>
 	</div>
   <div class="row-fluid" ng-if="editor.index == 1">
     <div class="span12">

src/app/partials/templating_editor.html

@@ -66,10 +66,10 @@
 							<label class="small">Datasource</label>
 							<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
 						</div>
-						<div class="editor-option text-center" ng-show="current.type === 'query'">
-							<label class="small">Refresh on load <tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time.</tip></label>
-							<input type="checkbox" ng-model="current.refresh" ng-checked="current.refresh">
-						</div>
+
+						<editor-opt-bool text="Refresh on load" show-if="current.type === 'query'"
+						                 tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
+						                 model="current.refresh"></editor-opt-bool>
 					</div>
 
 					<div ng-show="current.type === 'interval'">
@@ -80,10 +80,7 @@
 							</div>
 						</div>
 						<div class="editor-row">
-							<div class="editor-option text-center">
-								<label class="small">Include auto interval</label>
-								<input type="checkbox" ng-model="current.auto" ng-checked="current.auto" ng-change="runQuery()">
-							</div>
+							<editor-opt-bool text="Include auto interval" model="current.auto" change="runQuery()"></editor-opt-bool>
 							<div class="editor-option" ng-show="current.auto">
 								<label class="small">Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip></label>
 								<select class="input-mini" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
@@ -118,10 +115,7 @@
 						</div>
 
 						<div class="editor-row" style="margin: 15px 0">
-							<div class="editor-option text-center">
-								<label class="small">All option</label>
-								<input type="checkbox" ng-model="current.includeAll" ng-checked="current.includeAll" ng-change="runQuery()">
-							</div>
+							<editor-opt-bool text="All option" model="current.includeAll" change="runQuery()"></editor-opt-bool>
 							<div class="editor-option" ng-show="current.includeAll">
 								<label class="small">All format</label>
 								<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>

src/css/less/forms.less

@@ -4,7 +4,7 @@ input[type=text].input-fluid {
   padding: 14px;
 }
 
-input[type="checkbox"] {
+input[type="checkbox"].cr1 {
   display: none;
 }