From e3473fbe9147ee59c6224aee6488943520100422 Mon Sep 17 00:00:00 2001 From: Kara Diaby Date: Thu, 31 Oct 2024 14:28:14 +0100 Subject: [PATCH] Ajout des dropdowns dans l'interface instructeur pour une meilleure navigation --- app/assets/stylesheets/02_utils.scss | 4 + .../instructeurs/archives/index.html.haml | 13 +++- .../groupe_instructeurs/index.html.haml | 9 ++- .../instructeurs/procedures/_header.html.haml | 77 +++++++++++-------- .../procedures/administrateurs.html.haml | 7 +- .../procedures/deleted_dossiers.html.haml | 10 +-- .../procedures/email_notifications.html.haml | 8 +- .../procedures/email_usagers.html.haml | 10 ++- .../instructeurs/procedures/exports.html.haml | 11 ++- .../instructeurs/procedures/show.html.haml | 3 - .../instructeurs/procedures/stats.html.haml | 9 ++- 11 files changed, 96 insertions(+), 65 deletions(-) diff --git a/app/assets/stylesheets/02_utils.scss b/app/assets/stylesheets/02_utils.scss index 3d5ae5a13..df1f8c4ee 100644 --- a/app/assets/stylesheets/02_utils.scss +++ b/app/assets/stylesheets/02_utils.scss @@ -85,6 +85,10 @@ position: relative; } +.absolute { + position: absolute; +} + .sticky { position: sticky; top: 2em; diff --git a/app/views/instructeurs/archives/index.html.haml b/app/views/instructeurs/archives/index.html.haml index d6cc4a63b..b04375126 100644 --- a/app/views/instructeurs/archives/index.html.haml +++ b/app/views/instructeurs/archives/index.html.haml @@ -1,11 +1,16 @@ - content_for(:title, "Archives pour #{@procedure.libelle}") -= render partial: 'administrateurs/breadcrumbs', - locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)], - ['Archives']] } +-# = render partial: 'administrateurs/breadcrumbs', +-# locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)], +-# ['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 } diff --git a/app/views/instructeurs/groupe_instructeurs/index.html.haml b/app/views/instructeurs/groupe_instructeurs/index.html.haml index 64b986960..3eeefd1ed 100644 --- a/app/views/instructeurs/groupe_instructeurs/index.html.haml +++ b/app/views/instructeurs/groupe_instructeurs/index.html.haml @@ -1,11 +1,12 @@ - content_for(:title, "Notifications pour #{@procedure.libelle}") -= render partial: 'administrateurs/breadcrumbs', - locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)], - ['Groupes d’instructeurs']] } +.sub-header + .fr-container.flex + = 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 diff --git a/app/views/instructeurs/procedures/_header.html.haml b/app/views/instructeurs/procedures/_header.html.haml index 99ee79e51..44868b6f2 100644 --- a/app/views/instructeurs/procedures/_header.html.haml +++ b/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}" - = render Dsfr::CopyButtonComponent.new(title: t('instructeurs.procedures.index.copy_link_button'), text: commencer_url(procedure.path)) - = link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(procedure), class: 'header-link' - | - = link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(procedure), class: 'header-link' + = "#{procedure_libelle procedure} (n°#{procedure.id})" + %nav.flex.align-center.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('instructeurs.dossiers.header.banner.procedure_navigation') } + .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 + %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) - | - = link_to t('instructeurs.dossiers.header.banner.instructeurs'), admin_procedure_groupe_instructeurs_path(procedure), class: 'header-link' - - elsif procedure.instructeurs_self_management? && procedure.routing_enabled? - | - = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(procedure), class: 'header-link' - - elsif procedure.instructeurs_self_management? - | - = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupe_path(procedure, procedure.defaut_groupe_instructeur), class: 'header-link' + .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;" } + = t('instructeurs.dossiers.header.banner.user_support') + #user-support.fr-collapse.fr-menu.absolute + %ul.fr-menu__list + %li + = 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.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) - | - = link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(procedure), class: 'header-link' + .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;" } + = 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' - | - = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'header-link' - | - = 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 } + -# #last-export-alert + -# = render partial: "last_export_alert", locals: { export: @last_export, statut: @statut } diff --git a/app/views/instructeurs/procedures/administrateurs.html.haml b/app/views/instructeurs/procedures/administrateurs.html.haml index 09242021f..dde38335e 100644 --- a/app/views/instructeurs/procedures/administrateurs.html.haml +++ b/app/views/instructeurs/procedures/administrateurs.html.haml @@ -1,8 +1,9 @@ - content_for(:title, "Administrateurs de #{@procedure.libelle}") -= render partial: 'administrateurs/breadcrumbs', - locals: { steps: [[@procedure.libelle.truncate_words(10), administrateurs_instructeur_procedure_path(@procedure)],['Administrateurs']] } - +.sub-header + .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) diff --git a/app/views/instructeurs/procedures/deleted_dossiers.html.haml b/app/views/instructeurs/procedures/deleted_dossiers.html.haml index 3b7bb170a..b4d9b5934 100644 --- a/app/views/instructeurs/procedures/deleted_dossiers.html.haml +++ b/app/views/instructeurs/procedures/deleted_dossiers.html.haml @@ -1,11 +1,9 @@ - content_for(:title, "#{@procedure.libelle}") -= render partial: 'administrateurs/breadcrumbs', - locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)], - ['Historique des dossiers supprimés']] } +.sub-header + .fr-container.flex + = 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) diff --git a/app/views/instructeurs/procedures/email_notifications.html.haml b/app/views/instructeurs/procedures/email_notifications.html.haml index 2761015c0..e688abe7e 100644 --- a/app/views/instructeurs/procedures/email_notifications.html.haml +++ b/app/views/instructeurs/procedures/email_notifications.html.haml @@ -1,8 +1,10 @@ - content_for(:title, "Notifications pour #{@procedure.libelle}") -= render partial: 'administrateurs/breadcrumbs', - locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)], - ['Notifications']] } +.sub-header + .fr-container.flex + = render partial: 'instructeurs/procedures/header', + locals: { procedure: @procedure } + .fr-container %h1.fr-h3 diff --git a/app/views/instructeurs/procedures/email_usagers.html.haml b/app/views/instructeurs/procedures/email_usagers.html.haml index d22d23021..974d4cf0a 100644 --- a/app/views/instructeurs/procedures/email_usagers.html.haml +++ b/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', - locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)], - [t('.contact_users')]] } +.sub-header + .fr-container.flex + = 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 diff --git a/app/views/instructeurs/procedures/exports.html.haml b/app/views/instructeurs/procedures/exports.html.haml index fad0a8022..3e0a40b43 100644 --- a/app/views/instructeurs/procedures/exports.html.haml +++ b/app/views/instructeurs/procedures/exports.html.haml @@ -1,9 +1,14 @@ - title = "Exports · #{@procedure.libelle}" - content_for(:title, title) -= render partial: 'administrateurs/breadcrumbs', - locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)], - [t('.title')]] } +-# = render partial: 'administrateurs/breadcrumbs', +-# locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)], +-# [t('.title')]] } + +.sub-header + .fr-container.flex + = render partial: 'instructeurs/procedures/header', + locals: { procedure: @procedure } .fr-container .fr-tabs.mb-3 diff --git a/app/views/instructeurs/procedures/show.html.haml b/app/views/instructeurs/procedures/show.html.haml index 00753ecb1..b5208a1c4 100644 --- a/app/views/instructeurs/procedures/show.html.haml +++ b/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 diff --git a/app/views/instructeurs/procedures/stats.html.haml b/app/views/instructeurs/procedures/stats.html.haml index b1f2648fe..8b45c323f 100644 --- a/app/views/instructeurs/procedures/stats.html.haml +++ b/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', - locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)], - [t('.title')]] } +.sub-header + .fr-container.flex + = render partial: 'instructeurs/procedures/header', + locals: { procedure: @procedure } = render partial: 'shared/procedures/stats', locals: { title: title }