From 19e62b3cc5377b294cf1939c0ba234320548ef1e Mon Sep 17 00:00:00 2001 From: Diana Whitten Date: Tue, 17 May 2016 15:47:40 -0700 Subject: [PATCH] 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 --- horizon/static/horizon/js/horizon.forms.js | 12 ++-- .../templates/horizon/common/_datepicker.html | 11 ++++ .../horizon/common/_datepicker_form.html | 21 +++++++ .../horizon/common/_usage_summary.html | 37 ++++++------ .../scss/components/_datepicker.scss | 60 +++++++++++++++++-- .../material/static/horizon/_icons.scss | 1 + .../material/static/horizon/_styles.scss | 1 + .../horizon/components/_datepicker.scss | 16 +++++ 8 files changed, 131 insertions(+), 28 deletions(-) create mode 100644 horizon/templates/horizon/common/_datepicker.html create mode 100644 horizon/templates/horizon/common/_datepicker_form.html create mode 100644 openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss diff --git a/horizon/static/horizon/js/horizon.forms.js b/horizon/static/horizon/js/horizon.forms.js index 4cdea8d3d9..2e38906262 100644 --- a/horizon/static/horizon/js/horizon.forms.js +++ b/horizon/static/horizon/js/horizon.forms.js @@ -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'); + }); } }; diff --git a/horizon/templates/horizon/common/_datepicker.html b/horizon/templates/horizon/common/_datepicker.html new file mode 100644 index 0000000000..98ebb993b4 --- /dev/null +++ b/horizon/templates/horizon/common/_datepicker.html @@ -0,0 +1,11 @@ +{% load i18n %} + +{% blocktrans trimmed %} +
+ {{ datepicker_input }} + + + + +
+{% endblocktrans %} diff --git a/horizon/templates/horizon/common/_datepicker_form.html b/horizon/templates/horizon/common/_datepicker_form.html new file mode 100644 index 0000000000..eb5fe8de53 --- /dev/null +++ b/horizon/templates/horizon/common/_datepicker_form.html @@ -0,0 +1,21 @@ +{% load i18n %} + +
+

{% trans "Select a period of time to query its usage:" %} + {% trans "The date should be in YYYY-MM-DD format." %} +

+
+ {% with datepicker_input=form.start datepicker_label="From" %} + {% include 'horizon/common/_datepicker.html' %} + {% endwith %} +
+ + {% trans 'to' %} + +
+ {% with datepicker_input=form.end datepicker_label="To" %} + {% include 'horizon/common/_datepicker.html' %} + {% endwith %} +
+ +
diff --git a/horizon/templates/horizon/common/_usage_summary.html b/horizon/templates/horizon/common/_usage_summary.html index 8a50d70eb2..ae3770dd8a 100644 --- a/horizon/templates/horizon/common/_usage_summary.html +++ b/horizon/templates/horizon/common/_usage_summary.html @@ -3,24 +3,21 @@

{% trans "Usage Summary" %}

-
-

{% trans "Select a period of time to query its usage:" %}

-
- {% blocktrans trimmed with start=form.start %} - {{ start }}{% endblocktrans %} -
-
- {% blocktrans trimmed with end=form.end %} - {{ end }}{% endblocktrans %} -
- - {% trans "The date should be in YYYY-MM-DD format." %} -
-

- {% trans "Active Instances:" %} {{ usage.summary.instances|default:'0' }} - {% trans "Active RAM:" %} {{ usage.summary.memory_mb|mb_float_format|default:'0' }} - {% trans "This Period's VCPU-Hours:" %} {{ usage.summary.vcpu_hours|floatformat:2|default:'0' }} - {% trans "This Period's GB-Hours:" %} {{ usage.summary.disk_gb_hours|floatformat:2|default:'0' }} - {% trans "This Period's RAM-Hours:" %} {{ usage.summary.memory_mb_hours|floatformat:2|default:'0' }} -

+ + {% with start=form.start end=form.end datepicker_id='date_form' %} + {% include 'horizon/common/_datepicker_form.html' %} + {% endwith %} + +
+
{% trans "Active Instances:" %}
+
{{ usage.summary.instances|default:'0' }}
+
{% trans "Active RAM:" %}
+
{{ usage.summary.memory_mb|mb_float_format|default:'0' }}
+
{% trans "This Period's VCPU-Hours:" %}
+
{{ usage.summary.vcpu_hours|floatformat:2|default:'0' }}
+
{% trans "This Period's GB-Hours:" %}
+
{{ usage.summary.disk_gb_hours|floatformat:2|default:'0' }}
+
{% trans "This Period's RAM-Hours:" %}
+
{{ usage.summary.memory_mb_hours|floatformat:2|default:'0' }}
+
diff --git a/openstack_dashboard/static/dashboard/scss/components/_datepicker.scss b/openstack_dashboard/static/dashboard/scss/components/_datepicker.scss index ed9da6589c..53b62cabc3 100644 --- a/openstack_dashboard/static/dashboard/scss/components/_datepicker.scss +++ b/openstack_dashboard/static/dashboard/scss/components/_datepicker.scss @@ -1,7 +1,59 @@ .datepicker { z-index: $zindex-popover !important; -} -.datepicker input{ - @extend .form-control; -} \ No newline at end of file + 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; + } +} diff --git a/openstack_dashboard/themes/material/static/horizon/_icons.scss b/openstack_dashboard/themes/material/static/horizon/_icons.scss index f5776c6a10..2509ae4783 100644 --- a/openstack_dashboard/themes/material/static/horizon/_icons.scss +++ b/openstack_dashboard/themes/material/static/horizon/_icons.scss @@ -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', diff --git a/openstack_dashboard/themes/material/static/horizon/_styles.scss b/openstack_dashboard/themes/material/static/horizon/_styles.scss index c42ef6aafd..047af99431 100644 --- a/openstack_dashboard/themes/material/static/horizon/_styles.scss +++ b/openstack_dashboard/themes/material/static/horizon/_styles.scss @@ -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"; diff --git a/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss b/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss new file mode 100644 index 0000000000..d967c72a06 --- /dev/null +++ b/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss @@ -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; + } +}