Merge 4ee8c61 into 3ac290b

tienvx · Oct 7, 2021 · 481e55b · 481e55b
2 parents 3ac290b + 4ee8c61
commit 481e55b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/src/Resources/assets/src/style.css b/src/Resources/assets/src/style.css
@@ -2,8 +2,8 @@
     padding-right: 106px;
 }
 
-.collection-js-elem-add, .collection-js-elem-up, .collection-js-elem-down, .collection-js-elem-remove {
+.collection-js-actions {
     position: absolute;
-    right: 5px;
-    top: 3px;
+    right: 0px;
+    top: 0px;
 }
diff --git a/src/Resources/views/bootstrap_5_layout.html.twig b/src/Resources/views/bootstrap_5_layout.html.twig
@@ -2,6 +2,7 @@
     {%- set controllerName = 'tienvx--ux-collection-js--collection' -%}
     {%- set dataController = (attr['data-controller']|default('') ~ ' ' ~ controllerName)|trim -%}
     {% set row_attr = row_attr|merge({
+        'class': attr.class|default('') ~ ' collection-js',
         'data-controller': dataController,
         ('data-'~ controllerName ~ '-allow-add-value'): allow_add ? 'true' : 'false',
         ('data-'~ controllerName ~ '-allow-delete-value'): allow_delete ? 'true' : 'false',
@@ -10,7 +11,7 @@
         ('data-'~ controllerName ~ '-prototype-name-value'): prototype_name ? '__name__',
     }) %}
     {% if ea is defined %}
-        {% set row_attr = row_attr|merge({class: (attr.class|default('collection-js') ~ ' field-collection')|trim}) %}
+        {% set row_attr = row_attr|merge({class: (row_attr.class ~ ' field-collection')|trim}) %}
     {% endif %}
 
     {{ block('form_row') }}
@@ -38,32 +39,34 @@
                 <i class="fas fw fa-chevron-right form-collection-item-collapse-marker"></i>
                 {{ value }}
             </button>
-            {% apply spaceless %}
-                {% if form_parent(form).vars.allow_add %}
-                    <button type="button" class="btn btn-link btn-link-primary collection-js-elem-add"
-                            title="{{ 'action.add_new_item'|trans }}">
-                        <i class="fa fa-plus"></i>
-                    </button>
-                {% endif %}
-                {% if form_parent(form).vars.allow_move_up %}
-                    <button type="button" class="btn btn-link btn-link-secondary collection-js-elem-up"
-                            title="{{ 'action.move_item_up'|trans }}">
-                        <i class="fa fa-sort-up"></i>
-                    </button>
-                {% endif %}
-                {% if form_parent(form).vars.allow_move_down %}
-                    <button type="button" class="btn btn-link btn-link-secondary collection-js-elem-down"
-                            title="{{ 'action.move_item_down'|trans }}">
-                        <i class="fa fa-sort-down"></i>
-                    </button>
-                {% endif %}
-                {% if form_parent(form).vars.allow_delete %}
-                    <button type="button" class="btn btn-link btn-link-danger collection-js-elem-remove"
-                            title="{{ 'action.remove_item'|trans }}">
-                        <i class="fa fa-trash-alt"></i>
-                    </button>
-                {% endif %}
-            {% endapply %}
+            <div class="btn-group collection-js-actions" role="group" aria-label="Actions">
+                {% apply spaceless %}
+                    {% if form_parent(form).vars.allow_add %}
+                        <button type="button" class="btn btn-link btn-link-primary collection-js-elem-add"
+                                title="{{ 'action.add_new_item'|trans }}">
+                            <i class="fa fa-plus"></i>
+                        </button>
+                    {% endif %}
+                    {% if form_parent(form).vars.allow_move_up %}
+                        <button type="button" class="btn btn-link btn-link-secondary collection-js-elem-up"
+                                title="{{ 'action.move_item_up'|trans }}">
+                            <i class="fa fa-sort-up"></i>
+                        </button>
+                    {% endif %}
+                    {% if form_parent(form).vars.allow_move_down %}
+                        <button type="button" class="btn btn-link btn-link-secondary collection-js-elem-down"
+                                title="{{ 'action.move_item_down'|trans }}">
+                            <i class="fa fa-sort-down"></i>
+                        </button>
+                    {% endif %}
+                    {% if form_parent(form).vars.allow_delete %}
+                        <button type="button" class="btn btn-link btn-link-danger collection-js-elem-remove"
+                                title="{{ 'action.remove_item'|trans }}">
+                            <i class="fa fa-trash-alt"></i>
+                        </button>
+                    {% endif %}
+                {% endapply %}
+            </div>
         </h2>
         <div id="{{ id }}-contents" class="accordion-collapse collapse {{ form_parent(form).vars.render_expanded ? 'show' }}">
             <div class="accordion-body">