Timepicker on the right (elastic#11980)

* quick panel moved to directive

* move relative to directive

* move absolute to directive

* move stuff from timepicker directive to new directives

* move timepicker to right with flexbox

* remove left padding for kbn-timepicker-section

* merge in timepicker.html changes from - Improve accessibility of the Datepicker. (elastic#11753)

* 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.

* migrate inputs from form-control to kui classes

* update generated dist/ui_framework.css

* fix broken tests

* create kbn-timerpicker-nav-button class and update kbn-timepicker-section to make each column the same width

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}}"

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}}"

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}}"

src/ui/public/directives/__tests__/timepicker.js

@@ -172,11 +172,11 @@ describe('timepicker directive', function () {
 
     it('has a preview of the "from" input', function () {
       const preview = $elem.find('.kbn-timepicker-section span[ng-show="relative.from.preview"]');
-      expect(preview.text()).to.be(moment().subtract(15, 'minutes').format($scope.format));
+      expect(preview.text().trim()).to.be(moment().subtract(15, 'minutes').format($scope.format));
     });
 
     it('has a disabled "to" field that contains "Now"', function () {
-      expect($elem.find('.kbn-timepicker-section span[ng-show="relative.to.preview"]').text()).to.be('Now');
+      expect($elem.find('.kbn-timepicker-section span[ng-show="relative.to.preview"]').text().trim()).to.be('Now');
     });
 
     it('has a submit handler', function () {

src/ui/public/timepicker/absolute_panel/index.js

@@ -0,0 +1 @@
+import './kbn_timepicker_absolute_panel';

src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html

@@ -0,0 +1,77 @@
+<form name="absoluteTime" ng-submit="applyAbsolute()">
+  <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="kuiTextInput fullWidth"
+        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 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="kuiTextInput fullWidth"
+        input-datetime="{{format}}"
+        ng-model="absolute.to"
+      >
+
+      <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-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>

src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.js

@@ -0,0 +1,22 @@
+import template from './kbn_timepicker_absolute_panel.html';
+import { uiModules } from 'ui/modules';
+
+const module = uiModules.get('ui/timepicker');
+
+module.directive('kbnTimepickerAbsolutePanel', function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      absolute: '=',
+      applyAbsolute: '&',
+      format: '=',
+      pickFromDate: '=',
+      pickToDate: '=',
+      setToNow: '&'
+    },
+    template,
+    controller: function () {
+    }
+  };
+});

src/ui/public/timepicker/quick_panel/index.js

@@ -0,0 +1 @@
+import './kbn_timepicker_quick_panel';

src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html

@@ -0,0 +1,13 @@
+<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">
+        <a
+          ng-click="setQuick({from: option.from, to: option.to})"
+          ng-bind="::option.display"
+          kbn-accessible-click
+        ></a>
+      </li>
+    </ul>
+  </div>
+</div>

src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.js

@@ -0,0 +1,19 @@
+import _ from 'lodash';
+import template from './kbn_timepicker_quick_panel.html';
+import { uiModules } from 'ui/modules';
+
+const module = uiModules.get('ui/timepicker');
+
+module.directive('kbnTimepickerQuickPanel', function (quickRanges) {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      setQuick: '&'
+    },
+    template,
+    controller: function ($scope) {
+      $scope.quickLists = _(quickRanges).groupBy('section').values().value();
+    }
+  };
+});

src/ui/public/timepicker/relative_panel/index.js

@@ -0,0 +1 @@
+import './kbn_timepicker_relative_panel';

src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html

@@ -0,0 +1,155 @@
+<form role="form" ng-submit="applyRelative()" class="form-inline" name="relativeTime">
+  <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 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">
+          <input
+            required
+            ng-model="relative.from.count"
+            ng-change="formatRelative({key:'from'})"
+            greater-than="-1"
+            min="0"
+            type="number"
+            ng-class="{ 'kuiTextInput-isInvalid' : checkRelative() }"
+            class="kuiTextInput fullWidth"
+          >
+        </div>
+
+        <div class="kuiFieldGroupSection">
+          <select
+            ng-model="relative.from.unit"
+            ng-options="opt.value as opt.text for opt in relativeOptions"
+            ng-change="formatRelative({key:'from'})"
+            ng-class="{ 'kuiSelect-isInvalid': checkRelative() }"
+            class="kuiSelect fullWidth"
+          >
+          </select>
+        </div>
+      </div>
+
+      <div class="kuiVerticalRhythmSmall">
+        <label class="kuiCheckBoxLabel">
+          <input
+            class="kuiCheckBox"
+            type="checkbox"
+            ng-model="relative.from.round"
+            ng-checked="relative.from.round"
+            ng-change="formatRelative({key:'from'})"
+          >
+          <span class="kuiCheckBoxLabel__text">
+            round to the {{units[relative.from.unit.substring(0,1)]}}
+          </span>
+        </label>
+        <div
+          ng-class="{ 'kbn-timepicker-error': checkRelative() }"
+          ng-show="checkRelative()">
+          <strong>From</strong> must occur before <strong>To</strong>
+        </div>
+      </div>
+    </div>
+
+    <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">
+          <input
+            required
+            ng-model="relative.to.count"
+            ng-change="formatRelative({key:'to'})"
+            greater-than="-1"
+            min="0"
+            type="number"
+            ng-class="{ 'kuiTextInput-isInvalid': checkRelative() }"
+            class="kuiTextInput fullWidth"
+          >
+        </div>
+
+        <div class="kuiFieldGroupSection">
+          <select
+            ng-model="relative.to.unit"
+            ng-options="opt.value as opt.text for opt in relativeOptions"
+            ng-change="formatRelative({key:'to'})"
+            ng-class="{ 'kuiSelect-isInvalid': checkRelative() }"
+            class="kuiSelect fullWidth"
+          >
+          </select>
+        </div>
+      </div>
+
+      <div class="kuiVerticalRhythmSmall">
+        <label class="kuiCheckBoxLabel">
+          <input
+            class="kuiCheckBox"
+            type="checkbox"
+            ng-model="relative.to.round"
+            ng-checked="relative.to.round"
+            ng-change="formatRelative({key:'to'})"
+          >
+          <span class="kuiCheckBoxLabel__text">
+            round to the {{units[relative.to.unit.substring(0,1)]}}
+          </span>
+        </label>
+      </div>
+    </div>
+  </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>

src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.js

@@ -0,0 +1,23 @@
+import template from './kbn_timepicker_relative_panel.html';
+import { uiModules } from 'ui/modules';
+
+const module = uiModules.get('ui/timepicker');
+
+module.directive('kbnTimepickerRelativePanel', function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      applyRelative: '&',
+      checkRelative: '&',
+      formatRelative: '&',
+      relative: '=',
+      relativeOptions: '=',
+      setRelativeToNow: '&',
+      units: '='
+    },
+    template,
+    controller: function () {
+    }
+  };
+});