From cb7424ce5e5c390e988a0d5065c43a2732857d53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 28 Sep 2015 11:53:49 +0200
Subject: [PATCH] fix(playlist ui): minor polish / fix to playlist ui, fixes
 #2831, other minor css / markup fixes

---
 public/app/panels/graph/axisEditor.html | 67 +++++++------------------
 public/app/partials/playlist.html       | 16 +++---
 public/less/variables.dark.less         |  2 +-
 public/less/variables.light.less        |  2 +-
 4 files changed, 28 insertions(+), 59 deletions(-)

diff --git a/public/app/panels/graph/axisEditor.html b/public/app/panels/graph/axisEditor.html
index d161330f5c0..41ea8dd3696 100644
--- a/public/app/panels/graph/axisEditor.html
+++ b/public/app/panels/graph/axisEditor.html
@@ -4,7 +4,7 @@
 		<div class="tight-form">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 80px">
-					<strong>Left Y</strong>
+					Left Y
 				</li>
 				<li class="tight-form-item">
 					Unit
@@ -46,10 +46,10 @@
 			</ul>
 			<div class="clearfix"></div>
 		</div>
-		<div class="tight-form">
+		<div class="tight-form last">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 80px">
-					<strong>Right Y</strong>
+					Right Y
 				</li>
 				<li class="tight-form-item">
 					Unit
@@ -97,7 +97,7 @@
 		<div class="tight-form">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 80px">
-					<strong>Show Axis</strong>
+					Show Axis
 				</li>
 				<li class="tight-form-item">
 					X-Axis&nbsp;
@@ -114,10 +114,10 @@
 			</ul>
 			<div class="clearfix"></div>
 		</div>
-		<div class="tight-form">
+		<div class="tight-form last">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 80px">
-					<strong>Thresholds</strong>
+					Thresholds
 				</li>
 				<li class="tight-form-item">
 					Level 1
@@ -140,11 +140,7 @@
 					<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
 				</li>
 				<li class="tight-form-item last">
-					Line mode&nbsp;
-					<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
-					ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
-					<label for="panel.grid.thresholdLine" class="cr1"></label>
-
+					<editor-checkbox text="Line mode" model="panel.grid.thresholdLine" change="render()"></editor-checkbox>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
@@ -157,31 +153,19 @@
 		<div class="tight-form last">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 110px">
-					<strong>Legend</strong>
+					Legend
 				</li>
 				<li class="tight-form-item">
-					Show&nbsp;
-					<input class="cr1" id="panel.legend.show" type="checkbox"
-					ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="get_data()">
-					<label for="panel.legend.show" class="cr1"></label>
+					<editor-checkbox text="Show" model="panel.legend.show" change="get_data()"></editor-checkbox>
 				</li>
 				<li class="tight-form-item">
-					Table&nbsp;
-					<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
-					ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
-					<label for="panel.legend.alignAsTable" class="cr1"></label>
+					<editor-checkbox text="Table" model="panel.legend.alignAsTable" change="render()"></editor-checkbox>
 				</li>
 				<li class="tight-form-item">
-					Right side&nbsp;
-					<input class="cr1" id="panel.legend.rightSide" type="checkbox"
-					ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
-					<label for="panel.legend.rightSide" class="cr1"></label>
+					<editor-checkbox text="Right side" model="panel.legend.rightSide" change="render()"></editor-checkbox>
 				</li>
 				<li class="tight-form-item last">
-					<span bs-tooltip="'Hides series with only null values'">Hide empty&nbsp;<span>
-					<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
-							ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
-					<label for="panel.legend.hideEmpty" class="cr1"></label>
+					<editor-checkbox text="Hide empty" model="panel.legend.hideEmpty" change="render()"></editor-checkbox>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
@@ -191,37 +175,22 @@
 		<div class="tight-form">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 105px">
-					<strong>Legend values</strong>
+					Legend values
 				</li>
 				<li class="tight-form-item">
-					Min&nbsp;
-					<input class="cr1" id="panel.legend.min" type="checkbox"
-					ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="legendValuesOptionChanged()">
-					<label for="panel.legend.min" class="cr1"></label>
+					<editor-checkbox text="Min" model="panel.legend.min" change="legendValuesOptionChanged()"></editor-checkbox>
 				</li>
 				<li class="tight-form-item">
-					Max&nbsp;
-					<input class="cr1" id="panel.legend.max" type="checkbox"
-					ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="legendValuesOptionChanged()">
-					<label for="panel.legend.max" class="cr1"></label>
+					<editor-checkbox text="Max" model="panel.legend.max" change="legendValuesOptionChanged()"></editor-checkbox>
 				</li>
 				<li class="tight-form-item">
-					Avg&nbsp;
-					<input class="cr1" id="panel.legend.avg" type="checkbox"
-					ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="legendValuesOptionChanged()">
-					<label for="panel.legend.avg" class="cr1"></label>
+					<editor-checkbox text="Avg" model="panel.legend.avg" change="legendValuesOptionChanged()"></editor-checkbox>
 				</li>
 				<li class="tight-form-item">
-					Current&nbsp;
-					<input class="cr1" id="panel.legend.current" type="checkbox"
-					ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="legendValuesOptionChanged()">
-					<label for="panel.legend.current" class="cr1"></label>
+					<editor-checkbox text="Current" model="panel.legend.current" change="legendValuesOptionChanged()"></editor-checkbox>
 				</li>
 				<li class="tight-form-item last">
-					Total&nbsp;
-					<input class="cr1" id="panel.legend.total" type="checkbox"
-					ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="legendValuesOptionChanged()">
-					<label for="panel.legend.total" class="cr1"></label>
+					<editor-checkbox text="Total" model="panel.legend.total" change="legendValuesOptionChanged()"></editor-checkbox>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
diff --git a/public/app/partials/playlist.html b/public/app/partials/playlist.html
index 664faf10837..3d12e5af2d6 100644
--- a/public/app/partials/playlist.html
+++ b/public/app/partials/playlist.html
@@ -12,10 +12,10 @@
 	</div>
 
 	<div class="gf-box-body">
-		<div class="row" style="margin-bottom: 10px;">
-			<div class="span6">
+		<div class="row-fluid" style="margin-bottom: 10px;">
+			<div class="span12">
 				<div style="display: inline-block">
-					<div class="tight-form">
+					<div class="tight-form last">
 						<ul class="tight-form-list">
 							<li class="tight-form-item">
 								Search
@@ -28,13 +28,11 @@
 					</div>
 				</div>
 			</div>
-			<div class="span6">
-				<h5>Playlist dashboards</h5>
-			</div>
 		</div>
 
-		<div class="row">
+		<div class="row-fluid">
 			<div class="span6">
+				<h5>Search result</h5>
 				<table class="grafana-options-table">
 					<tr ng-repeat="dashboard in filteredHits">
 						<td style="white-space: nowrap;">
@@ -55,6 +53,8 @@
 				</table>
 			</div>
 			<div class="span6">
+				<h5>Playlist dashboards</h5>
+
 				<table class="grafana-options-table">
 					<tr ng-repeat="dashboard in playlist">
 						<td style="white-space: nowrap;">
@@ -78,7 +78,7 @@
 		<br>
 		<br>
 		<div class="pull-left">
-			<div class="tight-form">
+			<div class="tight-form last">
 				<ul class="tight-form-list">
 					<li class="tight-form-item">
 						Timespan between dashboard change
diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less
index 708b5ad299a..3324c3f4b86 100644
--- a/public/less/variables.dark.less
+++ b/public/less/variables.dark.less
@@ -68,7 +68,7 @@
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    normal;    // instead of browser default, bold
+@headingsFontWeight:    bold;    // instead of browser default, bold
 @headingsColor:         darken(@white,11%); // empty to use BS default, @textColor
 @inputText:             @black;
 
diff --git a/public/less/variables.light.less b/public/less/variables.light.less
index 174a4529395..27dcf8575f4 100644
--- a/public/less/variables.light.less
+++ b/public/less/variables.light.less
@@ -80,7 +80,7 @@
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    normal;    // instead of browser default, bold
+@headingsFontWeight:    bold;    // instead of browser default, bold
 @headingsColor:         @textColor; // empty to use BS default, @textColor