fix(singlestat): update singlestat options tab styles. (#6084)

public/app/plugins/panel/singlestat/editor.html

@@ -1,207 +1,192 @@
 <div class="editor-row">
-	<div class="section tight-form-container" style="margin-bottom: 20px">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					<strong>Big value</strong>
-				</li>
-				<li class="tight-form-item">
-					Prefix
-				</li>
-				<li>
-					<input type="text" class="input-small tight-form-input"
-					ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-				<li class="tight-form-item">
-					Value
-				</li>
-				<li>
-					<select class="input-small tight-form-input"
-            ng-model="ctrl.panel.valueName"
-            ng-options="f for f in ctrl.valueNameOptions"
-            ng-change="ctrl.render()"></select>
-				</li>
-				<li class="tight-form-item">
-					Postfix
-				</li>
-				<li>
-					<input type="text" class="input-small tight-form-input last"
-					ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+	<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="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					<strong>Font size</strong>
-				</li>
-				<li class="tight-form-item">
-					Prefix
-				</li>
-				<li>
-					<select class="input-small tight-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
-				</li>
-				<li class="tight-form-item">
-					Value
-				</li>
-				<li>
-					<select class="input-small tight-form-input" ng-model="ctrl.panel.valueFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
-				</li>
-				<li class="tight-form-item">
-					Postfix
-				</li>
-				<li>
-					<select class="input-small tight-form-input last" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
-				</li>
-			</ul>
-			<div class="clearfix"></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="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					<strong>Unit</strong>
-				</li>
-				<li class="dropdown" style="width: 266px;"
+		<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-typeahead="ctrl.unitFormats"
+					dropdown-typeahead2="ctrl.unitFormats"
 					dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)">
-				</li>
-				<li class="tight-form-item">Decimals</li>
-				<li>
-					<input type="number" class="input-small tight-form-input last" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
-					ng-model="ctrl.panel.decimals" ng-change="ctrl.refresh()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+				</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="editor-row">
-	<div class="section" style="margin-bottom: 20px">
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					<strong>Coloring</strong>
-				</li>
-				<li class="tight-form-item">
-					Background&nbsp;
-					<input class="cr1" id="ctrl.panel.colorBackground" type="checkbox"
-					ng-model="ctrl.panel.colorBackground" ng-checked="ctrl.panel.colorBackground" ng-change="ctrl.render()">
-					<label for="ctrl.panel.colorBackground" class="cr1"></label>
-				</li>
-				<li class="tight-form-item">
-					Value&nbsp;
-					<input class="cr1" id="ctrl.panel.colorValue" type="checkbox"
-					ng-model="ctrl.panel.colorValue" ng-checked="ctrl.panel.colorValue" ng-change="ctrl.render()">
-					<label for="ctrl.panel.colorValue" class="cr1"></label>
-				</li>
-				<li class="tight-form-item">
-					Thresholds<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
-				</li>
-				<li>
-					<input type="text" class="input-large tight-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
-				</li>
-				<li class="tight-form-item">
-					Colors
-				</li>
-				<li class="tight-form-item">
-					<spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" ></spectrum-picker>
-					<spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" ></spectrum-picker>
-					<spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" ></spectrum-picker>
-				</li>
-				<li class="tight-form-item last">
-					<a class="pointer" ng-click="ctrl.invertColorOrder()">invert order</a>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+	<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="editor-row">
-	<div class="section" style="margin-bottom: 20px">
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					<strong>Spark lines</strong>
-				</li>
-				<li class="tight-form-item">
-					Show&nbsp;
-					<input class="cr1" id="ctrl.panel.sparkline.show" type="checkbox"
-					ng-model="ctrl.panel.sparkline.show" ng-checked="ctrl.panel.sparkline.show" ng-change="ctrl.render()">
-					<label for="ctrl.panel.sparkline.show" class="cr1"></label>
-				</li>
-				<li class="tight-form-item">
-					Background mode&nbsp;
-					<input class="cr1" id="ctrl.panel.sparkline.full" type="checkbox"
-					ng-model="ctrl.panel.sparkline.full" ng-checked="ctrl.panel.sparkline.full" ng-change="ctrl.render()">
-					<label for="ctrl.panel.sparkline.full" class="cr1"></label>
-				</li>
-				<li class="tight-form-item">
-					Line Color
-				</li>
-				<li class="tight-form-item">
-					<spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
-				</li>
-				<li class="tight-form-item">
-					Fill Color
-				</li>
-				<li class="tight-form-item last">
-					<spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+	<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="editor-row">
-	<div class="section" style="margin-bottom: 20px">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					<strong>Gauge</strong>
-				</li>
-				<li class="tight-form-item">
-					Show&nbsp;
-					<input class="cr1" id="panel.gauge.show" type="checkbox"
-					ng-model="ctrl.panel.gauge.show" ng-checked="ctrl.panel.gauge.show" ng-change="ctrl.render()">
-					<label for="panel.gauge.show" class="cr1"></label>
-				</li>
-				<li class="tight-form-item">
-					Min
-				</li>
-				<li>
-					<input type="number" class="input-small tight-form-input" ng-model="ctrl.panel.gauge.minValue" ng-blur="ctrl.render()" placeholder="0"></input>
-				</li>
-				<li class="tight-form-item last">
-					Max
-				</li>
-				<li>
-					<input type="number" class="input-small tight-form-input last" ng-model="ctrl.panel.gauge.maxValue" ng-blur="ctrl.render()" placeholder="100"></input>
-					<span class="alert-state-critical" ng-show="ctrl.invalidGaugeRange">
-						&nbsp; <i class="fa fa-warning"></i>
-						Min value is bigger than max.
-            &nbsp;
-					</span>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+	<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="tight-form last">
-			<li class="tight-form-item">
-				Threshold labels&nbsp;
-				<input class="cr1" id="panel.gauge.thresholdLabels" type="checkbox" ng-model="ctrl.panel.gauge.thresholdLabels" ng-checked="ctrl.panel.gauge.thresholdLabels" ng-change="ctrl.render()">
-				<label for="panel.gauge.thresholdLabels" class="cr1"></label>
-			</li>
-			<li class="tight-form-item">
-				Threshold markers&nbsp;
-				<input class="cr1" id="panel.gauge.thresholdMarkers" type="checkbox" ng-model="ctrl.panel.gauge.thresholdMarkers" ng-checked="ctrl.panel.gauge.thresholdMarkers" ng-change="ctrl.render()">
-				<label for="panel.gauge.thresholdMarkers" class="cr1"></label>
-			</li>
-			<div class="clearfix"></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>