From 5c075f2a3f4eb3bebd2ec7a105b5a03ff8abe292 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 9 Jun 2017 10:52:24 -0600 Subject: [PATCH] Timepicker on the right (#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. (#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 --- .../angular-bootstrap/datepicker/day.html | 2 +- .../angular-bootstrap/datepicker/month.html | 2 +- .../angular-bootstrap/datepicker/year.html | 2 +- .../public/directives/__tests__/timepicker.js | 4 +- .../public/timepicker/absolute_panel/index.js | 1 + .../kbn_timepicker_absolute_panel.html | 77 +++++ .../kbn_timepicker_absolute_panel.js | 22 ++ src/ui/public/timepicker/quick_panel/index.js | 1 + .../kbn_timepicker_quick_panel.html | 13 + .../quick_panel/kbn_timepicker_quick_panel.js | 19 ++ .../public/timepicker/relative_panel/index.js | 1 + .../kbn_timepicker_relative_panel.html | 155 ++++++++++ .../kbn_timepicker_relative_panel.js | 23 ++ src/ui/public/timepicker/timepicker.html | 279 ++++-------------- src/ui/public/timepicker/timepicker.js | 6 +- src/ui/public/timepicker/timepicker.less | 55 +++- ui_framework/components/form/_select.scss | 6 + ui_framework/dist/ui_framework.css | 33 ++- .../doc_site/src/views/form/select.html | 6 + 19 files changed, 477 insertions(+), 230 deletions(-) create mode 100644 src/ui/public/timepicker/absolute_panel/index.js create mode 100644 src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html create mode 100644 src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.js create mode 100644 src/ui/public/timepicker/quick_panel/index.js create mode 100644 src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html create mode 100644 src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.js create mode 100644 src/ui/public/timepicker/relative_panel/index.js create mode 100644 src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html create mode 100644 src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.js 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 @@ +
+
+
+ + +
+ + Set To Now + +
+
+ + +
Invalid Date
+ +
+ +
+
+ +
+
+ + +
+ + Set To Now + +
+
+ + Invalid Date + + +
+ +
+
+
+ +
+ + From must occur before To +
+ diff --git a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.js b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.js new file mode 100644 index 0000000000000..33867a24319a7 --- /dev/null +++ b/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 () { + } + }; +}); diff --git a/src/ui/public/timepicker/quick_panel/index.js b/src/ui/public/timepicker/quick_panel/index.js new file mode 100644 index 0000000000000..3060edcae4b3c --- /dev/null +++ b/src/ui/public/timepicker/quick_panel/index.js @@ -0,0 +1 @@ +import './kbn_timepicker_quick_panel'; 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 new file mode 100644 index 0000000000000..6e659719b4a9a --- /dev/null +++ b/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html @@ -0,0 +1,13 @@ +
+
+
    +
  • + +
    • +
+
+
diff --git a/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.js b/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.js new file mode 100644 index 0000000000000..af1f4e7ec65a7 --- /dev/null +++ b/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(); + } + }; +}); diff --git a/src/ui/public/timepicker/relative_panel/index.js b/src/ui/public/timepicker/relative_panel/index.js new file mode 100644 index 0000000000000..3ae7b06d7f103 --- /dev/null +++ b/src/ui/public/timepicker/relative_panel/index.js @@ -0,0 +1 @@ +import './kbn_timepicker_relative_panel'; 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 new file mode 100644 index 0000000000000..b5fd8a4db2e5d --- /dev/null +++ b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html @@ -0,0 +1,155 @@ + +
+
+
+ + +
+ + Set To Now + +
+
+ +
+ + {{relative.from.preview}} + + + Invalid Expression + +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ From must occur before To +
+
+
+ +
+
+ + +
+ + Set To Now + +
+
+ +
+ + {{relative.to.preview}} + + + Invalid Expression + +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+
+
+ +
+ +
+ diff --git a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.js b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.js new file mode 100644 index 0000000000000..b714916af7f9c --- /dev/null +++ b/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 () { + } + }; +}); diff --git a/src/ui/public/timepicker/timepicker.html b/src/ui/public/timepicker/timepicker.html index d84a17673a5f1..5f166e8d258db 100644 --- a/src/ui/public/timepicker/timepicker.html +++ b/src/ui/public/timepicker/timepicker.html @@ -1,232 +1,69 @@
-
+
-
Time Range
-
-
- +
+
+ Time Range
+ +
+
+ -
-
-
- -
-
    -
  • - -
    • -
-
- - -
- -
-
-
- -
-
- -
-
- -
-
-
- -
- From must occur before To -
-
-
- -
- -
-
- -
-
- -
-
-
- -
-
- -
- -
-
- -
-
- -
- -
-
-
-
- - -
-
- -
-
- -
-
- - Invalid Date - -
-
- -
-
+ -
- -
- - From must occur before To -
-
- -
-
-
+
diff --git a/src/ui/public/timepicker/timepicker.js b/src/ui/public/timepicker/timepicker.js index 8520db75884a1..f0bfead838f0e 100644 --- a/src/ui/public/timepicker/timepicker.js +++ b/src/ui/public/timepicker/timepicker.js @@ -1,4 +1,7 @@ import html from 'ui/timepicker/timepicker.html'; +import './quick_panel'; +import './relative_panel'; +import './absolute_panel'; import _ from 'lodash'; import { relativeOptions } from './relative_options'; import { parseRelativeParts } from './parse_relative_parts'; @@ -18,7 +21,7 @@ const notify = new Notifier({ location: 'timepicker', }); -module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshIntervals) { +module.directive('kbnTimepicker', function (timeUnits, refreshIntervals) { return { restrict: 'E', scope: { @@ -38,7 +41,6 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter if (_.isUndefined($scope.mode)) $scope.mode = 'quick'; - $scope.quickLists = _(quickRanges).groupBy('section').values().value(); $scope.refreshLists = _(refreshIntervals).groupBy('section').values().value(); $scope.relative = { diff --git a/src/ui/public/timepicker/timepicker.less b/src/ui/public/timepicker/timepicker.less index dbf7a30c36ba8..8f37ac089ddd4 100644 --- a/src/ui/public/timepicker/timepicker.less +++ b/src/ui/public/timepicker/timepicker.less @@ -1,5 +1,13 @@ @import '../styles/bootstrap/variables.less'; .kbn-timepicker { + display: flex; + justify-content: flex-end; + + .kbn-timepicker-content { + width: 100%; + max-width: 600px; + } + [kbn-time-input] { text-align: center; } @@ -8,7 +16,34 @@ } .kbn-timepicker-section { float: left; - padding: 0px 15px; + width: 25%; + + & + .kbn-timepicker-section { + padding-left: 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; @@ -20,4 +55,22 @@ .kbn-timepicker-error { color: @brand-danger; } + .kbn-timepicker-title { + display: flex; + justify-content: space-between; + } + .kbn-timepicker-title__section { + display: flex; + align-items: center; + } + .kbn-timerpicker-nav-button { + padding: 3px 10px; + font-size: 14px; + } + /** + * Avoid last nav overlaping collapse button + */ + .nav:last-child { + margin-right: 24px; + } } diff --git a/ui_framework/components/form/_select.scss b/ui_framework/components/form/_select.scss index 659ce585ed4b3..34b7a17a19f62 100644 --- a/ui_framework/components/form/_select.scss +++ b/ui_framework/components/form/_select.scss @@ -1,5 +1,11 @@ .kuiSelect { @include select; + + @include formControl; + + &.kuiSelect-isInvalid { + @include formControlInvalid; + } } .kuiSelect--large { diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 7bfff2d52f6ad..927abd32c1473 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1037,7 +1037,20 @@ body { background-size: 14px; background-repeat: no-repeat; background-position: calc(100% - 8px); - /* 2 */ } + /* 2 */ + appearance: none; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #191E23; + background-color: #ffffff; + border: 1px solid #DEDEDE; + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ } .theme-dark .kuiSelect { color: #cecece; } .kuiSelect:invalid { @@ -1060,6 +1073,24 @@ body { .theme-dark .kuiSelect { background-image: url('data:image/svg+xml;utf8,'); /* 1 */ } + .theme-dark .kuiSelect { + color: #cecece; } + .kuiSelect:invalid { + border-color: #D86051; } + .kuiSelect:focus { + outline: none; + border-color: #6EADC1; } + .kuiSelect:disabled { + opacity: 0.4; + cursor: not-allowed; } + .theme-dark .kuiSelect { + background-color: #444444; + border-color: #444444; } + .theme-dark .kuiSelect:focus { + outline: none; + border-color: #6EADC1; } + .kuiSelect.kuiSelect-isInvalid { + border-color: #D86051; } .kuiSelect--large { min-width: 400px; } diff --git a/ui_framework/doc_site/src/views/form/select.html b/ui_framework/doc_site/src/views/form/select.html index ac0e276b5e947..b6d0aff400fe9 100644 --- a/ui_framework/doc_site/src/views/form/select.html +++ b/ui_framework/doc_site/src/views/form/select.html @@ -12,6 +12,12 @@
+ + +
+