From 549eda6fe3d79f3ddc12f92df3d5b04cab5a1f97 Mon Sep 17 00:00:00 2001 From: Martin Date: Wed, 17 Aug 2022 13:53:07 +0200 Subject: [PATCH 01/10] feat(DSFR.breadcrumb): switch to DSFR breadcrumb style since it is part of new service UI --- app/assets/stylesheets/breadcrumb.scss | 27 --------- .../administrateurs/_breadcrumbs.html.haml | 34 ++++++++--- .../administrateurs/archives/index.html.haml | 6 +- .../attestation_templates/edit.html.haml | 6 +- .../dossier_submitted_messages/edit.html.haml | 6 +- .../experts_procedures/index.html.haml | 6 +- .../groupe_instructeurs/index.html.haml | 12 ++-- .../reaffecter_dossiers.html.haml | 8 +-- .../groupe_instructeurs/show.html.haml | 8 +-- .../api_particulier.html.haml | 6 +- .../jeton_particulier/show.html.haml | 8 +-- .../mail_templates/edit.html.haml | 8 +-- .../mail_templates/index.html.haml | 5 +- .../procedure_administrateurs/index.html.haml | 6 +- .../procedures/annotations.html.haml | 6 +- .../procedures/champs.html.haml | 6 +- .../procedures/close.html.haml | 6 +- .../administrateurs/procedures/edit.html.haml | 6 +- .../procedures/jeton.html.haml | 6 +- .../procedures/modifications.html.haml | 6 +- .../procedures/monavis.html.haml | 6 +- .../administrateurs/procedures/new.html.haml | 2 +- .../procedures/publication.html.haml | 6 +- .../administrateurs/procedures/show.html.haml | 6 +- .../procedures/transfert.html.haml | 6 +- .../administrateurs/services/edit.html.haml | 8 +-- .../administrateurs/services/index.html.haml | 6 +- .../administrateurs/services/new.html.haml | 8 +-- .../sources_particulier/show.html.haml | 8 +-- .../instructeurs/archives/index.html.haml | 4 +- .../groupe_instructeurs/index.html.haml | 4 +- .../groupe_instructeurs/show.html.haml | 6 +- .../procedures/email_notifications.html.haml | 4 +- .../procedures/email_usagers.html.haml | 4 +- .../instructeurs/procedures/stats.html.haml | 4 +- app/views/layouts/_account_dropdown.haml | 56 ++++++++++++------- app/views/users/profil/show.html.haml | 4 +- .../locales/views/layouts/_breadcrumb.en.yml | 13 +++++ .../locales/views/layouts/_breadcrumb.fr.yml | 13 +++++ .../administrateurs/procedure_update_spec.rb | 4 +- 40 files changed, 194 insertions(+), 160 deletions(-) delete mode 100644 app/assets/stylesheets/breadcrumb.scss create mode 100644 config/locales/views/layouts/_breadcrumb.en.yml create mode 100644 config/locales/views/layouts/_breadcrumb.fr.yml diff --git a/app/assets/stylesheets/breadcrumb.scss b/app/assets/stylesheets/breadcrumb.scss deleted file mode 100644 index daa995dbe..000000000 --- a/app/assets/stylesheets/breadcrumb.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import "colors"; -@import "constants"; - -.breadcrumbs { - li { - display: inline-block; - font-weight: bold; - font-size: 14px; - - a { - color: $black; - text-decoration: underline; - } - - &::after { - content: " > "; - } - - &:last-child { - color: $blue-france-500; - - &::after { - content: none; - } - } - } -} diff --git a/app/views/administrateurs/_breadcrumbs.html.haml b/app/views/administrateurs/_breadcrumbs.html.haml index 74b58bd94..2733c965f 100644 --- a/app/views/administrateurs/_breadcrumbs.html.haml +++ b/app/views/administrateurs/_breadcrumbs.html.haml @@ -1,14 +1,32 @@ #breadcrumbs.sub-header .container.flex.justify-between.align-baseline.column - %ul.breadcrumbs.mt-1.mb-3 - - steps.each do |step| - %li= step + %nav.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } } + %button.fr-breadcrumb__button{ aria: { expanded: "false", controls: "breadcrumb-1" } } + = t('show', scope: [:layouts, :breadcrumb]) + + .fr-collapse#breadcrumb-1 + %ol.fr-breadcrumb__list + %li= link_to t('root', scope: [:layouts, :breadcrumb]), root_path, class: 'fr-breadcrumb__link' + - steps.each.with_index do |step, i| + - if i == steps.size - 1 + %li{ aria: {current: "page"}} + %span.fr-breadcrumb__link= step[0] + - else + %li= link_to step[0], step[1], class: 'fr-breadcrumb__link' + - if defined?(preview) && preview .mb-2 - = link_to "Prévisualiser le formulaire", apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button' - = link_to "Continuer >", admin_procedure_path(@procedure), title: 'Vous pourrez revenir ici par la suite', class: 'button accepted' + = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button' + = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'button accepted' - if defined?(metadatas) - %ul.admin-metadata - - metadatas.each do |metadata| - %li= metadata + .metadatas.pb-3 + %h1= t('created_at', number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y'), scope: [:layouts, :breadcrumb]) + - if @procedure.close? + %h2= t('closed_at', date: @procedure.closed_at.strftime('%d/%m/%Y'), scope: [:layouts, :breadcrumb]) + %p + - if @procedure.locked? + = t('published', scope: [:layouts, :breadcrumb]) + = link_to procedure_lien(@procedure), procedure_lien(@procedure) + - else + = t('draft', scope: [:layouts, :breadcrumb]) diff --git a/app/views/administrateurs/archives/index.html.haml b/app/views/administrateurs/archives/index.html.haml index 61ac49abe..20558827c 100644 --- a/app/views/administrateurs/archives/index.html.haml +++ b/app/views/administrateurs/archives/index.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Export et Archives'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Export et Archives']] } .container diff --git a/app/views/administrateurs/attestation_templates/edit.html.haml b/app/views/administrateurs/attestation_templates/edit.html.haml index 235f988f8..1338f9bdf 100644 --- a/app/views/administrateurs/attestation_templates/edit.html.haml +++ b/app/views/administrateurs/attestation_templates/edit.html.haml @@ -1,9 +1,9 @@ - content_for(:root_class, 'scroll-margins-for-sticky-footer') = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Attestation'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Attestation']] } .procedure-form#attestation-template-edit .procedure-form__columns.container diff --git a/app/views/administrateurs/dossier_submitted_messages/edit.html.haml b/app/views/administrateurs/dossier_submitted_messages/edit.html.haml index 633073303..de049d086 100644 --- a/app/views/administrateurs/dossier_submitted_messages/edit.html.haml +++ b/app/views/administrateurs/dossier_submitted_messages/edit.html.haml @@ -1,9 +1,9 @@ - content_for(:root_class, 'scroll-margins-for-sticky-footer') = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Fin de dépot'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Fin de dépot']] } .procedure-form .procedure-form__columns.container diff --git a/app/views/administrateurs/experts_procedures/index.html.haml b/app/views/administrateurs/experts_procedures/index.html.haml index 357010386..5cbdd8bb6 100644 --- a/app/views/administrateurs/experts_procedures/index.html.haml +++ b/app/views/administrateurs/experts_procedures/index.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Liste des experts'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Liste des experts']] } .container %h1.page-title.mt-2 Experts invités sur #{@procedure.libelle} diff --git a/app/views/administrateurs/groupe_instructeurs/index.html.haml b/app/views/administrateurs/groupe_instructeurs/index.html.haml index 5f1e1e910..53e2d04fc 100644 --- a/app/views/administrateurs/groupe_instructeurs/index.html.haml +++ b/app/views/administrateurs/groupe_instructeurs/index.html.haml @@ -1,13 +1,13 @@ - if @procedure.routee? = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to(t('.procedures'), admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - t('.instructors_group')] } + locals: { steps: [[t('.procedures'), admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + [t('.instructors_group')]] } - else = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Instructeurs'] } + locals: { steps: [[t('.procedures'), admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Instructeurs']] } .container.groupe-instructeur %h1 Gérer les instructeurs et les options d'instruction de « #{@procedure.libelle} » diff --git a/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml b/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml index 3797c5ead..8b27e7d20 100644 --- a/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml +++ b/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml @@ -1,8 +1,8 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - link_to('Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)), - @groupe_instructeur.label] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)], + [@groupe_instructeur.label]] } .container.groupe-instructeur diff --git a/app/views/administrateurs/groupe_instructeurs/show.html.haml b/app/views/administrateurs/groupe_instructeurs/show.html.haml index 4d173134c..34142dad8 100644 --- a/app/views/administrateurs/groupe_instructeurs/show.html.haml +++ b/app/views/administrateurs/groupe_instructeurs/show.html.haml @@ -1,8 +1,8 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - link_to('Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)), - @groupe_instructeur.label] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)], + [@groupe_instructeur.label]] } .container.groupe-instructeur = render partial: 'administrateurs/groups_header' diff --git a/app/views/administrateurs/jeton_particulier/api_particulier.html.haml b/app/views/administrateurs/jeton_particulier/api_particulier.html.haml index 83b6d11da..603ce44d6 100644 --- a/app/views/administrateurs/jeton_particulier/api_particulier.html.haml +++ b/app/views/administrateurs/jeton_particulier/api_particulier.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - Procedure.human_attribute_name(:jeton_api_particulier)] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + [Procedure.human_attribute_name(:jeton_api_particulier)]] } .container .flex diff --git a/app/views/administrateurs/jeton_particulier/show.html.haml b/app/views/administrateurs/jeton_particulier/show.html.haml index de7d3734e..2ffa87791 100644 --- a/app/views/administrateurs/jeton_particulier/show.html.haml +++ b/app/views/administrateurs/jeton_particulier/show.html.haml @@ -1,8 +1,8 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - link_to(Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)), - 'Jeton'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + [Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)], + ['Jeton']] } .container %h1.page-title diff --git a/app/views/administrateurs/mail_templates/edit.html.haml b/app/views/administrateurs/mail_templates/edit.html.haml index 2b2afdde5..31636603c 100644 --- a/app/views/administrateurs/mail_templates/edit.html.haml +++ b/app/views/administrateurs/mail_templates/edit.html.haml @@ -3,10 +3,10 @@ = render partial: 'admin/closed_mail_template_attestation_inconsistency_alert' = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - link_to("Emails", admin_procedure_mail_templates_path(@procedure)), - @mail_template.class.const_get(:DISPLAYED_NAME)] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ["Emails", admin_procedure_mail_templates_path(@procedure)], + [@mail_template.class.const_get(:DISPLAYED_NAME)]] } .procedure-form .procedure-form__columns.container diff --git a/app/views/administrateurs/mail_templates/index.html.haml b/app/views/administrateurs/mail_templates/index.html.haml index 7978ff757..cbf60d84b 100644 --- a/app/views/administrateurs/mail_templates/index.html.haml +++ b/app/views/administrateurs/mail_templates/index.html.haml @@ -1,6 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to("#{@procedure.libelle}", admin_procedure_path(@procedure)), "Configuration des emails"] } + locals: { steps: [['Démarches', admin_procedures_path], + ["#{@procedure.libelle.truncate_words(4)}", admin_procedure_path(@procedure)], + ["Configuration des emails"]] } .container - @mail_templates.each do |mail_template| diff --git a/app/views/administrateurs/procedure_administrateurs/index.html.haml b/app/views/administrateurs/procedure_administrateurs/index.html.haml index dd869fcda..6b35f5464 100644 --- a/app/views/administrateurs/procedure_administrateurs/index.html.haml +++ b/app/views/administrateurs/procedure_administrateurs/index.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Administrateurs'], preview: false } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Administrateurs']], preview: false } .container %h1 Gérer les administrateurs de « #{@procedure.libelle} » diff --git a/app/views/administrateurs/procedures/annotations.html.haml b/app/views/administrateurs/procedures/annotations.html.haml index 14889e5f9..7ccfe66ba 100644 --- a/app/views/administrateurs/procedures/annotations.html.haml +++ b/app/views/administrateurs/procedures/annotations.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Configuration des annotations privées'], preview: true } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Configuration des annotations privées']], preview: true } .container %h1 Configuration des annotations privées diff --git a/app/views/administrateurs/procedures/champs.html.haml b/app/views/administrateurs/procedures/champs.html.haml index d21ddfe64..89c8210ac 100644 --- a/app/views/administrateurs/procedures/champs.html.haml +++ b/app/views/administrateurs/procedures/champs.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)), - 'Configuration des champs'], preview: @procedure.draft_revision.valid? } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Configuration des champs']], preview: @procedure.draft_revision.valid? } .container %h1 Configuration des champs diff --git a/app/views/administrateurs/procedures/close.html.haml b/app/views/administrateurs/procedures/close.html.haml index 53b914e4b..812ed11bc 100644 --- a/app/views/administrateurs/procedures/close.html.haml +++ b/app/views/administrateurs/procedures/close.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - "#{@procedure.libelle}", 'archiver'], - metadatas: ["Créée le #{@procedure.created_at.strftime('%d/%m/%Y')} - n° #{@procedure.id}", "#{@procedure.close? ? "Close le #{@procedure.closed_at.strftime('%d/%m/%Y')}" : @procedure.locked? ? "Publiée - #{procedure_lien(@procedure)}" : "Brouillon"}"] } + locals: { steps: [['Démarches', admin_procedures_path], + ["#{@procedure.libelle.truncate_words(4)} - archiver"]], + metadatas: true } .container .card diff --git a/app/views/administrateurs/procedures/edit.html.haml b/app/views/administrateurs/procedures/edit.html.haml index 1c12d44be..b853bc8c1 100644 --- a/app/views/administrateurs/procedures/edit.html.haml +++ b/app/views/administrateurs/procedures/edit.html.haml @@ -1,9 +1,9 @@ - content_for(:root_class, 'scroll-margins-for-sticky-footer') = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Description'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Description']] } .procedure-form .procedure-form__columns.container = form_for @procedure, diff --git a/app/views/administrateurs/procedures/jeton.html.haml b/app/views/administrateurs/procedures/jeton.html.haml index 0bfdc1be7..b6e16511e 100644 --- a/app/views/administrateurs/procedures/jeton.html.haml +++ b/app/views/administrateurs/procedures/jeton.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Jeton'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Jeton']] } .container %h1.page-title diff --git a/app/views/administrateurs/procedures/modifications.html.haml b/app/views/administrateurs/procedures/modifications.html.haml index 1e7ca13c0..756dbc4af 100644 --- a/app/views/administrateurs/procedures/modifications.html.haml +++ b/app/views/administrateurs/procedures/modifications.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Modifications'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Modifications']] } .container %h1.page-title Historique des modifications du formulaire diff --git a/app/views/administrateurs/procedures/monavis.html.haml b/app/views/administrateurs/procedures/monavis.html.haml index a11ff46a4..71fcc8183 100644 --- a/app/views/administrateurs/procedures/monavis.html.haml +++ b/app/views/administrateurs/procedures/monavis.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'MonAvis'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['MonAvis']] } .container %h1.page-title diff --git a/app/views/administrateurs/procedures/new.html.haml b/app/views/administrateurs/procedures/new.html.haml index 2a75df20b..43badaf1f 100644 --- a/app/views/administrateurs/procedures/new.html.haml +++ b/app/views/administrateurs/procedures/new.html.haml @@ -1,7 +1,7 @@ - content_for(:root_class, 'scroll-margins-for-sticky-footer') = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), + locals: { steps: [['Démarches', admin_procedures_path], 'Nouvelle'] } .procedure-form diff --git a/app/views/administrateurs/procedures/publication.html.haml b/app/views/administrateurs/procedures/publication.html.haml index 8abfb2512..ff232b00c 100644 --- a/app/views/administrateurs/procedures/publication.html.haml +++ b/app/views/administrateurs/procedures/publication.html.haml @@ -1,8 +1,8 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Publication'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Publication']] } .container - if @procedure.draft_types_de_champ.dubious.present? .card.warning.mb-3 diff --git a/app/views/administrateurs/procedures/show.html.haml b/app/views/administrateurs/procedures/show.html.haml index c6e92c130..8ca974503 100644 --- a/app/views/administrateurs/procedures/show.html.haml +++ b/app/views/administrateurs/procedures/show.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - "#{@procedure.libelle}", ], - metadatas: ["Créée le #{@procedure.created_at.strftime('%d/%m/%Y')} - n° #{@procedure.id}", "#{@procedure.close? ? "Close le #{@procedure.closed_at.strftime('%d/%m/%Y')}" : @procedure.locked? ? "Publiée - #{procedure_lien(@procedure)}" : "Brouillon"}"] } + locals: { steps: [['Démarches', admin_procedures_path], + ["#{@procedure.libelle.truncate_words(4)}"]], + metadatas: true } .container.procedure-admin-container - if @procedure.draft_revision.valid? diff --git a/app/views/administrateurs/procedures/transfert.html.haml b/app/views/administrateurs/procedures/transfert.html.haml index 1a6c03926..7d01ade73 100644 --- a/app/views/administrateurs/procedures/transfert.html.haml +++ b/app/views/administrateurs/procedures/transfert.html.haml @@ -1,6 +1,6 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - 'Transfert'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Transfert']] } .container = render partial: 'procedure_transfert' diff --git a/app/views/administrateurs/services/edit.html.haml b/app/views/administrateurs/services/edit.html.haml index 5f05fbf70..41cf65f34 100644 --- a/app/views/administrateurs/services/edit.html.haml +++ b/app/views/administrateurs/services/edit.html.haml @@ -1,8 +1,8 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)), - link_to('Choix du service', admin_services_path(procedure_id: @procedure.id)), - 'Modifier le service'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Choix du service', admin_services_path(procedure_id: @procedure.id)], + ['Modifier le service']] } .container diff --git a/app/views/administrateurs/services/index.html.haml b/app/views/administrateurs/services/index.html.haml index e490f4666..87104eedb 100644 --- a/app/views/administrateurs/services/index.html.haml +++ b/app/views/administrateurs/services/index.html.haml @@ -1,7 +1,7 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)), - 'Choix du service'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Choix du service']] } #services-index.container %h1.fr-h1 Liste des Services diff --git a/app/views/administrateurs/services/new.html.haml b/app/views/administrateurs/services/new.html.haml index d6255051c..991f709bc 100644 --- a/app/views/administrateurs/services/new.html.haml +++ b/app/views/administrateurs/services/new.html.haml @@ -1,8 +1,8 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)), - link_to('Choix du service', admin_services_path(procedure_id: @procedure.id)), - 'Nouveau service'] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Choix du service', admin_services_path(procedure_id: @procedure.id)], + ['Nouveau service']] } .container %h1 Nouveau Service diff --git a/app/views/administrateurs/sources_particulier/show.html.haml b/app/views/administrateurs/sources_particulier/show.html.haml index 882d034b0..2a7d78e75 100644 --- a/app/views/administrateurs/sources_particulier/show.html.haml +++ b/app/views/administrateurs/sources_particulier/show.html.haml @@ -1,8 +1,8 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle, admin_procedure_path(@procedure)), - link_to(Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)), - t('.data_sources')] } + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + [Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)], + [t('.data_sources')]] } .container %h1.page-title= t('.title') diff --git a/app/views/instructeurs/archives/index.html.haml b/app/views/instructeurs/archives/index.html.haml index 2945c9806..669aa4de1 100644 --- a/app/views/instructeurs/archives/index.html.haml +++ b/app/views/instructeurs/archives/index.html.haml @@ -1,8 +1,8 @@ - content_for(:title, "Archives pour #{@procedure.libelle}") = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)), - 'Archives'] } + locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)], + ['Archives']] } .container %h1.mb-2 Archives diff --git a/app/views/instructeurs/groupe_instructeurs/index.html.haml b/app/views/instructeurs/groupe_instructeurs/index.html.haml index e7b44936f..e5e931f2e 100644 --- a/app/views/instructeurs/groupe_instructeurs/index.html.haml +++ b/app/views/instructeurs/groupe_instructeurs/index.html.haml @@ -1,8 +1,8 @@ - content_for(:title, "Notifications pour #{@procedure.libelle}") = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)), - 'Groupes d’instructeurs'] } + locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)], + ['Groupes d’instructeurs']] } .container.groupe-instructeur .card diff --git a/app/views/instructeurs/groupe_instructeurs/show.html.haml b/app/views/instructeurs/groupe_instructeurs/show.html.haml index a5d1b26aa..8c4213ee5 100644 --- a/app/views/instructeurs/groupe_instructeurs/show.html.haml +++ b/app/views/instructeurs/groupe_instructeurs/show.html.haml @@ -2,9 +2,9 @@ - content_for(:title, "Instructeurs du groupe #{@groupe_instructeur.label}") = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)), - link_to('Groupes d’instructeurs', instructeur_groupes_path(@procedure)), - @groupe_instructeur.label] } + locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)], + ['Groupes d’instructeurs', instructeur_groupes_path(@procedure)], + [@groupe_instructeur.label]] } - else - content_for(:title, "Instructeurs de la démarche #{@procedure.libelle}") diff --git a/app/views/instructeurs/procedures/email_notifications.html.haml b/app/views/instructeurs/procedures/email_notifications.html.haml index 54f44534f..8b04c7689 100644 --- a/app/views/instructeurs/procedures/email_notifications.html.haml +++ b/app/views/instructeurs/procedures/email_notifications.html.haml @@ -1,8 +1,8 @@ - content_for(:title, "Notifications pour #{@procedure.libelle}") = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)), - 'Notifications'] } + locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)], + ['Notifications']] } .container %h1 diff --git a/app/views/instructeurs/procedures/email_usagers.html.haml b/app/views/instructeurs/procedures/email_usagers.html.haml index 5373d9435..a7745e20e 100644 --- a/app/views/instructeurs/procedures/email_usagers.html.haml +++ b/app/views/instructeurs/procedures/email_usagers.html.haml @@ -1,8 +1,8 @@ - content_for(:title, "Contacter les usagers pour #{@procedure.libelle}") = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)), - t('.contact_users')] } + locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)], + [t('.contact_users')]] } .messagerie.container - if @email_usagers_dossiers.present? %p.notice.mb-2.mt-4 diff --git a/app/views/instructeurs/procedures/stats.html.haml b/app/views/instructeurs/procedures/stats.html.haml index 1d588b2fd..5695e8873 100644 --- a/app/views/instructeurs/procedures/stats.html.haml +++ b/app/views/instructeurs/procedures/stats.html.haml @@ -2,7 +2,7 @@ - content_for(:title, title) = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)), - t('.title')] } + locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)], + [t('.title')]] } = render partial: 'shared/procedures/stats', locals: { title: title } diff --git a/app/views/layouts/_account_dropdown.haml b/app/views/layouts/_account_dropdown.haml index 6b6ed92a9..f81b8b2a9 100644 --- a/app/views/layouts/_account_dropdown.haml +++ b/app/views/layouts/_account_dropdown.haml @@ -1,23 +1,39 @@ -.dropdown.header-menu-opener{ data: { controller: 'menu-button' } } - %button.button.dropdown-button.icon-only.header-menu-button{ title: "Mon compte", data: { menu_button_target: 'button' } } - %span.hidden= t("my_account", scope: [:layouts]) - = image_tag "icons/account-circle.svg", alt: 'Mon compte', width: 24, height: 24, loading: 'lazy' - %ul.header-menu.dropdown-content#mon_compte_menu{ data: { menu_button_target: 'menu' } } - %li - .menu-item{ title: current_email } - = current_email - - if super_admin_signed_in? - %li - = link_to manager_root_path, class: "menu-item menu-link" do - = image_tag "icons/super-admin.svg", alt: '' - = t('go_superadmin', scope: [:layouts]) - - if multiple_devise_profile_connect? - - if user_signed_in? && nav_bar_profile != :user - %li - = link_to dossiers_path, class: "menu-item menu-link" do - = image_tag "icons/switch-profile.svg", alt: '' - = t('go_user', scope: [:layouts]) - - if instructeur_signed_in? && nav_bar_profile != :instructeur + +%nav.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) } + .fr-nav__item + %button.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) } + = image_tag "icons/account-circle.svg", alt: t('my_account', scope: [:layouts]), width: 20, height: 20, loading: 'lazy' +   + = " #{current_email}" + #account.fr-collapse.fr-menu + %ul.fr-menu__list + - if super_admin_signed_in? + %li + = link_to manager_root_path, class: "fr-nav__link flex align-center" do + = image_tag "icons/super-admin.svg", alt: '',width: 20, height: 20, class: 'mr-1' + = t('go_superadmin', scope: [:layouts]) + - if multiple_devise_profile_connect? + - if user_signed_in? && nav_bar_profile != :user + %li + = link_to dossiers_path, class: "fr-nav__link flex align-center" do + = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1' + = t('go_user', scope: [:layouts]) + - if instructeur_signed_in? && nav_bar_profile != :instructeur + %li + = link_to instructeur_procedures_path, class: "fr-nav__link flex align-center" do + = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1' + = t('go_instructor', scope: [:layouts]) + - if expert_signed_in? && nav_bar_profile != :expert + %li + = link_to expert_all_avis_path, class: "fr-nav__link flex align-center" do + = image_tag "icons/switch-profile.svg", alt: '' + = t('go_expert', scope: [:layouts]) + - if administrateur_signed_in? && nav_bar_profile != :administrateur + %li + = link_to admin_procedures_path, class: "fr-nav__link flex align-center" do + = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1' + = t('go_admin', scope: [:layouts]) + %li = link_to instructeur_procedures_path, class: "menu-item menu-link" do = image_tag "icons/switch-profile.svg", alt: '' diff --git a/app/views/users/profil/show.html.haml b/app/views/users/profil/show.html.haml index ebce57a8b..5e9f1a8b5 100644 --- a/app/views/users/profil/show.html.haml +++ b/app/views/users/profil/show.html.haml @@ -1,6 +1,6 @@ = render partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Tableau de bord', tableau_de_bord_helper_path), - 'Profil'] } + locals: { steps: [['Tableau de bord', tableau_de_bord_helper_path], + ['Profil']] } #profil-page.container %h1 Profil diff --git a/config/locales/views/layouts/_breadcrumb.en.yml b/config/locales/views/layouts/_breadcrumb.en.yml new file mode 100644 index 000000000..fb74a8b05 --- /dev/null +++ b/config/locales/views/layouts/_breadcrumb.en.yml @@ -0,0 +1,13 @@ +en: + layouts: + breadcrumb: + root: "Home" + you_are_here: "You are here" + show: Show breadcrumb + preview: "Preview the form" + continue: "Continue >" + continue_title: "You can comeback using this link" + created_at: "Created at %{date} - n° %{number}" + closed_at: "Closed at %{date}" + published: "Published" + draft: "Draft" diff --git a/config/locales/views/layouts/_breadcrumb.fr.yml b/config/locales/views/layouts/_breadcrumb.fr.yml new file mode 100644 index 000000000..ca496ba6c --- /dev/null +++ b/config/locales/views/layouts/_breadcrumb.fr.yml @@ -0,0 +1,13 @@ +fr: + layouts: + breadcrumb: + root: "Accueil" + you_are_here: "Vous êtes ici" + show: "Voir le fil d’Ariane" + preview: "Prévisualiser le formulaire" + continue: "Continuer >" + continue_title: "Vous pourrez revenir ici par la suite" + created_at: "Créée le %{date} - n° %{number}" + closed_at: "Close le %{date}" + published: "Publiée – " + draft: "Brouillon" diff --git a/spec/system/administrateurs/procedure_update_spec.rb b/spec/system/administrateurs/procedure_update_spec.rb index ffb1c159d..ae0296752 100644 --- a/spec/system/administrateurs/procedure_update_spec.rb +++ b/spec/system/administrateurs/procedure_update_spec.rb @@ -38,7 +38,7 @@ describe 'Administrateurs can edit procedures', js: true do click_on 'Enregistrer' - expect(page).to have_selector('.breadcrumbs li', text: 'Ma petite démarche') + expect(page).to have_selector('.fr-breadcrumb li', text: 'Ma petite démarche') end end @@ -55,7 +55,7 @@ describe 'Administrateurs can edit procedures', js: true do click_on 'Enregistrer' - expect(page).to have_selector('.breadcrumbs li', text: 'Ma petite démarche') + expect(page).to have_selector('.fr-breadcrumb li', text: 'Ma petite démarche') end end end From 96cdae0dd548cb2ecaa0a0cda3e5b8aec661cfca Mon Sep 17 00:00:00 2001 From: Martin Date: Thu, 18 Aug 2022 17:06:58 +0200 Subject: [PATCH 02/10] feat(DSFR.header): switch to DSFR header --- app/javascript/entrypoints/main.css | 11 ++ app/views/layouts/_header.haml | 153 ++++++++++-------- .../layouts/_search_dossiers_form.html.haml | 16 +- app/views/layouts/header/_avis_tab.html.haml | 4 +- config/locales/en.yml | 4 + config/locales/fr.yml | 4 + spec/support/system_helpers.rb | 7 +- spec/system/help_spec.rb | 12 +- spec/system/users/managing_password_spec.rb | 10 +- spec/views/layouts/_header_spec.rb | 6 +- 10 files changed, 138 insertions(+), 89 deletions(-) diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css index 91e33a168..aa2f2ebcd 100644 --- a/app/javascript/entrypoints/main.css +++ b/app/javascript/entrypoints/main.css @@ -1,5 +1,16 @@ @import '@gouvfr/dsfr/dist/core/core.css'; +@import '@gouvfr/dsfr/dist/component/link/link.css'; +@import '@gouvfr/dsfr/dist/component/logo/logo.css'; +@import '@gouvfr/dsfr/dist/component/form/form.css'; +@import '@gouvfr/dsfr/dist/component/badge/badge.css'; +@import '@gouvfr/dsfr/dist/component/navigation/navigation.css'; @import '@gouvfr/dsfr/dist/component/button/button.css'; @import '@gouvfr/dsfr/dist/component/alert/alert.css'; @import '@gouvfr/dsfr/dist/component/callout/callout.css'; +@import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.css'; @import '@gouvfr/dsfr/dist/component/table/table.css'; +@import '@gouvfr/dsfr/dist/component/modal/modal.css'; +@import '@gouvfr/dsfr/dist/component/input/input.css'; +@import '@gouvfr/dsfr/dist/component/search/search.css'; +@import '@gouvfr/dsfr/dist/component/translate/translate.css'; +@import '@gouvfr/dsfr/dist/component/header/header.css'; diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index 67209245f..8d2b5cd04 100644 --- a/app/views/layouts/_header.haml +++ b/app/views/layouts/_header.haml @@ -2,86 +2,105 @@ - nav_bar_profile = controller.try(:nav_bar_profile) || :guest - dossier = controller.try(:dossier_for_help) - procedure = controller.try(:procedure_for_help) +- is_instructeur_context = nav_bar_profile == :instructeur && instructeur_signed_in? +- is_expert_context = nav_bar_profile == :expert && expert_signed_in? +- is_user_context = nav_bar_profile == :user +%header.fr-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: "banner"} + .fr-header__body + .fr-container + .fr-header__body-row + .fr-header__brand.fr-enlarge-link + .fr-header__brand-top + .fr-header__logo + %p.fr-logo + République + = succeed "Française" do + %br/ + .fr-header__navbar + - if is_search_enabled + %button.fr-btn--search.fr-btn{ "aria-controls" => "search-modal", "data-fr-opened" => "false", :title => t('views.users.dossiers.search.search_file') }= t('views.users.dossiers.search.search_file') + %button#button_burger.fr-btn--menu.fr-btn{ "aria-controls" => "burger-menu", "aria-haspopup" => "menu", "data-fr-opened" => "false", :title => "Menu" } Menu + .fr-header__service + - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile) -%header.new-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: 'banner' } - .header-inner-content + = link_to root_profile_link, :title => root_profile_libelle do + %p.fr-header__service-title= APPLICATION_NAME + %p.fr-header__service-tagline Simplement dématérialiser - .flex.align-center.justify-center - - if params[:controller] == 'users/commencer' - = link_to 'Revenir en arrière', url_for(:back), class: "button", title: "Revenir sur le site de mon administration" - - else - - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile) - = link_to root_profile_link, class: 'header-logo justify-center', title: root_profile_libelle do - = image_tag HEADER_LOGO_SRC, alt: HEADER_LOGO_ALT, width: HEADER_LOGO_WIDTH, height: HEADER_LOGO_HEIGHT, loading: 'lazy' - %span.big.site-title> - = APPLICATION_NAME - %span.small.site-title> - = APPLICATION_SHORTNAME + .fr-header__tools + .fr-header__tools-links + %ul.fr-btns-group + - if instructeur_signed_in? || user_signed_in? + %li + = render partial: 'layouts/account_dropdown', locals: { nav_bar_profile: nav_bar_profile } + - elsif (request.path != new_user_session_path && request.path !=agent_connect_path) + - if request.path == new_user_registration_path + %li + .fr-hidden-sm.fr-unhidden-lg.fr-link--sm= t('views.shared.account.already_user_question') + %li= link_to t('views.shared.account.signin'), new_user_session_path, class: "fr-btn" - - if nav_bar_profile == :instructeur && instructeur_signed_in? - - current_url = request.path_info - %ul.header-tabs - - if current_instructeur.procedures.any? - %li - = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'tab-link' - - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0 - = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } + %li + - if dossier.present? && nav_bar_profile == :user + = render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier } - - if nav_bar_profile == :expert && expert_signed_in? - %ul.header-tabs - - if current_expert.user.instructeur && current_instructeur.procedures.any? - %li - = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'tab-link' + - elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest) + = render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure } - - if current_expert.avis_summary[:total] > 0 - = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } + - elsif nav_bar_profile == :instructeur + = render partial: 'shared/help/help_dropdown_instructeur' - - if nav_bar_profile == :user - %ul.header-tabs - %li - = active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'tab-link' - - if current_user.expert && current_expert.avis_summary[:total] > 0 - = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } + - else + = render partial: 'shared/help/help_button' - %ul.header-right-content - - if params[:controller] == 'recherche' - = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path } + - if localization_enabled? + %li + = render partial: 'layouts/locale_dropdown' - - if nav_bar_profile == :instructeur && instructeur_signed_in? - %li - = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path } + - if params[:controller] == 'recherche' + = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path } - - if nav_bar_profile == :expert && expert_signed_in? - = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path } + - if is_instructeur_context + = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path } - - if nav_bar_profile == :user && user_signed_in? && current_user.dossiers.count > 2 - %li - = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_dossiers_path } + - if is_expert_context + = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path } - - if instructeur_signed_in? || user_signed_in? - %li - = render partial: 'layouts/account_dropdown', locals: { nav_bar_profile: nav_bar_profile } + - if is_user_context && current_user.dossiers.count > 2 + = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_dossiers_path } - - elsif (request.path != new_user_session_path && request.path != agent_connect_path) - - if request.path == new_user_registration_path - %li - = t('views.shared.account.already_user_question') - %li - = link_to t('views.shared.account.signin'), new_user_session_path, class: "button secondary" + - has_header = [is_instructeur_context, is_expert_context, is_user_context] + #burger-menu.fr-header__menu.fr-modal{ "aria-labelledby" => "button_burger" } + .fr-container + %button.fr-btn--close.fr-btn{ "aria-controls" => "burger-menu", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header]) + .fr-header__menu-links + %nav#navigation-478.fr-nav{ "aria-label" => "Menu principal", :role => "navigation" } + %ul.fr-nav__list + -# Questionner UX pour un back JS + - if params[:controller] == 'users/commencer' + %li.fr-nav__item + = link_to t('layouts.header.back'), url_for(:back), title: t('layouts.header.back'), class: 'fr-nav__link' - %li - - if dossier.present? && nav_bar_profile == :user - = render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier } + - if is_instructeur_context + - if current_instructeur.procedures.any? + - current_url = request.path_info + %li.fr-nav__item + = link_to 'Revenir en arrière', url_for(:back), title: "Revenir sur le site de mon administration", class: 'fr-nav__link' - - elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest) - = render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure } + - if is_instructeur_context + - if current_instructeur.procedures.any? + - current_url = request.path_info + %li.fr-nav__item + = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' + - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0 + = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } - - elsif nav_bar_profile == :instructeur - = render partial: 'shared/help/help_dropdown_instructeur' + - if is_expert_context + - if current_expert.user.instructeur && current_instructeur.procedures.any? + %li.fr-nav__item= active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' + - if current_expert.avis_summary[:total] > 0 + = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } - - else - = render partial: 'shared/help/help_button' - - - if localization_enabled? - %li - = render partial: 'layouts/locale_dropdown' + - if is_user_context + %li.fr-nav__item= active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'fr-nav__link' + - if current_user.expert && current_expert.avis_summary[:total] > 0 + = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } diff --git a/app/views/layouts/_search_dossiers_form.html.haml b/app/views/layouts/_search_dossiers_form.html.haml index 8a35d0549..9662e116d 100644 --- a/app/views/layouts/_search_dossiers_form.html.haml +++ b/app/views/layouts/_search_dossiers_form.html.haml @@ -1,5 +1,11 @@ -.header-search{ role: 'search' } - = form_tag "#{search_endpoint}", method: :get, class: "form" do - = text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: t('views.users.dossiers.search.search_file'), aria: { label: t('views.users.dossiers.search.search_file') } - %button{ title: t('views.users.dossiers.search.search_file') } - = image_tag "icons/search-blue.svg", alt: 'Rechercher', 'aria-hidden':'true', width: 24, height: 24, loading: 'lazy' +#search-modal.fr-header__search.fr-modal + .fr-container.fr-container-lg--fluid + %button.fr-btn--close.fr-btn{ "aria-controls" => "search-modal", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header]) + #search-473.fr-search-bar{ :role => "search" } + = form_tag "#{search_endpoint}", method: :get, class: "flex width-100" do + = label_tag "q", t('views.users.dossiers.search.search_file'), class: 'fr-label' + = text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: t('views.users.dossiers.search.search_file'), aria: { label: t('views.users.dossiers.search.search_file') }, class: "fr-input" + %button.fr-btn{ title: t('views.users.dossiers.search.search_file') } + = image_tag "icons/search-blue.svg", alt: t('views.users.dossiers.search.search_file'), 'aria-hidden':'true', width: 24, height: 24, loading: 'lazy' + + diff --git a/app/views/layouts/header/_avis_tab.html.haml b/app/views/layouts/header/_avis_tab.html.haml index 79eab2490..91031da4d 100644 --- a/app/views/layouts/header/_avis_tab.html.haml +++ b/app/views/layouts/header/_avis_tab.html.haml @@ -1,5 +1,5 @@ -%li - = active_link_to expert_all_avis_path, active: controller_name == 'avis', class: 'tab-link' do +%li.fr-nav__item + = active_link_to expert_all_avis_path, active: controller_name == 'avis', class: 'fr-nav__link' do Avis - if current_expert.avis_summary[:unanswered] > 0 %span.badge.warning= current_expert.avis_summary[:unanswered] diff --git a/config/locales/en.yml b/config/locales/en.yml index 289f528cc..79c9dcbde 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -66,6 +66,10 @@ en: line3: administrative forms. are_you_new: First time on %{app_name}? my_account: My account + header: + close_modal: 'Fermer' + back: "Back" + back_title: "Revenir sur le site de mon administration" locale_dropdown: languages: "Languages" notifications: diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 7ec1ba670..279a27b39 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -56,6 +56,10 @@ fr: line3: administratifs dématérialisés. are_you_new: Vous êtes nouveau sur %{app_name} ? my_account: Mon compte + header: + close_modal: 'Fermer' + back: "Revenir en arrière" + back_title: "Revenir sur le site de mon administration" locale_dropdown: languages: "Langues" notifications: diff --git a/spec/support/system_helpers.rb b/spec/support/system_helpers.rb index a090dcaf1..668e4d001 100644 --- a/spec/support/system_helpers.rb +++ b/spec/support/system_helpers.rb @@ -126,9 +126,10 @@ module SystemHelpers end def log_out - click_button(title: 'Mon compte') - click_on 'Se déconnecter' - + within('.fr-header .fr-container .fr-header__tools .fr-btns-group') do + click_button(title: 'Mon compte') + click_on 'Se déconnecter' + end expect(page).to have_current_path(root_path) end diff --git a/spec/system/help_spec.rb b/spec/system/help_spec.rb index c338837de..d23c1dbb6 100644 --- a/spec/system/help_spec.rb +++ b/spec/system/help_spec.rb @@ -1,7 +1,7 @@ describe 'Getting help:' do scenario 'a Help button is visible on public pages' do visit '/' - within('.new-header') do + within('.fr-header') do expect(page).to have_help_button end end @@ -12,7 +12,7 @@ describe 'Getting help:' do scenario 'a Help menu provides administration contacts and a link to the FAQ' do visit commencer_path(path: procedure.path) - within('.new-header') do + within('.fr-header') do expect(page).to have_help_menu end @@ -34,7 +34,7 @@ describe 'Getting help:' do scenario 'a Help button is visible on signed-in pages' do visit dossiers_path - within('.new-header') do + within('.fr-header') do expect(page).to have_help_button end end @@ -45,7 +45,7 @@ describe 'Getting help:' do scenario 'a Help menu provides administration contacts and a link to the FAQ' do visit dossier_path(dossier) - within('.new-header') do + within('.fr-header') do expect(page).to have_help_menu end @@ -63,7 +63,7 @@ describe 'Getting help:' do scenario 'a Help menu provides links to the Messagerie and to the FAQ' do visit dossier_path(dossier) - within('.new-header') do + within('.fr-header') do expect(page).to have_help_menu end @@ -84,7 +84,7 @@ describe 'Getting help:' do scenario 'a Help menu is visible on signed-in pages' do visit instructeur_procedures_path - within('.new-header') do + within('.fr-header') do expect(page).to have_help_menu end end diff --git a/spec/system/users/managing_password_spec.rb b/spec/system/users/managing_password_spec.rb index cee681c7f..e7dc21e8b 100644 --- a/spec/system/users/managing_password_spec.rb +++ b/spec/system/users/managing_password_spec.rb @@ -1,11 +1,13 @@ -describe 'Managing password:' do +describe 'Managing password:', js: true do context 'for simple users' do let(:user) { create(:user) } let(:new_password) { 'a simple password' } scenario 'a simple user can reset their password' do visit root_path - click_on 'Connexion' + within('.fr-header .fr-container .fr-header__tools .fr-btns-group') do + click_on 'Connexion' + end click_on 'Mot de passe oublié ?' expect(page).to have_current_path(new_user_password_path) @@ -34,7 +36,9 @@ describe 'Managing password:' do scenario 'an admin can reset their password', js: true do visit root_path - click_on 'Connexion' + within('.fr-header .fr-container .fr-header__tools .fr-btns-group') do + click_on 'Connexion' + end click_on 'Mot de passe oublié ?' expect(page).to have_current_path(new_user_password_path) diff --git a/spec/views/layouts/_header_spec.rb b/spec/views/layouts/_header_spec.rb index a8465e466..74683e29c 100644 --- a/spec/views/layouts/_header_spec.rb +++ b/spec/views/layouts/_header_spec.rb @@ -19,7 +19,7 @@ describe 'layouts/_header.html.haml', type: :view do let(:user) { nil } let(:profile) { nil } - it { is_expected.to have_css("a.header-logo[href=\"#{root_path}\"]") } + it { is_expected.to have_css(".fr-header__logo") } it 'displays the Help link' do expect(subject).to have_link('Aide', href: FAQ_URL) @@ -42,7 +42,7 @@ describe 'layouts/_header.html.haml', type: :view do let(:user) { create(:user) } let(:profile) { :user } - it { is_expected.to have_css("a.header-logo[href=\"#{dossiers_path}\"]") } + it { is_expected.to have_css(".fr-header__logo") } it { is_expected.to have_link("Dossiers", href: dossiers_path) } it 'displays the Help button' do @@ -56,7 +56,7 @@ describe 'layouts/_header.html.haml', type: :view do let(:profile) { :instructeur } let(:current_instructeur) { instructeur } - it { is_expected.to have_css("a.header-logo[href=\"#{instructeur_procedures_path}\"]") } + it { is_expected.to have_css(".fr-header__logo") } it 'displays the Help dropdown menu' do expect(subject).to have_css(".help-dropdown") From 73f94b96350168517d737ee694beb191780654c2 Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 19 Aug 2022 15:58:34 +0200 Subject: [PATCH 03/10] feat(header): switch to DSFR translate component and dropdown component --- app/assets/stylesheets/utils.scss | 4 ++ app/views/layouts/_account_dropdown.haml | 33 +++++------- app/views/layouts/_header.haml | 51 +++++++++---------- app/views/layouts/_locale_dropdown.html.haml | 26 +++++----- config/locales/en.yml | 6 +++ config/locales/fr.yml | 6 +++ .../views/layouts/_account_dropdown.en.yml | 1 + .../views/layouts/_account_dropdown.fr.yml | 1 + spec/system/i18n_spec.rb | 4 +- 9 files changed, 70 insertions(+), 62 deletions(-) diff --git a/app/assets/stylesheets/utils.scss b/app/assets/stylesheets/utils.scss index 6aa666347..bbb809d71 100644 --- a/app/assets/stylesheets/utils.scss +++ b/app/assets/stylesheets/utils.scss @@ -65,6 +65,10 @@ } } +.relative { + position: relative; +} + // display .hidden { display: none; diff --git a/app/views/layouts/_account_dropdown.haml b/app/views/layouts/_account_dropdown.haml index f81b8b2a9..103906d31 100644 --- a/app/views/layouts/_account_dropdown.haml +++ b/app/views/layouts/_account_dropdown.haml @@ -1,7 +1,13 @@ +<<<<<<< HEAD %nav.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) } .fr-nav__item %button.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) } +======= +%nav.fr-nav{role: "navigation"} + .fr-nav__item + %button.fr-translate__btn.fr-btn.fr-btn--tertiary{"aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts])} +>>>>>>> 62ec6eeed (feat(header): switch to DSFR translate component and dropdown component) = image_tag "icons/account-circle.svg", alt: t('my_account', scope: [:layouts]), width: 20, height: 20, loading: 'lazy'   = " #{current_email}" @@ -35,25 +41,10 @@ = t('go_admin', scope: [:layouts]) %li - = link_to instructeur_procedures_path, class: "menu-item menu-link" do - = image_tag "icons/switch-profile.svg", alt: '' - = t('go_instructor', scope: [:layouts]) - - if expert_signed_in? && nav_bar_profile != :expert + = link_to profil_path, class: "fr-nav__link flex align-center" do + = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1' + = t('profile', scope: [:layouts]) %li - = link_to expert_all_avis_path, class: "menu-item menu-link" do - = image_tag "icons/switch-profile.svg", alt: '' - = t('go_expert', scope: [:layouts]) - - if administrateur_signed_in? && nav_bar_profile != :administrateur - %li - = link_to admin_procedures_path, class: "menu-item menu-link" do - = image_tag "icons/switch-profile.svg", alt: '' - = t('go_admin', scope: [:layouts]) - - %li - = link_to profil_path, class: "menu-item menu-link" do - = image_tag "icons/switch-profile.svg", alt: '' - = t('profile', scope: [:layouts]) - %li - = link_to destroy_user_session_path, method: :delete, class: "menu-item menu-link" do - = image_tag "icons/sign-out.svg", alt: '' - = t('logout', scope: [:layouts]) + = link_to destroy_user_session_path, method: :delete, class: "fr-nav__link flex align-center" do + = image_tag "icons/sign-out.svg", alt: '', width: 20, height: 20, class: 'mr-1' + = t('logout', scope: [:layouts]) diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index 8d2b5cd04..a59f3351c 100644 --- a/app/views/layouts/_header.haml +++ b/app/views/layouts/_header.haml @@ -5,6 +5,7 @@ - is_instructeur_context = nav_bar_profile == :instructeur && instructeur_signed_in? - is_expert_context = nav_bar_profile == :expert && expert_signed_in? - is_user_context = nav_bar_profile == :user +- is_search_enabled = [params[:controller] == 'recherche', is_instructeur_context, is_expert_context, is_user_context && current_user.dossiers.count].any? %header.fr-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: "banner"} .fr-header__body .fr-container @@ -20,6 +21,7 @@ - if is_search_enabled %button.fr-btn--search.fr-btn{ "aria-controls" => "search-modal", "data-fr-opened" => "false", :title => t('views.users.dossiers.search.search_file') }= t('views.users.dossiers.search.search_file') %button#button_burger.fr-btn--menu.fr-btn{ "aria-controls" => "burger-menu", "aria-haspopup" => "menu", "data-fr-opened" => "false", :title => "Menu" } Menu + .fr-header__service - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile) @@ -28,7 +30,8 @@ %p.fr-header__service-tagline Simplement dématérialiser .fr-header__tools - .fr-header__tools-links + .fr-header__tools-links.relative + %ul.fr-btns-group - if instructeur_signed_in? || user_signed_in? %li @@ -52,9 +55,9 @@ - else = render partial: 'shared/help/help_button' - - if localization_enabled? - %li - = render partial: 'layouts/locale_dropdown' + - if localization_enabled? + = render partial: 'layouts/locale_dropdown' + - if params[:controller] == 'recherche' = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path } @@ -74,33 +77,27 @@ %button.fr-btn--close.fr-btn{ "aria-controls" => "burger-menu", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header]) .fr-header__menu-links %nav#navigation-478.fr-nav{ "aria-label" => "Menu principal", :role => "navigation" } - %ul.fr-nav__list - -# Questionner UX pour un back JS - - if params[:controller] == 'users/commencer' - %li.fr-nav__item + #burger-menu.fr-header__menu.fr-modal{"aria-labelledby" => "button-477"} + .fr-container + %button.fr-btn--close.fr-btn{"aria-controls" => "burger-menu", :title => "Fermer"} Fermer + %div.fr-header__menu-links + %nav#navigation-478.fr-nav{"aria-label" => "Menu principal", :role => "navigation"} = link_to t('layouts.header.back'), url_for(:back), title: t('layouts.header.back'), class: 'fr-nav__link' - - if is_instructeur_context - if current_instructeur.procedures.any? - current_url = request.path_info %li.fr-nav__item - = link_to 'Revenir en arrière', url_for(:back), title: "Revenir sur le site de mon administration", class: 'fr-nav__link' + = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' + - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0 + = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } - - if is_instructeur_context - - if current_instructeur.procedures.any? - - current_url = request.path_info - %li.fr-nav__item - = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' - - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0 - = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } + - if is_expert_context + - if current_expert.user.instructeur && current_instructeur.procedures.any? + %li.fr-nav__item= active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' + - if current_expert.avis_summary[:total] > 0 + = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } - - if is_expert_context - - if current_expert.user.instructeur && current_instructeur.procedures.any? - %li.fr-nav__item= active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' - - if current_expert.avis_summary[:total] > 0 - = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } - - - if is_user_context - %li.fr-nav__item= active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'fr-nav__link' - - if current_user.expert && current_expert.avis_summary[:total] > 0 - = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } + - if is_user_context + %li.fr-nav__item= active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'fr-nav__link' + - if current_user.expert && current_expert.avis_summary[:total] > 0 + = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } diff --git a/app/views/layouts/_locale_dropdown.html.haml b/app/views/layouts/_locale_dropdown.html.haml index f0cd75a98..72d60796b 100644 --- a/app/views/layouts/_locale_dropdown.html.haml +++ b/app/views/layouts/_locale_dropdown.html.haml @@ -1,12 +1,14 @@ -.dropdown.locale-dropdown.header-menu-opener{ data: { controller: 'menu-button' } } - %button.button.dropdown-button.icon-only.header-menu-button{ title: t('.languages'), data: { menu_button_target: 'button' } } - %span.hidden - = t('.languages') - = image_tag "icons/translate-icon.svg", alt: t('.languages'), width: 24, height: 24, loading: :lazy, aria: { hidden: true } - %ul.header-menu.dropdown-content{ data: { menu_button_target: 'menu' } } - %li - = active_link_to save_locale_path(locale: :fr), method: :post, class: "menu-item menu-link", active: I18n.locale == :fr do - Français - %li - = active_link_to save_locale_path(locale: :en), method: :post, class: "menu-item menu-link", active: I18n.locale == :en do - English +%nav.fr-translate.fr-nav{:role => "navigation", title: t('.select_locale')} + .fr-nav__item + %button.fr-translate__btn.fr-btn.fr-btn--tertiary{"aria-controls" => "translate", "aria-expanded" => "false", :title => t('.select_locale')} + = t(".#{I18n.locale}") + %span.fr-hidden-lg= t('.francais') + #translate.fr-collapse.fr-menu + %ul.fr-menu__list + %li + = active_link_to save_locale_path(locale: :fr), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :fr, "aria-current" => I18n.locale == :fr, hreflang: "fr", lang: "fr" do + = t('.fr_francais') + %li + = active_link_to save_locale_path(locale: :en), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :en, "aria-current" => I18n.locale == :en, hreflang: "en", lang: "en" do + = t('.en_english') + diff --git a/config/locales/en.yml b/config/locales/en.yml index 79c9dcbde..d9b8a191f 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -72,6 +72,12 @@ en: back_title: "Revenir sur le site de mon administration" locale_dropdown: languages: "Languages" + select_locale: "Choose a language" + fr: FR + en: EN + francais: " - French" + fr_francais: FR - French + en_english: EN - English notifications: actions: access: View your File diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 279a27b39..b49940655 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -62,6 +62,12 @@ fr: back_title: "Revenir sur le site de mon administration" locale_dropdown: languages: "Langues" + select_locale: "Sélectionner une langue" + fr: FR + en: EN + francais: " - Français" + fr_francais: FR - Français + en_english: EN - Anglais notifications: actions: access: Consulter mon dossier diff --git a/config/locales/views/layouts/_account_dropdown.en.yml b/config/locales/views/layouts/_account_dropdown.en.yml index 35c1c1378..951014cf7 100644 --- a/config/locales/views/layouts/_account_dropdown.en.yml +++ b/config/locales/views/layouts/_account_dropdown.en.yml @@ -9,3 +9,4 @@ en: go_admin: "Switch to administrator" profile: "See my profile" logout: "Log out" + my_account: "My account" diff --git a/config/locales/views/layouts/_account_dropdown.fr.yml b/config/locales/views/layouts/_account_dropdown.fr.yml index f663ec105..ee25fc153 100644 --- a/config/locales/views/layouts/_account_dropdown.fr.yml +++ b/config/locales/views/layouts/_account_dropdown.fr.yml @@ -9,3 +9,4 @@ fr: go_admin: "Passer en administrateur" profile: "Voir mon profil" logout: "Se déconnecter" + my_account: "Mon compte" diff --git a/spec/system/i18n_spec.rb b/spec/system/i18n_spec.rb index 681e6a32f..32430e71e 100644 --- a/spec/system/i18n_spec.rb +++ b/spec/system/i18n_spec.rb @@ -7,8 +7,8 @@ describe 'Accessing the website in different languages:' do visit new_user_session_path expect(page).to have_text('Connectez-vous') - click_on 'Langues' - click_on 'English' + find('.fr-translate__btn').click + find('.fr-nav__link[hreflang="en"]').click # The page is now in English expect(page).to have_text('Sign in') From af00936aac14dd1a9437f36e50929b933a96c95a Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 22 Aug 2022 10:43:11 +0200 Subject: [PATCH 04/10] ui(header): refine to fit with olivier design --- app/assets/stylesheets/_colors.scss | 2 +- app/assets/stylesheets/common.scss | 2 +- app/assets/stylesheets/sub_header.scss | 2 +- .../administrateurs/_breadcrumbs.html.haml | 1 + app/views/layouts/_account_dropdown.haml | 7 ------ app/views/layouts/_header.haml | 23 ++++++++++--------- app/views/layouts/_locale_dropdown.html.haml | 6 ++--- app/views/shared/help/_help_button.html.haml | 2 +- 8 files changed, 20 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/_colors.scss b/app/assets/stylesheets/_colors.scss index febed6d56..753bc8273 100644 --- a/app/assets/stylesheets/_colors.scss +++ b/app/assets/stylesheets/_colors.scss @@ -24,4 +24,4 @@ $blue-france-700: #00006D; $blue-france-500: #000091; $blue-france-400: #7F7FC8; $g700: #383838; - +$alt-blue-france: rgba(245, 245, 254, 1); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index db970ca7c..19cfe08b0 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -37,7 +37,7 @@ dt { } h1 { - font-size: 36px; + // font-size: 36px; font-weight: bold; } diff --git a/app/assets/stylesheets/sub_header.scss b/app/assets/stylesheets/sub_header.scss index f3cc9eeb8..a6602dc45 100644 --- a/app/assets/stylesheets/sub_header.scss +++ b/app/assets/stylesheets/sub_header.scss @@ -2,7 +2,7 @@ @import "constants"; .sub-header { - background-color: $light-grey; + background-color: $alt-blue-france; padding-top: $default-padding; margin-bottom: $sub-header-bottom-margin; border-bottom: 1px solid $border-grey; diff --git a/app/views/administrateurs/_breadcrumbs.html.haml b/app/views/administrateurs/_breadcrumbs.html.haml index 2733c965f..681eb84a9 100644 --- a/app/views/administrateurs/_breadcrumbs.html.haml +++ b/app/views/administrateurs/_breadcrumbs.html.haml @@ -7,6 +7,7 @@ .fr-collapse#breadcrumb-1 %ol.fr-breadcrumb__list %li= link_to t('root', scope: [:layouts, :breadcrumb]), root_path, class: 'fr-breadcrumb__link' + - steps.each.with_index do |step, i| - if i == steps.size - 1 %li{ aria: {current: "page"}} diff --git a/app/views/layouts/_account_dropdown.haml b/app/views/layouts/_account_dropdown.haml index 103906d31..5ca6b3a5b 100644 --- a/app/views/layouts/_account_dropdown.haml +++ b/app/views/layouts/_account_dropdown.haml @@ -1,13 +1,6 @@ -<<<<<<< HEAD - %nav.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) } .fr-nav__item %button.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) } -======= -%nav.fr-nav{role: "navigation"} - .fr-nav__item - %button.fr-translate__btn.fr-btn.fr-btn--tertiary{"aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts])} ->>>>>>> 62ec6eeed (feat(header): switch to DSFR translate component and dropdown component) = image_tag "icons/account-circle.svg", alt: t('my_account', scope: [:layouts]), width: 20, height: 20, loading: 'lazy'   = " #{current_email}" diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index a59f3351c..874664c4c 100644 --- a/app/views/layouts/_header.haml +++ b/app/views/layouts/_header.haml @@ -42,21 +42,22 @@ .fr-hidden-sm.fr-unhidden-lg.fr-link--sm= t('views.shared.account.already_user_question') %li= link_to t('views.shared.account.signin'), new_user_session_path, class: "fr-btn" - %li - - if dossier.present? && nav_bar_profile == :user - = render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier } + %li + - if dossier.present? && nav_bar_profile == :user + = render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier } - - elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest) - = render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure } + - elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest) + = render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure } - - elsif nav_bar_profile == :instructeur - = render partial: 'shared/help/help_dropdown_instructeur' + - elsif nav_bar_profile == :instructeur + = render partial: 'shared/help/help_dropdown_instructeur' + - else + %li= render partial: 'shared/help/help_button' - - else - = render partial: 'shared/help/help_button' - - if localization_enabled? - = render partial: 'layouts/locale_dropdown' + + - if localization_enabled? + %li= render partial: 'layouts/locale_dropdown' - if params[:controller] == 'recherche' diff --git a/app/views/layouts/_locale_dropdown.html.haml b/app/views/layouts/_locale_dropdown.html.haml index 72d60796b..c0d72652d 100644 --- a/app/views/layouts/_locale_dropdown.html.haml +++ b/app/views/layouts/_locale_dropdown.html.haml @@ -1,14 +1,14 @@ %nav.fr-translate.fr-nav{:role => "navigation", title: t('.select_locale')} .fr-nav__item - %button.fr-translate__btn.fr-btn.fr-btn--tertiary{"aria-controls" => "translate", "aria-expanded" => "false", :title => t('.select_locale')} + %button.fr-translate__btn.fr-btn{"aria-controls" => "translate", "aria-expanded" => "false", :title => t('.select_locale')} = t(".#{I18n.locale}") %span.fr-hidden-lg= t('.francais') #translate.fr-collapse.fr-menu %ul.fr-menu__list %li - = active_link_to save_locale_path(locale: :fr), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :fr, "aria-current" => I18n.locale == :fr, hreflang: "fr", lang: "fr" do + = active_link_to save_locale_path(locale: :fr), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :fr, hreflang: "fr", lang: "fr" do = t('.fr_francais') %li - = active_link_to save_locale_path(locale: :en), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :en, "aria-current" => I18n.locale == :en, hreflang: "en", lang: "en" do + = active_link_to save_locale_path(locale: :en), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :en, hreflang: "en", lang: "en" do = t('.en_english') diff --git a/app/views/shared/help/_help_button.html.haml b/app/views/shared/help/_help_button.html.haml index 7b782036c..e6fd4fdac 100644 --- a/app/views/shared/help/_help_button.html.haml +++ b/app/views/shared/help/_help_button.html.haml @@ -1 +1 @@ -= link_to t('help'), FAQ_URL, class: 'button primary' += link_to t('help'), FAQ_URL, class: 'fr-btn', target: '_blank', rel: 'noopener' From a48a8b60812b27d6843bee59b689040cd156f077 Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 22 Aug 2022 17:55:39 +0200 Subject: [PATCH 05/10] feat(title): avoid title issues --- app/assets/stylesheets/common.scss | 2 +- app/assets/stylesheets/france-connect-login.scss | 1 - app/views/shared/_france_connect_login.html.haml | 2 +- app/views/super_admins/sessions/new.html.haml | 2 +- app/views/users/registrations/new.html.haml | 2 +- 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 19cfe08b0..db970ca7c 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -37,7 +37,7 @@ dt { } h1 { - // font-size: 36px; + font-size: 36px; font-weight: bold; } diff --git a/app/assets/stylesheets/france-connect-login.scss b/app/assets/stylesheets/france-connect-login.scss index f843206ae..bac713ee1 100644 --- a/app/assets/stylesheets/france-connect-login.scss +++ b/app/assets/stylesheets/france-connect-login.scss @@ -4,7 +4,6 @@ .france-connect-login { h2 { color: $black; - font-size: 24px; } } diff --git a/app/views/shared/_france_connect_login.html.haml b/app/views/shared/_france_connect_login.html.haml index 4279ff2d7..b4fa15a5d 100644 --- a/app/views/shared/_france_connect_login.html.haml +++ b/app/views/shared/_france_connect_login.html.haml @@ -1,6 +1,6 @@ - if FranceConnectService.enabled? .france-connect-login - %h2.important-header + %h2.fr-h6.mb-0 = t('views.shared.france_connect_login.title') %p = t('views.shared.france_connect_login.description') diff --git a/app/views/super_admins/sessions/new.html.haml b/app/views/super_admins/sessions/new.html.haml index be1d96f87..47dd611fb 100644 --- a/app/views/super_admins/sessions/new.html.haml +++ b/app/views/super_admins/sessions/new.html.haml @@ -4,7 +4,7 @@ .auth-form.sign-in-form = form_for SuperAdmin.new, url: super_admin_session_path, html: { class: "form" } do |f| - %h1 Connectez-vous + %h1.fr-h2 Connectez-vous = f.label :email, "Email (nom@site.com)" = f.text_field :email, type: :email, autocomplete: 'username', autofocus: true diff --git a/app/views/users/registrations/new.html.haml b/app/views/users/registrations/new.html.haml index 6661623f2..40339d754 100644 --- a/app/views/users/registrations/new.html.haml +++ b/app/views/users/registrations/new.html.haml @@ -3,7 +3,7 @@ .auth-form = devise_error_messages! = form_for resource, url: user_registration_path, html: { class: "form" } do |f| - %h1= t('views.registrations.new.title', name: APPLICATION_NAME) + %h1.fr-h2= t('views.registrations.new.title', name: APPLICATION_NAME) = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path } From df3ef23f7efd02bef8f5809c0e9fe4c4144bb63c Mon Sep 17 00:00:00 2001 From: Martin Date: Wed, 31 Aug 2022 12:44:00 +0200 Subject: [PATCH 06/10] fix(spec): 1. visit new_user_session_path instead of navigating to it. 2. change way to submit search according to dsfr html. 3. avoid nav without aria label. 4. various lint fixes --- app/views/administrateurs/_breadcrumbs.html.haml | 2 +- app/views/layouts/_header.haml | 16 +++++++++++++++- app/views/layouts/_locale_dropdown.html.haml | 4 ++-- .../views/layouts/_account_dropdown.en.yml | 1 + .../views/layouts/_account_dropdown.fr.yml | 1 + spec/system/instructeurs/instruction_spec.rb | 3 +-- spec/system/routing/full_scenario_spec.rb | 4 ++-- spec/system/users/invite_spec.rb | 6 +----- spec/system/users/list_dossiers_spec.rb | 12 ++++++------ 9 files changed, 30 insertions(+), 19 deletions(-) diff --git a/app/views/administrateurs/_breadcrumbs.html.haml b/app/views/administrateurs/_breadcrumbs.html.haml index 681eb84a9..17cd97f50 100644 --- a/app/views/administrateurs/_breadcrumbs.html.haml +++ b/app/views/administrateurs/_breadcrumbs.html.haml @@ -10,7 +10,7 @@ - steps.each.with_index do |step, i| - if i == steps.size - 1 - %li{ aria: {current: "page"}} + %li{ aria: { current: "page" } } %span.fr-breadcrumb__link= step[0] - else %li= link_to step[0], step[1], class: 'fr-breadcrumb__link' diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index 874664c4c..0cd10a715 100644 --- a/app/views/layouts/_header.haml +++ b/app/views/layouts/_header.haml @@ -6,7 +6,7 @@ - is_expert_context = nav_bar_profile == :expert && expert_signed_in? - is_user_context = nav_bar_profile == :user - is_search_enabled = [params[:controller] == 'recherche', is_instructeur_context, is_expert_context, is_user_context && current_user.dossiers.count].any? -%header.fr-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: "banner"} +%header{ class: current_page?(root_path) ? "fr-header" : "fr-header new-header-with-border", role: "banner" } .fr-header__body .fr-container .fr-header__body-row @@ -73,6 +73,7 @@ = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_dossiers_path } - has_header = [is_instructeur_context, is_expert_context, is_user_context] +<<<<<<< HEAD #burger-menu.fr-header__menu.fr-modal{ "aria-labelledby" => "button_burger" } .fr-container %button.fr-btn--close.fr-btn{ "aria-controls" => "burger-menu", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header]) @@ -84,6 +85,19 @@ %div.fr-header__menu-links %nav#navigation-478.fr-nav{"aria-label" => "Menu principal", :role => "navigation"} = link_to t('layouts.header.back'), url_for(:back), title: t('layouts.header.back'), class: 'fr-nav__link' +======= + #burger-menu.fr-header__menu.fr-modal{ "aria-labelledby" => "button-477" } + .fr-container + %button.fr-btn--close.fr-btn{ "aria-controls" => "burger-menu", :title => "Fermer" } Fermer + .fr-header__menu-links + %nav#navigation-478.fr-nav{ "aria-label" => "Menu principal", :role => "navigation" } + %ul.fr-nav__list + -# Questionner UX pour un back JS + - if params[:controller] == 'users/commencer' + %li.fr-nav__item + = link_to 'Revenir en arrière', url_for(:back), title: "Revenir sur le site de mon administration", class: 'fr-nav__link' + +>>>>>>> 1d4c3fada (fix(spec): 1. visit new_user_session_path instead of navigating to it. 2. change way to submit search according to dsfr html. 3. avoid nav without aria label. 4. various lint fixes) - if is_instructeur_context - if current_instructeur.procedures.any? - current_url = request.path_info diff --git a/app/views/layouts/_locale_dropdown.html.haml b/app/views/layouts/_locale_dropdown.html.haml index c0d72652d..12298abca 100644 --- a/app/views/layouts/_locale_dropdown.html.haml +++ b/app/views/layouts/_locale_dropdown.html.haml @@ -1,6 +1,6 @@ -%nav.fr-translate.fr-nav{:role => "navigation", title: t('.select_locale')} +%nav.fr-translate.fr-nav{ :role => "navigation", title: t('.select_locale') } .fr-nav__item - %button.fr-translate__btn.fr-btn{"aria-controls" => "translate", "aria-expanded" => "false", :title => t('.select_locale')} + %button.fr-translate__btn.fr-btn{ "aria-controls" => "translate", "aria-expanded" => "false", :title => t('.select_locale') } = t(".#{I18n.locale}") %span.fr-hidden-lg= t('.francais') #translate.fr-collapse.fr-menu diff --git a/config/locales/views/layouts/_account_dropdown.en.yml b/config/locales/views/layouts/_account_dropdown.en.yml index 951014cf7..fcafa65a2 100644 --- a/config/locales/views/layouts/_account_dropdown.en.yml +++ b/config/locales/views/layouts/_account_dropdown.en.yml @@ -2,6 +2,7 @@ en: layouts: header: files: Files + menu_aria_label: 'Menu my profile' go_superadmin: "Switch to super-admin" go_user: "Switch to user" go_instructor: "Switch to instructor" diff --git a/config/locales/views/layouts/_account_dropdown.fr.yml b/config/locales/views/layouts/_account_dropdown.fr.yml index ee25fc153..088ed6687 100644 --- a/config/locales/views/layouts/_account_dropdown.fr.yml +++ b/config/locales/views/layouts/_account_dropdown.fr.yml @@ -2,6 +2,7 @@ fr: layouts: header: files: Dossiers + menu_aria_label: 'Menu mon profil' go_superadmin: "Passer en super-admin" go_user: "Passer en usager" go_instructor: "Passer en instructeur" diff --git a/spec/system/instructeurs/instruction_spec.rb b/spec/system/instructeurs/instruction_spec.rb index 028cbc352..a46c4e199 100644 --- a/spec/system/instructeurs/instruction_spec.rb +++ b/spec/system/instructeurs/instruction_spec.rb @@ -259,8 +259,7 @@ describe 'Instructing a dossier:', js: true do end def log_in(email, password, check_email: true) - visit '/' - click_on 'Connexion' + visit new_user_session_path expect(page).to have_current_path(new_user_session_path) sign_in_with(email, password, check_email) diff --git a/spec/system/routing/full_scenario_spec.rb b/spec/system/routing/full_scenario_spec.rb index 8af78a284..17a039035 100644 --- a/spec/system/routing/full_scenario_spec.rb +++ b/spec/system/routing/full_scenario_spec.rb @@ -84,11 +84,11 @@ describe 'The routing', js: true do # the search only show litteraires dossiers fill_in 'q', with: scientifique_user.email - click_on 'Rechercher' + find('.fr-search-bar .fr-btn').click expect(page).to have_text('0 dossier trouvé') fill_in 'q', with: litteraire_user.email - click_on 'Rechercher' + find('.fr-search-bar .fr-btn').click expect(page).to have_text('1 dossier trouvé') ## and the result is clickable diff --git a/spec/system/users/invite_spec.rb b/spec/system/users/invite_spec.rb index b79d27d96..c7cfbaded 100644 --- a/spec/system/users/invite_spec.rb +++ b/spec/system/users/invite_spec.rb @@ -12,11 +12,8 @@ describe 'Invitations' do scenario 'on the form, the owner of a dossier can invite another user to collaborate on the dossier', js: true do log_in(owner) navigate_to_brouillon(dossier) - fill_in 'Texte obligatoire', with: 'Some edited value' - send_invite_to "user_invite@exemple.fr" - expect(page).to have_current_path(brouillon_dossier_path(dossier)) expect(page).to have_text("Une invitation a été envoyée à user_invite@exemple.fr.") expect(page).to have_text("user_invite@exemple.fr") @@ -144,8 +141,7 @@ describe 'Invitations' do private def log_in(user) - visit '/' - click_on 'Connexion' + visit new_user_session_path sign_in_with(user.email, user.password) expect(page).to have_current_path(dossiers_path) end diff --git a/spec/system/users/list_dossiers_spec.rb b/spec/system/users/list_dossiers_spec.rb index 18260cd06..45b11964f 100644 --- a/spec/system/users/list_dossiers_spec.rb +++ b/spec/system/users/list_dossiers_spec.rb @@ -1,4 +1,4 @@ -describe 'user access to the list of their dossiers' do +describe 'user access to the list of their dossiers', js: true do let(:user) { create(:user) } let!(:dossier_brouillon) { create(:dossier, user: user) } let!(:dossier_en_construction) { create(:dossier, :with_populated_champs, :en_construction, user: user) } @@ -86,7 +86,7 @@ describe 'user access to the list of their dossiers' do context "when the dossier does not exist" do before do page.find_by_id('q').set(10000000) - click_button("Rechercher") + find('.fr-search-bar .fr-btn').click end it "shows an error message on the dossiers page" do @@ -100,7 +100,7 @@ describe 'user access to the list of their dossiers' do before do page.find_by_id('q').set(dossier_other_user.id) - click_button("Rechercher") + find('.fr-search-bar .fr-btn').click end it "shows an error message on the dossiers page" do @@ -112,7 +112,7 @@ describe 'user access to the list of their dossiers' do context "when the dossier belongs to the user" do before do page.find_by_id('q').set(dossier_en_construction.id) - click_button("Rechercher") + find('.fr-search-bar .fr-btn').click end it "redirects to the dossier page" do @@ -128,7 +128,7 @@ describe 'user access to the list of their dossiers' do context 'when it only matches one dossier' do before do - click_button("Rechercher") + find('.fr-search-bar .fr-btn').click end it "redirects to the dossier page" do expect(current_path).to eq(dossier_path(dossier_en_construction)) @@ -138,7 +138,7 @@ describe 'user access to the list of their dossiers' do context 'when it matches multiple dossier' do before do dossier_en_construction2.champs.first.update(value: dossier_en_construction.champs.first.value) - click_button("Rechercher") + find('.fr-search-bar .fr-btn').click end it "redirects to the search results" do From fb0e863efd1130ad11bf68ef4ee8472f0f370d05 Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 2 Sep 2022 09:00:52 +0200 Subject: [PATCH 07/10] feat(header): migrate help button to dsfr --- app/views/shared/help/_help_dropdown_dossier.html.haml | 2 +- app/views/shared/help/_help_dropdown_instructeur.html.haml | 2 +- app/views/shared/help/_help_dropdown_procedure.html.haml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/shared/help/_help_dropdown_dossier.html.haml b/app/views/shared/help/_help_dropdown_dossier.html.haml index 5ef70e73d..51f1460e3 100644 --- a/app/views/shared/help/_help_dropdown_dossier.html.haml +++ b/app/views/shared/help/_help_dropdown_dossier.html.haml @@ -1,5 +1,5 @@ .dropdown.help-dropdown{ data: { controller: 'menu-button' } } - %button.button.primary.dropdown-button{ data: { menu_button_target: 'button' } } + %button.fr-btn.dropdown-button{ data: { menu_button_target: 'button' } } = t('help') #help-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } } %ul.dropdown-items diff --git a/app/views/shared/help/_help_dropdown_instructeur.html.haml b/app/views/shared/help/_help_dropdown_instructeur.html.haml index 9deafc1cf..d1e8ef299 100644 --- a/app/views/shared/help/_help_dropdown_instructeur.html.haml +++ b/app/views/shared/help/_help_dropdown_instructeur.html.haml @@ -1,5 +1,5 @@ .dropdown.help-dropdown{ data: { controller: 'menu-button' } } - %button.button.primary.dropdown-button{ data: { menu_button_target: 'button' } } + %button.fr-btn.dropdown-button{ data: { menu_button_target: 'button' } } = t('help') #help-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } } %ul.dropdown-items diff --git a/app/views/shared/help/_help_dropdown_procedure.html.haml b/app/views/shared/help/_help_dropdown_procedure.html.haml index 111f5126d..b3781d6eb 100644 --- a/app/views/shared/help/_help_dropdown_procedure.html.haml +++ b/app/views/shared/help/_help_dropdown_procedure.html.haml @@ -1,5 +1,5 @@ .dropdown.help-dropdown{ data: { controller: 'menu-button' } } - %button.button.primary.dropdown-button{ data: { menu_button_target: 'button' } } + %button.fr-btn.dropdown-button{ data: { menu_button_target: 'button' } } = t('help') #help-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } } %ul.dropdown-items From 795f6ab29b59dea6c58c96715a7812466f22471f Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 2 Sep 2022 10:12:09 +0200 Subject: [PATCH 08/10] fix(header): add missing i18n --- app/views/layouts/_header.haml | 25 +++++-------------------- config/locales/en.yml | 1 + config/locales/fr.yml | 1 + 3 files changed, 7 insertions(+), 20 deletions(-) diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index 0cd10a715..a99f5b81a 100644 --- a/app/views/layouts/_header.haml +++ b/app/views/layouts/_header.haml @@ -20,8 +20,7 @@ .fr-header__navbar - if is_search_enabled %button.fr-btn--search.fr-btn{ "aria-controls" => "search-modal", "data-fr-opened" => "false", :title => t('views.users.dossiers.search.search_file') }= t('views.users.dossiers.search.search_file') - %button#button_burger.fr-btn--menu.fr-btn{ "aria-controls" => "burger-menu", "aria-haspopup" => "menu", "data-fr-opened" => "false", :title => "Menu" } Menu - + %button.fr-btn--menu.fr-btn{ "aria-controls" => "burger-menu", "aria-haspopup" => "menu", "data-fr-opened" => "false", :title => "Menu" } Menu .fr-header__service - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile) @@ -73,31 +72,17 @@ = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_dossiers_path } - has_header = [is_instructeur_context, is_expert_context, is_user_context] -<<<<<<< HEAD - #burger-menu.fr-header__menu.fr-modal{ "aria-labelledby" => "button_burger" } + #burger-menu.fr-header__menu.fr-modal{ "aria-labelledby" => "burger_button" } .fr-container - %button.fr-btn--close.fr-btn{ "aria-controls" => "burger-menu", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header]) + %button#burger_button.fr-btn--close.fr-btn{ "aria-controls" => "burger-menu", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header]) .fr-header__menu-links - %nav#navigation-478.fr-nav{ "aria-label" => "Menu principal", :role => "navigation" } - #burger-menu.fr-header__menu.fr-modal{"aria-labelledby" => "button-477"} - .fr-container - %button.fr-btn--close.fr-btn{"aria-controls" => "burger-menu", :title => "Fermer"} Fermer - %div.fr-header__menu-links - %nav#navigation-478.fr-nav{"aria-label" => "Menu principal", :role => "navigation"} - = link_to t('layouts.header.back'), url_for(:back), title: t('layouts.header.back'), class: 'fr-nav__link' -======= - #burger-menu.fr-header__menu.fr-modal{ "aria-labelledby" => "button-477" } - .fr-container - %button.fr-btn--close.fr-btn{ "aria-controls" => "burger-menu", :title => "Fermer" } Fermer - .fr-header__menu-links - %nav#navigation-478.fr-nav{ "aria-label" => "Menu principal", :role => "navigation" } + %nav#navigation-478.fr-nav{ "aria-label" => t('main_menu', scope: [:layouts, :header]) , :role => "navigation" } %ul.fr-nav__list -# Questionner UX pour un back JS - if params[:controller] == 'users/commencer' %li.fr-nav__item - = link_to 'Revenir en arrière', url_for(:back), title: "Revenir sur le site de mon administration", class: 'fr-nav__link' + = link_to t('back', scope: [:layouts, :header]), url_for(:back), title: t('back_title', scope: [:layouts, :header]), class: 'fr-nav__link' ->>>>>>> 1d4c3fada (fix(spec): 1. visit new_user_session_path instead of navigating to it. 2. change way to submit search according to dsfr html. 3. avoid nav without aria label. 4. various lint fixes) - if is_instructeur_context - if current_instructeur.procedures.any? - current_url = request.path_info diff --git a/config/locales/en.yml b/config/locales/en.yml index d9b8a191f..de1196dbf 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -70,6 +70,7 @@ en: close_modal: 'Fermer' back: "Back" back_title: "Revenir sur le site de mon administration" + main_menu: "Main menu" locale_dropdown: languages: "Languages" select_locale: "Choose a language" diff --git a/config/locales/fr.yml b/config/locales/fr.yml index b49940655..11803f609 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -60,6 +60,7 @@ fr: close_modal: 'Fermer' back: "Revenir en arrière" back_title: "Revenir sur le site de mon administration" + main_menu: "Menu principal" locale_dropdown: languages: "Langues" select_locale: "Sélectionner une langue" From ecbe51f928e9a664d199a84f7de99c1c37dbbdfc Mon Sep 17 00:00:00 2001 From: Martin Date: Tue, 6 Sep 2022 09:07:41 +0200 Subject: [PATCH 09/10] feat(a11y): avoid wrong heading level --- app/views/administrateurs/_breadcrumbs.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/administrateurs/_breadcrumbs.html.haml b/app/views/administrateurs/_breadcrumbs.html.haml index 17cd97f50..a31bbd9dc 100644 --- a/app/views/administrateurs/_breadcrumbs.html.haml +++ b/app/views/administrateurs/_breadcrumbs.html.haml @@ -22,9 +22,9 @@ - if defined?(metadatas) .metadatas.pb-3 - %h1= t('created_at', number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y'), scope: [:layouts, :breadcrumb]) + %p.fr-h1.fr-mb-0= t('created_at', scope: [:layouts, :breadcrumb], number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y')) - if @procedure.close? - %h2= t('closed_at', date: @procedure.closed_at.strftime('%d/%m/%Y'), scope: [:layouts, :breadcrumb]) + %p.fr-h2= t('closed_at', scope: [:layouts, :breadcrumb], date: @procedure.closed_at.strftime('%d/%m/%Y')) %p - if @procedure.locked? = t('published', scope: [:layouts, :breadcrumb]) From abbef510c6de63c6c8a668009ca33717693f90b9 Mon Sep 17 00:00:00 2001 From: Martin Date: Tue, 6 Sep 2022 09:46:53 +0200 Subject: [PATCH 10/10] fix(breadcrumb): update turbo usage with new breadcrumb "api" --- app/views/administrateurs/procedures/new.html.haml | 2 +- .../types_de_champ/_insert.turbo_stream.haml | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/administrateurs/procedures/new.html.haml b/app/views/administrateurs/procedures/new.html.haml index 43badaf1f..e5c57ad64 100644 --- a/app/views/administrateurs/procedures/new.html.haml +++ b/app/views/administrateurs/procedures/new.html.haml @@ -2,7 +2,7 @@ = render partial: 'administrateurs/breadcrumbs', locals: { steps: [['Démarches', admin_procedures_path], - 'Nouvelle'] } + ['Nouvelle']] } .procedure-form .procedure-form__columns.container diff --git a/app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml b/app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml index 6373e5d9f..5c02de136 100644 --- a/app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml +++ b/app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml @@ -1,7 +1,7 @@ = turbo_stream.replace 'breadcrumbs' , render(partial: 'administrateurs/breadcrumbs', - locals: { steps: [link_to('Démarches', admin_procedures_path), - link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)), - 'Configuration des champs'], + locals: { steps: [['Démarches', admin_procedures_path], + [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)], + ['Configuration des champs']], preview: @procedure.draft_revision.valid? }) = turbo_stream.replace 'errors-summary', render(TypesDeChampEditor::ErrorsSummary.new(revision: @procedure.draft_revision))