Ajout des dropdowns dans l'interface instructeur pour une meilleure navigation

app/assets/stylesheets/02_utils.scss

@@ -85,6 +85,10 @@
   position: relative;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .sticky {
   position: sticky;
   top: 2em;

app/views/instructeurs/archives/index.html.haml

@@ -1,11 +1,16 @@
 - content_for(:title, "Archives pour #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
+-# = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+-#   locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
-                    ['Archives']] }
+-#                     ['Archives']] }
+
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
 .container
-  %h1.mb-2 Archives
+  %h1.mb-2 Téléchargement mensuel
 
   = render partial: "shared/archives/notice"
   = render partial: "shared/archives/table", locals: {count_dossiers_termines_by_month: @count_dossiers_termines_by_month, archives: @archives, average_dossier_weight: @average_dossier_weight, procedure: @procedure }

app/views/instructeurs/groupe_instructeurs/index.html.haml

@@ -1,11 +1,12 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
+.sub-header
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+  .fr-container.flex
-                    ['Groupes d’instructeurs']] }
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
 .fr-container.groupe-instructeur
-  %h1 Gestion des Groupes
+  %h1 Gestion des instructeurs
   .card
     %h2.fr-h3 Liste des groupes
     %table.table.mt-2

app/views/instructeurs/procedures/_header.html.haml

@@ -1,36 +1,51 @@
 .procedure-header
-  .flex.clipboard-container
+  .clipboard-container
     %h1.fr-h3
-      = "#{procedure_libelle procedure} - n°#{procedure.id}"
+      = "#{procedure_libelle procedure} (n°#{procedure.id})"
-    = render Dsfr::CopyButtonComponent.new(title: t('instructeurs.procedures.index.copy_link_button'), text: commencer_url(procedure.path))
+  %nav.flex.align-center.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('instructeurs.dossiers.header.banner.procedure_navigation') }
-  = link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(procedure), class: 'header-link'
+    .fr-nav__item
-  |
+      = link_to instructeur_procedure_path(procedure), class: "account-btn fr-btn fr-btn--tertiary fr-btn--no-border", style: "box-shadow: none; background: none;" do
-  = link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(procedure), class: 'header-link'
+        %span.fr-mr-1w= t('instructeurs.dossiers.header.banner.follow_up')
+    .fr-nav__item.relative
+      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border{ "aria-controls" => "procedure-management", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
+        = t('instructeurs.dossiers.header.banner.procedure_management')
+      #procedure-management.fr-collapse.fr-menu.absolute
+        %ul.fr-menu__list
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(@procedure), class: 'fr-nav__link'
 
-  - if current_administrateur&.owns?(procedure)
+    .fr-nav__item.relative
-    |
+      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border{ "aria-controls" => "user-support", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
-    = link_to t('instructeurs.dossiers.header.banner.instructeurs'), admin_procedure_groupe_instructeurs_path(procedure), class: 'header-link'
+        = t('instructeurs.dossiers.header.banner.user_support')
-  - elsif procedure.instructeurs_self_management? && procedure.routing_enabled?
+      #user-support.fr-collapse.fr-menu.absolute
-    |
+        %ul.fr-menu__list
-    = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(procedure), class: 'header-link'
+          %li
-  - elsif procedure.instructeurs_self_management?
+            = link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(procedure), class: 'fr-nav__link'
-    |
+          %li
-    = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupe_path(procedure, procedure.defaut_groupe_instructeur), class: 'header-link'
+            = link_to t('instructeurs.dossiers.header.banner.preview'), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-nav__link'
+          %li
+            = link_to "#", class: "fr-nav__link fr-link fr-link--md fr-link--icon-left fr-icon-clipboard-line", data: {controller: "clipboard", clipboard_text_value: commencer_url(@procedure.path), action: "click->clipboard#copy" } do
+              = t('instructeurs.dossiers.header.banner.copy_link_button')
 
-  - if can_send_groupe_message?(procedure)
+    .fr-nav__item.relative
-    |
+      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border{ "aria-controls" => "downloads", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
-    = link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(procedure), class: 'header-link'
+        = t('instructeurs.dossiers.header.banner.downloads')
+      #downloads.fr-collapse.fr-menu.absolute
+        %ul.fr-menu__list
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.exports_list'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.archives'), instructeur_archives_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.exports_models'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
 
-  |
+  -# #last-export-alert
-  = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'header-link'
+  -#   = render partial: "last_export_alert", locals: { export: @last_export, statut: @statut }
-  |
-  = link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(@procedure), class: "header-link"
-  |
-  = link_to t('instructeurs.dossiers.header.banner.exports_list'), exports_instructeur_procedure_path(procedure), class: 'header-link'
-  - if @has_export_notification
-    %span.notifications{ 'aria-label': t('instructeurs.dossiers.header.banner.exports_notification_label') }
-
-
-
-  #last-export-alert
-    = render partial: "last_export_alert", locals: { export: @last_export, statut: @statut }

app/views/instructeurs/procedures/administrateurs.html.haml

@@ -1,8 +1,9 @@
 - content_for(:title, "Administrateurs de #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
+.sub-header
-  locals: { steps: [[@procedure.libelle.truncate_words(10), administrateurs_instructeur_procedure_path(@procedure)],['Administrateurs']] }
+  .fr-container.flex
-
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 .container
   %h1
     = t('instructeurs.procedures.administrators_list.title', procedure_id: @procedure.id, procedure_libelle: @procedure.libelle)

app/views/instructeurs/procedures/deleted_dossiers.html.haml

@@ -1,11 +1,9 @@
 - content_for(:title, "#{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
+.sub-header
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+  .fr-container.flex
-                    ['Historique des dossiers supprimés']] }
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
-.fr-container
-  .fr-mb-3w
-    = link_to "Retour à la démarche", instructeur_procedure_path(@procedure), class: "fr-link fr-icon-arrow-left-line fr-link--icon-left"
 
 = render Dossiers::DeletedDossiersComponent.new(deleted_dossiers: @deleted_dossiers)

app/views/instructeurs/procedures/email_notifications.html.haml

@@ -1,8 +1,10 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
+.sub-header
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+  .fr-container.flex
-                    ['Notifications']] }
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
+
 
 .fr-container
   %h1.fr-h3

app/views/instructeurs/procedures/email_usagers.html.haml

@@ -1,10 +1,12 @@
 - content_for(:title, "Contacter les usagers pour #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
+.sub-header
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+  .fr-container.flex
-                    [t('.contact_users')]] }
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
+
 .messagerie.fr-container
-  %h1 Contacter les usagers
+  %h1= t('instructeurs.dossiers.header.banner.contact_users')
   %p.fr-highlight
     = t('.hint', count: @dossiers_without_groupe_count).html_safe
 

app/views/instructeurs/procedures/exports.html.haml

@@ -1,9 +1,14 @@
 - title = "Exports · #{@procedure.libelle}"
 - content_for(:title, title)
 
-= render partial: 'administrateurs/breadcrumbs',
+-# = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+-#   locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
-                    [t('.title')]] }
+-#                     [t('.title')]] }
+
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
 .fr-container
   .fr-tabs.mb-3

app/views/instructeurs/procedures/show.html.haml

@@ -4,9 +4,6 @@
   .sub-header
     .fr-container.flex
 
-      .procedure-logo{ style: "background-image: url(#{@procedure.logo_url})",
-        role: 'img', 'aria-label': "logo de la démarche #{@procedure.libelle}" }
-
       = render partial: 'header', locals: { procedure: @procedure, statut: @statut }
 
       .procedure-actions

app/views/instructeurs/procedures/stats.html.haml

@@ -1,8 +1,9 @@
-- title = "Statistiques · #{@procedure.libelle}"
+- title = "Statistiques de la démarche"
 - content_for(:title, title)
 
-= render partial: 'administrateurs/breadcrumbs',
+.sub-header
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+  .fr-container.flex
-                    [t('.title')]] }
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
 = render partial: 'shared/procedures/stats', locals: { title: title }