unify UI modals #2960

MTES-MCT · Oct 1, 2024 · f5aa226 · f5aa226
1 parent a68ae87
commit f5aa226
Show file tree

Hide file tree

Showing 49 changed files with 500 additions and 491 deletions.
diff --git a/.../scripts/vue/components/signalement-form/components/SignalementFormModalAlreadyExists.vue b/.../scripts/vue/components/signalement-form/components/SignalementFormModalAlreadyExists.vue
@@ -5,7 +5,7 @@
         <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
           <div class="fr-modal__body">
             <div class="fr-modal__header">
-              <button class="fr-btn--close fr-btn" title="Fermer la fenêtre modale" aria-controls="fr-modal-already-exists" id="fr-modal-already-exists-close">Fermer</button>
+              <button type="button" class="fr-btn--close fr-btn" title="Fermer la fenêtre modale" aria-controls="fr-modal-already-exists" id="fr-modal-already-exists-close">Fermer</button>
             </div>
             <div class="fr-modal__content" v-if="formStore.alreadyExists.type==='signalement'">
               <h1 id="fr-modal-title-modal-already-exists" class="fr-modal__title"><span v-if="formStore.alreadyExists.signalements?.length === 1">Ce signalement existe déjà</span><span v-else>Ces signalements existent déjà</span></h1>

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormModalBackHome.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormModalBackHome.vue
@@ -5,7 +5,7 @@
         <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
           <div class="fr-modal__body">
             <div class="fr-modal__header">
-              <button class="fr-btn--close fr-btn" title="Fermer la fenêtre modale" aria-controls="fr-modal-back-home">Fermer</button>
+              <button type="button" class="fr-btn--close fr-btn" title="Fermer la fenêtre modale" aria-controls="fr-modal-back-home">Fermer</button>
             </div>
             <div class="fr-modal__content">
               <h1 id="fr-modal-title-modal-back-home" class="fr-modal__title">Retour à l'accueil</h1>
@@ -20,12 +20,12 @@
             <div class="fr-modal__footer">
               <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
                 <li>
-                  <a class="fr-btn" href="/">
+                  <a class="fr-btn fr-icon-check-line" href="/">
                     Quitter le signalement
                   </a>
                 </li>
                 <li>
-                  <button class="fr-btn fr-btn--secondary" aria-controls="fr-modal-back-home">
+                  <button class="fr-btn fr-btn--secondary fr-icon-close-line" aria-controls="fr-modal-back-home" type="button">
                     Continuer ma saisie
                   </button>
                 </li>

diff --git a/assets/scripts/vue/components/signalement-list/components/SignalementListCards.vue b/assets/scripts/vue/components/signalement-list/components/SignalementListCards.vue
@@ -82,17 +82,16 @@
       </div>
     </div>
   </div>
-  <dialog aria-labelledby="modal-delete-signalement-title" id="modal-delete-signalement" class="fr-modal" role="dialog" >
+  <dialog aria-labelledby="modal-delete-signalement-title" id="modal-delete-signalement" class="fr-modal">
     <div class="fr-container fr-container--fluid fr-container-lg">
         <div class="fr-grid-row fr-grid-row--center">
             <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
                 <div class="fr-modal__body">
                     <div class="fr-modal__header">
-                        <button class="fr-btn--close fr-btn" aria-controls="modal-delete-signalement">Fermer</button>
+                        <button type="button" class="fr-btn--close fr-btn" aria-controls="modal-delete-signalement">Fermer</button>
                     </div>
                     <div class="fr-modal__content">
                         <h1 id="modal-delete-signalement-title" class="fr-modal__title">
-                            <span class="fr-icon-arrow-right-line fr-icon--lg"></span>
                             Supprimer le signalement {{ selectedItem?.reference }}
                         </h1>
                         <div class="fr-alert fr-alert--warning fr-mb-1w">
@@ -112,10 +111,10 @@
                     </div>
                     <div class="fr-modal__footer">
                         <div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
-                            <button class="fr-btn fr-btn--secondary fr-icon-close-line" @click="emitDeleteSignalementItem(selectedItem)">
+                            <button class="fr-btn fr-btn--secondary fr-icon-check-line" @click="emitDeleteSignalementItem(selectedItem)">
                               Oui, supprimer
                             </button>
-                            <button class="fr-btn fr-icon-check-line" aria-controls="modal-delete-signalement">
+                            <button class="fr-btn fr-icon-close-line" aria-controls="modal-delete-signalement">
                               Non, annuler
                             </button>
                         </div>

diff --git a/assets/styles/histologe.scss b/assets/styles/histologe.scss
@@ -835,6 +835,10 @@ a.photo-preview {
     z-index: 1;
 }
 
+.fr-modal__footer-shadow {
+    filter: drop-shadow(var(--raised-shadow));
+}
+
 .signalement-tag-add, .signalement-tag-remove {
     cursor: pointer;
 }

diff --git a/templates/_partials/_modal_affectation.html.twig b/templates/_partials/_modal_affectation.html.twig
@@ -1,16 +1,15 @@
-<dialog aria-labelledby="fr-modal-affectation-title" id="fr-modal-affectation" class="fr-modal" role="dialog">
+<dialog aria-labelledby="fr-modal-affectation-title" id="fr-modal-affectation" class="fr-modal">
     <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
             <div class="fr-col-12 fr-col-md-10 fr-col-lg-10">
                 <div class="fr-modal__body">
                     <div class="fr-modal__header">
+                        <button type="button" class="fr-btn--close fr-btn" aria-controls="fr-modal-affectation">Fermer</button>
+                    </div>
+                    <div class="fr-modal__content">
                         <h1 id="fr-modal-affectation-title" class="fr-modal__title">
-                            <span class="fr-fi-arrow-right-line"></span>
                             Affectation de partenaires
                         </h1>
-                        <button class="fr-btn--close fr-btn" aria-controls="fr-modal-affectation">Fermer</button>
-                    </div>
-                    <div class="fr-modal__content">
                         <div class="fr-grid-row fr-grid-row--center fr-grid-row--middle fr-h-100 fr-hidden fr-mt-5w"
                              id="signalement-affectation-loader-row">
                             <div class="fr-col-12 fr-text--center">
@@ -75,15 +74,15 @@
                     <div class="fr-modal__footer">
                         <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
                             <li>
-                                <button class="fr-btn fr-icon-checkbox-line" type="submit"
+                                <button class="fr-btn fr-icon-check-line" type="submit"
                                         form="signalement-affectation-form" id="signalement-affectation-form-submit"
                                         formaction="{{ path('back_signalement_toggle_affectation',{uuid:signalement.uuid}) }}">
                                     Affecter partenaire(s)
                                 </button>
                             </li>
                             <li>
                                 <button class="fr-btn fr-btn--secondary fr-icon-close-line"
-                                        aria-controls="fr-modal-affectation">
+                                        aria-controls="fr-modal-affectation" type="button">
                                     Annuler
                                 </button>
                             </li>

diff --git a/templates/_partials/_modal_closed_territory.html.twig b/templates/_partials/_modal_closed_territory.html.twig
@@ -9,7 +9,9 @@
                         <button class="fr-btn--close fr-btn" title="Fermer la fenêtre modale" aria-controls="fr-modal-closed-territory">Fermer</button>
                     </div>
                     <div class="fr-modal__content">
-                        <h1 id="fr-modal-title-modal-closed-territory" class="fr-modal__title"><span class="fr-icon-arrow-right-line fr-icon--lg"></span>Avertissement</h1>
+                        <h1 id="fr-modal-title-modal-closed-territory" class="fr-modal__title">
+                            Avertissement
+                        </h1>
                         <div id="fr-modal-closed-territory-content">
                             <p>
                                 Nous ne pouvons malheureusement pas traiter votre demande.<br>

diff --git a/templates/_partials/_modal_cloture.html.twig b/templates/_partials/_modal_cloture.html.twig
@@ -1,16 +1,15 @@
-<dialog aria-labelledby="cloture-modal-title" id="cloture-modal" class="fr-modal" role="dialog">
+<dialog aria-labelledby="cloture-modal-title" id="cloture-modal" class="fr-modal">
     <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
             <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
                 <div class="fr-modal__body">
                     <div class="fr-modal__header">
+                        <button type="button" class="fr-btn--close fr-btn" aria-controls="cloture-modal">Fermer</button>
+                    </div>
+                    <div class="fr-modal__content">
                         <h1 id="cloture-modal-title" class="fr-modal__title">
-                            <span class="fr-fi-arrow-right-line fr-fi--sm"></span>
                             Clôture signalement #{{ signalement.reference }}
                         </h1>
-                        <a href="#" class="fr-link--close fr-link" aria-controls="cloture-modal">Fermer</a>
-                    </div>
-                    <div class="fr-modal__content">
                         {{ form_start(clotureForm,{attr:{
                             'class': 'tinyCheck'
                         }}) }}
@@ -63,7 +62,7 @@
                         {% endif %}
                     </div>
                     <div class="fr-modal__footer">
-                        <ul class="fr-btns-group fr-btns-group--right fr-btns-group--icon-left">
+                            <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
                             {% if is_granted('ROLE_ADMIN_TERRITORY') %}
                                 <li>
                                     <button class="fr-btn fr-btn--danger fr-w-100"
@@ -79,6 +78,11 @@
                                     </button>
                                 </li>
                             {% endif %}
+                                <li>
+                                    <button class="fr-btn fr-btn--secondary fr-icon-close-line " aria-controls="cloture-modal" type="button">
+                                        Annuler
+                                    </button>
+                                </li>
                         </ul>
                     </div>
                 </div>

diff --git a/templates/_partials/_modal_dpe.html.twig b/templates/_partials/_modal_dpe.html.twig
@@ -1,16 +1,15 @@
-<dialog aria-labelledby="modal-dpe-title" id="modal-dpe" class="fr-modal" role="dialog">
+<dialog aria-labelledby="modal-dpe-title" id="modal-dpe" class="fr-modal">
     <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
-            <div class="fr-col-12 fr-col-md-8 fr-col-lg-8">
+            <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
                 <div class="fr-modal__body">
                     <div class="fr-modal__header">
+                        <button type="button" class="fr-btn--close fr-btn" aria-controls="modal-dpe">Fermer</button>
+                    </div>
+                    <div class="fr-modal__content" id="modal-dpe-content">
                         <h1 id="modal-dpe-title" class="fr-modal__title">
-                            <span class="fr-fi-arrow-right-line fr-fi--sm"></span>
                             Consulter le(s) DPE
                         </h1>
-                        <button class="fr-btn--close fr-btn" aria-controls="modal-dpe">Fermer</button>
-                    </div>
-                    <div class="fr-modal__content" id="modal-dpe-content">
                         <h4>Aucun DPE connu pour ce logement</h4>
                     </div>
                 </div>

diff --git a/templates/_partials/_modal_edit_nde.html.twig b/templates/_partials/_modal_edit_nde.html.twig
@@ -1,15 +1,15 @@
-<dialog aria-labelledby="fr-modal-edit-nde-title" id="fr-modal-edit-nde" class="fr-modal" role="dialog">
+<dialog aria-labelledby="fr-modal-edit-nde-title" id="fr-modal-edit-nde" class="fr-modal">
     <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
-            <div class="fr-col-12 fr-col-md-10 fr-col-lg-10">
+            <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
                 <div class="fr-modal__body">
                     <div class="fr-modal__header">
-                            <h1 id="fr-modal-edit-nde-title" class="fr-modal__title">
-                                Non décence énergétique
-                            </h1>
-                            <button class="fr-btn--close fr-btn" aria-controls="fr-modal-edit-nde">Fermer</button>
-                     </div>
+                        <button type="button" class="fr-btn--close fr-btn" aria-controls="fr-modal-edit-nde">Fermer</button>
+                    </div>
                     <div class="fr-modal__content">
+                        <h1 id="fr-modal-edit-nde-title" class="fr-modal__title">
+                            Non décence énergétique
+                        </h1>
                         <p>
                             Validez les informations pour savoir si le logement dépasse le seuil de non décence énergétique ou non.
                             <br>
@@ -156,14 +156,14 @@
                     <div class="fr-modal__footer">
                         <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
                             <li>
-                                <button class="fr-btn fr-icon-checkbox-line" type="submit"
+                                <button class="fr-btn fr-icon-check-line" type="submit"
                                         id="signalement-edit-nde-form-submit">
                                     Valider
                                 </button>
                             </li>
                             <li>
                                 <button class="fr-btn fr-btn--secondary fr-icon-close-line"
-                                        aria-controls="fr-modal-edit-nde">
+                                        aria-controls="fr-modal-edit-nde" type="button">
                                     Annuler
                                 </button>
                             </li>

diff --git a/templates/_partials/_modal_file_delete.html.twig b/templates/_partials/_modal_file_delete.html.twig
@@ -1,9 +1,9 @@
-<dialog aria-labelledby="fr-modal-title-modal-delete-file" role="dialog" id="fr-modal-delete-file" class="fr-modal">
+<dialog aria-labelledby="fr-modal-title-modal-delete-file" id="fr-modal-delete-file" class="fr-modal">
     <div class="fr-container fr-container--fluid fr-container-md  fr-text--left">
         <div class="fr-grid-row fr-grid-row--center">
-            <div class="fr-col-12 fr-col-md-8">
-                <form method="POST" id="form-delete-file" enctype="application/json" action="{{ path('back_signalement_delete_file',{uuid:signalement.uuid}) }}">
-                    <div class="fr-modal__body">
+            <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
+                <div class="fr-modal__body">
+                    <form method="POST" id="form-delete-file" enctype="application/json" action="{{ path('back_signalement_delete_file',{uuid:signalement.uuid}) }}">
                         <div class="fr-modal__header">
                             <button type="button" class="fr-btn--close fr-btn" aria-controls="fr-modal-delete-file">Fermer</button>
                         </div>
@@ -20,29 +20,28 @@
                             <div class="fr-alert fr-alert--info">
                                 <p>Voulez-vous vraiment supprimer <span class="fr-modal-file-delete-type"></span> ?</p>
                             </div>
-
+                            <input type="hidden" name="_token" value="{{ csrf_token('signalement_delete_file_'~signalement.id) }}">
+                            <input type="hidden" name="file_id" id="file-delete-fileid">
                         </div>
 
                         <div class="fr-modal__footer">
-                            <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-lg fr-btns-group--icon-left">
+                            <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
                                 <li>
-                                    <button type="button" class="fr-btn fr-btn--secondary fr-icon-close-line"
-                                            aria-controls="fr-modal-delete-file">
-                                        Non, annuler
+                                    <button class="fr-btn fr-icon-check-line" type="submit" form="form-delete-file"
+                                        id="form-delete-file-submit">
+                                        Oui, supprimer
                                     </button>
                                 </li>
                                 <li>
-                                    <button class="fr-btn  fr-icon-checkbox-line" type="submit" form="form-delete-file"
-                                        id="form-delete-file-submit">
-                                        Oui, supprimer
+                                    <button type="button" class="fr-btn fr-btn--secondary fr-icon-close-line"
+                                            aria-controls="fr-modal-delete-file">
+                                        Non, annuler
                                     </button>
                                 </li>
                             </ul>
                         </div>
-                    </div>
-                    <input type="hidden" name="_token" value="{{ csrf_token('signalement_delete_file_'~signalement.id) }}">
-                    <input type="hidden" name="file_id" id="file-delete-fileid">
-                </form>
+                    </form>
+                </div>
             </div>
         </div>
     </div>