openstack/horizon
Code Issues Proposed changes

Merge "Horizon selects are now themable: Volumes"

Browse Source
This commit is contained in:
Jenkins 2016-06-02 12:12:45 +00:00 committed by Gerrit Code Review
commit 4e384db0cf
14 changed files with 325 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
horizon/forms/__init__.py
View File

@ -35,6 +35,9 @@ from horizon.forms.fields import MultiIPField # noqa
from horizon.forms.fields import SelectWidget # noqa
from horizon.forms.fields import ThemableCheckboxInput # noqa
from horizon.forms.fields import ThemableCheckboxSelectMultiple # noqa
from horizon.forms.fields import ThemableChoiceField # noqa
from horizon.forms.fields import ThemableDynamicChoiceField # noqa
from horizon.forms.fields import ThemableSelectWidget # noqa
from horizon.forms.views import ModalFormMixin # noqa
from horizon.forms.views import ModalFormView # noqa
@ -49,6 +52,9 @@ __all__ = [
"DynamicChoiceField",
"ThemableCheckboxInput",
"ThemableCheckboxSelectMultiple",
"ThemableChoiceField",
"ThemableDynamicChoiceField",
"ThemableSelectWidget",
"IPField",
"IPv4",
"IPv6",

97
horizon/forms/fields.py
View File

@ -12,6 +12,7 @@
# License for the specific language governing permissions and limitations
# under the License.
import itertools
import re
import netaddr
@ -23,9 +24,12 @@ from django.core import urlresolvers
from django.forms import fields
from django.forms.utils import flatatt # noqa
from django.forms import widgets
from django.template import Context # noqa
from django.template.loader import get_template # noqa
from django.utils.encoding import force_text
from django.utils.functional import Promise # noqa
from django.utils import html
from django.utils.safestring import mark_safe # noqa
from django.utils.translation import ugettext_lazy as _
ip_allowed_symbols_re = re.compile(r'^[a-fA-F0-9:/\.]+$')
@ -164,7 +168,7 @@ class SelectWidget(widgets.Select):
....
....
widget=forms.SelectWidget( attrs={'class': 'switchable',
widget=forms.ThemableSelect( attrs={'class': 'switchable',
'data-slug': 'source'},
transform_html_attrs=get_title )
@ -187,26 +191,84 @@ class SelectWidget(widgets.Select):
other_html = (u' selected="selected"'
if option_value in selected_choices else '')
if callable(self.transform_html_attrs):
html_attrs = self.transform_html_attrs(option_label)
other_html += flatatt(html_attrs)
other_html += self.transform_option_html_attrs(option_label)
data_attr_html = self.get_data_attrs(option_label)
if data_attr_html:
other_html += ' ' + data_attr_html
option_label = self.transform_option_label(option_label)
return u'<option value="%s"%s>%s</option>' % (
html.escape(option_value), other_html, option_label)
def get_data_attrs(self, option_label):
other_html = []
if not isinstance(option_label, (six.string_types, Promise)):
for data_attr in self.data_attrs:
data_value = html.conditional_escape(
force_text(getattr(option_label,
data_attr, "")))
other_html += ' data-%s="%s"' % (data_attr, data_value)
other_html.append('data-%s="%s"' % (data_attr, data_value))
return ' '.join(other_html)
if callable(self.transform):
option_label = self.transform(option_label)
def transform_option_label(self, option_label):
if (not isinstance(option_label, (six.string_types, Promise)) and
callable(self.transform)):
option_label = self.transform(option_label)
return html.conditional_escape(force_text(option_label))
return u'<option value="%s"%s>%s</option>' % (
html.escape(option_value), other_html,
html.conditional_escape(force_text(option_label)))
def transform_option_html_attrs(self, option_label):
if not callable(self.transform_html_attrs):
return ''
return flatatt(self.transform_html_attrs(option_label))
class DynamicSelectWidget(widgets.Select):
class ThemableSelectWidget(SelectWidget):
"""Bootstrap base select field widget."""
def render(self, name, value, attrs=None, choices=()):
# NOTE(woodnt): Currently the "attrs" contents are being added to the
# select that's hidden. It's unclear whether this is the
# desired behavior. In some cases, the attribute should
# remain solely on the now-hidden select. But in others
# if it should live on the bootstrap button (visible)
# or both.
new_choices = []
for opt_value, opt_label in itertools.chain(self.choices, choices):
other_html = self.transform_option_html_attrs(opt_label)
data_attr_html = self.get_data_attrs(opt_label)
if data_attr_html:
other_html += ' ' + data_attr_html
opt_label = self.transform_option_label(opt_label)
if other_html:
new_choices.append((opt_value, opt_label, other_html))
else:
new_choices.append((opt_value, opt_label))
initial_value = value
if value is None and new_choices:
initial_value = new_choices[0][1]
attrs = self.build_attrs(attrs)
id = attrs.pop('id', 'id_%s' % name)
template = get_template('horizon/common/fields/_themable_select.html')
context = Context({
'name': name,
'options': new_choices,
'id': id,
'value': value,
'initial_value': initial_value,
'select_attrs': attrs,
})
return template.render(context)
class DynamicSelectWidget(SelectWidget):
"""A subclass of the ``Select`` widget which renders extra attributes for
use in callbacks to handle dynamic changes to the available choices.
"""
@ -231,6 +293,15 @@ class DynamicSelectWidget(widgets.Select):
return self.add_item_link
class ThemableDynamicSelectWidget(ThemableSelectWidget, DynamicSelectWidget):
pass
class ThemableChoiceField(fields.ChoiceField):
"""Bootstrap based select field."""
widget = ThemableSelectWidget
class DynamicChoiceField(fields.ChoiceField):
"""A subclass of ``ChoiceField`` with additional properties that make
dynamically updating its elements easier.
@ -251,6 +322,10 @@ class DynamicChoiceField(fields.ChoiceField):
self.widget.add_item_link_args = add_item_link_args
class ThemableDynamicChoiceField(DynamicChoiceField):
widget = ThemableDynamicSelectWidget
class DynamicTypedChoiceField(DynamicChoiceField, fields.TypedChoiceField):
"""Simple mix of ``DynamicChoiceField`` and ``TypedChoiceField``."""
pass

2
horizon/templates/horizon/common/_data_table_table_actions.html
View File

@ -24,7 +24,7 @@
</div>
{% elif filter.filter_type == 'server' %}
<div class="table_search">
{% with name=filter.get_param_name|add:'_field' options=filter.get_select_options value=filter.filter_field %}
{% with name=filter.get_param_name|add:'_field' options=filter.get_select_options stand_alone=1 value=filter.filter_field %}
{% include 'horizon/common/fields/_themable_select.html' %}
{% endwith %}
<input class="form-control" value="{{ filter.filter_string|default:'' }}" type="text" name="{{ filter.get_param_name }}" />

6
horizon/templates/horizon/common/fields/_themable_select.html
View File

@ -1,7 +1,7 @@
{% load horizon %}
{% minifyspace %}
<div class="themable-select dropdown" xmlns="http://www.w3.org/1999/html">
<div class="themable-select dropdown {% if not stand_alone %} form-control{% endif %}" xmlns="http://www.w3.org/1999/html">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"{% if value %}
title="{{ value }}" {% endif %}
@ -38,9 +38,7 @@
name="{{ name }}"
{% endif %}
{% for k,v in select_attrs.items %}
{% if k == 'class' %}
class="form-control {{ v }}"
{% else %}
{% if k != 'class' %}
{{ k|safe }}="{{ v }}"
{% endif %}
{% endfor %}

2
openstack_dashboard/dashboards/project/volumes/templates/volumes/volumes/_attach.html
View File

@ -4,9 +4,7 @@
{% block modal-body %}
{% if show_attach %}
<h3>{% trans "Attach To Instance" %}</h3>
<fieldset>
{% include "horizon/common/_form_fields.html" %}
</fieldset>
{% endif %}
{% endblock %}

33
openstack_dashboard/dashboards/project/volumes/volumes/forms.py
View File

@ -80,28 +80,29 @@ class CreateForm(forms.SelfHandlingForm):
description = forms.CharField(max_length=255, widget=forms.Textarea(
attrs={'rows': 4}),
label=_("Description"), required=False)
volume_source_type = forms.ChoiceField(label=_("Volume Source"),
required=False,
widget=forms.Select(attrs={
'class': 'switchable',
'data-slug': 'source'}))
volume_source_type = forms.ChoiceField(
label=_("Volume Source"),
required=False,
widget=forms.ThemableSelectWidget(attrs={
'class': 'switchable',
'data-slug': 'source'}))
snapshot_source = forms.ChoiceField(
label=_("Use snapshot as a source"),
widget=forms.SelectWidget(
widget=forms.ThemableSelectWidget(
attrs={'class': 'snapshot-selector'},
data_attrs=('size', 'name'),
transform=lambda x: "%s (%s GiB)" % (x.name, x.size)),
required=False)
image_source = forms.ChoiceField(
label=_("Use image as a source"),
widget=forms.SelectWidget(
widget=forms.ThemableSelectWidget(
attrs={'class': 'image-selector'},
data_attrs=('size', 'name', 'min_disk'),
transform=lambda x: "%s (%s)" % (x.name, filesizeformat(x.bytes))),
required=False)
volume_source = forms.ChoiceField(
label=_("Use a volume as source"),
widget=forms.SelectWidget(
widget=forms.ThemableSelectWidget(
attrs={'class': 'image-selector'},
data_attrs=('size', 'name'),
transform=lambda x: "%s (%s GiB)" % (x.name, x.size)),
@ -109,7 +110,7 @@ class CreateForm(forms.SelfHandlingForm):
type = forms.ChoiceField(
label=_("Type"),
required=False,
widget=forms.Select(
widget=forms.ThemableSelectWidget(
attrs={'class': 'switched',
'data-switch-on': 'source',
'data-source-no_source_type': _('Type'),
@ -118,7 +119,7 @@ class CreateForm(forms.SelfHandlingForm):
availability_zone = forms.ChoiceField(
label=_("Availability Zone"),
required=False,
widget=forms.Select(
widget=forms.ThemableSelectWidget(
attrs={'class': 'switched',
'data-switch-on': 'source',
'data-source-no_source_type': _('Availability Zone'),
@ -419,9 +420,9 @@ class CreateForm(forms.SelfHandlingForm):
class AttachForm(forms.SelfHandlingForm):
instance = forms.ChoiceField(label=_("Attach to Instance"),
help_text=_("Select an instance to "
"attach to."))
instance = forms.ThemableChoiceField(label=_("Attach to Instance"),
help_text=_("Select an instance to "
"attach to."))
device = forms.CharField(label=_("Device Name"),
widget=forms.TextInput(attrs={'placeholder':
@ -645,7 +646,7 @@ class UploadToImageForm(forms.SelfHandlingForm):
attrs={'readonly': 'readonly'}))
image_name = forms.CharField(max_length=255, label=_('Image Name'))
disk_format = forms.ChoiceField(label=_('Disk Format'),
widget=forms.Select(),
widget=forms.ThemableSelectWidget(),
required=False)
force = forms.BooleanField(
label=pgettext_lazy("Force upload volume in in-use status to image",
@ -751,11 +752,11 @@ class RetypeForm(forms.SelfHandlingForm):
name = forms.CharField(label=_('Volume Name'),
widget=forms.TextInput(
attrs={'readonly': 'readonly'}))
volume_type = forms.ChoiceField(label=_('Type'))
volume_type = forms.ThemableChoiceField(label=_('Type'))
MIGRATION_POLICY_CHOICES = [('never', _('Never')),
('on-demand', _('On Demand'))]
migration_policy = forms.ChoiceField(label=_('Migration Policy'),
widget=forms.Select(),
widget=forms.ThemableSelectWidget(),
choices=(MIGRATION_POLICY_CHOICES),
initial='never',
required=False)

4
openstack_dashboard/static/dashboard/scss/components/_dropdowns.scss
View File

@ -37,17 +37,19 @@
&.btn-primary {
color: $brand-primary;
}
&.btn-danger {
color: $brand-danger;
}
&.btn-warning {
color: $brand-warning;
}
&.btn-info {
color: $brand-info;
}
@include dropdown-button('default', $dropdown-link-color, $dropdown-link-hover-bg);
@include dropdown-button('primary', $btn-primary-bg, $btn-primary-bg, $btn-primary-color);
@include dropdown-button('info', $btn-info-bg, $btn-info-bg, $btn-info-color);

69
openstack_dashboard/static/dashboard/scss/components/_selects.scss
View File

@ -3,15 +3,72 @@
// ---------------------------------
.themable-select {
.dropdown-title {
text-align: left;
position: relative;
&:after {
content: ' ';
}
.dropdown-title {
text-align: left;
&:after {
content: ' ';
}
}
select {
display: none;
&,
&.form-control {
display: none;
}
}
}
// The dropdowns within forms should look like all other
// form elements
.form-group .themable-select {
padding: 0;
&,
&.open {
.btn {
box-shadow: none;
border: none;
height: 100%;
}
.dropdown-menu {
background-color: $input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border-color: $input-border;
width: 100%;
li > a {
@include text-overflow();
color: $input-color;
&:hover {
color: $dropdown-link-hover-color;
cursor: pointer;
}
}
}
}
}
// For vertical forms, we'll want the button to take on the entire width.
// think old-school launch-instance.
form:not(.form-inline) .form-group .themable-select {
width: 100%;
.dropdown-toggle {
@extend .btn-block;
.fa-caret-down {
left: 0;
}
}
.dropdown-title {
@include text-overflow();
width: calc(100% - 1em);
float: left;
}
}

12
openstack_dashboard/test/integration_tests/pages/project/compute/volumes/volumespage.py
View File

@ -228,7 +228,7 @@ class VolumesPage(basepage.BaseNavigationPage):
class VolumeAttachForm(forms.BaseFormRegion):
_attach_to_instance_selector = (By.CSS_SELECTOR, 'select[name="instance"]')
_attach_to_instance_selector = (By.CSS_SELECTOR, 'div > .themable-select')
_attachments_table_selector = (By.CSS_SELECTOR, 'table[id="attachments"]')
_detach_template = 'tr[data-display="Volume {0} on instance {1}"] button'
@ -239,7 +239,9 @@ class VolumeAttachForm(forms.BaseFormRegion):
@property
def instance_selector(self):
src_elem = self._get_element(*self._attach_to_instance_selector)
return forms.SelectFormFieldRegion(self.driver, self.conf, src_elem)
return forms.ThemableSelectFormFieldRegion(
self.driver, self.conf, src_elem=src_elem,
strict_options_match=False)
def detach(self, volume, instance):
detach_button = self.attachments_table.find_element(
@ -248,9 +250,5 @@ class VolumeAttachForm(forms.BaseFormRegion):
return forms.BaseFormRegion(self.driver, self.conf)
def attach_instance(self, instance_name):
instance = filter(lambda x: x.startswith(instance_name),
self.instance_selector.options.values())
if not instance:
raise AttributeError("Unable to select {0}".format(instance_name))
self.instance_selector.text = instance[0]
self.instance_selector.text = instance_name
self.submit()

65
openstack_dashboard/test/integration_tests/regions/forms.py
View File

@ -36,7 +36,7 @@ class FieldFactory(baseregion.BaseRegion):
field_cls._element_locator_str_suffix))
elements = super(FieldFactory, self)._get_elements(*locator)
for element in elements:
yield field_cls(self.driver, self.conf, element)
yield field_cls(self.driver, self.conf, src_elem=element)
@classmethod
def register_field_cls(cls, field_class, base_classes=None):
@ -174,7 +174,7 @@ class IntegerFormFieldRegion(BaseFormFieldRegion):
class SelectFormFieldRegion(BaseFormFieldRegion):
"""Select box field."""
_element_locator_str_suffix = 'div > select'
_element_locator_str_suffix = 'div > select.form-control'
def is_displayed(self):
return self.element._el.is_displayed()
@ -218,6 +218,67 @@ class SelectFormFieldRegion(BaseFormFieldRegion):
self.element.select_by_value(value)
class ThemableSelectFormFieldRegion(BaseFormFieldRegion):
"""Select box field."""
_element_locator_str_suffix = 'div > .themable-select'
_raw_select_locator = (by.By.CSS_SELECTOR, 'select')
_selected_label_locator = (by.By.CSS_SELECTOR, '.dropdown-title')
_dropdown_menu_locator = (by.By.CSS_SELECTOR, 'ul.dropdown-menu > li > a')
def __init__(self, driver, conf, strict_options_match=True, **kwargs):
super(ThemableSelectFormFieldRegion, self).__init__(
driver, conf, **kwargs)
self.strict_options_match = strict_options_match
@property
def hidden_element(self):
elem = self._get_element(*self._raw_select_locator)
return SelectFormFieldRegion(self.driver, self.conf, src_elem=elem)
@property
def name(self):
return self.hidden_element.name
@property
def text(self):
return self._get_element(*self._selected_label_locator).text.strip()
@property
def value(self):
return self.hidden_element.value
@property
def options(self):
return self._get_elements(*self._dropdown_menu_locator)
@text.setter
def text(self, text):
if text != self.text:
self.src_elem.click()
for option in self.options:
if self.strict_options_match:
match = text == option.text.strip()
else:
match = option.text.startswith(text)
if match:
option.click()
return
raise ValueError('Widget "%s" does have an option with text "%s"'
% (self.name, text))
@value.setter
def value(self, value):
if value != self.value:
self.src_elem.click()
for option in self.options:
if value == option.get_attribute('data-select-value'):
option.click()
return
raise ValueError('Widget "%s" does have an option with value "%s"'
% (self.name, value))
class BaseFormRegion(baseregion.BaseRegion):
"""Base class for forms."""

1
openstack_dashboard/themes/default/horizon/_styles.scss
View File

@ -6,6 +6,7 @@
@import "components/navbar";
@import "components/pie_charts";
@import "components/quota";
@import "components/selects";
@import "components/sidebar";
@import "components/tables";
@import "components/table_actions";

3
openstack_dashboard/themes/default/horizon/components/_selects.scss Normal file
View File

@ -0,0 +1,3 @@
.form-group .themable-select .dropdown-menu {
@extend .dropdown-menu-right;
}

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

@ -7,6 +7,7 @@
@import "components/magic_search";
@import "components/messages";
@import "components/navbar";
@import "components/selects";
@import "components/sidebar";
.login .splash-logo {

74
openstack_dashboard/themes/material/static/horizon/components/_selects.scss Normal file
View File

@ -0,0 +1,74 @@
// The dropdowns within forms should look like all other
// form elements, so this mimics Bootswatch's Paper's
// bootswatch.scss form-group styles
.form-group .themable-select {
box-shadow: none;
border-radius: 0;
border: none;
&,
&.open {
.btn {
&,
&:hover,
&.active,
&:active,
&:focus {
background: transparent;
padding: 0;
border: none;
border-radius: 0;
-webkit-appearance: none;
@include box-shadow(inset 0 -1px 0 $table-border-color);
font-size: 16px;
&:focus {
@include box-shadow(inset 0 -2px 0 $brand-primary);
}
&[disabled],
&[readonly] {
@include box-shadow(none);
border-bottom: 1px dotted $table-border-color;
}
&.input {
&-sm {
font-size: $font-size-small;
}
&-lg {
font-size: $font-size-large;
}
}
}
}
}
&.open .dropdown-menu {
background-color: $dropdown-bg;
}
}
@mixin material-select-states($state, $color) {
.form-group.#{$state} .themable-select {
&,
&.open {
.btn {
&,
&:hover,
&.active,
&:active,
&:focus {
border-bottom: none;
@include box-shadow(inset 0 -2px 0 $color);
}
}
}
}
}
@include material-select-states('has-warning', $brand-warning);
@include material-select-states('has-error', $brand-danger);
@include material-select-states('has-success', $brand-success);