From d55430ce89b5598097c386606c5a237f5c571fbb Mon Sep 17 00:00:00 2001
From: Julio Montoya <gugli100@gmail.com>
Date: Tue, 4 May 2021 10:59:27 +0200
Subject: [PATCH] Update form style

---
 config/packages/twig.yaml                     |   4 +-
 .../inc/lib/pear/HTML/QuickForm/element.php   |  16 ++-
 .../main/inc/lib/pear/HTML/QuickForm/text.php |   3 +-
 .../views/Layout/form-theme.html.twig         | 118 +++++++++---------
 4 files changed, 68 insertions(+), 73 deletions(-)

diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index cdb5a45223..9c216a1db6 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -5,8 +5,10 @@ twig:
         - '%kernel.project_dir%/var/templates'
         - '%kernel.project_dir%/public/main/template'
         - '%kernel.project_dir%/public/plugin'
+        - '%kernel.project_dir%/src/CoreBundle/Resources/views/Layout'
     form_themes:
-        - 'bootstrap_4_layout.html.twig'
+        - 'form-theme.html.twig'
+#        - 'bootstrap_4_layout.html.twig'
 
     globals:
         show_toolbar: true
diff --git a/public/main/inc/lib/pear/HTML/QuickForm/element.php b/public/main/inc/lib/pear/HTML/QuickForm/element.php
index 5b70453bd8..45805de088 100644
--- a/public/main/inc/lib/pear/HTML/QuickForm/element.php
+++ b/public/main/inc/lib/pear/HTML/QuickForm/element.php
@@ -648,20 +648,18 @@ class HTML_QuickForm_element extends HTML_Common
                 break;
             case FormValidator::LAYOUT_HORIZONTAL:
                 $template = '
-                <div class="md:flex md:items-center mb-6  '.$size[0].' {error_class}">
+                <div class="mb-6  '.$size[0].' {error_class}">
                     <label {label-for} class="
-                        ch-form-label '.$height.'
-
-                        md:w-1/4
-                        flex justify-left
-                        text-sm font-medium text-gray-700
-                        md:justify-end pr-3
-
+                        '.$height.'
+                        block
+                        text-sm
+                        font-medium
+                        text-gray-700
                     " >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
-                    <div class="md:w-3/4 '.$size[1].'">
+                    <div class=" '.$size[1].'">
                         {icon}
                         {element}
                         <!-- BEGIN label_2 -->
diff --git a/public/main/inc/lib/pear/HTML/QuickForm/text.php b/public/main/inc/lib/pear/HTML/QuickForm/text.php
index baa6e8424f..6c819924f0 100644
--- a/public/main/inc/lib/pear/HTML/QuickForm/text.php
+++ b/public/main/inc/lib/pear/HTML/QuickForm/text.php
@@ -42,9 +42,10 @@ class HTML_QuickForm_text extends HTML_QuickForm_input
             $attributes['class'] = $classFromAttributes.'
             sm:text-sm
             text-gray-600
+            mt-1 w-full
             bg-white
             font-normal
-            flex items-center pl-3 h-10';
+            h-10';
         }
         $inputSize = $attributes['input-size'] ?? null;
         $this->setInputSize($inputSize);
diff --git a/src/CoreBundle/Resources/views/Layout/form-theme.html.twig b/src/CoreBundle/Resources/views/Layout/form-theme.html.twig
index 993e9d9bf8..f8a9f82cef 100644
--- a/src/CoreBundle/Resources/views/Layout/form-theme.html.twig
+++ b/src/CoreBundle/Resources/views/Layout/form-theme.html.twig
@@ -1,76 +1,70 @@
-{% use "form_div_layout.html.twig" %}
+{# @experimental in 5.2 #}
+{% use 'form_div_layout.html.twig' %}
 
-{% block text_widget %}
-    {%- set type = type|default('text') -%}
-    {{ block('form_widget_simple') }}
-{% endblock %}
-
-{% block button_widget -%}
-    {%- set attr = attr|merge({class: (attr.class|default('btn btn-primary'))|trim}) -%}
+{%- block form_row -%}
+    {%- set row_attr = row_attr|merge({ class: row_attr.class|default(row_class|default('mb-6')) }) -%}
     {{- parent() -}}
-{%- endblock button_widget %}
+{%- endblock form_row -%}
 
-{%- block form_widget_simple -%}
-    <input type="{{ type }}"
-           id="{{ id}}"
-           name={{ full_name }}
-           class="{{ block('input_class') }}"
-           {% if value is not empty %}value="{{ value }}" {% endif %}
-        {% if required is defined %}required {% endif %}/>
-{%- endblock form_widget_simple -%}
+{%- block widget_attributes -%}
+    {%- set attr = attr|merge({ class: attr.class|default(widget_class|default('mt-1 w-full')) ~ (disabled ? ' ' ~ widget_disabled_class|default('border-gray-300 text-gray-500')) ~ (errors|length ? ' ' ~ widget_errors_class|default('border-red-700')) }) -%}
+    {{- parent() -}}
+{%- endblock widget_attributes -%}
 
-{% block form_label -%}
-    {%- if label is same as(false) -%}
-        <div class="{{ block('form_label_class') }}"></div>
-    {%- else -%}
-        {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ block('form_label_class'))|trim}) -%}
-        <div class="md:w-1/3">
-            {{- parent() -}}
-        </div>
-    {%- endif -%}
-{%- endblock form_label %}
+{%- block form_label -%}
+    {%- set label_attr = label_attr|merge({ class: label_attr.class|default(label_class|default('block text-gray-800')) }) -%}
+    {{- parent() -}}
+{%- endblock form_label -%}
 
-{% block form_row -%}
-    {%- set widget_attr = {} -%}
-    <div class="mb-6">
-        <div class="md:flex md:items-center row mb-2">
-            {{- form_label(form) -}}
-            <div class="{{ block('form_group_class') }}">
-                {{- form_widget(form, widget_attr) -}}
-                {{- form_help(form) -}}
-            </div>
-        </div>
-        {{ form_errors(form)  }}
-    </div>
-{%- endblock form_row %}
+{%- block form_help -%}
+    {%- set help_attr = help_attr|merge({ class: help_attr.class|default(help_class|default('mt-1 text-gray-600')) }) -%}
+    {{- parent() -}}
+{%- endblock form_help -%}
 
 {%- block form_errors -%}
     {%- if errors|length > 0 -%}
-        <div class="md:flex md:items-center mb-4">
-            <div class="md:w-1/3"></div>
-            <div class="md:w-2/3">
-                <ul class="list-reset">
-                    {%- for error in errors -%}
-                        <li class="text-red text-xs italic">{{ error.message }}</li>
-                    {%- endfor -%}
-                </ul>
-            </div>
-        </div>
+        <ul>
+            {%- for error in errors -%}
+                <li class="{{ error_item_class|default('text-red-700') }}">{{ error.message }}</li>
+            {%- endfor -%}
+        </ul>
     {%- endif -%}
 {%- endblock form_errors -%}
 
-{% block form_label_class -%}
-    block text-gray-500 md:text-right mb-1 md:mb-0 pr-4
-{% endblock form_label_class -%}
+{%- block choice_widget_expanded -%}
+    {%- set attr = attr|merge({ class: attr.class|default('mt-2') }) -%}
+    <div {{ block('widget_container_attributes') }}>
+        {%- for child in form %}
+            <div class="flex items-center">
+                {{- form_widget(child) -}}
+                {{- form_label(child, null, { translation_domain: choice_translation_domain }) -}}
+            </div>
+        {% endfor -%}
+    </div>
+{%- endblock choice_widget_expanded -%}
 
-{% block input_class -%}
-    {% if form.vars.errors|length %}border-red border-1{% endif %} appearance-none bg-grey-lighter border-2 border-grey-lighter rounded w-full py-2 px-4 text-grey-darker leading-tight focus:outline-none focus:bg-white focus:border-blue-light
-{% endblock input_class -%}
+{%- block checkbox_row -%}
+    {%- set row_attr = row_attr|merge({ class: row_attr.class|default(row_class|default('mb-6')) }) -%}
+    {%- set widget_attr = {} -%}
+    {%- if help is not empty -%}
+        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
+    {%- endif -%}
+    <div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
+        {{- form_errors(form) -}}
+        <div class="inline-flex items-center">
+            {{- form_widget(form, widget_attr) -}}
+            {{- form_label(form) -}}
+        </div>
+        {{- form_help(form) -}}
+    </div>
+{%- endblock checkbox_row -%}
 
-{% block form_group_class -%}
-    md:w-2/3
-{% endblock form_group_class -%}
+{%- block checkbox_widget -%}
+    {%- set widget_class = widget_class|default('mr-2') -%}
+    {{- parent() -}}
+{%- endblock checkbox_widget -%}
 
-{% block custom_button_class -%}
-    bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline
-{% endblock custom_button_class -%}
+{%- block radio_widget -%}
+    {%- set widget_class = widget_class|default('mr-2') -%}
+    {{- parent() -}}
+{%- endblock radio_widget -%}
\ No newline at end of file