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

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

horizon/templates/horizon/common/_datepicker.html

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

horizon/templates/horizon/common/_datepicker_form.html

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

horizon/templates/horizon/common/_usage_summary.html

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

openstack_dashboard/static/dashboard/scss/components/_datepicker.scss

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

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

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

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