From c191e3d2e185110e3552c099d40a019c54e8de36 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 20 Dec 2016 21:22:18 +0300
Subject: [PATCH] Fixed query editor options styles.

---
 .../partials/query.options.html               | 70 ++++++++-----------
 1 file changed, 31 insertions(+), 39 deletions(-)

diff --git a/src/datasource-zabbix/partials/query.options.html b/src/datasource-zabbix/partials/query.options.html
index fa58b31..9224822 100644
--- a/src/datasource-zabbix/partials/query.options.html
+++ b/src/datasource-zabbix/partials/query.options.html
@@ -1,58 +1,50 @@
-<section class="grafana-metric-options">
-
-  <div class="tight-form">
-    <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">
-        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">
-      </li>
-    </ul>
-    <div class="clearfix"></div>
+<section class="grafana-metric-options gf-form-group">
+  <div class="gf-form-inline">
+    <div class="gf-form max-width-15">
+      <span class="gf-form-label">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-10">
         <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">
+        <a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
           Max data points
         </a>
-      </li>
-      <li class="tight-form-item">
-        <a ng-click="ctrl.panelCtrl.toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+      </span>
+      <span class="gf-form-label width-10">
+        <i class="fa fa-info-circle"></i>
+        <a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
           IT services
         </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(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
           IT service property
         </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">
           Text filter
         </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>Max data points</h5>