From 88d34447aaa096996da0b0a57461de65572bacad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <mail@jan-boehmer.de>
Date: Sun, 9 Nov 2025 23:47:20 +0100
Subject: [PATCH] Made the form more beautiful and space saving

---
 src/Form/Type/DataSourceSynonymRowType.php    | 24 ++++++++-
 .../datasource_synonyms_collection.html.twig  | 49 ++++++++++---------
 .../form/vertical_bootstrap_layout.html.twig  | 26 ++++++++++
 3 files changed, 74 insertions(+), 25 deletions(-)
 create mode 100644 templates/form/vertical_bootstrap_layout.html.twig

diff --git a/src/Form/Type/DataSourceSynonymRowType.php b/src/Form/Type/DataSourceSynonymRowType.php
index 2c6dcdbf..445d5c4e 100644
--- a/src/Form/Type/DataSourceSynonymRowType.php
+++ b/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
+                ]
             ]);
     }
 
diff --git a/templates/form/datasource_synonyms_collection.html.twig b/templates/form/datasource_synonyms_collection.html.twig
index 8b759791..0c81a54e 100644
--- a/templates/form/datasource_synonyms_collection.html.twig
+++ b/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">
-                {{ 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>
+            {{- _self.renderForm(prototype) -}}
         {% endset %}
         {% set _proto_html = __proto|e('html_attr') %}
         {% set _proto_name = form.vars.prototype_name|default('__name__') %}
@@ -29,20 +39,13 @@
     }) }}
     {{ block('widget_container_attributes')|raw }}{% for k,v in _attrs %} {{ k }}="{{ v }}"{% endfor %}
     >
-        <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">
-                    {{ 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">
-            <i class="fa fa-plus"></i> {{ 'settings.behavior.data_source_synonyms.collection.add_entry'|trans }}
-        </button>
+    <div class="tc-items" data-elements--datasource-synonyms-collection-target="items">
+        {% for child in form %}
+            {{ _self.renderForm(child) }}
+        {% endfor %}
+    </div>
+    <button type="button" class="btn btn-outline-primary btn-sm mt-2 tc-add" data-action="elements--datasource-synonyms-collection#add">
+        <i class="fa fa-plus"></i> {{ 'settings.behavior.data_source_synonyms.collection.add_entry'|trans }}
+    </button>
     </div>
 {% endblock %}
diff --git a/templates/form/vertical_bootstrap_layout.html.twig b/templates/form/vertical_bootstrap_layout.html.twig
new file mode 100644
index 00000000..5f41d82e
--- /dev/null
+++ b/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 -%}