From 7c10af012eb40bcc6a7e7c3e8d8fec70accc7464 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 21 Sep 2016 10:56:17 +0200
Subject: [PATCH] feat(singlestat): slight layout changes to options tab

---
 .../app/plugins/panel/singlestat/editor.html  | 307 +++++++-----------
 1 file changed, 120 insertions(+), 187 deletions(-)

diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html
index a4fd27bd080..e4e8446934a 100644
--- a/public/app/plugins/panel/singlestat/editor.html
+++ b/public/app/plugins/panel/singlestat/editor.html
@@ -1,192 +1,125 @@
 <div class="editor-row">
-	<div class="section gf-form-group">
-		<div class="gf-form-inline">
-			<div class="gf-form">
-				<label class="gf-form-label width-6"><strong>Big value</strong></label>
-			</div>
-			<div class="gf-form max-width-11">
-				<label class="gf-form-label width-4">Prefix</label>
-				<input type="text" class="gf-form-input" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
-			</div>
-			<div class="gf-form max-width-10">
-				<label class="gf-form-label width-4">Value</label>
-				<div class="gf-form-select-wrapper max-width-15">
-					<select class="gf-form-input"
-							ng-model="ctrl.panel.valueName"
-							ng-options="f for f in ctrl.valueNameOptions"
-							ng-change="ctrl.render()"></select>
-				</div>
-			</div>
-			<div class="gf-form max-width-12">
-				<label class="gf-form-label width-5">Postfix</label>
-				<input type="text" class="gf-form-input last" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
-			</div>
-		</div>
-		<div class="gf-form-inline">
-			<div class="gf-form">
-				<label class="gf-form-label width-6"><strong>Font size</strong></label>
-			</div>
-			<div class="gf-form max-width-11">
-				<label class="gf-form-label width-4">Prefix</label>
-				<div class="gf-form-select-wrapper max-width-15">
-					<select class="gf-form-input"
-							ng-model="ctrl.panel.prefixFontSize"
-							ng-options="f for f in ctrl.fontSizes"
-							ng-change="ctrl.render()"></select>
-				</div>
-			</div>
-			<div class="gf-form max-width-10">
-				<label class="gf-form-label width-4">Value</label>
-				<div class="gf-form-select-wrapper max-width-15">
-					<select class="gf-form-input"
-							ng-model="ctrl.panel.valueFontSize"
-							ng-options="f for f in ctrl.fontSizes"
-							ng-change="ctrl.render()"></select>
-				</div>
-			</div>
-			<div class="gf-form max-width-12">
-				<label class="gf-form-label width-5">Postfix</label>
-				<div class="gf-form-select-wrapper max-width-15">
-					<select class="input-small gf-form-input last"
-							ng-model="ctrl.panel.postfixFontSize"
-							ng-options="f for f in ctrl.fontSizes"
-							ng-change="ctrl.render()"></select>
-				</div>
-			</div>
-		</div>
-		<div class="gf-form-inline">
-			<div class="gf-form">
-				<label class="gf-form-label width-6"><strong>Unit</strong></label>
-			</div>
-			<div class="gf-form max-width-15">
-				<div class="gf-form-dropdown-typeahead max-width-19"
-					ng-model="ctrl.panel.format"
-					dropdown-typeahead2="ctrl.unitFormats"
-					dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)">
-				</div>
-			</div>
-			<div class="gf-form max-width-11">
-				<label class="gf-form-label width-6">Decimals</label>
-				<input type="number" class="gf-form-input"
-					placeholder="auto" data-placement="right"
-					bs-tooltip="'Override automatic decimal precision for legend and tooltips'"
-					ng-model="ctrl.panel.decimals"
-					ng-change="ctrl.refresh()"
-					ng-model-onblur>
-			</div>
-		</div>
-	</div>
-</div>
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Value</h5>
 
-<div class="editor-row">
-	<h5 class="section-heading">Coloring</h5>
-	<div class="section gf-form-group">
-		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label-class="width-8"
-				label="Background"
-				checked="ctrl.panel.colorBackground"
-				on-change="ctrl.render()"></gf-form-switch>
-			<gf-form-switch class="gf-form" label-class="width-4"
-				label="Value"
-				checked="ctrl.panel.colorValue"
-				on-change="ctrl.render()"></gf-form-switch>
-		</div>
-		<div class="gf-form-inline">
-			<div class="gf-form max-width-21">
-				<label class="gf-form-label width-8">Thresholds
-					<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
-				</label>
-				<input type="text" class="gf-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
-			</div>
-			<div class="gf-form">
-				<label class="gf-form-label width-5">Colors</label>
-				<span class="gf-form-label">
-				  <spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" ></spectrum-picker>
-				</span>
-				<span class="gf-form-label">
-				  <spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" ></spectrum-picker>
-				</span>
-				<span class="gf-form-label">
-				  <spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" ></spectrum-picker>
-				</span>
-				<div class="gf-form-button">
-				  <button class="btn btn-inverse" ng-click="ctrl.invertColorOrder()">
-				    invert order
-				  </button>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-4">Stat</label>
+        <div class="gf-form-select-wrapper width-7">
+          <select class="gf-form-input" ng-model="ctrl.panel.valueName" ng-options="f for f in ctrl.valueNameOptions" ng-change="ctrl.render()"></select>
+        </div>
+        <label class="gf-form-label width-6">Font size</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input" ng-model="ctrl.panel.valueFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
+        </div>
+      </div>
+    </div>
 
-<div class="editor-row">
-	<h5 class="section-heading">Spark lines</h5>
-	<div class="section gf-form-group">
-		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label-class="width-4"
-				label="Show"
-				checked="ctrl.panel.sparkline.show"
-				on-change="ctrl.render()"></gf-form-switch>
-			<gf-form-switch class="gf-form" label-class="width-10"
-				label="Background mode"
-				checked="ctrl.panel.sparkline.full"
-				on-change="ctrl.render()"></gf-form-switch>
-			<div class="gf-form">
-				<label class="gf-form-label width-6">Line Color</label>
-				<span class="gf-form-label">
-				  <spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
-				</span>
-			</div>
-			<div class="gf-form">
-				<label class="gf-form-label width-6">Fill Color</label>
-				<span class="gf-form-label">
-				  <spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
-				</span>
-			</div>
-		</div>
-	</div>
-</div>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-4">Prefix</label>
+        <input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
+        <label class="gf-form-label width-6">Font size</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
+        </div>
+      </div>
+    </div>
 
-<div class="editor-row">
-	<h5 class="section-heading">Gauge</h5>
-	<div class="section gf-form-group">
-		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label-class="width-4"
-				label="Show"
-				checked="ctrl.panel.gauge.show"
-				on-change="ctrl.render()"></gf-form-switch>
-			<div class="gf-form max-width-11">
-				<label class="gf-form-label width-4">Min</label>
-				<input type="number" class="gf-form-input"
-					placeholder="0" data-placement="right"
-					ng-model="ctrl.panel.gauge.minValue"
-					ng-change="ctrl.refresh()"
-					ng-model-onblur>
-			</div>
-			<div class="gf-form max-width-11">
-				<label class="gf-form-label width-4">Max</label>
-				<input type="number" class="gf-form-input"
-					placeholder="0" data-placement="right"
-					ng-model="ctrl.panel.gauge.maxValue"
-					ng-change="ctrl.refresh()"
-					ng-model-onblur>
-			</div>
-			<div class="gf-form" ng-show="ctrl.invalidGaugeRange">
-				<label class="gf-form-label alert-state-critical">
-					&nbsp; <i class="fa fa-warning"></i>
-					Min value is bigger than max.
-				</label>
-			</div>
-		</div>
-		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label-class="width-10"
-				label="Threshold labels"
-				checked="ctrl.panel.gauge.thresholdLabels"
-				on-change="ctrl.render()"></gf-form-switch>
-			<gf-form-switch class="gf-form" label-class="width-11"
-				label="Threshold markers"
-				checked="ctrl.panel.gauge.thresholdMarkers"
-				on-change="ctrl.render()"></gf-form-switch>
-		</div>
-	</div>
+    <div class="gf-form">
+      <label class="gf-form-label width-4">Postfix</label>
+      <input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
+      <label class="gf-form-label width-6">Font size</label>
+      <div class="gf-form-select-wrapper">
+        <select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
+      </div>
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Unit</h5>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <div class="gf-form-dropdown-typeahead" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label">Decimals</label>
+        <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" ng-model="ctrl.panel.decimals" ng-change="ctrl.refresh()" ng-model-onblur>
+      </div>
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Coloring</h5>
+    <div class="gf-form-inline">
+      <gf-form-switch class="gf-form" label-class="width-8" label="Background" checked="ctrl.panel.colorBackground" on-change="ctrl.render()"></gf-form-switch>
+      <gf-form-switch class="gf-form" label-class="width-4" label="Value" checked="ctrl.panel.colorValue" on-change="ctrl.render()"></gf-form-switch>
+    </div>
+    <div class="gf-form-inline">
+      <div class="gf-form max-width-21">
+        <label class="gf-form-label width-8">Thresholds
+          <tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
+        </label>
+        <input type="text" class="gf-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Colors</label>
+      <span class="gf-form-label">
+        <spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" ></spectrum-picker>
+      </span>
+      <span class="gf-form-label">
+        <spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" ></spectrum-picker>
+      </span>
+      <span class="gf-form-label">
+        <spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" ></spectrum-picker>
+      </span>
+      <span class="gf-form-label">
+        <a  ng-click="ctrl.invertColorOrder()">
+          Invert
+        </a>
+      </span>
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Spark lines</h5>
+    <gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.sparkline.show" on-change="ctrl.render()"></gf-form-switch>
+    <div ng-if="ctrl.panel.sparkline.show">
+      <gf-form-switch class="gf-form" label-class="width-9" label="Background mode" checked="ctrl.panel.sparkline.full" on-change="ctrl.render()"></gf-form-switch>
+      <div class="gf-form">
+        <label class="gf-form-label width-9">Line Color</label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
+        </span>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-9">Fill Color</label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Gauge</h5>
+    <gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.gauge.show" on-change="ctrl.render()"></gf-form-switch>
+    <div ng-if="ctrl.panel.gauge.show">
+      <div class="gf-form">
+        <label class="gf-form-label width-9">Min</label>
+        <input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.minValue" ng-change="ctrl.refresh()" ng-model-onblur>
+        <label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange">
+          &nbsp; <i class="fa fa-warning"></i>
+          Min value is bigger than max.
+        </label>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-9">Max</label>
+        <input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.maxValue" ng-change="ctrl.refresh()" ng-model-onblur>
+      </div>
+      <gf-form-switch class="gf-form" label-class="width-9" label="Threshold labels" checked="ctrl.panel.gauge.thresholdLabels" on-change="ctrl.render()"></gf-form-switch>
+      <gf-form-switch class="gf-form" label-class="width-9" label="Threshold markers" checked="ctrl.panel.gauge.thresholdMarkers" on-change="ctrl.render()"></gf-form-switch>
+    </div>
+  </div>
 </div>