networks: Ability to enable/disable without JS

- Avoid using a drop down menu.

- Separate out the status indicator and activate/deactivate button.

- Closes #173.
This commit is contained in:
Sunil Mohan Adapa 2015-10-12 23:04:47 +05:30 committed by fonfon
parent 2ab99588ba
commit 7170d3db38

View File

@ -22,6 +22,14 @@
{% block page_head %}
<style type="text/css">
.connection-status-label {
display: inline-block;
width: 5.5em;
padding: 5px 0px;
text-align: center;
margin-right: 10px;
}
.connection-show-label {
display: inline-block;
width: 40%;
@ -29,17 +37,18 @@
.connection-type-label {
display: inline-block;
width: 20%;
}
.list-group-item .btn {
margin: -5px 0;
margin: -2px 0;
}
.dropdown-menu .btn {
background: none;
width: 100%;
text-align: left;
.form.pull-right {
margin-right: 20px;
}
.form button {
width: 7em;
}
</style>
{% endblock %}
@ -58,6 +67,32 @@
aria-hidden="true"></span>
</a>
{% if connection.is_active %}
<form class="form pull-right" method="post"
action="{% url 'networks:deactivate' connection.uuid %}">
{% csrf_token %}
<button type="submit" class="btn btn-default btn-sm">
Deactivate</button>
</form>
{% else %}
<form class="form pull-right" method="post"
action="{% url 'networks:activate' connection.uuid %}">
{% csrf_token %}
<button type="submit" class="btn btn-default btn-sm">
Activate</button>
</form>
{% endif %}
{% if connection.is_active %}
<span class="label label-success connection-status-label">
Active</span>
{% else %}
<span class="label label-warning connection-status-label">
Inactive</span>
{% endif %}
<a class="connection-show-label"
href="{% url 'networks:show' connection.uuid %}"
title="Show connection {{ connection.name }}">
@ -65,45 +100,6 @@
</a>
<span class="connection-type-label">{{ connection.type }}</span>
{% if connection.is_active %}
<div class="btn-group">
<button type="button"
class="btn btn-success btn-xs dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Active <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<form name="toggle_form" id="toggle_form" class="form" method="post"
action="{% url 'networks:deactivate' connection.uuid %}">
{% csrf_token %}
<button type="submit" class="btn">Deactivate</button>
</form>
</li>
</ul>
</div>
{% else %}
<div class="btn-group">
<button type="button"
class="btn btn-warning btn-xs dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Not Active <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<form name="toggle_form" id="toggle_form" class="form" method="post"
action="{% url 'networks:activate' connection.uuid %}">
{% csrf_token %}
<button type="submit" class="btn">Activate</button>
</form>
</li>
</ul>
</div>
{% endif %}
</div>
{% endfor %}
</div>