Skip to content

Adjust markup and styles so that the Quick, Relative, and Absolute layouts all occupy the same bounds #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nreese merged 5 commits into from
May 24, 2017
Merged

Adjust markup and styles so that the Quick, Relative, and Absolute layouts all occupy the same bounds #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1d6951a
Adjust markup and styles so that the Quick, Relative, and Absolute la…
cjcenizal May 24, 2017
bba440f
Make kbn-timepicker-content responsive so that it stacks content on n…
cjcenizal May 24, 2017
459aff8
Combine Relative input and select fields using kuiFieldGroup.
cjcenizal May 24, 2017
c3b3618
Make Timepicker submit button wider.
cjcenizal May 24, 2017
697e835
Align button on right.
cjcenizal May 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/ui/public/angular-bootstrap/datepicker/day.html
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
96 changes: 54 additions & 42 deletions src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
View file
Open in desktop
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="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 src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html
View file
Open in desktop
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
232 changes: 130 additions & 102 deletions src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
View file
Open in desktop
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>&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="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>
2 changes: 1 addition & 1 deletion src/ui/public/timepicker/timepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="kbn-timepicker">

<div class="tab-content">
<div class="tab-content kbn-timepicker-content">

<!-- Filters -->
<div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
Expand Down
Loading