From ce6991cd3e3f13437d72fec58b9a232ba7f65057 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 29 Mar 2016 11:07:48 +0300
Subject: [PATCH] Updated datasource edit page style.

---
 src/datasource-zabbix/partials/config.html | 101 +++++++++++----------
 1 file changed, 53 insertions(+), 48 deletions(-)

diff --git a/src/datasource-zabbix/partials/config.html b/src/datasource-zabbix/partials/config.html
index e57efb0..85a6fe2 100644
--- a/src/datasource-zabbix/partials/config.html
+++ b/src/datasource-zabbix/partials/config.html
@@ -1,56 +1,61 @@
 <datasource-http-settings current="ctrl.current">
 </datasource-http-settings>
 
-<h5>Zabbix API details</h5>
+<div class="gf-form-group">
+  <h3 class="page-heading">Zabbix API details</h3>
 
-<div class="tight-form">
-  <ul class="tight-form-list">
-    <li class="tight-form-item" style="width: 80px">
-      User
-    </li>
-    <li>
-      <input type="text" class="tight-form-input input-large"
-             ng-model='ctrl.current.jsonData.username'
-             placeholder="">
-    </li>
-    <li class="tight-form-item" style="width: 80px">
+  <div class="gf-form">
+    <span class="gf-form-label width-7">
+      Username
+    </span>
+    <input class="gf-form-input max-width-21"
+           type="text"
+           ng-model='ctrl.current.jsonData.username'
+           placeholder="user"
+           required>
+    </input>
+  </div>
+
+  <div class="gf-form">
+    <span class="gf-form-label width-7">
       Password
-    </li>
-    <li>
-      <input type="password" class="tight-form-input input-large"
-             ng-model='ctrl.current.jsonData.password'
-             placeholder="">
-    </li>
-  </ul>
-  <div class="clearfix"></div>
-</div>
-<div class="tight-form last">
-  <ul class="tight-form-list">
-    <li class="tight-form-item" style="width: 200px">
-      Cache update interval
-    </li>
-    <li>
-      <input type="text" class="tight-form-input input-small"
-             ng-model='ctrl.current.jsonData.cacheTTL'
-             placeholder="1h">
-    </li>
-    <li class="tight-form-item" style="width: 80px">
-      Trends&nbsp;&nbsp;
-      <input class="cr1" id="ctrl.current.jsonData.trends" type="checkbox"
-             ng-model="ctrl.current.jsonData.trends"
-             ng-checked="ctrl.current.jsonData.trends">
-      <label for="ctrl.current.jsonData.trends" class="cr1"></label>
-    </li>
-    <li ng-if="ctrl.current.jsonData.trends"
-        class="tight-form-item"
-        style="width: 105px">
-      Use trends from
-    </li>
-    <li ng-if="ctrl.current.jsonData.trends">
-      <input type="text" class="tight-form-input input-small"
+    </span>
+    <input class="gf-form-input max-width-21"
+           type="password"
+           ng-model='ctrl.current.jsonData.password'
+           placeholder="password"
+           required>
+    </input>
+  </div>
+
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <label class="gf-form-label width-7">Trends</label>
+    </div>
+    <gf-form-switch class="gf-form"
+      label="Enable"
+      checked="ctrl.current.jsonData.trends" switch-class="max-width-6">
+    </gf-form-switch>
+    <div class="gf-form" ng-if="ctrl.current.jsonData.trends">
+      <span class="gf-form-label width-7">
+        Use from
+      </span>
+      <input class="gf-form-input max-width-5"
+             type="text"
              ng-model='ctrl.current.jsonData.trendsFrom'
              placeholder="7d">
-    </li>
-  </ul>
-  <div class="clearfix"></div>
+      </input>
+    </div>
+  </div>
+
+  <div class="gf-form">
+    <span class="gf-form-label width-12">
+      Cache update interval
+    </span>
+    <input class="gf-form-input max-width-4"
+           type="text"
+           ng-model='ctrl.current.jsonData.cacheTTL'
+           placeholder="1h">
+    </input>
+  </div>
 </div>