Merge "Datepicker should inherit from theme"

This commit is contained in:
Jenkins 2017-07-27 07:39:17 +00:00 committed by Gerrit Code Review
commit 724133ce74
8 changed files with 131 additions and 28 deletions

View File

@ -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');
});
}
};

View 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 %}

View 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>

View File

@ -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>

View File

@ -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;
}
}

View File

@ -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',

View File

@ -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";

View File

@ -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;
}
}