From 3e63b4abf30736c41afccb7af97fd259f3bfb6cb Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Tue, 4 Jul 2023 16:42:56 +0200
Subject: [PATCH] UX: improve FilterOrder box design

---
 .../translations/messages.fr.yml              |  2 +
 .../Form/Type/Listing/FilterOrderType.php     |  3 +
 .../Resources/public/chill/scss/forms.scss    | 12 +++
 .../views/FilterOrder/base.html.twig          | 81 ++++++++-----------
 4 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/translations/messages.fr.yml b/src/Bundle/ChillActivityBundle/translations/messages.fr.yml
index c53a04f31..d37b3488f 100644
--- a/src/Bundle/ChillActivityBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillActivityBundle/translations/messages.fr.yml
@@ -96,6 +96,8 @@ activity_filter:
     My activities: Mes échanges (où j'interviens)
     Types: Par type d'échange
     Jobs: Par métier impliqué
+    By: Filtrer par
+    Search: Chercher dans la liste
 
 #timeline
 '%user% has done an %activity_type%': '%user% a effectué un échange de type "%activity_type%"'
diff --git a/src/Bundle/ChillMainBundle/Form/Type/Listing/FilterOrderType.php b/src/Bundle/ChillMainBundle/Form/Type/Listing/FilterOrderType.php
index 16038515d..1f373400c 100644
--- a/src/Bundle/ChillMainBundle/Form/Type/Listing/FilterOrderType.php
+++ b/src/Bundle/ChillMainBundle/Form/Type/Listing/FilterOrderType.php
@@ -38,6 +38,9 @@ final class FilterOrderType extends \Symfony\Component\Form\AbstractType
             $builder->add('q', SearchType::class, [
                 'label' => false,
                 'required' => false,
+                'attr' => [
+                    'placeholder' => 'activity_filter.Search',
+                ]
             ]);
         }
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss
index 0ae568244..cd81f36dc 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss
@@ -42,3 +42,15 @@ form {
     font-weight: 700;
     margin-bottom: .375em;
 }
+
+.chill_filter_order {
+    background: $gray-100; /*
+    border: 3px dashed $white;
+    background: repeating-linear-gradient(
+        -45deg,
+        $gray-100,
+        $gray-100 2px,
+        $white 2px,
+        $white 6px
+    ); */
+}
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/views/FilterOrder/base.html.twig b/src/Bundle/ChillMainBundle/Resources/views/FilterOrder/base.html.twig
index d4a6bbdd4..8faef5d14 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/FilterOrder/base.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/FilterOrder/base.html.twig
@@ -1,102 +1,87 @@
 {{ form_start(form) }}
-    <div class="chill_filter_order container my-4">
-        <div class="row">
+    {% set btnSubmit = 0 %}
+    <div class="chill_filter_order container-xxl p-5 py-2 my-3">
+        <div class="row my-2">
             {% if form.vars.has_search_box %}
-              <div class="col-md-12">
-                  <div class="input-group mb-3">
-                      {{ form_widget(form.q)}}
-                      <button type="submit" class="btn btn-chill-l-gray"><i class="fa fa-search"></i></button>
+              <div class="col-sm-12">
+                  <div class="input-group">
+                      {{ form_widget(form.q) }}
+                      <button type="submit" class="btn btn-misc"><i class="fa fa-search"></i></button>
                   </div>
               </div>
             {% endif %}
         </div>
         {% if form.dateRanges is defined %}
+            {% set btnSubmit = 1 %}
             {% if form.dateRanges|length > 0 %}
                 {% for dateRangeName, _o in form.dateRanges %}
-                    <div class="row gx-2 justify-content-center items-center">
+                    <div class="row my-2">
                         {% if form.dateRanges[dateRangeName].vars.label is not same as(false) %}
-                        <div class="col-md-4">
                             {{ form_label(form.dateRanges[dateRangeName])}}
-                        </div>
                         {% endif %}
-                        <div class="col-md-7">
-                            <div class="input-group mb-3">
+                        <div class="col-sm-8 pt-2">
+                            <div class="input-group">
                                 <span class="input-group-text">{{ 'chill_calendar.From'|trans }}</span>
                                 {{ form_widget(form.dateRanges[dateRangeName]['from']) }}
                                 <span class="input-group-text">{{ 'chill_calendar.To'|trans }}</span>
                                 {{ form_widget(form.dateRanges[dateRangeName]['to']) }}
                             </div>
                         </div>
-                        <div class="col-md-1" style="text-align: right;">
-                            <button type="submit" class="btn btn-misc"><i class="fa fa-filter"></i></button>
-                        </div>
                     </div>
                 {% endfor %}
             {% endif %}
         {% endif %}
         {% if form.checkboxes is defined %}
+            {% set btnSubmit = 1 %}
             {% if form.checkboxes|length > 0 %}
                 {% for checkbox_name, options in form.checkboxes %}
-                    <div class="row gx-0 align-items-center">
-                        <div class="col-md-12">
+                    <div class="row my-2">
+                        <div class="col-sm-4 col-form-label">{{ 'activity_filter.By'|trans }}</div>
+                        <div class="col-sm-8 pt-2">
                             {% for c in form['checkboxes'][checkbox_name].children %}
-                                <div class="form-check form-check-inline">
-                                    {{ form_widget(c) }}
-                                    {{ form_label(c) }}
-                                </div>
+                                {{ form_widget(c) }}
+                                {{ form_label(c) }}
                             {% endfor %}
                         </div>
                     </div>
-                    {% if loop.last %}
-                        <div class="row gx-0">
-                            <div class="col-md-12">
-                                <ul class="record_actions">
-                                    <li>
-                                        <button type="submit" class="btn btn-misc"><i class="fa fa-filter"></i></button>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    {% endif %}
                 {% endfor %}
             {% endif %}
         {% endif %}
         {% if form.entity_choices is defined %}
+            {% set btnSubmit = 1 %}
             {% if form.entity_choices |length > 0 %}
                 {% for checkbox_name, options in form.entity_choices %}
-                    <div class="row gx-0 align-items-center">
+                    <div class="row my-2">
                         {% if form.entity_choices[checkbox_name].vars.label is not same as(false) %}
-                            <div class="col-md-4">
-                                {{ form_label(form.entity_choices[checkbox_name])}}
-                            </div>
+                            {{ form_label(form.entity_choices[checkbox_name])}}
                         {% endif %}
-                        <div class="col-md-7">
+                        <div class="col-sm-8 pt-2">
                             {% for c in form['entity_choices'][checkbox_name].children %}
-                                <div class="form-check form-check-inline">
-                                    {{ form_widget(c) }}
-                                    {{ form_label(c) }}
-                                </div>
+                                {{ form_widget(c) }}
+                                {{ form_label(c) }}
                             {% endfor %}
                         </div>
-                        <div class="col-md-1 text-right" style="text-align: right;">
-                            <button type="submit" class="btn btn-misc"><i class="fa fa-filter"></i></button>
-                        </div>
                     </div>
                 {% endfor %}
             {% endif %}
         {% endif %}
         {% if form.single_checkboxes is defined %}
+            {% set btnSubmit = 1 %}
             {% for name, _o in form.single_checkboxes %}
-                <div class="row gx-2 align-items-center">
-                    <div class="col-md-7 offset-md-4">
+                <div class="row my-2">
+                    <div class="col-sm-4 col-form-label">{{ 'activity_filter.By'|trans }}</div>
+                    <div class="col-sm-8 pt-2">
                         {{ form_widget(form.single_checkboxes[name]) }}
                     </div>
-                    <div class="col-md-1 text-right" style="text-align: right;">
-                        <button type="submit" class="btn btn-misc"><i class="fa fa-filter"></i></button>
-                    </div>
                 </div>
             {% endfor %}
         {% endif %}
+        
+        {% if btnSubmit == 1 %}
+            <div class="row my-2">
+                <button type="submit" class="btn btn-sm btn-misc"><i class="fa fa-fw fa-filter"></i>{{ 'Filter'|trans }}</button>
+            </div>
+        {% endif %}
     </div>
 
     {% for k,v in otherParameters %}