Updated design of singlestat options view, it now uses the new unit format selector, #1331

src/app/panels/singlestat/editor.html

@@ -1,113 +1,189 @@
 <div class="editor-row">
-	<div class="section">
-    <h5>Big value</h5>
-		<div class="editor-option">
-			<label class="small">Prefix</label>
-			<input type="text" class="input-small" ng-model="panel.prefix" ng-blur="render()"></input>
-		</div>
-		<div class="editor-option">
-			<label class="small">Value</label>
-			<select class="input-small" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
-		</div>
-		<div class="editor-option">
-			<label class="small">Postfix</label>
-			<input type="text" class="input-small" ng-model="panel.postfix" ng-blur="render()" ng-trim="false"></input>
-		</div>
-    <div class="editor-option">
-      <label class="small">Null point mode<tip>Define how null values should handled, connected = ignored</tip></label>
-      <select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="get_data()"></select>
-    </div>
-	</div>
-
-	<div class="section">
-    <h5>Big value font size</h5>
-		<div class="editor-option">
-			<label class="small">Prefix</label>
-			<select class="input-mini" style="width: 75px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-		</div>
-		<div class="editor-option">
-			<label class="small">Value</label>
-			<select class="input-mini" style="width: 75px;" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-		</div>
-		<div class="editor-option">
-			<label class="small">Postfix</label>
-			<select class="input-mini" style="width: 75px;" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-		</div>
-	</div>
-
-	<div class="section">
-    <h5>Formats</h5>
-		<div class="editor-option">
-			<label class="small">Unit format</label>
-			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'kbytes', 'bits', 'Bps', 'bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Big value</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Prefix
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input"
+					  	ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
+					</li>
+					<li class="grafana-target-segment">
+						Value
+					</li>
+					<li>
+						<select class="input-small grafana-target-segment-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
+					</li>
+					<li class="grafana-target-segment">
+						Postfix
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input last"
+					  	ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Font size</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Prefix
+					</li>
+					<li>
+						<select class="input-small grafana-target-segment-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+					</li>
+					<li class="grafana-target-segment">
+						Value
+					</li>
+					<li>
+						<select class="input-small grafana-target-segment-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+					</li>
+					<li class="grafana-target-segment">
+						Postfix
+					</li>
+					<li>
+						<select class="input-small grafana-target-segment-input last" style="width: 99px" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Unit</strong>
+					</li>
+					<li class="dropdown" style="width: 130px;"
+						ng-model="panel.format"
+						dropdown-typeahead="unitFormats"
+						dropdown-typeahead-on-select="setUnitFormat($subItem)">
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 		</div>
 	</div>
 </div>
 
 <div class="editor-row">
-	<div class="section">
-    <h5>Coloring</h5>
-		<editor-opt-bool text="Background" model="panel.colorBackground" change="setColoring({background: true})"></editor-opt-bool>
-		<editor-opt-bool text="Value" model="panel.colorValue" change="setColoring({value: true})"></editor-opt-bool>
-		<div class="editor-option" ng-show="panel.colorBackground || panel.colorValue">
-			<label class="small">Thresholds<tip>Comma seperated values</tip></label>
-			<input type="text" class="input-large" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
-		</div>
-		<div class="editor-option" ng-show="panel.colorBackground || panel.colorValue">
-      <label class="small">Colors</label>
-      <spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
-      <spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
-			<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
-			<a class="pointer" ng-click="invertColorOrder()">invert order</a>
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Coloring</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Background&nbsp;
+						<input class="cr1" id="panel.colorBackground" type="checkbox"
+						    ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()">
+						<label for="panel.colorBackground" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment">
+						Value&nbsp;
+						<input class="cr1" id="panel.colorValue" type="checkbox"
+						    ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()">
+						<label for="panel.colorValue" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment">
+						Thresholds<tip>Comma seperated values</tip>
+					</li>
+					<li>
+						<input type="text" class="input-large grafana-target-segment-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
+					</li>
+					<li class="grafana-target-segment">
+						Colors
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
+						<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
+						<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
+					</li>
+					<li class="grafana-target-segment last">
+						<a class="pointer" ng-click="invertColorOrder()">invert order</a>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 		</div>
 	</div>
+</div>
 
-	<div class="section">
-		<h5>Spark lines</h5>
-		<editor-opt-bool text="Spark line" model="panel.sparkline.show" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Background mode" model="panel.sparkline.full" change="render()"></editor-opt-bool>
-		<div class="editor-option">
-			<label class="small">Line color</label>
-			<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
-		</div>
-		<div class="editor-option">
-			<label class="small">Fill color</label>
-			<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
+<div class="editor-row">
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Spark lines</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Show&nbsp;
+						<input class="cr1" id="panel.sparkline.show" type="checkbox"
+						    ng-model="panel.sparkline.show" ng-checked="panel.sparkline.show" ng-change="render()">
+						<label for="panel.sparkline.show" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment">
+						Background mode&nbsp;
+						<input class="cr1" id="panel.sparkline.full" type="checkbox"
+						    ng-model="panel.sparkline.full" ng-checked="panel.sparkline.full" ng-change="render()">
+						<label for="panel.sparkline.full" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment">
+						Line Color
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
+					</li>
+					<li class="grafana-target-segment">
+						Fill Color
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 		</div>
 	</div>
 </div>
 
 <div class="editor-row">
-	<div class="section">
-		<h5>Value to text mapping</h5>
-		<div class="editor-option">
-			<label class="small">Specify mappings</label>
-			<div class="grafana-target">
-				<div class="grafana-target-inner">
-					<ul class="grafana-segment-list">
-						<li class="grafana-target-segment"  ng-repeat-start="map in panel.valueMaps">
-							<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
-						</li>
-
-						<li>
-							<input type="text" ng-model="map.value" placeholder="value" class="input-mini grafana-target-segment-input" ng-blur="render()">
-						</li>
-						<li class="grafana-target-segment">
-							<i class="fa fa-arrow-right"></i>
-						</li>
-						<li ng-repeat-end>
-							<input type="text" placeholder="text" ng-model="map.text" class="input-mini grafana-target-segment-input" ng-blur="render()">
-						</li>
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment">
+						<strong>Value to text mapping</strong>
+					</li>
+					<li class="grafana-target-segment"  ng-repeat-start="map in panel.valueMaps">
+						<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
+					</li>
+					<li>
+						<input type="text" ng-model="map.value" placeholder="value" class="input-mini grafana-target-segment-input" ng-blur="render()">
+					</li>
+					<li class="grafana-target-segment">
+						<i class="fa fa-arrow-right"></i>
+					</li>
+					<li ng-repeat-end>
+						<input type="text" placeholder="text" ng-model="map.text" class="input-mini grafana-target-segment-input" ng-blur="render()">
+					</li>
 
-						<li>
-							<a class="pointer grafana-target-segment" ng-click="addValueMap();">
-								<i class="fa fa-plus"></i>
-							</a>
-						</li>
+					<li>
+						<a class="pointer grafana-target-segment" ng-click="addValueMap();">
+							<i class="fa fa-plus"></i>
+						</a>
+					</li>
 
-					</ul>
-					<div class="clearfix"></div>
-				</div>
+				</ul>
+				<div class="clearfix"></div>
 			</div>
 		</div>
 	</div>

src/app/panels/singlestat/module.js

@@ -57,6 +57,12 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) {
     };
 
     _.defaults($scope.panel, _d);
+    $scope.unitFormats = kbn.getUnitFormats();
+
+    $scope.setUnitFormat = function(subItem) {
+      $scope.panel.format = subItem.value;
+      $scope.render();
+    };
 
     $scope.init = function() {
       panelSrv.init($scope);

src/css/less/grafana.less

@@ -236,6 +236,9 @@ select.grafana-target-segment-input {
   border-radius: 0;
   height: 36px;
   padding: 8px 5px;
+  &.last {
+    border-right: none;
+  }
 }
 
 .grafana-target .dropdown {