Table filters and actions styling
Change-Id: Ice872016926cf53c17966c4132cc827b9284d62b
This commit is contained in:
Jiri Tomasek
parent
de468a0195
commit
7c15c93508
@ -73,6 +73,7 @@ class FlavorsTable(tables.DataTable):
|
||||
DeleteFlavor,
|
||||
flavor_tables.FlavorFilterAction)
|
||||
row_actions = (DeleteFlavor,)
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
|
||||
class FlavorRolesTable(tables.DataTable):
|
||||
@ -97,6 +98,7 @@ class FlavorRolesTable(tables.DataTable):
|
||||
verbose_name = _("Overcloud Roles")
|
||||
table_actions = ()
|
||||
row_actions = ()
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
|
||||
class FlavorSuggestionsTable(tables.DataTable):
|
||||
@ -112,3 +114,4 @@ class FlavorSuggestionsTable(tables.DataTable):
|
||||
verbose_name = _("Flavor Suggestions")
|
||||
table_actions = ()
|
||||
row_actions = (CreateSuggestedFlavor,)
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
@ -34,3 +34,4 @@ class HistoryTable(tables.DataTable):
|
||||
multi_select = False
|
||||
table_actions = ()
|
||||
row_actions = ()
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
@ -68,3 +68,4 @@ class ImagesTable(tables.DataTable):
|
||||
table_actions = (DeleteImage,
|
||||
ImageFilterAction)
|
||||
row_actions = (EditImage, DeleteImage)
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
@ -150,6 +150,7 @@ class RegisteredNodesTable(tables.DataTable):
|
||||
table_actions = (NodeFilterAction, SetPowerStateOn, SetPowerStateOff,
|
||||
DeleteNode)
|
||||
row_actions = (SetPowerStateOn, SetPowerStateOff, DeleteNode)
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
def get_object_id(self, datum):
|
||||
return datum.uuid
|
||||
@ -180,6 +181,7 @@ class MaintenanceNodesTable(tables.DataTable):
|
||||
verbose_name = _("Nodes (Maintenance)")
|
||||
table_actions = (NodeFilterAction, ActivateNode, DeleteNode)
|
||||
row_actions = (ActivateNode, DeleteNode,)
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
def get_object_id(self, datum):
|
||||
return datum.uuid
|
||||
|
||||
@ -32,3 +32,4 @@ class ParametersTable(tables.DataTable):
|
||||
verbose_name = _("Service Configuration")
|
||||
table_actions = ()
|
||||
row_actions = ()
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
@ -52,6 +52,7 @@ class RolesTable(tables.DataTable):
|
||||
verbose_name = _("Deployment Roles")
|
||||
table_actions = ()
|
||||
row_actions = (UpdateRole,)
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
|
||||
class NodeTable(nodes_tables.RegisteredNodesTable):
|
||||
@ -61,3 +62,4 @@ class NodeTable(nodes_tables.RegisteredNodesTable):
|
||||
verbose_name = _("Nodes")
|
||||
table_actions = ()
|
||||
row_actions = ()
|
||||
template = "horizon/common/_enhanced_data_table.html"
|
||||
|
||||
@ -1,31 +1,9 @@
|
||||
// buttons
|
||||
.btn,
|
||||
input {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.btn-group .btn:first-child {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.btn-group .btn:last-child {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.btn:not(.btn-danger) {
|
||||
.btn-default:not(.btn-danger) {
|
||||
background: rgb(243, 243, 243);
|
||||
|
||||
&:hover {
|
||||
background: rgb( 235, 235, 235);
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background: #0088cc;
|
||||
|
||||
&:hover {
|
||||
background: #006Dcc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toolbar.pull-right {
|
||||
|
||||
@ -0,0 +1,75 @@
|
||||
// Some tables should not have a title because it just repeats the page title.
|
||||
.no-table-title tr.table_caption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tr.table_actions_row {
|
||||
th.table_header {
|
||||
background: #f9f9f9;
|
||||
border-top-width: 2px !important;
|
||||
.table_actions {
|
||||
float: none;
|
||||
.table_search, .table_filter {
|
||||
.filter_select {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: rgb(243, 243, 243);
|
||||
margin-right: -4px;
|
||||
&:after, &:before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: rgba(243, 243, 243, 0);
|
||||
border-left-color: #f3f3f3;
|
||||
border-width: 14px;
|
||||
margin-top: -14px;
|
||||
}
|
||||
&:before {
|
||||
border-color: rgba(204, 204, 204, 0);
|
||||
border-left-color: #cccccc;
|
||||
border-width: 16px;
|
||||
margin-top: -16px;
|
||||
}
|
||||
select {
|
||||
overflow:hidden;
|
||||
width: 120%;
|
||||
border-right: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.caret {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 47%;
|
||||
}
|
||||
}
|
||||
input[type="text"] {
|
||||
padding-right: 5px;
|
||||
}
|
||||
input.filter_select_input {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: none;
|
||||
padding-left: 20px;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table_actions_buttons {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
/* Additional CSS for infrastructure. */
|
||||
@import "/bootstrap/scss/bootstrap/variables";
|
||||
@import "/dashboard/scss/variables";
|
||||
@import "/bootstrap/scss/bootstrap/variables";
|
||||
|
||||
@import "_numberpicker";
|
||||
@import "_breadcrumbs";
|
||||
@ -10,8 +10,4 @@
|
||||
@import "_formsets";
|
||||
@import "_index_pages";
|
||||
@import "_individual_pages";
|
||||
|
||||
// Some tables should not have a title because it just repeats the page title.
|
||||
.no-table-title h3.table_title {
|
||||
display: none;
|
||||
}
|
||||
@import "_tables";
|
||||
|
||||
@ -0,0 +1,68 @@
|
||||
{% load i18n %}
|
||||
<div class="table_actions">
|
||||
{% block table_filter %}
|
||||
{% if filter.filter_type == 'fixed' %}
|
||||
<div class="table_filter btn-group" data-toggle="buttons-radio">
|
||||
{% for button in filter.fixed_buttons %}
|
||||
<button name="{{ filter.get_param_name }}" type="submit" value="{{ button.value }}" class="btn btn-default btn-sm{% ifequal button.value filter.filter_string %} active{% endifequal %}">{% if button.icon %}<i class="{{ button.icon }}"></i> {% endif %}{{ button.text }}{% if button.count >= 0 %} ({{ button.count }}){% endif %}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% elif filter.filter_type == 'query' %}
|
||||
<div class="table_search client">
|
||||
<div class="form-group input-group">
|
||||
<input class="form-control" value="{{ filter.filter_string|default:'' }}" type="text" name="{{ filter.get_param_name }}" />
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="submit" {{ filter.attr_string|safe }}>
|
||||
<span class="glyphicon glyphicon-search"></span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% elif filter.filter_type == 'server' %}
|
||||
<div class="table_search">
|
||||
<div class="filter_select">
|
||||
<select name="{{ filter.get_param_name }}_field" class="form-control">
|
||||
{% for choice in filter.filter_choices %}
|
||||
<option value="{{ choice.0 }}" {% if choice.0 == filter.filter_field %} selected{% endif %}>{{ choice.1 }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<span class="caret"></span>
|
||||
</div>
|
||||
<div class="form-group input-group">
|
||||
<input class="form-control filter_select_input" value="{{ filter.filter_string|default:'' }}" type="text" name="{{ filter.get_param_name }}" />
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="submit" {{ filter.attr_string|safe }}>
|
||||
<span class="glyphicon glyphicon-search"></span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock table_filter %}
|
||||
{% block table_actions %}
|
||||
<div class="table_actions_buttons pull-right">
|
||||
{% for action in table_actions_buttons %}
|
||||
{% include "horizon/common/_data_table_table_action.html" %}
|
||||
{% endfor %}
|
||||
{% if table_actions_menu|length > 0 %}
|
||||
<div class="btn-group table_actions_menu">
|
||||
<a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
{% if table_actions_buttons|length > 0 %}
|
||||
{% trans "More Actions" %}
|
||||
{% else %}
|
||||
{% trans "Actions" %}
|
||||
{% endif %}
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu clearfix">
|
||||
{% for action in table_actions_menu %}
|
||||
<li class="clearfix">
|
||||
{% include "horizon/common/_data_table_table_action.html" %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock table_actions %}
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
{% extends "horizon/common/_data_table.html" %}
|
||||
|
||||
{% block table_caption %}
|
||||
<tr class='table_caption'>
|
||||
<th class='table_header' colspan='{{ columns|length }}'>
|
||||
<h3 class='table_title'>{{ table }}</h3>
|
||||
</th>
|
||||
</tr>
|
||||
{% if table.get_table_actions %}
|
||||
<tr class='table_actions_row'>
|
||||
<th class='table_header' colspan='{{ columns|length }}'>
|
||||
{{ table.render_table_actions }}
|
||||
</th>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endblock table_caption %}
|
||||
Loading…
x
Reference in New Issue
Block a user