forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adjust markup and styles so that the Quick, Relative, and Absolute la…
…youts 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.
- Loading branch information
Showing
8 changed files
with
217 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 54 additions & 42 deletions
96
src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> </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> |
2 changes: 1 addition & 1 deletion
2
src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
232 changes: 130 additions & 102 deletions
232
src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.