From 7b5f056d1834a1344c71c824dfdf64c159633136 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sat, 16 May 2015 19:17:36 +0300
Subject: [PATCH] Query editor UI fixes.

---
 zabbix/partials/config.html       |   3 +-
 zabbix/partials/query.editor.html | 151 +++++++++++++-----------------
 2 files changed, 68 insertions(+), 86 deletions(-)

diff --git a/zabbix/partials/config.html b/zabbix/partials/config.html
index a8f4506..7dbe967 100644
--- a/zabbix/partials/config.html
+++ b/zabbix/partials/config.html
@@ -1,9 +1,10 @@
 <div ng-include="httpConfigPartialSrc"></div>
 
 <br>
+
 <h5>Zabbix API details</h5>
 
-<div class="tight-form last">
+<div class="tight-form">
   <ul class="tight-form-list">
     <li class="tight-form-item" style="width: 80px">
       User
diff --git a/zabbix/partials/query.editor.html b/zabbix/partials/query.editor.html
index cd4f141..a480c0a 100644
--- a/zabbix/partials/query.editor.html
+++ b/zabbix/partials/query.editor.html
@@ -1,96 +1,77 @@
 <div class="editor-row">
 
   <div  ng-repeat="target in panel.targets"
-        class="grafana-target"
-        ng-class="{'grafana-target-hidden': target.hide}"
+        class="tight-form-container"
+        ng-class="{'tight-form-disabled': target.hide}"
         ng-controller="ZabbixAPIQueryCtrl"
         ng-init="init()">
 
-    <ul class="tight-form-list pull-right">
-      <li class="tight-form-item">
-        <div class="dropdown">
-          <a  class="pointer dropdown-toggle"
-            data-toggle="dropdown"
-            tabindex="1">
-            <i class="fa fa-bars"></i>
+    <div class="tight-form">
+      <ul class="tight-form-list pull-right">
+        <li class="tight-form-item">
+          <div class="dropdown">
+            <a  class="pointer dropdown-toggle"
+              data-toggle="dropdown"
+              tabindex="1">
+              <i class="fa fa-bars"></i>
+            </a>
+            <ul class="dropdown-menu pull-right" role="menu">
+              <li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
+              <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up</a></li>
+              <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
+            </ul>
+          </div>
+        </li>
+        <li class="tight-form-item last">
+          <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+            <i class="fa fa-remove"></i>
           </a>
-          <ul class="dropdown-menu pull-right" role="menu">
-            <li role="menuitem">
-              <a  tabindex="1"
-                ng-click="duplicate()">
-                Duplicate
-              </a>
-            </li>
-            <li role="menuitem">
-              <a  tabindex="1"
-                ng-click="moveMetricQuery($index, $index-1)">
-                Move up
-              </a>
-            </li>
-            <li role="menuitem">
-              <a  tabindex="1"
-                ng-click="moveMetricQuery($index, $index+1)">
-                Move down
-              </a>
-            </li>
-          </ul>
-        </div>
-      </li>
-      <li class="tight-form-item last">
-        <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
-          <i class="fa fa-remove"></i>
-        </a>
-      </li>
-    </ul>
+        </li>
+      </ul>
 
-    <ul class="tight-form-list">
-      <li>
-        <a  class="tight-form-item"
-            ng-click="target.hide = !target.hide; get_data();"
-            role="menuitem">
-            <i class="fa fa-eye"></i>
-        </a>
-      </li>
-    </ul>
-
-    <!-- <ul class="grafana-segment-list">
-        <li class="grafana-target-segment" style="min-width: 15px; text-align: center">
-            {{targetLetters[$index]}}
+      <ul class="tight-form-list">
+        <li class="tight-form-item" style="min-width: 15px; text-align: center">
+          {{targetLetters[$index]}}
         </li>
         <li>
-            <a  class="grafana-target-segment"
-                ng-click="target.hide = !target.hide; targetBlur();"
-                role="menuitem">
-                <i class="icon-eye-open"></i>
-            </a>
+          <a  class="tight-form-item"
+              ng-click="target.hide = !target.hide; get_data();"
+              role="menuitem">
+              <i class="fa fa-eye"></i>
+          </a>
         </li>
-    </ul> -->
+      </ul>
 
-    <ul class="tight-form-list" role="menu">
-        <li class="tight-form-item">
-            <input type="text" class="input-medium grafana-target-text-input" ng-model="target.alias"
-                   spellcheck='false' placeholder="alias" ng-blur="targetBlur()">
+      <ul class="tight-form-list" role="menu">
+        <!-- Alias -->
+        <li>
+          <input type="text"
+                 class="tight-form-input input-large"
+                 ng-model="target.alias"
+                 spellcheck='false'
+                 placeholder="alias"
+                 ng-blur="targetBlur()">
         </li>
         <!-- Select Host Group -->
-        <li class="tight-form-item">
-            <select style="width: 10em"
-                    class=""
-                    ng-change="selectHostGroup()"
-                    ng-model="target.hostGroup"
-                    bs-tooltip="target.hostGroup.name.length > 25 ? target.hostGroup.name : ''"
-                    ng-options="hostgroup.name for hostgroup in metric.hostGroupList" >
-                <option value="">All</option>
-            </select>
-            <a bs-tooltip="target.errors.metric"
-               style="color: rgb(229, 189, 28)"
-               ng-show="target.errors.metric">
-                <i class="icon-warning-sign"></i>
-            </a>
+        <li>
+          <select style="width: 10em"
+                  class="tight-form-input input-small"
+                  ng-change="selectHostGroup()"
+                  ng-model="target.hostGroup"
+                  bs-tooltip="target.hostGroup.name.length > 25 ? target.hostGroup.name : ''"
+                  ng-options="hostgroup.name for hostgroup in metric.hostGroupList" >
+              <option value="">All</option>
+          </select>
+          <a bs-tooltip="target.errors.metric"
+             style="color: rgb(229, 189, 28)"
+             ng-show="target.errors.metric">
+            <i class="fa fa-warning"></i>
+          </a>
         </li>
         <!-- Select Host -->
-        <li class="tight-form-item">
+        <li>
             <select style="width: 15em"
-                    class=""
+                    class="tight-form-input input-medium"
                     ng-change="selectHost()"
                     ng-model="target.host"
                     bs-tooltip="target.host.name.length > 25 ? target.host.name : ''"
@@ -104,9 +85,9 @@
             </a>
         </li>
         <!-- Select Application -->
-        <li class="tight-form-item">
-            <select style="width: 10em"
-                    class="input-medium grafana-target-segment-input"
+        <li>
+            <select style="width: 12em"
+                    class="tight-form-input input-medium"
                     ng-change="selectApplication()"
                     ng-model="target.application"
                     bs-tooltip="target.application.name.length > 15 ? target.application.name : ''"
@@ -120,9 +101,9 @@
             </a>
         </li>
         <!-- Select Item -->
-        <li class="tight-form-item">
-            <select style="width: 20em"
-                    class="input-medium grafana-target-segment-input"
+        <li>
+            <select style="width: 25em"
+                    class="tight-form-input input-medium"
                     ng-change="selectItem()"
                     ng-model="target.item"
                     bs-tooltip="target.expandedName.length > 30 ? target.expandedName : ''"
@@ -135,9 +116,9 @@
                 <i class="icon-warning-sign"></i>
             </a>
         </li>
-    </ul>
-
-        <div class="clearfix"></div>
+      </ul>
 
+      <div class="clearfix"></div>
+    </div>
   </div>
 </div>