openstack/horizon
Code Issues Proposed changes

Horizon Radio Buttons are now themeable.

Browse Source 
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
This commit is contained in:
Ryan Peters 2016-02-09 12:57:26 -06:00 committed by Diana Whitten
parent 3864fd11a1
commit 7580d15659
12 changed files with 125 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
horizon/templates/horizon/common/_form_field.html
View File

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

6
horizon/templates/horizon/common/_form_field_decorator.html Normal file
View File

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

19
horizon/templates/horizon/common/_horizontal_field.html
View File

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

13
horizon/templates/horizon/common/fields/_themable_checkbox.html
View File

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

17
horizon/templates/horizon/common/fields/_themable_radiobutton.html Normal file
View File

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

17
openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
View File

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

36
openstack_dashboard/static/dashboard/scss/components/_radiobuttons.scss Normal file
View File

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

1
openstack_dashboard/static/dashboard/scss/horizon.scss
View File

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

2
openstack_dashboard/themes/material/static/horizon/_icons.scss
View File

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

1
openstack_dashboard/themes/material/static/horizon/_styles.scss
View File

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

1
openstack_dashboard/themes/material/static/horizon/components/_checkboxes.scss
View File

@ -2,7 +2,6 @@
// Custom Material Checkboxes
// --------------------------------------------------
@import "/horizon/lib/mdi/scss/icons";
.themable-checkbox {
input[type=checkbox] {

30
openstack_dashboard/themes/material/static/horizon/components/_radiobuttons.scss Normal file
View File

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