Skip to content

Commit

Permalink
Adjust markup and styles so that the Quick, Relative, and Absolute la…
Browse files Browse the repository at this point in the history
…youts all occupy the same bounds, so the content doesn't jump around as you switch modes..
  • Loading branch information
cjcenizal committed May 24, 2017
1 parent fd77082 commit 1d6951a
Show file tree
Hide file tree
Showing 7 changed files with 192 additions and 144 deletions.
2 changes: 1 addition & 1 deletion src/ui/public/angular-bootstrap/datepicker/day.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<table
class="kuiDatePicker"
class="kuiDatePicker fullWidth"
role="grid"
aria-labelledby="{{uniqueId}}-title"
aria-activedescendant="{{activeDateId}}"
Expand Down
2 changes: 1 addition & 1 deletion src/ui/public/angular-bootstrap/datepicker/month.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<table
class="kuiDatePicker"
class="kuiDatePicker fullWidth"
role="grid"
aria-labelledby="{{uniqueId}}-title"
aria-activedescendant="{{activeDateId}}"
Expand Down
2 changes: 1 addition & 1 deletion src/ui/public/angular-bootstrap/datepicker/year.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<table
class="kuiDatePicker"
class="kuiDatePicker fullWidth"
role="grid"
aria-labelledby="{{uniqueId}}-title"
aria-activedescendant="{{activeDateId}}"
Expand Down
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>&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="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>
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
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>&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="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>
12 changes: 12 additions & 0 deletions src/ui/public/timepicker/timepicker.less
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,18 @@
float: left;
padding-right: 15px;
}
.kbn-timepicker-body {
display: flex;
align-itmes: top;
justify-content: stretch;
width: 600px;
}
.kbn-timepicker-body-column {
width: 100%;
}
.kbn-timepicker-form-header {
margin-bottom: 0 !important;
}
.kbn-refresh-section {
float: left;
padding: 0px 15px;
Expand Down

0 comments on commit 1d6951a

Please sign in to comment.