From e333d61b97de46fddd911be63beffcfbc0c0ebf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sun, 10 May 2020 17:11:51 +0200
Subject: [PATCH] OldTable: Make old table options align & look better (#24485)

---
 .../panel/table-old/column_options.html       |  50 ++++---
 .../app/plugins/panel/table-old/editor.html   | 122 +++++++++---------
 public/sass/components/_gf-form.scss          |   3 +
 3 files changed, 87 insertions(+), 88 deletions(-)

diff --git a/public/app/plugins/panel/table-old/column_options.html b/public/app/plugins/panel/table-old/column_options.html
index 2fb9a636161..08e8045bc12 100644
--- a/public/app/plugins/panel/table-old/column_options.html
+++ b/public/app/plugins/panel/table-old/column_options.html
@@ -1,13 +1,13 @@
 <div class="edit-tab-content" ng-repeat="style in editor.panel.styles">
-  <div class="section gf-form-group">
+  <div class="gf-form-group">
     <h5 class="section-heading">Options</h5>
     <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-12">Apply to columns named</label>
+      <div class="gf-form gf-form--grow">
+        <label class="gf-form-label width-8">Name pattern</label>
         <input
           type="text"
           placeholder="Name or regex"
-          class="gf-form-input width-13"
+          class="gf-form-input max-width-15"
           ng-model="style.pattern"
           bs-tooltip="'Specify regex using /my.*regex/ syntax'"
           bs-typeahead="editor.getColumnNames"
@@ -19,11 +19,11 @@
         />
       </div>
     </div>
-    <div class="gf-form" ng-if="style.type !== 'hidden'">
-      <label class="gf-form-label width-12">Column Header</label>
+    <div class="gf-form gf-form--grow" ng-if="style.type !== 'hidden'">
+      <label class="gf-form-label width-8">Column Header</label>
       <input
         type="text"
-        class="gf-form-input width-12"
+        class="gf-form-input max-width-15"
         ng-model="style.alias"
         ng-change="editor.render()"
         ng-model-onblur
@@ -32,18 +32,18 @@
     </div>
     <gf-form-switch
       class="gf-form"
-      label-class="width-12"
+      label-class="width-8"
       label="Render value as link"
       checked="style.link"
       on-change="editor.render()"
     ></gf-form-switch>
   </div>
 
-  <div class="section gf-form-group">
+  <div class="gf-form-group">
     <h5 class="section-heading">Type</h5>
 
-    <div class="gf-form">
-      <label class="gf-form-label width-10">Type</label>
+    <div class="gf-form gf-form--grow">
+      <label class="gf-form-label width-8">Type</label>
       <div class="gf-form-select-wrapper width-16">
         <select
           class="gf-form-input"
@@ -53,8 +53,8 @@
         ></select>
       </div>
     </div>
-    <div class="gf-form" ng-if="style.type === 'date'">
-      <label class="gf-form-label width-10">Date Format</label>
+    <div class="gf-form gf-form--grow" ng-if="style.type === 'date'">
+      <label class="gf-form-label width-8">Date Format</label>
       <gf-form-dropdown
         model="style.dateFormat"
         css-class="gf-form-input width-16"
@@ -69,7 +69,7 @@
     <div ng-if="style.type === 'string'">
       <gf-form-switch
         class="gf-form"
-        label-class="width-10"
+        label-class="width-8"
         ng-if="style.type === 'string'"
         label="Sanitize HTML"
         checked="style.sanitize"
@@ -78,11 +78,11 @@
     </div>
 
     <div ng-if="style.type !== 'hidden'">
-      <div class="gf-form">
-        <label class="gf-form-label width-10">Align</label>
+      <div class="gf-form gf-form--grow">
+        <label class="gf-form-label width-8">Align</label>
         <gf-form-dropdown
           model="style.align"
-          css-class="gf-form-input width-16"
+          css-class="gf-form-input"
           lookup-text="true"
           get-options="editor.alignTypes"
           allow-custom="false"
@@ -105,11 +105,11 @@
 
     <div ng-if="style.type === 'number'">
       <div class="gf-form">
-        <label class="gf-form-label width-10">Unit</label>
+        <label class="gf-form-label width-8">Unit</label>
         <unit-picker onChange="editor.setUnitFormat(style)" value="style.unit" width="16"></unit-picker>
       </div>
       <div class="gf-form">
-        <label class="gf-form-label width-10">Decimals</label>
+        <label class="gf-form-label width-8">Decimals</label>
         <input
           type="number"
           class="gf-form-input width-4"
@@ -122,7 +122,7 @@
     </div>
   </div>
 
-  <div class="section gf-form-group" ng-if="style.type === 'string'">
+  <div class="gf-form-group" ng-if="style.type === 'string'">
     <h5 class="section-heading">Value Mappings</h5>
     <div class="editor-row">
       <div class="gf-form-group">
@@ -190,7 +190,7 @@
     </div>
   </div>
 
-  <div class="section gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
+  <div class="gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
     <h5 class="section-heading">Thresholds</h5>
     <div class="gf-form">
       <label class="gf-form-label width-8"
@@ -300,8 +300,6 @@
   <hr />
 </div>
 
-<div class="gf-form-button-row">
-  <button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
-    <icon name="'plus'"></icon>&nbsp;Add column style
-  </button>
-</div>
+<button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
+  <icon name="'plus'"></icon>&nbsp;Add column style
+</button>
diff --git a/public/app/plugins/panel/table-old/editor.html b/public/app/plugins/panel/table-old/editor.html
index 52ade842f3e..2dcc1fa8590 100644
--- a/public/app/plugins/panel/table-old/editor.html
+++ b/public/app/plugins/panel/table-old/editor.html
@@ -1,69 +1,67 @@
-<div class="editor-row">
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Data</h5>
-    <div class="gf-form">
-      <label class="gf-form-label width-10">Table Transform</label>
-      <div class="gf-form-select-wrapper max-width-15">
-        <select
-          class="gf-form-input"
-          ng-model="editor.panel.transform"
-          ng-options="k as v.description for (k, v) in editor.transformers"
-          ng-change="editor.transformChanged()"
-        ></select>
-      </div>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-10">Columns</label>
-      </div>
-      <div class="gf-form" ng-repeat="column in editor.panel.columns">
-        <label class="gf-form-label">
-          <icon name="'times'" ng-click="editor.removeColumn(column)"></icon>
-          <span>{{ column.text }}</span>
-        </label>
-      </div>
-      <div class="gf-form" ng-show="editor.canSetColumns">
-        <metric-segment
-          segment="editor.addColumnSegment"
-          get-options="editor.getColumnOptions()"
-          on-change="editor.addColumn()"
-        ></metric-segment>
-      </div>
-      <div class="gf-form" ng-hide="editor.canSetColumns">
-        <label class="gf-form-label">
-          Auto
-          <info-popover mode="right-normal" ng-if="editor.columnsHelpMessage">
-            {{ editor.columnsHelpMessage }}
-          </info-popover>
-        </label>
-      </div>
+<div class="gf-form-group">
+  <h5 class="section-heading">Data</h5>
+  <div class="gf-form gf-form--grow">
+    <label class="gf-form-label width-8">Table Transform</label>
+    <div class="gf-form-select-wrapper">
+      <select
+        class="gf-form-input"
+        ng-model="editor.panel.transform"
+        ng-options="k as v.description for (k, v) in editor.transformers"
+        ng-change="editor.transformChanged()"
+      ></select>
     </div>
   </div>
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Paging</h5>
+  <div class="gf-form-inline">
     <div class="gf-form">
-      <label class="gf-form-label width-8">Rows per page</label>
-      <input
-        type="number"
-        class="gf-form-input width-7"
-        placeholder="100"
-        data-placement="right"
-        ng-model="editor.panel.pageSize"
-        ng-change="editor.render()"
-        ng-model-onblur
-      />
+      <label class="gf-form-label width-8">Columns</label>
     </div>
-    <div class="gf-form max-width-17">
-      <label class="gf-form-label width-8">Font size</label>
-      <div class="gf-form-select-wrapper width-7">
-        <select
-          class="gf-form-input"
-          ng-model="editor.panel.fontSize"
-          ng-options="f for f in editor.fontSizes"
-          ng-change="editor.render()"
-        ></select>
-      </div>
+    <div class="gf-form" ng-repeat="column in editor.panel.columns">
+      <label class="gf-form-label">
+        <icon name="'times'" ng-click="editor.removeColumn(column)"></icon>
+        <span>{{ column.text }}</span>
+      </label>
+    </div>
+    <div class="gf-form" ng-show="editor.canSetColumns">
+      <metric-segment
+        segment="editor.addColumnSegment"
+        get-options="editor.getColumnOptions()"
+        on-change="editor.addColumn()"
+      ></metric-segment>
+    </div>
+    <div class="gf-form" ng-hide="editor.canSetColumns">
+      <label class="gf-form-label">
+        Auto
+        <info-popover mode="right-normal" ng-if="editor.columnsHelpMessage">
+          {{ editor.columnsHelpMessage }}
+        </info-popover>
+      </label>
+    </div>
+  </div>
+</div>
+
+<div class="gf-form-group">
+  <h5 class="section-heading">Paging</h5>
+  <div class="gf-form">
+    <label class="gf-form-label width-8">Rows per page</label>
+    <input
+      type="number"
+      class="gf-form-input width-7"
+      placeholder="100"
+      data-placement="right"
+      ng-model="editor.panel.pageSize"
+      ng-change="editor.render()"
+      ng-model-onblur
+    />
+  </div>
+  <div class="gf-form max-width-17">
+    <label class="gf-form-label width-8">Font size</label>
+    <div class="gf-form-select-wrapper width-7">
+      <select
+        class="gf-form-input"
+        ng-model="editor.panel.fontSize"
+        ng-options="f for f in editor.fontSizes"
+        ng-change="editor.render()"
+      ></select>
     </div>
   </div>
 </div>
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index d00ed1dd569..57afabfe5ab 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -237,6 +237,9 @@ $input-border: 1px solid $input-border-color;
 
   &--dropdown {
     padding-right: $space-lg;
+    position: relative;
+    display: flex;
+    align-items: center;
 
     &::after {
       position: absolute;