Merge "Datepicker should inherit from theme"
This commit is contained in:
Jenkins
Gerrit Code Review
commit
724133ce74
@ -145,7 +145,7 @@ horizon.forms = {
|
||||
},
|
||||
|
||||
datepicker: function() {
|
||||
var startDate = $('input#id_start').datepicker({ language: horizon.datepickerLocale })
|
||||
var startDate = $('#id_start').datepicker({ language: horizon.datepickerLocale })
|
||||
.on('changeDate', function(ev) {
|
||||
if (ev.dates[0].valueOf() > endDate.dates[0].valueOf()) {
|
||||
var newDate = new Date(ev.dates[0]);
|
||||
@ -158,20 +158,24 @@ horizon.forms = {
|
||||
endDate.update();
|
||||
}).data('datepicker');
|
||||
|
||||
var endDate = $('input#id_end').datepicker({
|
||||
var endDate = $('#id_end').datepicker({
|
||||
language: horizon.datepickerLocale,
|
||||
startDate: startDate ? startDate.dates[0] : null
|
||||
}).on('changeDate', function() {
|
||||
endDate.hide();
|
||||
}).data('datepicker');
|
||||
|
||||
$("input#id_start").mousedown(function(){
|
||||
$("#id_start").mousedown(function(){
|
||||
endDate.hide();
|
||||
});
|
||||
|
||||
$("input#id_end").mousedown(function(){
|
||||
$("#id_end").mousedown(function(){
|
||||
startDate.hide();
|
||||
});
|
||||
|
||||
$('.datepicker-addon').on('click', function() {
|
||||
$(this).siblings('input').trigger('focus');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
11
horizon/templates/horizon/common/_datepicker.html
Normal file
11
horizon/templates/horizon/common/_datepicker.html
Normal file
@ -0,0 +1,11 @@
|
||||
{% load i18n %}
|
||||
|
||||
{% blocktrans trimmed %}
|
||||
<div class='input-group date'>
|
||||
{{ datepicker_input }}
|
||||
<label class="sr-only">{{ datepicker_label }}</label>
|
||||
<span class="input-group-addon datepicker-addon">
|
||||
<span class="fa fa-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
{% endblocktrans %}
|
||||
21
horizon/templates/horizon/common/_datepicker_form.html
Normal file
21
horizon/templates/horizon/common/_datepicker_form.html
Normal file
@ -0,0 +1,21 @@
|
||||
{% load i18n %}
|
||||
|
||||
<form action="?" method="get" id="{{ datepicker_id }}" class="form-inline">
|
||||
<h4>{% trans "Select a period of time to query its usage:" %}
|
||||
<span class="small help-block">{% trans "The date should be in YYYY-MM-DD format." %}</span>
|
||||
</h4>
|
||||
<div class="datepicker form-group">
|
||||
{% with datepicker_input=form.start datepicker_label="From" %}
|
||||
{% include 'horizon/common/_datepicker.html' %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<span class="datepicker-delimiter">
|
||||
<span class="datepicker-delimiter-text">{% trans 'to' %}</span>
|
||||
</span>
|
||||
<div class="datepicker form-group">
|
||||
{% with datepicker_input=form.end datepicker_label="To" %}
|
||||
{% include 'horizon/common/_datepicker.html' %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
|
||||
</form>
|
||||
@ -3,24 +3,21 @@
|
||||
<h3 class="quota-heading">{% trans "Usage Summary" %}</h3>
|
||||
</div>
|
||||
<div class="usage_info_wrapper">
|
||||
<form action="?" method="get" id="date_form" class="form-inline">
|
||||
<h3>{% trans "Select a period of time to query its usage:" %}</h3>
|
||||
<div class="datepicker form-group">
|
||||
{% blocktrans trimmed with start=form.start %}
|
||||
<label>From:</label> {{ start }}{% endblocktrans %}
|
||||
</div>
|
||||
<div class="datepicker form-group">
|
||||
{% blocktrans trimmed with end=form.end %}
|
||||
<label>To:</label>{{ end }}{% endblocktrans %}
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
|
||||
<small>{% trans "The date should be in YYYY-MM-DD format." %}</small>
|
||||
</form>
|
||||
<p id="activity">
|
||||
<span><strong>{% trans "Active Instances:" %}</strong> {{ usage.summary.instances|default:'0' }}</span>
|
||||
<span><strong>{% trans "Active RAM:" %}</strong> {{ usage.summary.memory_mb|mb_float_format|default:'0' }}</span>
|
||||
<span><strong>{% trans "This Period's VCPU-Hours:" %}</strong> {{ usage.summary.vcpu_hours|floatformat:2|default:'0' }}</span>
|
||||
<span><strong>{% trans "This Period's GB-Hours:" %}</strong> {{ usage.summary.disk_gb_hours|floatformat:2|default:'0' }}</span>
|
||||
<span><strong>{% trans "This Period's RAM-Hours:" %}</strong> {{ usage.summary.memory_mb_hours|floatformat:2|default:'0' }}</span>
|
||||
</p>
|
||||
|
||||
{% with start=form.start end=form.end datepicker_id='date_form' %}
|
||||
{% include 'horizon/common/_datepicker_form.html' %}
|
||||
{% endwith %}
|
||||
|
||||
<dl id="activity" class="dl-horizontal">
|
||||
<dt class="small">{% trans "Active Instances:" %}</dt>
|
||||
<dd class="small">{{ usage.summary.instances|default:'0' }}</dd>
|
||||
<dt class="small">{% trans "Active RAM:" %}</dt>
|
||||
<dd class="small">{{ usage.summary.memory_mb|mb_float_format|default:'0' }}</dd>
|
||||
<dt class="small">{% trans "This Period's VCPU-Hours:" %}</dt>
|
||||
<dd class="small">{{ usage.summary.vcpu_hours|floatformat:2|default:'0' }}</dd>
|
||||
<dt class="small">{% trans "This Period's GB-Hours:" %}</dt>
|
||||
<dd class="small">{{ usage.summary.disk_gb_hours|floatformat:2|default:'0' }}</dd>
|
||||
<dt class="small">{% trans "This Period's RAM-Hours:" %}</dt>
|
||||
<dd class="small">{{ usage.summary.memory_mb_hours|floatformat:2|default:'0' }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,59 @@
|
||||
.datepicker {
|
||||
z-index: $zindex-popover !important;
|
||||
}
|
||||
|
||||
.datepicker input{
|
||||
@extend .form-control;
|
||||
}
|
||||
input {
|
||||
@extend .form-control;
|
||||
}
|
||||
|
||||
&.dropdown-menu {
|
||||
padding: $padding-small-vertical;
|
||||
}
|
||||
|
||||
.year,
|
||||
.month,
|
||||
.day {
|
||||
padding: $padding-small-horizontal;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 1;
|
||||
border-radius: $border-radius-base;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($btn-primary-bg, 10%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $btn-primary-bg;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $btn-primary-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $dropdown-link-disabled-color;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-switch,
|
||||
.prev,
|
||||
.next,
|
||||
.year,
|
||||
.month,
|
||||
.day {
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-addon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@ $icon-swap: (
|
||||
ban: 'block-helper',
|
||||
bars: 'menu',
|
||||
bug: 'bug',
|
||||
calendar: 'calendar',
|
||||
caret-up: 'menu-up',
|
||||
caret-down: 'menu-down',
|
||||
caret-up: 'menu-up',
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
@import "icons";
|
||||
@import "components/checkboxes";
|
||||
@import "components/context_selection";
|
||||
@import "components/datepicker";
|
||||
@import "components/dropdowns";
|
||||
@import "components/hamburger";
|
||||
@import "components/help_panel";
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
.datepicker-delimiter {
|
||||
@extend .mdi;
|
||||
@extend .mdi-arrow-right;
|
||||
padding-right: $padding-base-horizontal;
|
||||
|
||||
&-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.datepicker table tr td.active.active {
|
||||
background-color: $brand-primary;
|
||||
|
||||
&:hover{
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user