Refactored away the graphite-target-inner / tight-form-row

src/app/features/graphite/funcEditor.js

@@ -126,7 +126,7 @@ function (angular, _, $) {
           }
 
           function toggleFuncControls() {
-            var targetDiv = elem.closest('.tight-form-row');
+            var targetDiv = elem.closest('.tight-form');
 
             if (elem.hasClass('show-function-controls')) {
               elem.removeClass('show-function-controls');

src/app/features/graphite/partials/query.editor.html

@@ -5,8 +5,6 @@
         ng-class="{'tight-form-disabled': target.hide}"
         ng-controller="GraphiteQueryCtrl"
         ng-init="init()">
-
-    <div class="tight-form-row">
       <ul class="tight-form-list pull-right">
         <li ng-show="parserError" class="tight-form-item">
           <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
@@ -86,80 +84,75 @@
       </ul>
       <div class="clearfix"></div>
     </div>
-  </div>
-
 </div>
 
 <section class="grafana-metric-options">
 	<div class="tight-form">
-		<div class="tight-form-row">
-			<ul class="tight-form-list">
-				<li class="tight-form-item tight-form-item-icon">
-					<i class="fa fa-wrench"></i>
-				</li>
-				<li class="tight-form-item">
-					Cache timeout
-				</li>
-				<li>
-					<input type="text"
-								class="input-mini tight-form-input"
-								ng-model="panel.cacheTimeout"
-								bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
-								data-placement="right"
-								spellcheck='false'
-								placeholder="60">
-				</li>
-				<li class="tight-form-item">
-					Max data points
-				</li>
-				<li>
-					<input type="text"
-								class="input-mini tight-form-input"
-								ng-model="panel.maxDataPoints"
-								bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
-								data-placement="right"
-								ng-model-onblur ng-change="get_data()"
-								spellcheck='false'
-								placeholder="auto">
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="tight-form-row">
-			<ul class="tight-form-list">
-				<li class="tight-form-item tight-form-item-icon">
-					<i class="fa fa-info-circle"></i>
-				</li>
-				<li class="tight-form-item">
-					<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						shorter legend names
-					</a>
-				</li>
-				<li class="tight-form-item">
-					<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						series as parameters
-					</a>
-				</li>
-				<li class="tight-form-item">
-					<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						stacking
-					</a>
-				</li>
-				<li class="tight-form-item">
-					<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						templating
-					</a>
-				</li>
-				<li class="tight-form-item">
-					<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						max data points
-					</a>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
+		<ul class="tight-form-list">
+			<li class="tight-form-item tight-form-item-icon">
+				<i class="fa fa-wrench"></i>
+			</li>
+			<li class="tight-form-item">
+				Cache timeout
+			</li>
+			<li>
+				<input type="text"
+				class="input-mini tight-form-input"
+				ng-model="panel.cacheTimeout"
+				bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
+				data-placement="right"
+				spellcheck='false'
+				placeholder="60">
+			</li>
+			<li class="tight-form-item">
+				Max data points
+			</li>
+			<li>
+				<input type="text"
+				class="input-mini tight-form-input"
+				ng-model="panel.maxDataPoints"
+				bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
+				data-placement="right"
+				ng-model-onblur ng-change="get_data()"
+				spellcheck='false'
+				placeholder="auto">
+			</li>
+		</ul>
+		<div class="clearfix"></div>
+	</div>
+	<div class="tight-form">
+		<ul class="tight-form-list">
+			<li class="tight-form-item tight-form-item-icon">
+				<i class="fa fa-info-circle"></i>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					shorter legend names
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					series as parameters
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					stacking
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					templating
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					max data points
+				</a>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
 	</div>
- </div>
 </section>
 
 <div class="editor-row">

src/app/features/influxdb/partials/query.editor.html

@@ -1,11 +1,6 @@
 <div class="editor-row">
-
-  <div  ng-repeat="target in panel.targets"
-        class="tight-form"
-        ng-class="{'tight-form-disabled': target.hide}"
-        ng-controller="InfluxQueryCtrl"
-        ng-init="init()">
-    <div class="tight-form-row">
+	<div ng-repeat="target in panel.targets" ng-controller="InfluxQueryCtrl" ng-init="init()" ng-class="{'tight-form-disabled': target.hide}" class="tight-form-container">
+		<div class="tight-form">
 			<ul class="tight-form-list pull-right">
 				<li class="tight-form-item">
 					<div class="dropdown">
@@ -35,41 +30,41 @@
 					<a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
 						<i class="fa fa-eye"></i>
 					</a>
-        </li>
-      </ul>
+				</li>
+			</ul>
 
 			<!-- Raw Query mode  -->
 			<ul class="tight-form-list" ng-show="target.rawQuery">
 				<li>
 					<input type="text"
-             class="tight-form-input span10"
-             ng-model="target.query"
-             placeholder="select ..."
-             focus-me="target.rawQuery"
-             spellcheck='false'
-             data-min-length=0 data-items=100
-             ng-model-onblur
-						 ng-blur="get_data()">
+					class="tight-form-input span10"
+					ng-model="target.query"
+					placeholder="select ..."
+					focus-me="target.rawQuery"
+					spellcheck='false'
+					data-min-length=0 data-items=100
+					ng-model-onblur
+					ng-blur="get_data()">
 				</li>
 			</ul>
 
 			<!-- Query editor mode -->
-      <ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
+			<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
 				<li class="tight-form-item">
 					series
 				</li>
-        <li>
-          <input type="text"
-                 class="tight-form-input span8"
-                 ng-model="target.series"
-                 spellcheck='false'
-                 bs-typeahead="listSeries"
-                 match-all="true"
-                 min-length="3"
-                 placeholder="series name"
-                 data-min-length=0 data-items=100
-                 ng-blur="seriesBlur()">
-        </li>
+				<li>
+					<input type="text"
+					class="tight-form-input span8"
+					ng-model="target.series"
+					spellcheck='false'
+					bs-typeahead="listSeries"
+					match-all="true"
+					min-length="3"
+					placeholder="series name"
+					data-min-length=0 data-items=100
+					ng-blur="seriesBlur()">
+				</li>
 
 				<li class="tight-form-item">
 					alias
@@ -80,41 +75,41 @@
 					spellcheck='false' placeholder="alias" ng-blur="get_data()">
 				</li>
 
-      </ul>
+			</ul>
 
-      <div class="clearfix"></div>
-    </div>
+			<div class="clearfix"></div>
+		</div>
 
-    <div class="tight-form-row">
+		<div class="tight-form">
 			<!-- Raw Query mode  -->
 			<ul class="tight-form-list" ng-show="target.rawQuery">
 				<li class="tight-form-item">
 					<i class="fa fa-eye invisible"></i>
 				</li>
 				<li class="tight-form-item">
-          alias
-        </li>
-        <li>
-          <input type="text"
-                 class="input-medium tight-form-input"
-                 ng-model="target.alias"
-                 spellcheck='false'
-                 placeholder="alias"
-                 ng-blur="get_data()">
-        </li>
+					alias
+				</li>
+				<li>
+					<input type="text"
+					class="input-medium tight-form-input"
+					ng-model="target.alias"
+					spellcheck='false'
+					placeholder="alias"
+					ng-blur="get_data()">
+				</li>
 				<li class="tight-form-item">
 					group by time
 				</li>
 				<li>
 					<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
-								 spellcheck='false' placeholder="{{interval}}" data-placement="right"
-								 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
-								 ng-model-onblur ng-change="get_data()" >
+					spellcheck='false' placeholder="{{interval}}" data-placement="right"
+					bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
+					ng-model-onblur ng-change="get_data()" >
 				</li>
 			</ul>
 
 			<!-- Query editor mode -->
-      <ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
+			<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
 				<li class="tight-form-item">
 					<i class="fa fa-eye invisible"></i>
 				</li>
@@ -131,7 +126,7 @@
 				</li>
 				<li>
 					<input type="text" class="input-medium tight-form-input" ng-model="target.condition"
-								 bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
+					bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
 				</li>
 
 				<li class="tight-form-item">
@@ -139,9 +134,9 @@
 				</li>
 				<li>
 					<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
-								 spellcheck='false' placeholder="{{interval}}" data-placement="right"
-								 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
-								 ng-model-onblur ng-change="get_data()" >
+					spellcheck='false' placeholder="{{interval}}" data-placement="right"
+					bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
+					ng-model-onblur ng-change="get_data()" >
 				</li>
 
 				<li class="tight-form-item">
@@ -150,7 +145,7 @@
 
 				<li>
 					<input type="text" class="input-small tight-form-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
-								 placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
+					placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
 				</li>
 
 				<li class="dropdown">
@@ -161,65 +156,61 @@
 						<span ng-show="!target.fill">
 							no fill
 						</span>
-				  </a>
+					</a>
 					<ul class="dropdown-menu">
 						<li><a ng-click="target.fill = ''">no fill</a></li>
 						<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
 						<li><a ng-click="target.fill = '0'">fill (0)</a></li>
 					</ul>
 				</li>
-
-      </ul>
-
-      <div class="clearfix"></div>
-    </div>
-  </div>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
 </div>
 
 <section class="grafana-metric-options">
 	<div class="tight-form">
-		<div class="tight-form-row">
-			<ul class="tight-form-list">
-				<li class="tight-form-item tight-form-item-icon">
-					<i class="fa fa-wrench"></i>
-				</li>
-				<li class="tight-form-item">
-					group by time
-				</li>
-				<li>
-					<input type="text" class="input-medium tight-form-input" ng-model="panel.interval" ng-blur="get_data();"
-					       spellcheck='false' placeholder="example: >10s">
-				</li>
-				<li class="tight-form-item">
-					<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
+		<ul class="tight-form-list">
+			<li class="tight-form-item tight-form-item-icon">
+				<i class="fa fa-wrench"></i>
+			</li>
+			<li class="tight-form-item">
+				group by time
+			</li>
+			<li>
+				<input type="text" class="input-medium tight-form-input" ng-model="panel.interval" ng-blur="get_data();"
+				spellcheck='false' placeholder="example: >10s">
+			</li>
+			<li class="tight-form-item">
+				<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
+	</div>
 
-		<div class="tight-form-row">
-			<ul class="tight-form-list">
-				<li class="tight-form-item tight-form-item-icon">
-					<i class="fa fa-info-circle"></i>
-				</li>
-				<li class="tight-form-item">
-					<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						alias patterns
-					</a>
-				</li>
-				<li class="tight-form-item">
-					<a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						stacking &amp; and fill
-					</a>
-				</li>
-				<li class="tight-form-item">
-					<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						group by time
-					</a>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
+	<div class="tight-form">
+		<ul class="tight-form-list">
+			<li class="tight-form-item tight-form-item-icon">
+				<i class="fa fa-info-circle"></i>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					alias patterns
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					stacking &amp; and fill
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					group by time
+				</a>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
 	</div>
 </section>
 

src/app/features/opentsdb/partials/query.editor.html

@@ -1,10 +1,12 @@
 <div class="editor-row" style="margin-top: 10px;">
+
   <div  ng-repeat="target in panel.targets"
-        class="tight-form"
+        class="tight-form-container"
         ng-class="{'tight-form-disabled': target.hide}"
         ng-controller="OpenTSDBQueryCtrl"
         ng-init="init()">
-    <div class="tight-form-row">
+
+    <div class="tight-form">
 			<ul class="tight-form-list pull-right">
 				<li class="tight-form-item">
 					<div class="dropdown">
@@ -134,7 +136,7 @@
       <div class="clearfix"></div>
     </div>
 
-    <div class="tight-form-row">
+    <div class="tight-form">
       <ul class="tight-form-list" role="menu">
 
         <li class="tight-form-item">
@@ -209,7 +211,6 @@
             </a>
         </li>
       </ul>
-
       <div class="clearfix"></div>
     </div>
   </div>

src/app/features/panellinkeditor/module.html

@@ -3,44 +3,42 @@
 		<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
 
 		<div class="tight-form" ng-repeat="link in panel.links"j>
-			<div class="tight-form-row">
-				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
-					</li>
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
+				</li>
 
-					<li class="tight-form-item">title</li>
-					<li>
-						<input type="text" ng-model="link.title" class="input-medium tight-form-input">
-					</li>
+				<li class="tight-form-item">title</li>
+				<li>
+					<input type="text" ng-model="link.title" class="input-medium tight-form-input">
+				</li>
 
-					<li class="tight-form-item">type</li>
-					<li>
-						<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
-					</li>
+				<li class="tight-form-item">type</li>
+				<li>
+					<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
+				</li>
 
-					<li class="tight-form-item" ng-show="link.type === 'dashboard'">dashboard</li>
-					<li ng-show="link.type === 'dashboard'">
-						<input type="text"
-						       ng-model="link.dashboard"
-									 bs-typeahead="searchDashboards"
-									 class="input-large tight-form-input">
-					</li>
+				<li class="tight-form-item" ng-show="link.type === 'dashboard'">dashboard</li>
+				<li ng-show="link.type === 'dashboard'">
+					<input type="text"
+					ng-model="link.dashboard"
+					bs-typeahead="searchDashboards"
+					class="input-large tight-form-input">
+				</li>
 
-					<li class="tight-form-item" ng-show="link.type === 'absolute'">url</li>
-					<li ng-show="link.type === 'absolute'">
-						<input type="text" ng-model="link.url" class="input-large tight-form-input">
-					</li>
+				<li class="tight-form-item" ng-show="link.type === 'absolute'">url</li>
+				<li ng-show="link.type === 'absolute'">
+					<input type="text" ng-model="link.url" class="input-large tight-form-input">
+				</li>
 
-					<li class="tight-form-item">params
-						<tip>Use var-variableName=value to pass templating variables.</tip>
-					</li>
-					<li>
-						<input type="text" ng-model="link.params" class="input-medium tight-form-input">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+				<li class="tight-form-item">params
+					<tip>Use var-variableName=value to pass templating variables.</tip>
+				</li>
+				<li>
+					<input type="text" ng-model="link.params" class="input-medium tight-form-input">
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>

src/app/panels/graph/axisEditor.html

@@ -2,144 +2,140 @@
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
 		<div class="tight-form">
-			<div class="tight-form-row">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 80px">
-						<strong>Left Y</strong>
-					</li>
-					<li class="tight-form-item">
-						Unit
-					</li>
-					<li class="dropdown" style="width: 130px;"
-						ng-model="panel.y_formats[0]"
-						dropdown-typeahead="unitFormats"
-						dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
-					</li>
-					<li class="tight-form-item">
-						&nbsp;&nbsp; Grid Max
-					</li>
-					<li>
-						<input type="number" class="input-small tight-form-input" placeholder="auto"
-					   	empty-to-null ng-model="panel.grid.leftMax"
-							ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="tight-form-item">
-						Min
-					</li>
-					<li>
-						<input type="number" class="input-small tight-form-input" placeholder="auto"
-					  	empty-to-null ng-model="panel.grid.leftMin"
-							ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="tight-form-item">
-						Label
-					</li>
-					<li>
-						<input type="text" class="input-small tight-form-input last"
-					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="tight-form-row">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 80px">
-						<strong>Right Y</strong>
-					</li>
-					<li class="tight-form-item">
-						Unit
-					</li>
-					<li class="dropdown" style="width: 130px"
-						ng-model="panel.y_formats[1]"
-						dropdown-typeahead="unitFormats"
-						dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
-					</li>
-					<li class="tight-form-item">
-						&nbsp;&nbsp; Grid Max
-					</li>
-					<li>
-						<input type="number" class="input-small tight-form-input" placeholder="auto"
-					   	empty-to-null ng-model="panel.grid.rightMax"
-							ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="tight-form-item">
-						Min
-					</li>
-					<li>
-						<input type="number" class="input-small tight-form-input" placeholder="auto"
-					  	empty-to-null ng-model="panel.grid.rightMin"
-							ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="tight-form-item">
-						Label
-					</li>
-					<li>
-						<input type="text" class="input-small tight-form-input last"
-					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Left Y</strong>
+				</li>
+				<li class="tight-form-item">
+					Unit
+				</li>
+				<li class="dropdown" style="width: 130px;"
+					ng-model="panel.y_formats[0]"
+					dropdown-typeahead="unitFormats"
+					dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
+				</li>
+				<li class="tight-form-item">
+					&nbsp;&nbsp; Grid Max
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto"
+					empty-to-null ng-model="panel.grid.leftMax"
+					ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Min
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto"
+					empty-to-null ng-model="panel.grid.leftMin"
+					ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Label
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input last"
+					ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Right Y</strong>
+				</li>
+				<li class="tight-form-item">
+					Unit
+				</li>
+				<li class="dropdown" style="width: 130px"
+					ng-model="panel.y_formats[1]"
+					dropdown-typeahead="unitFormats"
+					dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
+				</li>
+				<li class="tight-form-item">
+					&nbsp;&nbsp; Grid Max
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto"
+					empty-to-null ng-model="panel.grid.rightMax"
+					ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Min
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto"
+					empty-to-null ng-model="panel.grid.rightMin"
+					ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Label
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input last"
+					ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 
 	<div class="section" style="margin-bottom: 20px">
 		<div class="tight-form">
-		<div class="tight-form-row">
 			<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 80px">
-						<strong>Show Axis</strong>
-					</li>
-					<li class="tight-form-item">
-						X-Axis&nbsp;
-						<input class="cr1" id="hideXAxis" type="checkbox"
-								ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
-						<label for="hideXAxis" class="cr1"></label>
-					</li>
-					<li class="tight-form-item last">
-						Y-Axis&nbsp;
-						<input class="cr1" id="hideYAxis" type="checkbox"
-						    ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
-						<label for="hideYAxis" class="cr1"></label>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="tight-form-row">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 80px">
-						<strong>Thresholds</strong>
-					</li>
-					<li class="tight-form-item">
-						Level 1
-					</li>
-					<li>
-						<input type="number" class="input-small tight-form-input"
-					  	ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="tight-form-item">
-						<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
-					</li>
-					<li class="tight-form-item">
-						Level 2
-					</li>
-					<li>
-						<input type="number" class="input-small tight-form-input"
-					  	ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="tight-form-item">
-						<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>
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Show Axis</strong>
+				</li>
+				<li class="tight-form-item">
+					X-Axis&nbsp;
+					<input class="cr1" id="hideXAxis" type="checkbox"
+					ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
+					<label for="hideXAxis" class="cr1"></label>
+				</li>
+				<li class="tight-form-item last">
+					Y-Axis&nbsp;
+					<input class="cr1" id="hideYAxis" type="checkbox"
+					ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
+					<label for="hideYAxis" class="cr1"></label>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Thresholds</strong>
+				</li>
+				<li class="tight-form-item">
+					Level 1
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input"
+					ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
+				</li>
+				<li class="tight-form-item">
+					Level 2
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input"
+					ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					<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>
 
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>
@@ -147,80 +143,76 @@
 <div class="editor-row">
 	<div class="section">
 		<div class="tight-form">
-			<div class="tight-form-row">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 80px">
-						<strong>Legend</strong>
-					</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="render()">
-						<label for="panel.legend.show" class="cr1"></label>
-					</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>
-					</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>
-					</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>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Legend</strong>
+				</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="render()">
+					<label for="panel.legend.show" class="cr1"></label>
+				</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>
+				</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>
+				</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>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 	<div class="section">
 		<div class="tight-form">
-			<div class="tight-form-row">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px">
-						<strong>Legend values</strong>
-					</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>
-					</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>
-					</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>
-					</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>
-					</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>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 100px">
+					<strong>Legend values</strong>
+				</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>
+				</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>
+				</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>
+				</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>
+				</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>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>

src/app/panels/graph/styleEditor.html

@@ -67,34 +67,32 @@
 		<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
 		<div>
 			<div class="tight-form" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
-				<div class="tight-form-row">
-					<ul class="tight-form-list">
-						<li class="tight-form-item">
-							<i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i>
-						</li>
+				<ul class="tight-form-list">
+					<li class="tight-form-item">
+						<i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i>
+					</li>
 
-						<li class="tight-form-item">
-							alias or regex
-						</li>
-						<li>
-							<input type="text"
-							ng-model="override.alias"
-							bs-typeahead="getSeriesNames"
-							ng-blur="render()"
-							data-min-length=0 data-items=100
-							class="input-medium tight-form-input" >
-						</li>
-						<li class="tight-form-item" ng-repeat="option in currentOverrides">
-							<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
-							{{option.name}}: {{option.value}}
-						</li>
+					<li class="tight-form-item">
+						alias or regex
+					</li>
+					<li>
+						<input type="text"
+						ng-model="override.alias"
+						bs-typeahead="getSeriesNames"
+						ng-blur="render()"
+						data-min-length=0 data-items=100
+						class="input-medium tight-form-input" >
+					</li>
+					<li class="tight-form-item" ng-repeat="option in currentOverrides">
+						<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
+						{{option.name}}: {{option.value}}
+					</li>
 
-						<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
-						</li>
+					<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
+					</li>
 
-					</ul>
-					<div class="clearfix"></div>
-				</div>
+				</ul>
+				<div class="clearfix"></div>
 			</div>
 		</div>
 

src/app/panels/singlestat/editor.html

@@ -1,73 +1,71 @@
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
 		<div class="tight-form">
-			<div class="tight-form-row">
-				<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="panel.prefix" ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="tight-form-item">
-						Value
-					</li>
-					<li>
-						<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
-					</li>
-					<li class="tight-form-item">
-						Postfix
-					</li>
-					<li>
-						<input type="text" class="input-small tight-form-input last"
-					  	ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="tight-form-row">
-				<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" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-					</li>
-					<li class="tight-form-item">
-						Value
-					</li>
-					<li>
-						<select class="input-small tight-form-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-					</li>
-					<li class="tight-form-item">
-						Postfix
-					</li>
-					<li>
-						<select class="input-small tight-form-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="tight-form-row">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" 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>
+			<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="panel.prefix" ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Value
+				</li>
+				<li>
+					<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
+				</li>
+				<li class="tight-form-item">
+					Postfix
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input last"
+					ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></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" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+				</li>
+				<li class="tight-form-item">
+					Value
+				</li>
+				<li>
+					<select class="input-small tight-form-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+				</li>
+				<li class="tight-form-item">
+					Postfix
+				</li>
+				<li>
+					<select class="input-small tight-form-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="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" 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>
@@ -75,43 +73,41 @@
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
 		<div class="tight-form">
-			<div class="tight-form-row">
-				<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="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="tight-form-item">
-						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="tight-form-item">
-						Thresholds<tip>Comma seperated values</tip>
-					</li>
-					<li>
-						<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
-					</li>
-					<li class="tight-form-item">
-						Colors
-					</li>
-					<li class="tight-form-item">
-						<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="tight-form-item last">
-						<a class="pointer" ng-click="invertColorOrder()">invert order</a>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+			<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="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="tight-form-item">
+					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="tight-form-item">
+					Thresholds<tip>Comma seperated values</tip>
+				</li>
+				<li>
+					<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
+				</li>
+				<li class="tight-form-item">
+					Colors
+				</li>
+				<li class="tight-form-item">
+					<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="tight-form-item last">
+					<a class="pointer" ng-click="invertColorOrder()">invert order</a>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>
@@ -119,38 +115,36 @@
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
 		<div class="tight-form">
-			<div class="tight-form-row">
-				<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="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="tight-form-item">
-						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="tight-form-item">
-						Line Color
-					</li>
-					<li class="tight-form-item">
-						<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
-					</li>
-					<li class="tight-form-item">
-						Fill Color
-					</li>
-					<li class="tight-form-item">
-						<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+			<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="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="tight-form-item">
+					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="tight-form-item">
+					Line Color
+				</li>
+				<li class="tight-form-item">
+					<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
+				</li>
+				<li class="tight-form-item">
+					Fill Color
+				</li>
+				<li class="tight-form-item">
+					<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>
@@ -158,33 +152,31 @@
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
 		<div class="tight-form">
-			<div class="tight-form-row">
-				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						<strong>Value to text mapping</strong>
-					</li>
-					<li class="tight-form-item"  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 tight-form-input" ng-blur="render()">
-					</li>
-					<li class="tight-form-item">
-						<i class="fa fa-arrow-right"></i>
-					</li>
-					<li ng-repeat-end>
-						<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="render()">
-					</li>
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					<strong>Value to text mapping</strong>
+				</li>
+				<li class="tight-form-item"  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 tight-form-input" ng-blur="render()">
+				</li>
+				<li class="tight-form-item">
+					<i class="fa fa-arrow-right"></i>
+				</li>
+				<li ng-repeat-end>
+					<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="render()">
+				</li>
 
-					<li>
-						<a class="pointer tight-form-item" ng-click="addValueMap();">
-							<i class="fa fa-plus"></i>
-						</a>
-					</li>
+				<li>
+					<a class="pointer tight-form-item" 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/partials/submenu.html

@@ -1,42 +1,40 @@
 <div class="submenu-controls" ng-controller="SubmenuCtrl">
-		<div class="tight-form">
-			<div class="tight-form-row" style="border-top: none">
+	<div class="tight-form" style="border-top: none">
 
-				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						<div class="dropdown">
-							<a class="pointer" data-toggle="dropdown">
-								<i class="fa fa-cog"></i>
-							</a>
-							<ul class="dropdown-menu">
-								<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
-								<li><a class="pointer" dash-editor-link="app/features/annotations/partials/editor.html">Annotations</a></li>
-							</ul>
-						</div>
-					</li>
-				</ul>
+		<ul class="tight-form-list">
+			<li class="tight-form-item">
+				<div class="dropdown">
+					<a class="pointer" data-toggle="dropdown">
+						<i class="fa fa-cog"></i>
+					</a>
+					<ul class="dropdown-menu">
+						<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
+						<li><a class="pointer" dash-editor-link="app/features/annotations/partials/editor.html">Annotations</a></li>
+					</ul>
+				</div>
+			</li>
+		</ul>
 
-				<ul class="tight-form-list" ng-if="dashboard.templating.enable">
-					<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
-						<span class="template-variable ">
-						${{variable.name}}:
-						</span>
-					</li>
+		<ul class="tight-form-list" ng-if="dashboard.templating.enable">
+			<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
+				<span class="template-variable ">
+					${{variable.name}}:
+				</span>
+			</li>
 
-					<li ng-repeat-end template-param-selector>
-					</li>
-				</ul>
+			<li ng-repeat-end template-param-selector>
+			</li>
+		</ul>
 
-				<ul class="tight-form-list" ng-if="dashboard.annotations.enable">
-					<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
-						<a ng-click="disableAnnotation(annotation)">
-							<i class="annotation-color-icon fa fa-bolt"></i>
-							{{annotation.name}}
-						</a>
-					</li>
-				</ul>
+		<ul class="tight-form-list" ng-if="dashboard.annotations.enable">
+			<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
+				<a ng-click="disableAnnotation(annotation)">
+					<i class="annotation-color-icon fa fa-bolt"></i>
+					{{annotation.name}}
+				</a>
+			</li>
+		</ul>
 
-				<div class="clearfix"></div>
-			</div>
-		</div>
+		<div class="clearfix"></div>
 	</div>
+</div>

src/css/less/tightform.less

@@ -1,19 +1,26 @@
+.tight-form {
+  border-top: 1px solid @grafanaTargetBorder;
+  border-left: 1px solid @grafanaTargetBorder;
+  border-right: 1px solid @grafanaTargetBorder;
+  background: @grafanaTargetBackground;
+  width: 100%;
 
-// old graphite-target
-.tight-form:last-child {
-  border-bottom: 1px solid @grafanaTargetBorder;
   .dropdown {
     padding: 0; margin: 0;
   }
+
+  &:last-child {
+    border-bottom: 1px solid @grafanaTargetBorder;
+  }
 }
 
-// old graphite-target-inner
-.tight-form-row {
-  border-top: 1px solid @grafanaTargetBorder;
-  border-left: 1px solid @grafanaTargetBorder;
-  border-right: 1px solid @grafanaTargetBorder;
-  background: @grafanaTargetBackground;
-  width: 100%;
+.tight-form-container {
+  .tight-form:last-child {
+    border-bottom: none;
+  }
+  &:last-child {
+    border-bottom: 1px solid @grafanaTargetBorder;
+  }
 }
 
 // old graphite-segment-list