Datepicker should inherit from theme

The datepicker plugin that we use provides its own css file, which we
were including and using, however, it was not inheriting any theme
variables.  Because the CSS was built with the default Bootstrap
skin in mind, it looked fine until you tried it on a different theme
and it inherited nothing.

A very minimal SCSS has been provided that actually pulls in theme
variables. The datepicker markup has been broken into templates that
will allow more granular overrides.

Change-Id: I3b6c92a205b2bfff908cb720974821db517a6a3f
Partially-implements: blueprint horizon-dynamic-theme
Partially-Implements: blueprint bootstrap-html-standards
This commit is contained in:
Diana Whitten 2016-05-17 15:47:40 -07:00 committed by Jeremy Moffitt
parent e9e1605c3d
commit 19e62b3cc5
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;
}
}