Déplace les périodes d'application dans une section à part (#1029)

MTES-MCT · Oct 28, 2024 · 822d340 · 822d340
1 parent 6d39082
commit 822d340
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 21 deletions.
diff --git a/templates/common/form/dsfr_theme.html.twig b/templates/common/form/dsfr_theme.html.twig
@@ -102,7 +102,7 @@ https://github.com/symfony/symfony/blob/6.3/src/Symfony/Bridge/Twig/Resources/vi
 {% endblock %}
 
 {% block form_label_content %}
-  <span>
+  <span {% with {attr: label_content_attr|default({})} %}{{ block('attributes') }}{% endwith %}>
     {{ parent() }}{% if required %}<span class="fr-x-required-marker" aria-hidden="true"></span>{% endif %}
   </span>
   {{- form_help(form) -}}

diff --git a/templates/regulation/fragments/_measure_form.html.twig b/templates/regulation/fragments/_measure_form.html.twig
@@ -7,15 +7,13 @@
 
 {% macro periods_list_item(form, index, isPermanent) %}
     <li
-        class="app-card"
+        class="app-card app-card--no-header"
         data-controller="remove"
         data-remove-target="this"
         data-form-collection-target="collectionItem"
+        style="--card-padding: 1.5rem"
     >
-        <div class="app-card__header">
-            <div class="app-card__title fr-text--heavy">
-                {{ 'regulation.period.title'|trans }}
-            </div>
+        <div class="app-card__actions">
             <button
                 type="button"
                 aria-label="{{ 'common.delete'|trans }}"
@@ -506,18 +504,43 @@
                         </div>
 
                         {% include 'regulation/_vehicle_set_form.html.twig' with { form: form.vehicleSet, index: 0 } only %}
+                    </div>
+                </div>
+
+                <div class="app-card fr-mt-3w">
+                    <div class="app-card__header">
+                        <span class="app-card__img fr-icon-calendar-2-line fr-x-icon--primary fr-x-icon--xl" aria-hidden="true"></span>
+                        <div class="app-card__title">
+                            {{ form_label(form.periods, null, {
+                                element: 'legend',
+                                required: false,
+                                label_attr: {
+                                    id: 'periods-legend',
+                                },
+                                label_content_attr: {
+                                    class: 'fr-h4 fr-mb-0'
+                                },
+                                help_attr: {
+                                    class: 'fr-text--md',
+                                }
+                            }) }}
+                        </div>
+                    </div>
 
+                    <div
+                        class="app-card__content"
+                        style="--card-padding: 0 1.5rem 1.5rem 1.5rem"
+                    >
                         <div
                             data-controller="form-collection"
                             data-form-collection-prototype-key-value="period"
                             data-form-collection-next-index-value="{{ form.periods|length > 0 ? form.periods|last.vars.name + 1 : 0 }}"
                             data-form-collection-prototype-value="{{ _self.periods_list_item(form.periods.vars.prototype, '__period_name__', isPermanent)|e('html_attr') }}"
                         >
                             <fieldset
-                                class="fr-fieldset"
+                                class="fr-fieldset fr-mb-0"
                                 aria-labelledby="periods-legend"
-                                >
-                                {{ form_label(form.periods, null, { element: 'legend', required: false, label_attr: { id: 'periods-legend', class: 'fr-fieldset__legend' } }) }}
+                            >
                                 <ul
                                     id="period-list"
                                     class="fr-raw-list fr-fieldset__element"
@@ -543,6 +566,7 @@
                         </div>
                     </div>
                 </div>
+
                 <div class="app-card fr-mt-3w">
                     <div class="app-card__header">
                         <span class="app-card__img fr-icon-map-pin-2-line fr-x-icon--primary fr-x-icon--xl" aria-hidden="true"></span>
@@ -564,7 +588,6 @@
                             data-form-collection-prototype-key-value="location"
                             data-form-collection-next-index-value="{{ form.locations|length > 0 ? form.locations|last.vars.name + 1 : 0 }}"
                             data-form-collection-prototype-value="{{ _self.locations_list_item(form.locations.vars.prototype, '__location_name__', '__location_position__')|e('html_attr') }}"
-                            class="fr-mb-4w"
                         >
                             <ul
                                 class="fr-raw-list fr-mb-2w d-stack"

diff --git a/translations/messages.fr.xlf b/translations/messages.fr.xlf
@@ -1776,7 +1776,7 @@
             </trans-unit>
             <trans-unit id="regulation.period.recurrenceType">
                 <source>regulation.period.recurrenceType</source>
-                <target>Quels jours sont concernés ?</target>
+                <target>Jours concernés</target>
             </trans-unit>
             <trans-unit id="regulation.period.recurrenceType.everyDay">
                 <source>regulation.period.recurrenceType.everyDay</source>
@@ -1800,21 +1800,15 @@
             </trans-unit>
             <trans-unit id="regulation.period_list">
                 <source>regulation.period_list</source>
-                <target>Jours et horaires</target>
+                <target>Périodes d'application</target>
             </trans-unit>
             <trans-unit id="regulation.period_list.help">
                 <source>regulation.period_list.help</source>
-                <target>Pour cette restriction seulement, vous pouvez spécifier les jours et
-                    créneaux applicables. Par défaut la restriction s'applique tous les jours sur la
-                    période de validité de l'arrêté.</target>
-            </trans-unit>
-            <trans-unit id="regulation.period.title">
-                <source>regulation.period.title</source>
-                <target>Quelle est la date ou période d’application ?</target>
+                <target>Quand la perturbation est-elle prévue ?</target>
             </trans-unit>
             <trans-unit id="regulation.period.add">
                 <source>regulation.period.add</source>
-                <target>Ajouter une plage</target>
+                <target>Ajouter une période d'application</target>
             </trans-unit>
             <trans-unit id="regulation.timeSlot.add">
                 <source>regulation.timeSlot.add</source>
@@ -1846,7 +1840,7 @@
             </trans-unit>
             <trans-unit id="regulation.timeSlots.help">
                 <source>regulation.timeSlots.help</source>
-                <target>Par exemple de 9h00 à 12h00 et de 14h00 à 18h00</target>
+                <target>Par exemple de 9h00 à 12h00 et de 14h00 à 18h00. Par défaut la restriction s'applique sur la journée entière.</target>
             </trans-unit>
             <trans-unit id="regulation.vehicle_set.all_vehicles">
                 <source>regulation.vehicle_set.all_vehicles</source>