From b1b4339e09fd108a8fcb636e1c58207e6823dc6a Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Fri, 30 Dec 2016 14:07:50 +0300
Subject: [PATCH] Fixed triggers panel styles.

---
 src/panel-triggers/editor.html | 551 ++++++++++++++-------------------
 1 file changed, 235 insertions(+), 316 deletions(-)

diff --git a/src/panel-triggers/editor.html b/src/panel-triggers/editor.html
index ea3333c..ee1b24b 100644
--- a/src/panel-triggers/editor.html
+++ b/src/panel-triggers/editor.html
@@ -1,337 +1,256 @@
 <div class="editor-row">
-  <div class="section tight-form-container" style="margin-bottom: 20px">
-    <h5>Select triggers</h5>
-    <div class="tight-form">
-      <ul class="tight-form-list">
-        <li class="tight-form-item" style="width: 80px">
-          Group
-        </li>
-        <li>
-          <input type="text"
-            ng-model="editor.panel.triggers.group.filter"
-            bs-typeahead="editor.getGroupNames"
-            ng-blur="editor.parseTarget()"
-            data-min-length=0
-            data-items=100
-            class="input-large tight-form-input"
-            ng-class="{
-              'zbx-variable': editor.isVariable(editor.panel.triggers.group.filter),
-              'zbx-regex': editor.isRegex(editor.panel.triggers.group.filter)
-            }">
-        </li>
-        <li class="tight-form-item" style="width: 50px">
-          Host
-        </li>
-        <li>
-          <input type="text"
-            ng-model="editor.panel.triggers.host.filter"
-            bs-typeahead="editor.getHostNames"
-            ng-blur="editor.parseTarget()"
-            data-min-length=0
-            data-items=100
-            class="input-large tight-form-input last"
-            ng-class="{
-              'zbx-variable': editor.isVariable(editor.panel.triggers.host.filter),
-              'zbx-regex': editor.isRegex(editor.panel.triggers.host.filter)
-            }">
-        </li>
-      </ul>
-      <div class="clearfix"></div>
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Select triggers</h5>
+    <div class="gf-form-inline">
+      <div class="gf-form max-width-20">
+        <label class="gf-form-label query-keyword width-7">Group</label>
+        <input type="text"
+          ng-model="editor.panel.triggers.group.filter"
+          bs-typeahead="editor.getGroupNames"
+          ng-blur="editor.parseTarget()"
+          data-min-length=0
+          data-items=100
+          class="gf-form-input"
+          ng-class="{
+            'zbx-variable': editor.isVariable(editor.panel.triggers.group.filter),
+            'zbx-regex': editor.isRegex(editor.panel.triggers.group.filter)
+          }">
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">Host</label>
+        <input type="text"
+          ng-model="editor.panel.triggers.host.filter"
+          bs-typeahead="editor.getHostNames"
+          ng-blur="editor.parseTarget()"
+          data-min-length=0
+          data-items=100
+          class="gf-form-input"
+          ng-class="{
+            'zbx-variable': editor.isVariable(editor.panel.triggers.host.filter),
+            'zbx-regex': editor.isRegex(editor.panel.triggers.host.filter)
+          }">
+      </div>
     </div>
-    <div class="tight-form">
-      <ul class="tight-form-list">
-        <li class="tight-form-item" style="width: 80px">
-          Application
-        </li>
-        <li>
-          <input type="text"
-            ng-model="editor.panel.triggers.application.filter"
-            bs-typeahead="editor.getApplicationNames"
-            ng-blur="editor.parseTarget()"
-            data-min-length=0
-            data-items=100
-            class="input-large tight-form-input"
-            ng-class="{
-              'zbx-variable': editor.isVariable(editor.panel.triggers.application.filter),
-              'zbx-regex': editor.isRegex(editor.panel.triggers.application.filter)
-            }">
-        </li>
-        <li class="tight-form-item" style="width: 50px">
-          Trigger
-        </li>
-        <li>
-          <input  type="text"
-                  ng-model="editor.panel.triggers.trigger.filter"
-                  ng-blur="editor.parseTarget()"
-                  placeholder="trigger name"
-                  class="input-large tight-form-input last"
-                  ng-style="editor.panel.triggers.trigger.style"
-                  empty-to-null>
-        </li>
-      </ul>
-      <div class="clearfix"></div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form max-width-20">
+        <label class="gf-form-label query-keyword width-7">Application</label>
+        <input type="text"
+          ng-model="editor.panel.triggers.application.filter"
+          bs-typeahead="editor.getApplicationNames"
+          ng-blur="editor.parseTarget()"
+          data-min-length=0
+          data-items=100
+          class="gf-form-input"
+          ng-class="{
+            'zbx-variable': editor.isVariable(editor.panel.triggers.application.filter),
+            'zbx-regex': editor.isRegex(editor.panel.triggers.application.filter)
+          }">
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">Trigger</label>
+        <input type="text"
+          ng-model="editor.panel.triggers.trigger.filter"
+          ng-blur="editor.parseTarget()"
+          placeholder="trigger name"
+          class="gf-form-input"
+          ng-style="editor.panel.triggers.trigger.style"
+          empty-to-null>
+      </div>
     </div>
   </div>
-  <div class="section">
-    <h5>Data source</h5>
-    <div class="section tight-form-container" style="margin-bottom: 20px">
-      <div class="tight-form">
-        <ul class="tight-form-list">
-          <li>
-            <select class="tight-form-input input-large last"
-                    ng-model="editor.panel.datasource"
-                    ng-options="ds for ds in editor.datasources"
-                    ng-change="editor.datasourceChanged()">
-            </select>
-          </li>
-        </ul>
-        <div class="clearfix"></div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Data source</h5>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input"
+            ng-model="editor.panel.datasource"
+            ng-options="ds for ds in editor.datasources"
+            ng-change="editor.datasourceChanged()">
+          </select>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 
 <div class="editor-row">
-  <div class="section">
-    <h5>Options</h5>
-    <div class="tight-form-container" style="margin-bottom: 20px">
-      <div class="tight-form">
-        <ul class="tight-form-list">
-          <li class="tight-form-item" style="width: 100px">
-            <strong>Acknowledged</strong>
-          </li>
-          <li>
-            <select class="input-medium tight-form-input"
-                    ng-model="editor.panel.showTriggers"
-                    ng-options="f for f in editor.ackFilters"
-                    ng-change="editor.panelCtrl.refresh()">
-            </select>
-          </li>
-          <li class="tight-form-item" style="width: 13em">
-            <strong>Limit triggers number to</strong>
-          </li>
-          <li>
-            <input  class="input-small tight-form-input"
-                    type="number"
-                    ng-model="editor.panel.limit"
-                    ng-model-onblur
-                    ng-change="editor.panelCtrl.refresh()">
-          </li>
-        </ul>
-        <div class="clearfix"></div>
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Options</h5>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Acknowledged</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input"
+            ng-model="editor.panel.showTriggers"
+            ng-options="f for f in editor.ackFilters"
+            ng-change="editor.panelCtrl.refresh()">
+          </select>
+        </div>
       </div>
-      <div class="tight-form">
-        <ul class="tight-form-list">
-          <li class="tight-form-item" style="width: 100px">
-            <strong>Sort by</strong>
-          </li>
-          <li>
-            <select class="input-medium tight-form-input"
-                    ng-model="editor.panel.sortTriggersBy"
-                    ng-options="f.text for f in editor.sortByFields track by f.value"
-                    ng-change="editor.panelCtrl.refresh()">
-            </select>
-          </li>
-          <li class="tight-form-item" style="width: 13em">
-            <strong>Show events</strong>
-          </li>
-          <li>
-            <select class="tight-form-input input-medium"
-                    ng-model="editor.panel.showEvents"
-                    ng-options="f.text for f in editor.showEventsFields track by f.value"
-                    ng-change="editor.panelCtrl.refresh()">
-            </select>
-          </li>
-        </ul>
-        <div class="clearfix"></div>
+      <div class="gf-form">
+        <label class="gf-form-label width-12">Limit triggers number to</label>
+        <input class="gf-form-input width-5"
+          type="number"
+          ng-model="editor.panel.limit"
+          ng-model-onblur
+          ng-change="editor.panelCtrl.refresh()">
       </div>
-      <div class="tight-form">
-        <ul class="tight-form-list">
-          <li class="tight-form-item" style="width: 100px">
-            <strong>Show fields</strong>
-          </li>
-          <li class="tight-form-item">
-            <label class="checkbox-label" for="hostField">Host Name</label>
-            <input  class="cr1"
-                    id="hostField"
-                    type="checkbox"
-                    ng-model="editor.panel.hostField"
-                    ng-checked="editor.panel.hostField">
-            <label for="hostField" class="cr1"></label>
-          </li>
-          <li class="tight-form-item">
-            <label class="checkbox-label" for="hostField">Host Technical Name</label>
-            <input  class="cr1"
-                    id="hostTechNameField"
-                    type="checkbox"
-                    ng-model="editor.panel.hostTechNameField"
-                    ng-checked="editor.panel.hostTechNameField">
-            <label for="hostTechNameField" class="cr1"></label>
-          </li>
-          <li class="tight-form-item">
-            <label class="checkbox-label" for="statusField">Status</label>
-            <input  class="cr1"
-                    id="statusField"
-                    type="checkbox"
-                    ng-model="editor.panel.statusField"
-                    ng-checked="editor.panel.statusField">
-            <label for="statusField" class="cr1"></label>
-          </li>
-          <li class="tight-form-item">
-            <label class="checkbox-label" for="severityField">Severity</label>
-            <input  class="cr1"
-                    id="severityField"
-                    type="checkbox"
-                    ng-model="editor.panel.severityField"
-                    ng-checked="editor.panel.severityField">
-            <label for="severityField" class="cr1"></label>
-          </li>
-        </ul>
-        <div class="clearfix"></div>
+    </div>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Sort by</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input"
+            ng-model="editor.panel.sortTriggersBy"
+            ng-options="f.text for f in editor.sortByFields track by f.value"
+            ng-change="editor.panelCtrl.refresh()">
+          </select>
+        </div>
       </div>
-      <div class="tight-form">
-        <ul class="tight-form-list">
-          <li class="tight-form-item" style="width: 100px">
-            <strong>&nbsp;</strong>
-          </li>
-          <li class="tight-form-item">
-            <label class="checkbox-label" for="lastChangeField">Last change</label>
-            <input  class="cr1"
-                    id="lastChangeField"
-                    type="checkbox"
-                    ng-model="editor.panel.lastChangeField"
-                    ng-checked="editor.panel.lastChangeField">
-            <label for="lastChangeField" class="cr1"></label>
-          </li>
-          <li class="tight-form-item">
-            <label class="checkbox-label" for="ageField">Age</label>
-            <input  class="cr1"
-                    id="ageField"
-                    type="checkbox"
-                    ng-model="editor.panel.ageField"
-                    ng-checked="editor.panel.ageField">
-            <label for="ageField" class="cr1"></label>
-          </li>
-          <li class="tight-form-item">
-            <label class="checkbox-label" for="infoField">Info</label>
-            <input  class="cr1"
-                    id="infoField"
-                    type="checkbox"
-                    ng-model="editor.panel.infoField"
-                    ng-checked="editor.panel.infoField">
-            <label for="infoField" class="cr1"></label>
-          </li>
-        </ul>
-        <div class="clearfix"></div>
-      </div>
-
-      <div class="tight-form">
-        <ul class="tight-form-list">
-          <li class="tight-form-item">
-            <strong>Custom Last change format</strong>
-            <label class="checkbox-label" for="customLastChangeFormat">&nbsp;</label>
-            <input  class="cr1"
-                    id="customLastChangeFormat"
-                    type="checkbox"
-                    ng-change="editor.panelCtrl.refresh()"
-                    ng-model="editor.panel.customLastChangeFormat"
-                    ng-checked="editor.panel.customLastChangeFormat">
-            <label for="customLastChangeFormat" class="cr1"></label>
-          </li>
-          <li ng-if="editor.panel.customLastChangeFormat">
-            <input  type="text"
-                    ng-model="editor.panel.lastChangeFormat"
-                    ng-blur="editor.panelCtrl.refresh()"
-                    placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
-                    class="tight-form-input"
-                    style="width: 300px"
-                    empty-to-null>
-          </li>
-          <li class="tight-form-item last" ng-if="editor.panel.customLastChangeFormat">
-            <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
-              <i class="fa fa-question-circle"
-                 bs-tooltip="'See moment.js dosc for time format.'">
-              </i>
-            </a>
-          </li>
-        </ul>
-        <div class="clearfix"></div>
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Show events</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input"
+            ng-model="editor.panel.showEvents"
+            ng-options="f.text for f in editor.showEventsFields track by f.value"
+            ng-change="editor.panelCtrl.refresh()">
+          </select>
+        </div>
       </div>
     </div>
   </div>
-  <div class="section">
-    <h5>Customize triggers severity and colors</h5>
-    <div class="tight-form" ng-repeat="trigger in editor.panel.triggerSeverity">
-      <ul class="tight-form-list">
-        <li class="tight-form-item" style="width: 10px">
-          {{ trigger.priority }}
-        </li>
-        <li>
-          <input  class="tight-form-input input-medium"
-                  type="text"
-                  empty-to-null
-                  ng-model="trigger.severity"
-                  style="color: white"
-                  ng-style="{background: trigger.color}"
-                  ng-model-onblur
-                  ng-change="editor.panelCtrl.refresh()">
-        </li>
-        <li class="tight-form-item">
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Show fields</h5>
+    <div class="gf-form-inline">
+      <gf-form-switch class="gf-form"
+        label-class="width-8"
+        label="Host name"
+        checked="editor.panel.hostField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-12"
+        label="Host technical name"
+        checked="editor.panel.hostTechNameField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-5"
+        label="Status"
+        checked="editor.panel.statusField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+    </div>
+    <div class="gf-form-inline">
+      <gf-form-switch class="gf-form"
+        label-class="width-5"
+        label="Severity"
+        checked="editor.panel.severityField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-7"
+        label="Last change"
+        checked="editor.panel.lastChangeField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-4"
+        label="Age"
+        checked="editor.panel.ageField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <gf-form-switch class="gf-form"
+        label-class="width-4"
+        label="Info"
+        checked="editor.panel.infoField"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+    </div>
+    <div class="gf-form-inline">
+      <gf-form-switch class="gf-form"
+        label-class="width-14"
+        label="Custom Last change format"
+        checked="editor.panel.customLastChangeFormat"
+        on-change="ctrl.render()">
+      </gf-form-switch>
+      <div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
+        <label class="gf-form-label width-3">
+          <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
+            <tip>See moment.js dosc for time format.</tip>
+          </a>
+        </label>
+        <input class="gf-form-input width-18"
+          type="text"
+          placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
+          empty-to-null
+          ng-model-onblur
+          ng-model="editor.panel.lastChangeFormat"
+          ng-change="editor.panelCtrl.refresh()">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="editor-row">
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Customize triggers severity and colors</h5>
+    <div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
+      <div class="gf-form">
+        <label class="gf-form-label width-3">{{ trigger.priority }}</label>
+        <input type="text"
+          class="gf-form-input width-12"
+          empty-to-null
+          ng-model="trigger.severity"
+          style="color: white"
+          ng-style="{background: trigger.color}"
+          ng-model-onblur
+          ng-change="editor.panelCtrl.refresh()">
+        <span class="gf-form-label">
           <spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
-        </li>
-        <li class="tight-form-item last" style="width: 28px">
-          <label class="checkbox-label" for="{{ 'trigger-show-' + $index }}"></label>
-            <input  class="cr1"
-                    ng-attr-id="{{ 'trigger-show-' + $index }}"
-                    type="checkbox"
-                    ng-model="trigger.show"
-                    ng-checked="trigger.show"
-                    ng-change="editor.panelCtrl.refresh()">
-            <label for="{{ 'trigger-show-' + $index }}" class="cr1"></label>
-        </li>
-      </ul>
-      <div class="clearfix"></div>
+        </span>
+      </div>
+      <gf-form-switch class="gf-form"
+        label-class="width-0"
+        label="Show"
+        checked="trigger.show"
+        on-change="editor.panelCtrl.refresh()">
+      </gf-form-switch>
     </div>
-    <div class="tight-form">
-      <ul class="tight-form-list">
-        <li class="tight-form-item"
-            ng-style="{background:editor.panel.okEventColor}"
-            style="width: 160px; color: white">
-          <span style="padding-left: 25px"> OK event color </span>
-        </li>
-        <li class="tight-form-item">
-          <spectrum-picker
-            ng-model="editor.panel.okEventColor"
-            ng-change="editor.panelCtrl.refresh()">
-          </spectrum-picker>
-        </li>
-      </ul>
-      <div class="clearfix"></div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-3">&nbsp;</label>
+        <label class="gf-form-label width-12"
+          ng-style="{background:editor.panel.okEventColor}">
+          OK event color
+        </label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+        </span>
+      </div>
     </div>
-    <div class="tight-form last">
-      <ul class="tight-form-list">
-        <li class="tight-form-item"
-            ng-style="{background:editor.panel.ackEventColor}"
-            style="width: 160px; color: white">
-          <span style="padding-left: 25px"> Acknowledged color </span>
-        </li>
-        <li class="tight-form-item">
-          <spectrum-picker
-            ng-model="editor.panel.ackEventColor"
-            ng-change="editor.panelCtrl.refresh()">
-          </spectrum-picker>
-        </li>
-        <li class="tight-form-item last" style="width: 28px">
-          <label class="checkbox-label" for="ack-event-color"></label>
-            <input  class="cr1"
-                    id="ack-event-color"
-                    type="checkbox"
-                    ng-model="editor.panel.markAckEvents"
-                    ng-checked="editor.panel.markAckEvents"
-                    ng-change="editor.panelCtrl.refresh()">
-            <label for="ack-event-color" class="cr1"></label>
-        </li>
-      </ul>
-      <div class="clearfix"></div>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-3">&nbsp;</label>
+        <label class="gf-form-label width-12"
+          ng-style="{background:editor.panel.ackEventColor}">
+          Acknowledged color
+        </label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+        </span>
+      </div>
+      <gf-form-switch class="gf-form"
+        label-class="width-0"
+        label="Show"
+        checked="editor.panel.markAckEvents"
+        on-change="editor.panelCtrl.refresh()">
+      </gf-form-switch>
     </div>
   </div>
 </div>