From 5d684b79efb3f13549a5bf421a194fe51992c1c6 Mon Sep 17 00:00:00 2001
From: Radomir Dopieralski <openstack@sheep.art.pl>
Date: Fri, 20 Feb 2015 18:09:06 +0100
Subject: [PATCH] Render roles without images differently

Change-Id: I8b595bde1dc242094614b64af104e3e4d7d4c0d8
---
 tuskar_boxes/overview/views.py                            | 5 +++++
 tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js       | 2 +-
 tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss   | 5 +++++
 .../templates/tuskar_boxes/overview/_role_info.html       | 8 ++++++--
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/tuskar_boxes/overview/views.py b/tuskar_boxes/overview/views.py
index c529d62..bd30d41 100644
--- a/tuskar_boxes/overview/views.py
+++ b/tuskar_boxes/overview/views.py
@@ -148,6 +148,11 @@ class IndexView(views.IndexView):
                     if field:
                         field.initial = 0
                     free_roles.append(role)
+                # For now, role is valid if it has image.
+                if role['role'].image:
+                    role['is_valid'] = True
+                else:
+                    role['is_valid'] = False
             data['free_roles'] = free_roles
             data['flavors'] = list(
                 _flavor_data(self.request, flavors, flavor_roles))
diff --git a/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js b/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
index d0e7291..b769a7f 100644
--- a/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
+++ b/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
@@ -64,7 +64,7 @@ tuskar.boxes = (function () {
       // Only activate on a page that has the right classes.
       return;
     }
-    $('div.boxes-role').draggable({
+    $('div.boxes-role:not(.boxes-role-invalid)').draggable({
         revert: 'invalid',
         helper: 'clone',
         zIndex: 1000,
diff --git a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss b/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
index 1cc17ad..611b3aa 100644
--- a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
+++ b/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
@@ -91,6 +91,11 @@
 .deploy-role-status .boxes-role {
     cursor: default;
 }
+.boxes-role-invalid {
+    border: 1px solid #999;
+    background: #eee;
+    color: #666;
+}
 .boxes-role-controller {
     background-color: #fcaf3e;
     border-color: #f57900;
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html b/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html
index f5ab702..0fd75a0 100644
--- a/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html
@@ -3,8 +3,9 @@
 {% load url from future %}
 {% load form_helpers %}
 <div
-  class="boxes-role-{{ role.name|slugify }} boxes-role"
+  class="{% if role.is_valid %}boxes-role-{{ role.name|slugify }}{% else %}boxes-role-invalid{% endif %} boxes-role"
   data-name="{{ role.name|slugify }}"
+  {% if not role.is_valid %}title="{% trans 'Please edit this role to fill out any necessary missing configuration.' %}"{% endif %}
 >
   <div class="row">
     <div class="col-xs-5 deploy-role-count">
@@ -12,7 +13,10 @@
       {{ role.flavor_field|add_bootstrap_class }}
     </div>
     <div class="col-xs-7 deploy-role-label">
-      <div class="deployment-roles-label">{{ role.name|title }}</div>
+      <div class="deployment-roles-label">
+        {% if not role.is_valid %}<b class="fa fa-lg fa-fw fa-question"></b>{% endif %}
+        {{ role.name|title }}
+      </div>
     </div>
     <div class="deploy-role-icon">
       <a name="role-edit-{{role.name|slugify}}"