openstack/horizon
Code Issues Proposed changes

Merge "Horizon Radio Buttons are now themeable."

Browse Source
This commit is contained in:
Jenkins 2016-08-09 15:01:00 +00:00 committed by Gerrit Code Review
commit 9ec3d74af2
12 changed files with 125 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
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 %}
</div>
{% endif %}
{% for error in field.errors %}
<span class="help-block {{ form.error_css_class }}">{{ error }}</span>
{% endfor %}
</div>
{% endif %}
</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

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