From 7580d15659a950f5de54e6c01953b022cf83bdc5 Mon Sep 17 00:00:00 2001
From: Ryan Peters <rjpeter2@gmail.com>
Date: Tue, 9 Feb 2016 12:57:26 -0600
Subject: [PATCH] Horizon Radio Buttons are now themeable.

Horizon radio buttons were using the standard browser radio buttons.
The default radio buttons have been altered to allow for a highly
customized experience through the use of CSS pseudo elements and
Icon Fonts. This allows the color, size, and unselected and selected
states of the checkbox to be altered. The 'default' theme uses the
standard Font Awesome radio button icons. The 'material' theme uses
the Material Design radio buttons. It was noted, during this refactor,
that there was an error in the _themable_checkbox template. This has
been fixed.

Change-Id: I1ca2e39e893b45adddf513c0dcb2670b2876594f
Partially-Implements: blueprint horizon-theme-css-reorg
---
 .../templates/horizon/common/_form_field.html | 39 +++----------------
 .../horizon/common/_form_field_decorator.html |  6 +++
 .../horizon/common/_horizontal_field.html     | 19 ++++-----
 .../common/fields/_themable_checkbox.html     | 13 +------
 .../common/fields/_themable_radiobutton.html  | 17 ++++++++
 .../theme-preview/theme-preview.html          | 17 ++++++++
 .../scss/components/_radiobuttons.scss        | 36 +++++++++++++++++
 .../static/dashboard/scss/horizon.scss        |  1 +
 .../material/static/horizon/_icons.scss       |  2 +
 .../material/static/horizon/_styles.scss      |  1 +
 .../horizon/components/_checkboxes.scss       |  1 -
 .../horizon/components/_radiobuttons.scss     | 30 ++++++++++++++
 12 files changed, 125 insertions(+), 57 deletions(-)
 create mode 100644 horizon/templates/horizon/common/_form_field_decorator.html
 create mode 100644 horizon/templates/horizon/common/fields/_themable_radiobutton.html
 create mode 100644 openstack_dashboard/static/dashboard/scss/components/_radiobuttons.scss
 create mode 100644 openstack_dashboard/themes/material/static/horizon/components/_radiobuttons.scss

diff --git a/horizon/templates/horizon/common/_form_field.html b/horizon/templates/horizon/common/_form_field.html
index 3614cf642c..480391c0ee 100644
--- a/horizon/templates/horizon/common/_form_field.html
+++ b/horizon/templates/horizon/common/_form_field.html
@@ -6,39 +6,12 @@
     {% include 'horizon/common/fields/_themable_checkbox.html' %}
     </div>
   {% elif field|is_radio %}
-    {% if field.auto_id %}
-      <label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}">
-        <span class="field-label">{{ field.label }}</span>
-        {% if field.field.required %}{% include "horizon/common/_form_field_required.html" %}{% endif %}
-      </label>
-      {% if field.help_text %}
-        <span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ field.help_text|safe }}"><span class="fa fa-question-circle"></span></span>
-      {% endif %}
-    {% endif %}
-    <div class="{{ classes.value }}">
-      {% for choice in field %}
-        <div class="radio">
-          <label>
-            {{ choice.tag }}
-            {{ choice.choice_label }}
-          </label>
-        </div>
-      {% endfor %}
-
-      {% for error in field.errors %}
-        <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
-      {% endfor %}
-
-    </div>
+    {% include 'horizon/common/fields/_themable_radiobutton.html' %}
   {% else %}
     {% if field.auto_id %}
       <label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}" for="{{ field.auto_id }}">
-        <span class="field-label">{{ field.label }}</span>
-      {% if field.field.required %}{% include "horizon/common/_form_field_required.html" %}{% endif %}
-      </label>
-      {% if field.help_text %}
-        <span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ field.help_text|safe }}"><span class="fa fa-question-circle"></span></span>
-      {% endif %}
+          <span class="field-label">{{ field.label }}</span></label>
+      {% include "horizon/common/_form_field_decorator.html" %}
     {% endif %}
 
     <div class="{{ classes.value }} {{ field|wrapper_classes }}">
@@ -56,9 +29,9 @@
         {{ field|add_bootstrap_class }}
       {% endif %}
       {% endwith %}
-      {% for error in field.errors %}
-        <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
-      {% endfor %}
     </div>
   {% endif %}
+  {% for error in field.errors %}
+    <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
+  {% endfor %}
 </div>
diff --git a/horizon/templates/horizon/common/_form_field_decorator.html b/horizon/templates/horizon/common/_form_field_decorator.html
new file mode 100644
index 0000000000..fd8cd7b3b3
--- /dev/null
+++ b/horizon/templates/horizon/common/_form_field_decorator.html
@@ -0,0 +1,6 @@
+{% if field.field.required %}{% include "horizon/common/_form_field_required.html" %}{% endif %}
+{% if field.help_text %}
+  <span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ field.help_text|safe }}">
+    <span class="fa fa-question-circle"></span>
+  </span>
+{% endif %}
diff --git a/horizon/templates/horizon/common/_horizontal_field.html b/horizon/templates/horizon/common/_horizontal_field.html
index 3a367a6796..d911aaae17 100644
--- a/horizon/templates/horizon/common/_horizontal_field.html
+++ b/horizon/templates/horizon/common/_horizontal_field.html
@@ -1,29 +1,24 @@
 {% load form_helpers %}
 
 <div class="form-group{% if field.errors %} has-error{% endif %} {{ field.css_classes }}">
-  <label class="control-label col-sm-3" for="{{ field.id_for_label }}">
+  <label class="control-label col-sm-3 {% if field.field.required %}{{ form.required_css_class }}{% endif %}" for="{{ field.id_for_label }}">
     <span class="field-label">{{ field.label }}</span>
-    {% if field.field.required %}{% include "horizon/common/_form_field_required.html" %}{% endif %}
+    {% include "horizon/common/_form_field_decorator.html" %}
   </label>
   <div class="col-sm-9 {{ classes.value }} {{ field|wrapper_classes }}">
     {% if field|is_checkbox %}
-      {% with is_vertical=1 %}
+      {% with is_horizontal=1 %}
       {% include 'horizon/common/fields/_themable_checkbox.html' %}
       {% endwith %}
+    {% elif field|is_radio %}
+      {% with is_horizontal=1 %}
+      {% include 'horizon/common/fields/_themable_radiobutton.html' %}
+      {% endwith %}
     {% else %}
       {{ field|add_bootstrap_class }}
     {% endif %}
     {% for error in field.errors %}
       <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
-    {% empty %}
-      {% comment %}
-      Escape help_text a second time here, to avoid an XSS issue in bootstrap.js.
-      This can most likely be removed once we upgrade bootstrap.js past 2.0.2.
-      Note: the spaces are necessary here.
-      {% endcomment %}
-      {% if field.help_text %}
-        <span class="help-block">{% filter force_escape %} {{ field.help_text }} {% endfilter %} </span>
-      {% endif %}
     {% endfor %}
   </div>
 </div>
diff --git a/horizon/templates/horizon/common/fields/_themable_checkbox.html b/horizon/templates/horizon/common/fields/_themable_checkbox.html
index 6e41261a16..d76a913f40 100644
--- a/horizon/templates/horizon/common/fields/_themable_checkbox.html
+++ b/horizon/templates/horizon/common/fields/_themable_checkbox.html
@@ -6,19 +6,10 @@
        class="{{ form.required_css_class }}"
      {% endif %}
        for="{{ field.auto_id }}">
-     {% if not is_vertical %}
+     {% if not is_horizontal %}
        <span class="control-label">{{ field.label }}</span>
-     {% endif %}
-     {% if field.field.required %}{% include "horizon/common/_form_field_required.html" %}{% endif %}
-     {% if field.help_text %}
-       <span class="help-icon" data-toggle="tooltip"
-             data-placement="top" title="{{ field.help_text|safe }}">
-           <span class="fa fa-question-circle"></span>
-         </span>
+       {% include "horizon/common/_form_field_decorator.html" %}
      {% endif %}
     </label>
   {% endif %}
-  {% for error in field.errors %}
-    <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
-  {% endfor %}
 </div>
diff --git a/horizon/templates/horizon/common/fields/_themable_radiobutton.html b/horizon/templates/horizon/common/fields/_themable_radiobutton.html
new file mode 100644
index 0000000000..53adbd6b5a
--- /dev/null
+++ b/horizon/templates/horizon/common/fields/_themable_radiobutton.html
@@ -0,0 +1,17 @@
+{% if field.auto_id %}
+  {% if not is_horizontal %}
+    <label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}">
+        <span class="field-label">{{ field.label }}</span></label>
+    {% include "horizon/common/_form_field_decorator.html" %}
+  {% endif %}
+{% endif %}
+<div class="{{ classes.value }}">
+  {% for choice in field %}
+    <div class="themable-radio">
+      {{ choice.tag }}
+      <label for="{{ choice.id_for_label }}">
+        <span>{{ choice.choice_label }}</span>
+      </label>
+    </div>
+  {% endfor %}
+</div>
diff --git a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
index 482860ce9e..03d330e1a1 100644
--- a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
+++ b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
@@ -592,6 +592,23 @@
                 </div>
               </div>
             </div>
+            <div class="form-group">
+              <label translate class="col-lg-2 control-label">Themable Radios</label>
+              <div class="col-lg-10">
+                <div class="themable-radio">
+                  <input type="radio" name="optionsThemableRadios" id="optionsRadios3" value="option1" checked="">
+                  <label translate for="optionsRadios3">
+                    <span>{$ 'Themable Option 1' | translate $}</span>
+                  </label>
+                </div>
+                <div class="themable-radio">
+                  <input type="radio" name="optionsThemableRadios" id="optionsRadios4" value="option2">
+                  <label translate for="optionsRadios4">
+                    <span>{$ 'Themable Option 2' | translate $}</span>
+                  </label>
+                </div>
+              </div>
+            </div>
             <div class="form-group">
               <label translate for="select" class="col-lg-2 control-label">Selects</label>
               <div class="col-lg-10">
diff --git a/openstack_dashboard/static/dashboard/scss/components/_radiobuttons.scss b/openstack_dashboard/static/dashboard/scss/components/_radiobuttons.scss
new file mode 100644
index 0000000000..3e295596d7
--- /dev/null
+++ b/openstack_dashboard/static/dashboard/scss/components/_radiobuttons.scss
@@ -0,0 +1,36 @@
+@import '/horizon/lib/font-awesome/scss/variables';
+@import '/horizon/lib/font-awesome/scss/mixins';
+
+//
+// Radio Buttons
+// This will ONLY work when the label's 'for' attribute
+// shares the input[type=radio]'s 'id' value
+// --------------------------------------------------
+
+.themable-radio {
+
+  // Hide the real radio button
+  input[type=radio] {
+    display: none;
+
+    // Radio button - Unchecked
+    & + label {
+      padding-left: 0;
+
+      &:before {
+        @include fa-icon();
+        content: $fa-var-circle-o;
+      }
+
+      & > span {
+        padding-left: $padding-small-horizontal;
+        vertical-align: middle;
+      }
+    }
+
+    // Radio Button - Checked
+    &:checked + label:before {
+      content: $fa-var-dot-circle-o;
+    }
+  }
+}
diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss
index 93a5423a58..0496b3eb08 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon.scss
@@ -35,6 +35,7 @@
 @import "components/pie_charts";
 @import "components/progress_bars";
 @import "components/quota";
+@import "components/radiobuttons";
 @import "components/resource_browser";
 @import "components/resource_topology";
 @import "components/selection_menu";
diff --git a/openstack_dashboard/themes/material/static/horizon/_icons.scss b/openstack_dashboard/themes/material/static/horizon/_icons.scss
index 0cb2f77fe1..fabd4db235 100644
--- a/openstack_dashboard/themes/material/static/horizon/_icons.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_icons.scss
@@ -26,12 +26,14 @@ $icon-swap: (
   chevron-left: 'chevron-left',
   chevron-right: 'chevron-right',
   chevron-up: 'chevron-up',
+  circle-o: 'radiobox-blank',
   close: 'close',
   cloud-download: 'cloud-download',
   cloud-upload: 'cloud-upload',
   code: 'code-tags',
   cog: 'settings',
   desktop: 'desktop-mac',
+  dot-circle-o: 'radiobox-marked',
   download: 'download',
   edit: 'pencil',
   exchange: 'swap-horizontal',
diff --git a/openstack_dashboard/themes/material/static/horizon/_styles.scss b/openstack_dashboard/themes/material/static/horizon/_styles.scss
index 09b10ef476..e6ba209bbc 100644
--- a/openstack_dashboard/themes/material/static/horizon/_styles.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_styles.scss
@@ -8,6 +8,7 @@
 @import "components/messages";
 @import "components/navbar";
 @import "components/progress_bars";
+@import "components/radiobuttons";
 @import "components/selects";
 @import "components/sidebar";
 @import "components/trees";
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_checkboxes.scss b/openstack_dashboard/themes/material/static/horizon/components/_checkboxes.scss
index aad701bd12..585bc4a215 100644
--- a/openstack_dashboard/themes/material/static/horizon/components/_checkboxes.scss
+++ b/openstack_dashboard/themes/material/static/horizon/components/_checkboxes.scss
@@ -2,7 +2,6 @@
 // Custom Material Checkboxes
 // --------------------------------------------------
 
-@import "/horizon/lib/mdi/scss/icons";
 .themable-checkbox {
 
   input[type=checkbox] {
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_radiobuttons.scss b/openstack_dashboard/themes/material/static/horizon/components/_radiobuttons.scss
new file mode 100644
index 0000000000..6769911c33
--- /dev/null
+++ b/openstack_dashboard/themes/material/static/horizon/components/_radiobuttons.scss
@@ -0,0 +1,30 @@
+//
+// Custom Material Radio Buttons
+// --------------------------------------------------
+
+.themable-radio {
+
+  input[type=radio] {
+
+    // Radio button - Unchecked
+    & + label {
+      @extend .mdi-radiobox-blank;
+
+      &:before {
+        @extend .mdi;
+        font-size: $font-size-h5;
+        line-height: $font-size-h5;
+        vertical-align: middle;
+      }
+    }
+
+    // Radio button - Checked
+    &:checked + label {
+      @extend .mdi-radiobox-marked;
+
+      &:before {
+        color: $brand-primary;
+      }
+    }
+  }
+}