From 453eebbac8e5d00a57eeb8a413b22a63e0e1d376 Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Tue, 8 Mar 2016 11:08:43 +0100
Subject: [PATCH] style(graph): convert query options to gf-form

---
 .../graphite/partials/query.options.html      | 94 +++++++++----------
 1 file changed, 45 insertions(+), 49 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/partials/query.options.html b/public/app/plugins/datasource/graphite/partials/query.options.html
index 35c95d03e88..b00028d0e05 100644
--- a/public/app/plugins/datasource/graphite/partials/query.options.html
+++ b/public/app/plugins/datasource/graphite/partials/query.options.html
@@ -1,74 +1,70 @@
-<section class="grafana-metric-options">
-	<div class="tight-form">
-		<ul class="tight-form-list">
-			<li class="tight-form-item tight-form-item-icon">
+<section class="grafana-metric-options gf-form-group">
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label">
 				<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="ctrl.panelCtrl.panel.cacheTimeout"
-					bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
-					data-placement="right"
-					spellcheck='false'
-					placeholder="60"></input>
-			</li>
-			<li class="tight-form-item">
-				Max data points
-			</li>
-			<li>
-				<input type="text"
-					class="input-mini tight-form-input"
-					ng-model="ctrl.panelCtrl.panel.maxDataPoints"
-					bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
-					data-placement="right"
-					ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
-					spellcheck='false'
-					placeholder="auto"></input>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
+			</span>
+			<span class="gf-form-label width-8">Cache timeout</span>
+			<input type="text"
+				class="gf-form-input"
+				ng-model="ctrl.panelCtrl.panel.cacheTimeout"
+				bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
+				data-placement="right"
+				spellcheck='false'
+				placeholder="60">
+			</input>
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Max data points</span>
+			<input type="text"
+				class="gf-form-input"
+				ng-model="ctrl.panelCtrl.panel.maxDataPoints"
+				bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
+				data-placement="right"
+				ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
+				spellcheck='false'
+				placeholder="auto">
+			</input>
+		</div>
 	</div>
-	<div class="tight-form last">
-		<ul class="tight-form-list">
-			<li class="tight-form-item tight-form-item-icon">
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-12">
 				<i class="fa fa-info-circle"></i>
-			</li>
-			<li class="tight-form-item">
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					shorter legend names
 				</a>
-			</li>
-			<li class="tight-form-item">
+			</span>
+			<span class="gf-form-label width-12">
+				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					series as parameters
 				</a>
-			</li>
-			<li class="tight-form-item">
+			</span>
+			<span class="gf-form-label width-7">
+				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					stacking
 				</a>
-			</li>
-			<li class="tight-form-item">
+			</span>
+			<span class="gf-form-label width-8">
+				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					templating
 				</a>
-			</li>
-			<li class="tight-form-item">
+			</span>
+			<span class="gf-form-label width-10">
+				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					max data points
 				</a>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
+			</span>
+		</div>
 	</div>
 </section>
 
 <div class="editor-row">
-	<div class="pull-left" style="margin-top: 30px;">
+	<div class="pull-left">
 
 		<div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
 			<h5>Shorter legend names</h5>