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

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

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