feature #584 Improve the design for empty collections (javiereguiluz)

This PR was squashed before being merged into the master branch (closes #584). Discussion ---------- Improve the design for empty collections ### Before ![empty_before](https://cloud.githubusercontent.com/assets/73419/11319205/7c0ff4f2-906f-11e5-9a45-619c5b7d0f62.png) ### After ![empty_after](https://cloud.githubusercontent.com/assets/73419/11319206/7f7c39fc-906f-11e5-968f-836f8f815cdc.png) Commits ------- 51b90e1 Improve the design for empty collections
EasyCorp · Nov 21, 2015 · 6c2161c · 6c2161c
2 parents cf822cb + 51b90e1
commit 6c2161c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/Resources/views/css/admin.css.twig b/Resources/views/css/admin.css.twig
@@ -361,6 +361,15 @@ button.btn-danger {
     margin-bottom: .5em;
 }
 
+/* Field: collection
+   ------------------------------------------------------------------------- */
+.field-collection .collection-empty {
+    margin: .5em 0;
+}
+.field-collection .collection-empty .label-empty {
+    color: {{ colors.gray_dark }};
+}
+
 /* Select2 widget
    ------------------------------------------------------------------------- */
 .select2-container--bootstrap .select2-selection {

diff --git a/Resources/views/form/bootstrap_3_layout.html.twig b/Resources/views/form/bootstrap_3_layout.html.twig
@@ -199,11 +199,13 @@
     {% if allow_add|default(false) %}
         {% set js_add_item %}
             $(function() {
-                if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
+                if (event.preventDefault) event.preventDefault(); else event.returnValue = false;
 
                 var collection = $('#{{ id }}');
                 var numItems = collection.children('div.form-group').length;
 
+                collection.prev('.collection-empty').remove();
+
                 var newItem = collection.attr('data-prototype')
                     .replace(/\>__name__label__\</g, '>' + numItems + '<')
                     .replace(/_{{ name }}___name__/g, '_{{ name }}_' + numItems)
@@ -283,16 +285,18 @@
 {% endblock form_errors %}
 
 {%- block form_widget_compound -%}
+    {% if value is empty %}
+        <div class="empty collection-empty">
+            <span class="label label-empty">{{ 'label.empty'|trans({}, 'EasyAdminBundle') }}</span>
+        </div>
+    {% endif %}
+
     {{ parent() }}
 
     {% if form.parent.vars.allow_delete|default(false) %}
         {% set remove_item_javascript %}
             $(function() {
-                if(event.preventDefault) {
-                    event.preventDefault();
-                } else {
-                    event.returnValue = false;
-                }
+                if (event.preventDefault) event.preventDefault(); else event.returnValue = false;
 
                 var containerDiv = $('#{{ id }}').parents('.form-group:first');
                 containerDiv.remove();