From 2c6ed1e1a52fbe424bdb71739e55b6e71c26ec6d Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 24 May 2017 13:55:15 -0700
Subject: [PATCH] Adjust markup and styles so that the Quick, Relative, and
 Absolute layouts all occupy the same bounds (#1)

* Adjust markup and styles so that the Quick, Relative, and Absolute layouts all occupy the same bounds, so the content doesn't jump around as you switch modes..

* Make kbn-timepicker-content responsive so that it stacks content on narrower screens.

* Combine Relative input and select fields using kuiFieldGroup.

* Make Timepicker submit button wider.

* Align button on right.
---
 .../angular-bootstrap/datepicker/day.html     |   2 +-
 .../angular-bootstrap/datepicker/month.html   |   2 +-
 .../angular-bootstrap/datepicker/year.html    |   2 +-
 .../kbn_timepicker_absolute_panel.html        |  96 ++++----
 .../kbn_timepicker_quick_panel.html           |   2 +-
 .../kbn_timepicker_relative_panel.html        | 232 ++++++++++--------
 src/ui/public/timepicker/timepicker.html      |   2 +-
 src/ui/public/timepicker/timepicker.less      |  28 +++
 8 files changed, 217 insertions(+), 149 deletions(-)

diff --git a/src/ui/public/angular-bootstrap/datepicker/day.html b/src/ui/public/angular-bootstrap/datepicker/day.html
index 4d2bb57ffb0ae..4912427ea0b70 100755
--- a/src/ui/public/angular-bootstrap/datepicker/day.html
+++ b/src/ui/public/angular-bootstrap/datepicker/day.html
@@ -1,5 +1,5 @@
 <table
-  class="kuiDatePicker"
+  class="kuiDatePicker fullWidth"
   role="grid"
   aria-labelledby="{{uniqueId}}-title"
   aria-activedescendant="{{activeDateId}}"
diff --git a/src/ui/public/angular-bootstrap/datepicker/month.html b/src/ui/public/angular-bootstrap/datepicker/month.html
index 165708ece3082..5dbc689701673 100755
--- a/src/ui/public/angular-bootstrap/datepicker/month.html
+++ b/src/ui/public/angular-bootstrap/datepicker/month.html
@@ -1,5 +1,5 @@
 <table
-  class="kuiDatePicker"
+  class="kuiDatePicker fullWidth"
   role="grid"
   aria-labelledby="{{uniqueId}}-title"
   aria-activedescendant="{{activeDateId}}"
diff --git a/src/ui/public/angular-bootstrap/datepicker/year.html b/src/ui/public/angular-bootstrap/datepicker/year.html
index 4d37a0d9e13c3..c7903cbbaa8f9 100755
--- a/src/ui/public/angular-bootstrap/datepicker/year.html
+++ b/src/ui/public/angular-bootstrap/datepicker/year.html
@@ -1,5 +1,5 @@
 <table
-  class="kuiDatePicker"
+  class="kuiDatePicker fullWidth"
   role="grid"
   aria-labelledby="{{uniqueId}}-title"
   aria-activedescendant="{{activeDateId}}"
diff --git a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
index 0817ab6645aba..6cf9707baa15c 100644
--- a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
+++ b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
@@ -1,53 +1,65 @@
 <form name="absoluteTime" ng-submit="applyAbsolute()">
-  <div class="kbn-timepicker-section">
-    <div>
-      <label class="small">From: <span ng-show="!absolute.from"><em>Invalid Date</em></span>
-        <a
-          class="label label-default"
-          ng-click="setToNow({key:'from'})"
-          kbn-accessible-click
-        >
-          Set To Now
-        </a>
-      </label>
+  <div class="kbn-timepicker-body">
+    <div class="kbn-timepicker-section kbn-timepicker-body-column">
+      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
+        <label class="kuiLocalDropdownHeader__label">
+          From
+        </label>
+
+        <div class="kuiLocalDropdownHeader__actions">
+          <a
+            class="kuiLocalDropdownHeader__action"
+            ng-click="setToNow({key:'from'})"
+            kbn-accessible-click
+          >
+            Set To Now
+          </a>
+        </div>
+      </div>
+
       <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.from">
+      <div ng-show="!absolute.from"><em>Invalid Date</em></div>
+
+      <div>
+        <datepicker ng-model="pickFromDate" ng-model-options="{ getterSetter: true }" max-date="absolute.to" show-weeks="false"></datepicker>
+      </div>
     </div>
-    <div>
-      <datepicker ng-model="pickFromDate" ng-model-options="{ getterSetter: true }" max-date="absolute.to" show-weeks="false"></datepicker>
-    </div>
-  </div>
 
-  <div class="kbn-timepicker-section">
-    <div>
-      <label class="small">To:
-        <a
-          class="label label-default"
-          ng-click="setToNow({key:'to'})"
-          kbn-accessible-click
-        >
-          Set To Now
-        </a>
-      </label>
+    <div class="kbn-timepicker-section kbn-timepicker-body-column">
+      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
+        <label class="kuiLocalDropdownHeader__label">
+          To
+        </label>
+
+        <div class="kuiLocalDropdownHeader__actions">
+          <a
+            class="kuiLocalDropdownHeader__action"
+            ng-click="setToNow({key:'to'})"
+            kbn-accessible-click
+          >
+            Set To Now
+          </a>
+        </div>
+      </div>
+
       <span ng-show="!absolute.to"><em>Invalid Date</em></span>
       <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.to">
-    </div>
-    <div>
-      <datepicker ng-model="pickToDate" ng-model-options="{ getterSetter: true }" min-date="absolute.from" show-weeks="false"></datepicker>
+
+      <div>
+        <datepicker ng-model="pickToDate" ng-model-options="{ getterSetter: true }" min-date="absolute.from" show-weeks="false"></datepicker>
+      </div>
     </div>
   </div>
 
-  <div class="kbn-timepicker-section kbn-timepicker-alert">
-    <label>&nbsp;</label>
-    <div class="form-group">
-      <button
-        data-test-subj="timepickerGoButton"
-        class="kuiButton kuiButton--primary"
-        ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to"
-        type="submit"
-      >
-        Go
-      </button>
-      <span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
-    </div>
+  <div class="kbn-timepicker-actions">
+    <button
+      data-test-subj="timepickerGoButton"
+      class="kuiButton kuiButton--primary kbn-timepicker-submit-button"
+      ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to"
+      type="submit"
+    >
+      Go
+    </button>
+    <span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
   </div>
 </form>
diff --git a/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html b/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html
index 87423552622ee..6e659719b4a9a 100644
--- a/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html
+++ b/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html
@@ -1,4 +1,4 @@
-<div>
+<div class="kbn-timepicker-body">
   <div ng-repeat="list in quickLists" class="kbn-timepicker-section">
     <ul class="list-unstyled">
       <li ng-repeat="option in list">
diff --git a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
index 2713fffff1c71..990c6cde3773d 100644
--- a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
+++ b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
@@ -1,111 +1,139 @@
 <form role="form" ng-submit="applyRelative()" class="form-inline" name="relativeTime">
-  <div class="kbn-timepicker-section">
-    <label>
-      From:
-      <span ng-show="relative.from.preview">{{relative.from.preview}}</span>
-      <a
-        class="label label-default"
-        ng-click="setRelativeToNow({key:'from'})"
-        kbn-accessible-click
-      >
-        Set To Now
-      </a>
-      <span ng-hide="relative.from.preview"><em>Invalid Expression</em></span>
-    </label>
-    <br>
-    <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
-      <input
-        required
-        ng-model="relative.from.count"
-        ng-change="formatRelative({key:'from'})"
-        greater-than="-1"
-        min="0"
-        type="number"
-        class="form-control">
-    </div>
-    <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
-      <select
-        ng-model="relative.from.unit"
-        ng-options="opt.value as opt.text for opt in relativeOptions"
-        ng-change="formatRelative({key:'from'})"
-        class="form-control col-xs-2">
-      </select>
-    </div>
-    <br>
-    <div class="small">
-      <label>
-        <input
-          ng-model="relative.from.round"
-          ng-checked="relative.from.round"
-          ng-change="formatRelative({key:'from'})"
-          type="checkbox">
-        round to the {{units[relative.from.unit.substring(0,1)]}}
-      </label>
-      <div
-        ng-class="{ 'kbn-timepicker-error': checkRelative() }"
-        ng-show="checkRelative()">
-        <strong>From</strong> must occur before <strong>To</strong>
+  <div class="kbn-timepicker-body kuiVerticalRhythm">
+    <div class="kbn-timepicker-section kbn-timepicker-body-column">
+      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
+        <label class="kuiLocalDropdownHeader__label">
+          From
+        </label>
+
+        <div class="kuiLocalDropdownHeader__actions">
+          <a
+            class="kuiLocalDropdownHeader__action"
+            ng-click="setRelativeToNow({key:'from'})"
+            kbn-accessible-click
+          >
+            Set To Now
+          </a>
+        </div>
       </div>
-    </div>
-  </div>
 
-  <div class="kbn-timepicker-section">
-    <label>
-      To:
-      <span ng-show="relative.to.preview">{{relative.to.preview}}</span>
-      <a
-        class="label label-default"
-        ng-click="setRelativeToNow({key:'to'})"
-        kbn-accessible-click
-      >
-        Set To Now
-      </a>
-      <span ng-hide="relative.to.preview"><em>Invalid Expression</em></span>
-    </label>
-    <br>
-    <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
-      <input
-        required
-        ng-model="relative.to.count"
-        ng-change="formatRelative({key:'to'})"
-        greater-than="-1"
-        min="0"
-        type="number"
-        class="form-control">
-    </div>
-    <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
-      <select
-        ng-model="relative.to.unit"
-        ng-options="opt.value as opt.text for opt in relativeOptions"
-        ng-change="formatRelative({key:'to'})"
-        class="form-control col-xs-2">
-      </select>
+      <div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
+        <span ng-show="relative.from.preview">
+          {{relative.from.preview}}
+        </span>
+        <span ng-hide="relative.from.preview">
+          <em>Invalid Expression</em>
+        </span>
+      </div>
+
+      <div class="kuiFieldGroup kuiVerticalRhythmSmall">
+        <div class="kuiFieldGroupSection kuiFieldGroupSection--wide" ng-class="{ 'has-error': checkRelative() }">
+          <input
+            required
+            ng-model="relative.from.count"
+            ng-change="formatRelative({key:'from'})"
+            greater-than="-1"
+            min="0"
+            type="number"
+            class="form-control fullWidth">
+        </div>
+
+        <div class="kuiFieldGroupSection" ng-class="{ 'has-error': checkRelative() }">
+          <select
+            ng-model="relative.from.unit"
+            ng-options="opt.value as opt.text for opt in relativeOptions"
+            ng-change="formatRelative({key:'from'})"
+            class="form-control fullWidth">
+          </select>
+        </div>
+      </div>
+
+      <div class="kuiVerticalRhythmSmall">
+        <label>
+          <input
+            ng-model="relative.from.round"
+            ng-checked="relative.from.round"
+            ng-change="formatRelative({key:'from'})"
+            type="checkbox">
+          round to the {{units[relative.from.unit.substring(0,1)]}}
+        </label>
+        <div
+          ng-class="{ 'kbn-timepicker-error': checkRelative() }"
+          ng-show="checkRelative()">
+          <strong>From</strong> must occur before <strong>To</strong>
+        </div>
+      </div>
     </div>
-    <br>
-    <div class="small">
-      <label>
-        <input
-          ng-model="relative.to.round"
-          ng-checked="relative.to.round"
-          ng-change="formatRelative({key:'to'})"
-          type="checkbox">
-        round to the {{units[relative.to.unit.substring(0,1)]}}
-      </label>
+
+    <div class="kbn-timepicker-section kbn-timepicker-body-column">
+      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
+        <label class="kuiLocalDropdownHeader__label">
+          To
+        </label>
+
+        <div class="kuiLocalDropdownHeader__actions">
+          <a
+            class="kuiLocalDropdownHeader__action"
+            ng-click="setRelativeToNow({key:'to'})"
+            kbn-accessible-click
+          >
+            Set To Now
+          </a>
+        </div>
+      </div>
+
+      <div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
+        <span ng-show="relative.to.preview">
+          {{relative.to.preview}}
+        </span>
+        <span ng-hide="relative.to.preview">
+          <em>Invalid Expression</em>
+        </span>
+      </div>
+
+      <div class="kuiFieldGroup kuiVerticalRhythmSmall">
+        <div class="kuiFieldGroupSection kuiFieldGroupSection--wide" ng-class="{ 'has-error': checkRelative() }">
+          <input
+            required
+            ng-model="relative.to.count"
+            ng-change="formatRelative({key:'to'})"
+            greater-than="-1"
+            min="0"
+            type="number"
+            class="form-control fullWidth">
+        </div>
+
+        <div class="kuiFieldGroupSection" ng-class="{ 'has-error': checkRelative() }">
+          <select
+            ng-model="relative.to.unit"
+            ng-options="opt.value as opt.text for opt in relativeOptions"
+            ng-change="formatRelative({key:'to'})"
+            class="form-control fullWidth">
+          </select>
+        </div>
+      </div>
+
+      <div class="kuiVerticalRhythmSmall">
+        <label>
+          <input
+            ng-model="relative.to.round"
+            ng-checked="relative.to.round"
+            ng-change="formatRelative({key:'to'})"
+            type="checkbox">
+          round to the {{units[relative.to.unit.substring(0,1)]}}
+        </label>
+      </div>
     </div>
   </div>
 
-  <div class="kbn-timepicker-section">
-    <label>&nbsp;</label>
-    <br>
-    <div class="form-group">
-      <button
-        data-test-subj="timepickerGoButton"
-        type="submit"
-        class="kuiButton kuiButton--primary"
-        ng-disabled="!(relative.from.preview && relative.to.preview) || checkRelative()"
-      >
-        Go
-      </button>
-    </div>
+  <div class="kbn-timepicker-actions kuiVerticalRhythm">
+    <button
+      data-test-subj="timepickerGoButton"
+      type="submit"
+      class="kuiButton kuiButton--primary kbn-timepicker-submit-button"
+      ng-disabled="!(relative.from.preview && relative.to.preview) || checkRelative()"
+    >
+      Go
+    </button>
   </div>
 </form>
diff --git a/src/ui/public/timepicker/timepicker.html b/src/ui/public/timepicker/timepicker.html
index f2640fba692e0..17df38e0e4fcc 100644
--- a/src/ui/public/timepicker/timepicker.html
+++ b/src/ui/public/timepicker/timepicker.html
@@ -1,6 +1,6 @@
 <div class="kbn-timepicker">
 
-  <div class="tab-content">
+  <div class="tab-content kbn-timepicker-content">
 
     <!-- Filters -->
     <div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
diff --git a/src/ui/public/timepicker/timepicker.less b/src/ui/public/timepicker/timepicker.less
index 79bf620334b8f..435782efd4b1d 100644
--- a/src/ui/public/timepicker/timepicker.less
+++ b/src/ui/public/timepicker/timepicker.less
@@ -3,6 +3,11 @@
   display: flex;
   justify-content: flex-end;
 
+  .kbn-timepicker-content {
+    width: 100%;
+    max-width: 600px;
+  }
+
   [kbn-time-input] {
     text-align: center;
   }
@@ -13,6 +18,29 @@
     float: left;
     padding-right: 15px;
   }
+  .kbn-timepicker-body {
+    display: flex;
+    align-itmes: top;
+    justify-content: stretch;
+    width: 100%;
+
+    @media (max-width: 660px) {
+      flex-direction: column;
+    }
+  }
+  .kbn-timepicker-body-column {
+    width: 100%;
+  }
+  .kbn-timepicker-form-header {
+    margin-bottom: 0 !important;
+  }
+  .kbn-timepicker-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .kbn-timepicker-submit-button {
+    min-width: 100px;
+  }
   .kbn-refresh-section {
     float: left;
     padding: 0px 15px;