replaced checkbox options with the new editor-opt-bool directive

src/app/directives/tip.js

@@ -24,13 +24,16 @@ function (angular, kbn) {
       return {
         restrict: 'E',
         link: function(scope, elem, attrs) {
+          var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : '';
+          var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
+
           var template = '<div class="editor-option text-center">' +
-                         ' <label for="' + attrs.name + '" class="small">' +
-                           attrs.text + '</label>' +
-                          '<input id="' + attrs.name + '" type="checkbox" ' +
-                          '       ng-model="' + attrs.model + '"' +
+                         ' <label for="' + attrs.model + '" class="small">' +
+                           attrs.text + tip + '</label>' +
+                          '<input id="' + attrs.model + '" type="checkbox" ' +
+                          '       ng-model="' + attrs.model + '"' + ngchange +
                           '       ng-checked="' + attrs.model + '"></input>' +
-                          ' <label for="' + attrs.name + '" class="cr1"></label>';
+                          ' <label for="' + attrs.model + '" class="cr1"></label>';
           elem.replaceWith($compile(angular.element(template))(scope));
         }
       };

src/app/panels/graph/axisEditor.html

@@ -40,42 +40,19 @@
 <div class="editor-row">
   <div class="section">
     <h5>Legend styles</h5>
-    <div class="editor-option">
-      <label class="small">Show Legend</label><input type="checkbox" ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render();">
-    </div>
-    <div class="editor-option">
-      <label class="small">Include Values</label><input type="checkbox" ng-model="panel.legend.values" ng-checked="panel.legend.values" ng-change="render();">
-    </div>
-    <div class="editor-option">
-      <label class="small">Align as table</label><input type="checkbox" ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable">
-    </div>
-    <div class="editor-option">
-      <label class="small">Right side</label><input type="checkbox" ng-model="panel.legend.rightSide" ng-change="render();" ng-checked="panel.legend.rightSide">
-    </div>
+		<editor-opt-bool text="Show legend" model="panel.legend.show" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Include values" model="panel.legend.values" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Align as table" model="panel.legend.alignAsTable" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Right side" model="panel.legend.rightSide" change="render()"></editor-opt-bool>
   </div>
 
   <div class="section" ng-if="panel.legend.values">
     <h5>Legend values</h5>
-    <div class="editor-option">
-      <label class="small">Min</label><input type="checkbox" ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="render();">
-    </div>
-
-    <div class="editor-option">
-      <label class="small">Max</label><input type="checkbox" ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="render();">
-    </div>
-
-    <div class="editor-option">
-      <label class="small">Current</label><input type="checkbox" ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="render();">
-    </div>
-
-    <div class="editor-option">
-      <label class="small">Total</label><input type="checkbox" ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="render();">
-    </div>
-
-    <div class="editor-option">
-      <label class="small">Avg</label><input type="checkbox" ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="render();">
-    </div>
-
+		<editor-opt-bool text="Min" model="panel.legend.min" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Max" model="panel.legend.max" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Current" model="panel.legend.current" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Total" model="panel.legend.total" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Avg" model="panel.legend.avg" change="render()"></editor-opt-bool>
   </div>
 
   <div class="section">
@@ -96,19 +73,13 @@
       <label class="small">Color</label>
       <spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
     </div>
-    <div class="editor-option">
-      <label class="small">Line mode</label><input type="checkbox" ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render();">
-    </div>
+		<editor-opt-bool text="Line mode" model="panel.grid.thresholdLine" change="render()"></editor-opt-bool>
   </div>
 
   <div class="section">
     <h5>Show Axes</h5>
-    <div class="editor-option">
-      <label class="small">X-Axis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
-    </div>
-    <div class="editor-option">
-      <label class="small">Y-Axis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
-    </div>
+		<editor-opt-bool text="X-Axis" model="panel['x-axis']" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Y-axis" model="panel['y-axis']" change="render()"></editor-opt-bool>
   </div>
 
 </div>

src/app/panels/graph/styleEditor.html

@@ -1,21 +1,9 @@
 <div class="editor-row">
   <div class="section">
     <h5>Chart Options</h5>
-    <div class="editor-option text-center">
-			<label for="barsCheck" class="small">Bars</label>
-			<input id="barsCheck" type="checkbox" ng-model="panel.bars" ng-checked="panel.bars" ng-change="render()">
-			<label for="barsCheck" class="cr1"></label>
-    </div>
-    <div class="editor-option text-center">
-			<label for="linesCheck" class="small">Lines</label>
-			<input id="linesCheck" type="checkbox" ng-model="panel.lines" ng-checked="panel.lines" ng-change="render()">
-			<label for="linesCheck" class="cr1"></label>
-    </div>
-    <div class="editor-option text-center">
-			<label for="pointsCheck" class="small">Points</label>
-			<input id="pointsCheck" type="checkbox" ng-model="panel.points" ng-checked="panel.points" ng-change="render()">
-			<label for="pointsCheck" class="cr1"></label>
-    </div>
+		<editor-opt-bool text="Bars" model="panel.bars" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Lines" model="panel.lines" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Points" model="panel.points" change="render()"></editor-opt-bool>
   </div>
 
   <div class="section">
@@ -36,19 +24,15 @@
       <label class="small">Null point mode<tip>Define how null values should be drawn</tip></label>
       <select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="render()"></select>
     </div>
-    <div class="editor-option">
-      <label class="small">Staircase line</label><input type="checkbox" ng-model="panel.steppedLine" ng-checked="panel.steppedLine" ng-change="render()">
-    </div>
+
+		<editor-opt-bool text="Staircase line" model="panel.steppedLine" change="render()"></editor-opt-bool>
   </div>
   <div class="section">
     <h5>Multiple Series</h5>
-    <div class="editor-option">
-      <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack" ng-change="render()">
-    </div>
-    <div class="editor-option" ng-show="panel.stack">
-      <label style="white-space:nowrap" class="small">Percent <tip>Stack as a percentage of total</tip></label>
-      <input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage" ng-change="render()">
-    </div>
+
+		<editor-opt-bool text="Stack" model="panel.stack" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Percent" model="panel.percentage" change="render()" tip="Stack as a percentage of total"></editor-opt-bool>
+
     <div class="editor-option" ng-show="panel.stack">
       <label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?</tip></label>
       <select class="input-small" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="render()"></select>

src/app/partials/annotations_editor.html

@@ -61,10 +61,7 @@
 					<label class="small">Icon size</label>
 					<select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
 				</div>
-				<div class="editor-option">
-					<label class="small">Grid line</label>
-					<input type="checkbox" ng-model="currentAnnotation.showLine" ng-checked="currentAnnotation.showLine">
-				</div>
+				<editor-opt-bool text="Grid line" model="currentAnnotation.showLine"></editor-opt-bool>
 				<div class="editor-option">
 					<label class="small">Line color</label>
 					<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>

src/app/partials/dasheditor.html

@@ -28,11 +28,7 @@
 						<label class="small">Time correction</label>
 						<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
 					</div>
-					<div class="editor-option text-center">
-						<label for="hideControls" class="small">Hide controls (CTRL+H)</label>
-						<input id="hideControls" type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
-						<label for="hideControls" class="cr1"></label>
-					</div>
+					<editor-opt-bool text="Hide controls (CTRL+H)" model="dashboard.hideControls"></editor-opt-bool>
 				</div>
 			</div>
 			<div class="editor-row">
@@ -72,16 +68,8 @@
 		<div ng-if="editor.index == 2">
 			<div class="editor-row">
 				<div class="section">
-					<div class="editor-option text-center">
-						<label for="templateFeature" class="small">Templating</label>
-						<input id="templateFeature" type="checkbox" ng-model="dashboard.templating.enable" ng-checked="dashboard.templating.enable" ng-change="checkFeatureToggles()"x >
-						<label for="templateFeature" class="cr1"></label>
-					</div>
-					<div class="editor-option text-center">
-						<label for="annotationFeature" class="small">Annotations</label>
-						<input id="annotationFeature" type="checkbox" ng-model="dashboard.annotations.enable" ng-checked="dashboard.annotations.enable" ng-change="checkFeatureToggles()">
-						<label for="annotationFeature" class="cr1"></label>
-					</div>
+					<editor-opt-bool text="Templating" model="dashboard.templating.enable"></editor-opt-bool>
+					<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">