Made the form more beautiful and space saving

src/Form/Type/DataSourceSynonymRowType.php

@@ -48,16 +48,24 @@ class DataSourceSynonymRowType extends AbstractType
     {
         $builder
             ->add('dataSource', ChoiceType::class, [
-                'label' => 'settings.behavior.data_source_synonyms.row_type.form.datasource',
+                //'label' => 'settings.behavior.data_source_synonyms.row_type.form.datasource',
+                'label' => false,
                 'choices' => $this->buildDataSourceChoices($options['data_sources']),
                 'required' => true,
+                'row_attr' => [
+                    'class' => 'form-floating',
+                ],
                 'constraints' => [
                     new Assert\NotBlank(),
                 ],
             ])
             ->add('locale', LocaleType::class, [
-                'label' => 'settings.behavior.data_source_synonyms.row_type.form.locale',
+                //'label' => 'settings.behavior.data_source_synonyms.row_type.form.locale',
+                'label' => false,
                 'required' => true,
+                'row_attr' => [
+                    'class' => 'form-floating',
+                ],
                 // Restrict to languages configured in the language menu: disable ChoiceLoader and provide explicit choices
                 'choice_loader' => null,
                 'choices' => $this->buildLocaleChoices(true),
@@ -73,14 +81,26 @@ class DataSourceSynonymRowType extends AbstractType
                 'constraints' => [
                     new Assert\NotBlank(),
                 ],
+                'row_attr' => [
+                    'class' => 'form-floating',
+                ],
+                'attr' => [
+                    'placeholder' => '' // to show floating label even when empty
+                ]
             ])
             ->add('translation_plural', TextType::class, [
                 'label' => 'settings.behavior.data_source_synonyms.row_type.form.translation_plural',
+                'row_attr' => [
+                    'class' => 'form-floating',
+                ],
                 'required' => true,
                 'empty_data' => '',
                 'constraints' => [
                     new Assert\NotBlank(),
                 ],
+                'attr' => [
+                    'placeholder' => '' // to show floating label even when empty
+                ]
             ]);
     }
 

templates/form/datasource_synonyms_collection.html.twig

@@ -1,3 +1,20 @@
+{% macro renderForm(child) %}
+    <div class="tc-item mt-1 px-2 pb-1 border-bottom">
+        {% form_theme child "form/vertical_bootstrap_layout.html.twig" %}
+        <div class="row">
+            <div class="col">{{ form_row(child.dataSource) }}</div>
+            <div class="col">{{ form_row(child.locale) }}</div>
+            <div class="col">{{ form_row(child.translation_singular) }}</div>
+            <div class="col">{{ form_row(child.translation_plural) }}</div>
+            <div class="col">
+                <button type="button" class="btn btn-outline-danger tc-remove" data-action="elements--datasource-synonyms-collection#remove">
+                    <i class="fa fa-trash"></i> {{ 'settings.behavior.data_source_synonyms.collection.remove_entry'|trans }}
+                </button>
+            </div>
+        </div>
+    </div>
+{% endmacro %}
+
 {% block datasource_synonyms_collection_widget %}
     {% set _attrs = attr|default({}) %}
     {% set _attrs = _attrs|merge({
@@ -7,14 +24,7 @@
     {% set has_proto = prototype is defined %}
     {% if has_proto %}
         {% set __proto %}
-            <div class="tc-item mb-2 border rounded p-2">
+            {{- _self.renderForm(prototype) -}}
-                {{ form_widget(prototype) }}
-                <div class="mt-2">
-                    <button type="button" class="btn btn-outline-danger btn-sm tc-remove" data-action="elements--datasource-synonyms-collection#remove">
-                        <i class="fa fa-trash"></i> {{ 'settings.behavior.data_source_synonyms.collection.remove_entry'|trans }}
-                    </button>
-                </div>
-            </div>
         {% endset %}
         {% set _proto_html = __proto|e('html_attr') %}
         {% set _proto_name = form.vars.prototype_name|default('__name__') %}
@@ -31,14 +41,7 @@
     >
     <div class="tc-items" data-elements--datasource-synonyms-collection-target="items">
         {% for child in form %}
-                <div class="tc-item mb-2 border rounded p-2">
+            {{ _self.renderForm(child) }}
-                    {{ form_widget(child) }}
-                    <div class="mt-2">
-                        <button type="button" class="btn btn-outline-danger btn-sm tc-remove" data-action="elements--datasource-synonyms-collection#remove">
-                            <i class="fa fa-trash"></i> {{ 'settings.behavior.data_source_synonyms.collection.remove_entry'|trans }}
-                        </button>
-                    </div>
-                </div>
         {% endfor %}
     </div>
     <button type="button" class="btn btn-outline-primary btn-sm mt-2 tc-add" data-action="elements--datasource-synonyms-collection#add">

templates/form/vertical_bootstrap_layout.html.twig

@@ -0,0 +1,26 @@
+{% extends 'bootstrap_5_layout.html.twig' %}
+
+
+{%- block choice_widget_collapsed -%}
+    {# Only add the BS5 form-select class if we dont use bootstrap-selectpicker  #}
+    {# {% if attr["data-controller"] is defined and attr["data-controller"] not in ["elements--selectpicker"] %}
+        {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-select')|trim}) -%}
+    {% else %}
+        {# If it is an selectpicker add form-control class to fill whole width
+        {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
+    {% endif %}
+    #}
+
+    {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-select')|trim}) -%}
+
+    {# If no data-controller was explictly defined add data-controller=elements--select #}
+    {% if attr["data-controller"] is not defined %}
+        {%- set attr = attr|merge({"data-controller": "elements--select"}) -%}
+
+        {% if attr["data-empty-message"] is not defined %}
+            {%- set attr = attr|merge({"data-empty-message": ("selectpicker.nothing_selected"|trans)}) -%}
+        {% endif %}
+    {% endif %}
+
+    {{- block("choice_widget_collapsed", "bootstrap_base_layout.html.twig") -}}
+{%- endblock choice_widget_collapsed -%}