openstack
/
horizon
Code Issues Proposed changes

Add dropdown actions to detail page 

Add support for performing actions on an object from the object's
detail page. Actions are displayed in the page header, in a
dropdown menu. As a POC, this patch enables dropdown actions on a
detail page of a volume (/project/volumes/volume-id/).

Partially implements: blueprint detail-pages-ia

Change-Id: Ie21c63d86c2806d9689ae7f1a67b67c83710c108
This commit is contained in:
Ana Krivokapic 2014-08-26 13:19:12 +02:00
parent 6f2c431130
commit 0ee604c179
5 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
horizon/tables/base.py
View File

@ -676,7 +676,7 @@ class Cell(html.HTMLElement):
form_field_attributes)
table._data_cache[column][table.get_object_id(datum)] = data
elif column.auto == "actions":
data = table.render_row_actions(datum)
data = table.render_row_actions(datum, pull_right=False)
table._data_cache[column][table.get_object_id(datum)] = data
else:
data = column.get_data(datum)
@ -1388,7 +1388,7 @@ class DataTable(object):
self.set_multiselect_column_visibility(len(bound_actions) > 0)
return table_actions_template.render(context)
def render_row_actions(self, datum):
def render_row_actions(self, datum, pull_right=True):
"""Renders the actions specified in ``Meta.row_actions`` using the
current row data.
"""
@ -1396,7 +1396,8 @@ class DataTable(object):
row_actions_template = template.loader.get_template(template_path)
bound_actions = self.get_row_actions(datum)
extra_context = {"row_actions": bound_actions,
"row_id": self.get_object_id(datum)}
"row_id": self.get_object_id(datum),
"pull_right": pull_right}
context = template.RequestContext(self.request, extra_context)
return row_actions_template.render(context)

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

@ -2,7 +2,7 @@
{% spaceless %} {# This makes sure whitespace doesn't affect positioning for dropdown. #}
{% if row_actions|length > 1 %}
<div class="btn-group">
<div class="btn-group {% if pull_right %}pull-right{% endif %}">
{% for action in row_actions %}
{% if forloop.first %}
{% include "horizon/common/_data_table_row_action.html" %}

6
horizon/templates/horizon/common/_page_header.html
View File

@ -2,5 +2,11 @@
{% block page_header %}
<div class='page-header'>
<h1>{{ title }}</h1>
{% if actions %}
<form class='actions_column pull-right' action='{{ url }}' method="POST">
{% csrf_token %}
{{ actions }}
</form>
{% endif %}
</div>
{% endblock %}

6
openstack_dashboard/dashboards/project/volumes/volumes/views.py
View File

@ -44,8 +44,12 @@ class DetailView(tabs.TabView):
template_name = 'project/volumes/volumes/detail.html'
def get_context_data(self, **kwargs):
datum = self.get_data()
table = project_tables.VolumesTable(self.request)
context = super(DetailView, self).get_context_data(**kwargs)
context["volume"] = self.get_data()
context["volume"] = datum
context["url"] = self.get_redirect_url()
context["actions"] = table.render_row_actions(datum)
return context
@memoized.memoized_method

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

@ -1090,20 +1090,25 @@ td.select {
/* Actions dropdown */
td.actions_column {
.actions_column {
white-space: nowrap;
padding: 10px;
position: relative;
width: 200px;
}
td.actions_column .btn-group {
form.actions_column {
width: auto;
font-family: $font-family-base;
}
.actions_column .btn-group {
display: inline-block;
}
td.actions_column .row_actions a,
td.actions_column .row_actions input,
td.actions_column .row_actions button,
.actions_column .row_actions a,
.actions_column .row_actions input,
.actions_column .row_actions button,
div.table_actions_menu .dropdown-menu a,
div.table_actions_menu .dropdown-menu input,
div.table_actions_menu .dropdown-menu button {
@ -1118,11 +1123,11 @@ div.table_actions_menu .dropdown-menu button {
@include box-shadow(none);
}
td.actions_column .row_actions .hide {
.actions_column .row_actions .hide {
display: none;
}
td.actions_column .btn-action-required {
.actions_column .btn-action-required {
font-weight: bold;
}
@ -1156,8 +1161,8 @@ td.actions_column .btn-action-required {
background: none;
}
td.actions_column .dropdown-menu a:hover,
td.actions_column .dropdown-menu button:hover,
.actions_column .dropdown-menu a:hover,
.actions_column .dropdown-menu button:hover,
div.table_actions_menu .dropdown-menu a:hover,
div.table_actions_menu .dropdown-menu button:hover {
background-color: $gray-lighter;
@ -1172,30 +1177,30 @@ div.table_actions_menu .dropdown-menu button:hover {
/* Overrides for single-action rows (no dropdown) */
tr td.actions_column ul.row_actions.single,
tr:hover td.actions_column ul.row_actions.single,
td.actions_column ul.row_actions.single,
td.actions_column ul.row_actions.single:hover {
tr .actions_column ul.row_actions.single,
tr:hover .actions_column ul.row_actions.single,
.actions_column ul.row_actions.single,
.actions_column ul.row_actions.single:hover {
border: none;
}
td.actions_column ul.row_actions.single li.action {
.actions_column ul.row_actions.single li.action {
display: block;
}
td.actions_column ul.row_actions.single li.action:hover {
.actions_column ul.row_actions.single li.action:hover {
background-color: transparent;
}
td.actions_column ul.row_actions.single a,
td.actions_column ul.row_actions.single input,
td.actions_column ul.row_actions.single button {
.actions_column ul.row_actions.single a,
.actions_column ul.row_actions.single input,
.actions_column ul.row_actions.single button {
color: $brand-info;
}
td.actions_column ul.row_actions.single a:hover,
td.actions_column ul.row_actions.single input:hover,
td.actions_column ul.row_actions.single button:hover {
.actions_column ul.row_actions.single a:hover,
.actions_column ul.row_actions.single input:hover,
.actions_column ul.row_actions.single button:hover {
color: $text-color;
}