Made the form more beautiful and space saving

This commit is contained in:
Jan Böhmer 2025-11-09 23:47:20 +01:00
parent 1ec34a2bb0
commit 88d34447aa
3 changed files with 74 additions and 25 deletions

View file

@ -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
]
]);
}

View file

@ -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 %}

View file

@ -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 -%}