Merge pull request #9249 from colinux/improve-dossier-show

ETQ usager/instructeur: améliorations visuelles sur la page récap d'un dossier

app/assets/stylesheets/02_utils.scss

@@ -136,8 +136,9 @@
 
 // who known
 .highlighted {
-  background: $orange-bg;
+  background-color: var(--background-contrast-yellow-moutarde); // from fr-badge--new
-  color: $black;
+  color: var(--text-action-high-grey);
+  background-clip: content-box;
 }
 
 .overflow-y-visible {

app/assets/stylesheets/demande.scss

@@ -1,25 +1,29 @@
 @import "colors";
 @import "constants";
 
-.container {
+.dossier-show {
   @media (max-width: 48em) {
     .d-block-sm {
       display: block;
     }
   }
-}
 
-.champ-content {
+  .champ-label {
-  padding: 0 0 ,5rem;
+    font-weight: 600;
+    margin-bottom: 0;
+    color: var(--text-action-high-grey);
+  }
 
-  p {
+  .champ-content {
-    padding: 0;
+    padding: 0 0 0.5rem;
-    margin: 0;
+
+    p {
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  .top-bordered {
+    border-top: 1px solid var(--border-default-grey);
   }
 }
-
-.top-bordered {
-  border-top: 1px solid var(--border-default-grey);
-}
-
-

app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml

@@ -1,22 +1,25 @@
 - @champs.each do |champ|
   .fr-px-4v.fr-my-2v
     - if champ.repetition?
-      = champ.libelle
+      %p.champ-label= "#{champ.libelle} :"
       - champ.rows.each do |row|
         = render Dossiers::ChampRowShowComponent.new(champs: row, demande_seen_at: @demande_seen_at, profile: @profile, repetition: true)
 
     - else
       .flex.d-block-sm
-        %p.flex-grow.fr-text-action-high--grey.fr-mb-0= "#{champ.libelle} :"
+        %p.champ-label.flex-grow= "#{champ.libelle} :"
-        %p.champ-updated-at.fr-mb-0.fr-text--sm
+
-          - if updated_after_deposer?(champ)
+        - if updated_after_deposer?(champ)
+          %p.fr-mb-0.fr-text--sm
             %span{ class: highlight_if_unseen_class(@demande_seen_at, champ.updated_at) }
               = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: try_format_datetime(champ.updated_at))
+
       - if champ.blank? && ![TypeDeChamp.type_champs.fetch(:piece_justificative), TypeDeChamp.type_champs.fetch(:titre_identite)].include?(champ.type_champ)
         .champ-content.fr-text-mention--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
-          %p= t('.blank')
+          %p
+            %em= t('.blank')
       - else
-        .champ-content.fr-text-action-high--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+        .champ-content{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
           - case champ.type_champ
           - when TypeDeChamp.type_champs.fetch(:carte)
             = render partial: "shared/champs/carte/show", locals: { champ: champ }
@@ -59,4 +62,5 @@
           - when TypeDeChamp.type_champs.fetch(:number)
             %p= number_with_html_delimiter(champ.to_s)
           - else
-            %p= format_text_value(champ.to_s.strip) unless champ.blank?
+            - if champ.present?
+              = format_text_value(champ.to_s.strip) # format already wrap in p

app/views/shared/dossiers/_champs.html.haml

@@ -2,13 +2,13 @@
   .fr-my-4v.fr-px-4v
     .flex
 
-      %p.flex-grow.fr-text-action-high--grey.fr-mb-0= dossier.procedure.routing_criteria_name
+      %p.champ-label.flex-grow= dossier.procedure.routing_criteria_name
-      %p.champ-updated-at.fr-mb-0.fr-text--sm
+      %p.fr-mb-0.fr-text--xs
         - if demande_seen_at&.<(dossier.groupe_instructeur_updated_at)
           %span{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
             = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: try_format_datetime(dossier.updated_at))
 
-    .champ-content.fr-text-action-high--grey{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
+    .champ-content{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
       %p= dossier.groupe_instructeur.label
 
 

app/views/shared/dossiers/_demande.html.haml

@@ -2,9 +2,9 @@
   - content_for(:notice_info) do
     = render partial: "shared/dossiers/france_connect_informations_notice", locals: { user_information: dossier.france_connect_information }
 
-.fr-container.counter-start-header-section
+.fr-container.counter-start-header-section.dossier-show
-  .fr-grid-row
+  .fr-grid-row.fr-grid-row--center
-    .fr-col-12.fr-col-offset-lg-2.fr-col-lg-8
+    .fr-col-12.fr-col-lg-10.fr-col-xl-8
       %h2.fr-h6.fr-background-alt--grey.fr-mb-0
         .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.en_construction')
 
@@ -13,7 +13,13 @@
 
       .tab-title
         %h2.fr-h6.fr-background-alt--grey.fr-mb-0.flex
-          .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.requester_identity')
+          .flex-grow.fr-py-3v.fr-px-4v
+            = t('views.shared.dossiers.demande.requester_identity')
+
+            - if dossier.identity_updated_at.present? && demande_seen_at&.<(dossier.identity_updated_at)
+              %span.fr-badge.fr-badge--new.fr-badge--sm
+                = t('views.shared.dossiers.demande.requester_identity_updated_at', date: try_format_datetime(dossier.identity_updated_at))
+
           - if dossier.etablissement.present? && profile == 'usager' && !dossier.read_only?
             = link_to t('views.shared.dossiers.demande.edit_siret'), siret_dossier_path(dossier), class: 'fr-py-3v fr-btn fr-btn--tertiary-no-outline'
 
@@ -21,11 +27,6 @@
             = link_to t('views.shared.dossiers.demande.edit_identity'), identite_dossier_path(dossier), class: 'fr-py-3v fr-btn fr-btn--tertiary-no-outline'
 
 
-        - if dossier.identity_updated_at.present? && demande_seen_at&.<(dossier.identity_updated_at)
-          %span.highlighted
-            modifié le
-            = try_format_datetime(dossier.identity_updated_at)
-
       .fr-my-4v.fr-px-4v
         = render partial: "shared/dossiers/user_infos", locals: { user_deleted: dossier.user_deleted?, email: dossier.user_email_for(:display) }
 

app/views/shared/dossiers/_identite_entreprise.html.haml

@@ -6,46 +6,46 @@
         %p
           Il nʼest pas possible dʼaccepter ou de refuser un dossier sans cette étape.
   .fr-my-2v
-    %p.fr-text-action-high--grey.fr-mb-0 SIRET :
+    %p.champ-label SIRET :
-    .champ-content.fr-text-action-high--grey
+    .champ-content
       %p= etablissement.siret
 - else
   - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
     .fr-my-2v
-      .champ-content.fr-text-action-high--grey
+      .champ-content
         %p= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
   - else
     .fr-my-2v
-      %p.fr-text-action-high--grey.fr-mb-0 Dénomination :
+      %p.champ-label Dénomination :
-      .champ-content.fr-text-action-high--grey
+      .champ-content
         %p= raison_sociale_or_name(etablissement)
     .fr-my-2v
-      %p.fr-text-action-high--grey.fr-mb-0 SIRET :
+      %p.champ-label SIRET :
-      .champ-content.fr-text-action-high--grey
+      .champ-content
         %p #{pretty_siret(etablissement.siret)} #{ render Dsfr::CopyButtonComponent.new(text: etablissement.siret, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier") }
 
 
     - unless local_assigns[:short_identity]
       - if etablissement.siret != etablissement.entreprise.siret_siege_social
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 SIRET du siège social:
+          %p.champ-label SIRET du siège social:
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= etablissement.entreprise.siret_siege_social
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Forme juridique :
+        %p.champ-label Forme juridique :
-        .champ-content.fr-text-action-high--grey
+        .champ-content
           %p= sanitize(etablissement.entreprise.forme_juridique)
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Libellé NAF :
+        %p.champ-label Libellé NAF :
-        .champ-content.fr-text-action-high--grey
+        .champ-content
           %p= etablissement.libelle_naf
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Code NAF :
+        %p.champ-label Code NAF :
-        .champ-content.fr-text-action-high--grey
+        .champ-content
           %p= etablissement.naf
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Date de création :
+        %p.champ-label Date de création :
-        .champ-content.fr-text-action-high--grey
+        .champ-content
           %p
           = try_format_date(etablissement.entreprise.date_creation)
 
@@ -54,42 +54,42 @@
 
       - if profile == 'instructeur'
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0
+          %p.champ-label
             Effectif mensuel
             = try_format_mois_effectif(etablissement)
             (URSSAF) :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= etablissement.entreprise_effectif_mensuel
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0
+          %p.champ-label
             Effectif moyen annuel
             = etablissement.entreprise_effectif_annuel_annee
             (URSSAF) :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= etablissement.entreprise_effectif_annuel
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Effectif de l'organisation (INSEE) :
+        %p.champ-label Effectif de l'organisation (INSEE) :
-        .champ-content.fr-text-action-high--grey
+        .champ-content
           %p
           = effectif(etablissement)
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Numéro de TVA intracommunautaire :
+        %p.champ-label Numéro de TVA intracommunautaire :
-        .champ-content.fr-text-action-high--grey
+        .champ-content
           %p= etablissement.entreprise.numero_tva_intracommunautaire
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Adresse :
+        %p.champ-label Adresse :
-        .champ-content.fr-text-action-high--grey
+        .champ-content
           %p
           - etablissement.adresse.split("\n").each do |line|
             = line
             %br
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Capital social :
+        %p.champ-label Capital social :
-        .champ-content.fr-text-action-high--grey
+        .champ-content
           %p= pretty_currency(etablissement.entreprise.capital_social)
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Chiffre d’affaires :
+        %p.champ-label Chiffre d’affaires :
-        .champ-content.fr-text-action-high--grey
+        .champ-content
           %p
           - if profile == 'instructeur'
             %details
@@ -115,12 +115,12 @@
           = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
             locals: { libelle: 'Besoin en fonds de roulement', key: 'besoin_en_fonds_de_roulement', etablissement: etablissement }
           .fr-my-2v
-            %p.fr-text-action-high--grey.fr-mb-0
+            %p.champ-label
               Chiffres financiers clés (Banque de France)
               = "en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)} :"
 
             - if controller.is_a?(Instructeurs::AvisController)
-              .champ-content.fr-text-action-high--grey
+              .champ-content
                 %p
                 Les consulter
                 = link_to "au format csv", bilans_bdf_instructeur_avis_path(@avis, format: 'csv')
@@ -129,7 +129,7 @@
                 ou
                 = link_to "au format ods", bilans_bdf_instructeur_avis_path(@avis, format: 'ods')
             - else
-              .champ-content.fr-text-action-high--grey
+              .champ-content
                 %p
                 Les consulter
                 = link_to "au format csv", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'csv')
@@ -139,54 +139,54 @@
                 = link_to "au format ods", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'ods')
         - else
           .fr-my-2v
-            %p.fr-text-action-high--grey.fr-mb-0
+            %p.champ-label
               Bilans Banque de France :
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier.
       - if etablissement.entreprise_attestation_sociale.attached?
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Attestation sociale :
+          %p.champ-label Attestation sociale :
           - if profile == 'instructeur'
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_sociale)
           - else
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p Une attestation de vigilance délivrée par l'ACOSS a été jointe à votre dossier.
 
       - if etablissement.entreprise_attestation_fiscale.attached?
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Attestation fiscale :
+          %p.champ-label Attestation fiscale :
           - if profile == 'instructeur'
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_fiscale)
           - else
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p Une attestation fiscale délivrée par l'URSSAF a été jointe à votre dossier.
 
       - if etablissement.association?
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Numéro RNA :
+          %p.champ-label Numéro RNA :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= etablissement.association_rna
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Titre :
+          %p.champ-label Titre :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= etablissement.association_titre
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Objet :
+          %p.champ-label Objet :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= etablissement.association_objet
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Date de création :
+          %p.champ-label Date de création :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= try_format_date(etablissement.association_date_creation)
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Date de publication :
+          %p.champ-label Date de publication :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= try_format_date(etablissement.association_date_publication)
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Date de déclaration :
+          %p.champ-label Date de déclaration :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= try_format_date(etablissement.association_date_declaration)
 
 - unless local_assigns[:short_identity]

app/views/shared/dossiers/_identite_individual.html.haml

@@ -1,18 +1,18 @@
 
 .fr-my-2v
-  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.civility')
+  %p.champ-label= t('views.users.dossiers.identite.civility')
-  .champ-content.fr-text-action-high--grey
+  .champ-content
     %p= individual.gender
 .fr-my-2v
-  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.first_name')
+  %p.champ-label= t('views.users.dossiers.identite.first_name')
-  .champ-content.fr-text-action-high--grey
+  .champ-content
     %p= individual.prenom
 .fr-my-2v
-  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.last_name')
+  %p.champ-label= t('views.users.dossiers.identite.last_name')
-  .champ-content.fr-text-action-high--grey
+  .champ-content
     %p= individual.nom
 - if individual.birthdate.present?
   .fr-my-2v
-    %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.birthdate')
+    %p.champ-label= t('views.users.dossiers.identite.birthdate')
-    .champ-content.fr-text-action-high--grey
+    .champ-content
       %p= try_format_date(individual.birthdate)

app/views/shared/dossiers/_infos_generales.html.haml

@@ -1,27 +1,28 @@
 %div
-  %p.fr-my-4v.fr-px-4v.fr-text-action-high--grey
+  %p.fr-my-2w.fr-px-4v
-    = l(dossier.depose_at, format: '%d %B %Y %H:%m')
+    = t(:submitted_at, scope: [:views, :shared, :dossiers, :form], datetime: l(dossier.depose_at))
+    %br
     - if dossier.updated_at != dossier.depose_at
-      = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: l(dossier.updated_at, format: :long))
+      = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: l(dossier.updated_at))
 
 
   - if dossier.justificatif_motivation.attached?
     .fr-my-4v.fr-px-4v
-      %p.fr-text-action-high--grey.fr-mb-0 Justificatif :
+      %p.champ-label Justificatif :
       .champ-content.fr-text-action-high--grey
         .action
           = render Attachment::ShowComponent.new(attachment: dossier.justificatif_motivation.attachment)
 
   - if dossier.motivation.present?
     .fr-my-4v.fr-px-4v
-      %p.fr-text-action-high--grey.fr-mb-0 Motivation :
+      %p.champ-label Motivation :
       .champ-content.fr-text-action-high--grey
         .action
           = dossier.motivation
 
   - if dossier.attestation.present?
     .fr-my-4v.fr-px-4v
-      %p.fr-text-action-high--grey.fr-mb-0 Attestation :
+      %p.champ-label Attestation :
       .champ-content.fr-text-action-high--grey
         .action
           = link_to('Voir l’attestation', attestation_instructeur_dossier_path(dossier.procedure, dossier), target: '_blank', rel: 'noopener')

app/views/shared/dossiers/_user_infos.html.haml

@@ -1,4 +1,4 @@
 .fr-my-2v
-  %p.fr-text-action-high--grey.fr-mb-0 Email :
+  %p.champ-label Email :
-  .champ-content.fr-text-action-high--grey
+  .champ-content
     %p= user_deleted ? "#{email} (l’usager a supprimé son compte)" : email

app/views/users/dossiers/demande.html.haml

@@ -3,21 +3,21 @@
 - content_for :footer do
   = render partial: "users/procedure_footer", locals: { procedure: @dossier.procedure, dossier: @dossier }
 
-.dossier-container.mb-4
+.dossier-container.fr-mb-4w
   = render partial: 'users/dossiers/show/header', locals: { dossier: @dossier }
 
   - if @dossier.en_construction?
     .fr-container
       .fr-grid-row.fr-grid-row--center
-        .fr-col-md-10.fr-col-lg-9
+        .fr-col-md-10.fr-col-xl-9
           = render Dossiers::EnConstructionNotSubmittedComponent.new(dossier: @dossier, user: current_user)
 
   = render partial: 'shared/dossiers/demande', locals: { dossier: @dossier, demande_seen_at: nil, profile: 'usager' }
 
 
-  .fr-container
+  .fr-container.fr-mt-2w
-    .fr-grid-row
+    .fr-grid-row.fr-grid-row--center
-      .fr-col-12.fr-col-offset-lg-2.fr-col-lg-8
+      .fr-col-12.fr-col-lg-10.fr-col-xl-8
         - if !@dossier.read_only?
           = link_to t('views.users.dossiers.demande.edit_dossier'), modifier_dossier_path(@dossier), class: 'fr-btn fr-btn-sm', 'title'=> "Modifier mon dossier tant qu'il n'est pas passé en instruction"
           .clearfix

config/locales/en.yml

@@ -331,7 +331,8 @@ en:
         best_regards: Best Regards,
       dossiers:
         form:
-          updated_at: "updated at %{datetime}"
+          submitted_at: "Submitted on %{datetime}"
+          updated_at: "Updated on %{datetime}"
         edit:
           autosave: Your file is automatically saved after each modification. You can close the window at any time and pick up where you left off later.
           notice: "Download the notice of the procedure"
@@ -344,6 +345,7 @@ en:
             write_message_to_administration_placeholder: "Write your message to the administration here"
         demande:
           requester_identity: "Identity of the requester"
+          requester_identity_updated_at: "updated on %{date}"
           my_identity: "My identity"
           form: "Form"
           edit_siret: "Edit SIRET"

config/locales/fr.yml

@@ -331,7 +331,8 @@ fr:
         best_regards: Bonne journée,
       dossiers:
         form:
-          updated_at: "modifié le %{datetime}"
+          submitted_at: "Déposé le %{datetime}"
+          updated_at: "Modifié le %{datetime}"
         edit:
           autosave: Votre dossier est enregistré automatiquement après chaque modification. Vous pouvez à tout moment fermer la fenêtre et reprendre plus tard là où vous en étiez.
           notice: Télécharger le guide de la démarche
@@ -345,6 +346,7 @@ fr:
         demande:
           en_construction: "Date de dépôt du dossier"
           requester_identity: "Identité du demandeur"
+          requester_identity_updated_at: "modifiée le %{date}"
           my_identity: "Mon identité"
           form: "Sections du formulaire"
           edit_siret: "Modifier le SIRET"