From a2a5fe4db60846908019a965f40bf57ebe98547c Mon Sep 17 00:00:00 2001
From: Radomir Dopieralski <openstack@sheep.art.pl>
Date: Thu, 18 Dec 2014 09:21:13 +0100
Subject: [PATCH] Fix alignment of the edit role icon in the plan edit view
* Aligment done with grid, not pull-right
* Correct color for the icon
* Showing/hiding done with CSS not JS
* Repeated part of the template moved to an include
Change-Id: I3e1c81b885f9b0df11d7826d8c26dcf24d622e01
---
.../static/tuskar_boxes/js/tuskar.boxes.js | 2 --
.../tuskar_boxes/scss/tuskar_boxes.scss | 33 ++++++++++++-------
.../tuskar_boxes/overview/_role_info.html | 26 +++++++++++++++
.../overview/role_nodes_edit.html | 25 ++------------
4 files changed, 49 insertions(+), 37 deletions(-)
create mode 100644 tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html
diff --git a/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js b/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
index c7a4228..5b8fc52 100644
--- a/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
+++ b/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
@@ -82,7 +82,6 @@ tuskar.boxes = (function () {
ui.draggable.find('input.boxes-flavor'
).val($(this).closest('.boxes-flavor').data('flavor'));
$count.trigger('change');
- ui.draggable.find('a[name^=role-edit]').removeClass('hidden');
window.setTimeout(update_boxes, 0);
}
});
@@ -95,7 +94,6 @@ tuskar.boxes = (function () {
ui.draggable.appendTo(this);
ui.draggable.find('input.boxes-flavor').val('');
ui.draggable.find('input.number-picker').trigger('change').val(0);
- ui.draggable.find('a[name^=role-edit]').addClass('hidden');
window.setTimeout(update_boxes, 0);
}
});
diff --git a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss b/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
index 6a3750a..ba9ebd2 100644
--- a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
+++ b/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
@@ -38,6 +38,26 @@
min-width: 120px;
display: inline-block;
padding: 4px 0 0 4px;
+ .boxes-role {
+ display: inline-block;
+ text-align: center;
+ width: 120px;
+ margin: 0 4px 4px 0;
+ border: 1px solid #999;
+ background: #eee;
+ color: #666;
+ .deploy-role-icon, .deploy-role-count, .form-control {
+ display: none;
+ }
+ .deploy-role-label {
+ display: block;
+ width: 100%;
+ .deployment-roles-label {
+ margin: 0;
+ font-weight: normal;
+ }
+ }
+ }
}
.boxes-role {
opacity: 0.75;
@@ -53,18 +73,6 @@
.deploy-role-status .boxes-role {
cursor: default;
}
-.boxes-available-roles .boxes-role {
- display: inline-block;
- 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;
-}
.boxes-role-controller {
background-color: #fcaf3e;
border-color: #f57900;
@@ -88,6 +96,7 @@
.boxes-role .number_picker {
border-color: inherit;
}
+.boxes-role .deploy-role-icon a,
.boxes-role .number_picker,
.boxes-role .number_picker a {
color: inherit;
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html b/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html
new file mode 100644
index 0000000..efe6aed
--- /dev/null
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html
@@ -0,0 +1,26 @@
+{% spaceless %}
+{% load i18n %}
+{% load url from future %}
+{% load form_helpers %}
+<div
+ class="boxes-role-{{ role.name|slugify }} boxes-role"
+ data-name="{{ role.name|slugify }}"
+>
+ <div class="row">
+ <div class="col-xs-3 deploy-role-count">
+ {{ role.field|add_bootstrap_class }}
+ {{ role.flavor_field|add_bootstrap_class }}
+ </div>
+ <div class="col-xs-6 deploy-role-label">
+ <div class="deployment-roles-label">{{ role.name|title }}</div>
+ </div>
+ <div class="col-xs-3 deploy-role-icon">
+ <a name="role-edit-{{role.name|slugify}}"
+ href="{% url 'horizon:infrastructure:roles:update' role_id=role.id %}"
+ class="btn">
+ <b class="fa fa-lg fa-fw fa-pencil"></b>
+ </a>
+ </div>
+ </div>
+</div>
+{% endspaceless %}
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
index 22ab9fd..29869d3 100644
--- a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
@@ -8,18 +8,7 @@
<div class="boxes-available-roles">
{% for role in free_roles %}{% spaceless %}
- <div class="boxes-role-{{ role.name|slugify }} boxes-role" data-name="{{ role.name|slugify }}">
- {{ role.field|add_bootstrap_class }}
- {{ role.flavor_field|add_bootstrap_class }}
- {{ role.name|title }}
- <a
- name="role-edit-{{role.name|slugify}}"
- href="{% url 'horizon:infrastructure:roles:update' role_id=role.id %}"
- class="btn pull-right hidden">
- <b class="fa fa-lg fa-fw fa-pencil"></b>
- </a>
-
- </div>
+ {% include "tuskar_boxes/overview/_role_info.html" with role=role %}
{% endspaceless %}{% endfor %}
</div>
@@ -51,17 +40,7 @@
<div class="col-xs-5">
<div class="boxes-drop-roles">
{% for role in flavor.roles %}{% spaceless %}
- <div class="boxes-role-{{ role.name|slugify }} boxes-role" data-name="{{ role.name|slugify }}">
- {{ role.field|add_bootstrap_class }}
- {{ role.flavor_field|add_bootstrap_class }}
- {{ role.name|title }}
- <a
- name="role-edit-{{role.name|slugify}}"
- href="{% url 'horizon:infrastructure:roles:update' role_id=role.id %}"
- class="btn pull-right">
- <b class="fa fa-lg fa-fw fa-pencil"></b>
- </a>
- </div>
+ {% include "tuskar_boxes/overview/_role_info.html" with role=role %}
{% endspaceless %}{% endfor %}
</div>
<div class="btn-group boxes-drop-group">