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, so the content doesn't jump around as you switch modes..
- Loading branch information
Showing
7 changed files
with
192 additions
and
144 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="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> | ||
</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
220 changes: 122 additions & 98 deletions
220
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,135 @@ | ||
<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> | ||
<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="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }"> | ||
<input | ||
ng-model="relative.from.round" | ||
ng-checked="relative.from.round" | ||
required | ||
ng-model="relative.from.count" | ||
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> | ||
greater-than="-1" | ||
min="0" | ||
type="number" | ||
class="form-control fullWidth"> | ||
</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="kuiVerticalRhythmSmall" 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 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> | ||
|
||
<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="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }"> | ||
<input | ||
ng-model="relative.to.round" | ||
ng-checked="relative.to.round" | ||
required | ||
ng-model="relative.to.count" | ||
ng-change="formatRelative({key:'to'})" | ||
type="checkbox"> | ||
round to the {{units[relative.to.unit.substring(0,1)]}} | ||
</label> | ||
greater-than="-1" | ||
min="0" | ||
type="number" | ||
class="form-control fullWidth"> | ||
</div> | ||
|
||
<div class="kuiVerticalRhythmSmall" 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 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="form-group kuiVerticalRhythm"> | ||
<button | ||
data-test-subj="timepickerGoButton" | ||
type="submit" | ||
class="kuiButton kuiButton--primary" | ||
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