stackforge-attic/tuskar-ui-extras
Code Issues Proposed changes

Small fixes for the plan edit

Browse Source 
* Update the role names for Swift and Cinder
* Fix the column width of the index page
* Use bootstrap's dropdown menu

Change-Id: I55aee6aba5faabd30e70422f31003abd4ab2e132
This commit is contained in:
Radomir Dopieralski 2014-10-30 16:56:06 +01:00
parent 9724ccdf83
commit b60dca117e
2 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
tuskar_boxes/templates/tuskar_boxes/overview/index.html
View File

@ -10,7 +10,7 @@
{% block main %} {% block main %}
<div class="row"> <div class="row">
<div class="col-xs-3"> <div class="col-xs-4">
{% if stack %} {% if stack %}
{% if stack.is_deleting or stack.is_deploying %} {% if stack.is_deleting or stack.is_deploying %}
{% include "infrastructure/overview/deployment_progress.html" %} {% include "infrastructure/overview/deployment_progress.html" %}
@ -25,7 +25,7 @@
{% include "infrastructure/overview/deployment_plan.html" %} {% include "infrastructure/overview/deployment_plan.html" %}
{% endif %} {% endif %}
</div> </div>
<div class="col-xs-6"> <div class="col-xs-8">
{% if stack %} {% if stack %}
{% include "infrastructure/overview/role_nodes_status.html" %} {% include "infrastructure/overview/role_nodes_status.html" %}
{% else %} {% else %}

49
tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
View File

@ -38,16 +38,19 @@
</div> </div>
{% endspaceless %}{% endfor %} {% endspaceless %}{% endfor %}
</div> </div>
<div class="boxes-drop"> <div class="btn-group boxes-drop-group">
<div class="boxes-drop" data-toggle="dropdown">
<div><i class="fa fa-plus"></i><br> <div><i class="fa fa-plus"></i><br>
{% trans "enroll a deployment role" %}</div> {% trans "enroll a deployment role" %}</div>
<div class="boxes-roles-menu btn-group-vertical"> </div>
<ul class="boxes-roles-menu dropdown-menu" role="menu">
{% for role in roles %} {% for role in roles %}
<div class="btn" data-role="{{ role.name }}"> <li>
{{ role.name|title }} <a href="#" data-role="{{ role.name }}"
</div> >{{ role.name|title }}</a>
</li>
{% endfor %} {% endfor %}
</div> </ul>
</div> </div>
</div> </div>
<div class="col-xs-7 boxes-nodes"> <div class="col-xs-7 boxes-nodes">
@ -89,7 +92,7 @@
var role = 0; var role = 0;
$flavor.find('div.boxes-nodes div.boxes-node').each(function () { $flavor.find('div.boxes-nodes div.boxes-node').each(function () {
var $this = $(this); var $this = $(this);
$this.removeClass('boxes-role-controller boxes-role-compute boxes-role-block-storage boxes-role-object-storage'); $this.removeClass('boxes-role-controller boxes-role-compute boxes-role-cinder-storage boxes-role-swift-storage');
while (count >= roles[role_names[role]]) { while (count >= roles[role_names[role]]) {
role += 1; role += 1;
count = 0; count = 0;
@ -116,7 +119,7 @@
hoverClass: 'boxes-drop-hover', hoverClass: 'boxes-drop-hover',
tolerance: 'touch', tolerance: 'touch',
drop: function (ev, ui) { drop: function (ev, ui) {
ui.draggable.appendTo($(this).prev('.boxes-drop-roles')); ui.draggable.appendTo($(this).parent().prev('.boxes-drop-roles'));
var $count = ui.draggable.find('input.number-picker'); var $count = ui.draggable.find('input.number-picker');
if (+$count.val() < 1) { $count.val(1); } if (+$count.val() < 1) { $count.val(1); }
ui.draggable.find('input.boxes-flavor' ui.draggable.find('input.boxes-flavor'
@ -141,12 +144,9 @@
update_boxes(); update_boxes();
$('input.number-picker').change(update_boxes); $('input.number-picker').change(update_boxes);
$('.boxes-roles-menu').hide().parent().click(function () { $('.boxes-roles-menu li a').click(function () {
$(this).find('.boxes-roles-menu').toggle('fold', 100);
});
$('.boxes-roles-menu .btn').click(function () {
var name = $(this).data('role'); var name = $(this).data('role');
var $drop = $(this).closest('.boxes-drop').prev('.boxes-drop-roles'); var $drop = $(this).closest('.boxes-drop-group').prev('.boxes-drop-roles');
var $role = $('.boxes-role[data-name="' + name + '"]'); var $role = $('.boxes-role[data-name="' + name + '"]');
var $count = $role.find('input.number-picker'); var $count = $role.find('input.number-picker');
var $flavor = $role.find('input.boxes-flavor'); var $flavor = $role.find('input.boxes-flavor');
@ -181,7 +181,6 @@
} }
.boxes-available-roles { .boxes-available-roles {
border-radius: 4px; border-radius: 4px;
background: #eee;
border: 1px dashed #666; border: 1px dashed #666;
min-height: 42px; min-height: 42px;
min-width: 120px; min-width: 120px;
@ -189,6 +188,7 @@
padding: 4px 0 0 4px; padding: 4px 0 0 4px;
} }
.boxes-role { .boxes-role {
opacity: 0.75;
padding: 6px; padding: 6px;
border: 1px solid; border: 1px solid;
cursor: move; cursor: move;
@ -203,6 +203,9 @@
text-align: center; text-align: center;
width: 120px; width: 120px;
margin: 0 4px 4px 0; margin: 0 4px 4px 0;
border: 1px solid #999;
background: #eee;
color: #666;
} }
.boxes-available-roles .boxes-role .form-control { .boxes-available-roles .boxes-role .form-control {
display: none; display: none;
@ -217,28 +220,38 @@
border-color: #73d216; border-color: #73d216;
color: #4e9a06; color: #4e9a06;
} }
.boxes-role-object-storage { .boxes-role-swift-storage {
background-color: #729fcf; background-color: #729fcf;
border-color: #3465a4; border-color: #3465a4;
color: #204a87; color: #204a87;
} }
.boxes-role-block-storage { .boxes-role-cinder-storage {
background-color: #ad7fa8; background-color: #ad7fa8;
border-color: #75507b; border-color: #75507b;
color: #5c3566; color: #5c3566;
} }
.boxes-role .number_picker {
border-color: inherit;
}
.boxes-role .number_picker,
.boxes-role .number_picker a {
color: inherit;
}
.boxes-drop-group {
width: 100%;
}
.boxes-drop { .boxes-drop {
position: relative; position: relative;
padding: 6px; padding: 6px;
border: 1px dashed; border: 1px dashed;
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
background-color: #eee;
border-color: #666; border-color: #666;
color: #444; color: #444;
cursor: pointer;
} }
.boxes-drop-active { .boxes-drop-active {
background-color: #ccc; background-color: #eee;
border-style: solid; border-style: solid;
} }
.boxes-drop-hover { .boxes-drop-hover {