Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ajustement du design de l’interface instructeurs #11238

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Ajustement du design de l’interface instructeurs #11238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
512fa0d
improve procedure badge display for instructeur
lisa-durand Jan 16, 2025
f443a31
remove outline around menu button
lisa-durand Jan 20, 2025
d59eefd
fix responsive
lisa-durand Jan 29, 2025
c26e287
use trad key to stabilize api
lisa-durand Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion app/assets/stylesheets/procedure_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
}

> li {
border-top: 1px solid var(--border-default-grey);
border-top: none;

@media (min-width: 62em) {
border-top: 1px solid var(--border-default-grey);
}
}

.procedure-logo {
Expand Down
7 changes: 0 additions & 7 deletions app/assets/stylesheets/procedure_show.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
@import 'colors';
@import 'constants';

.procedure-header {
a.header-link {
display: inline-block;
margin-bottom: 1 * $default-padding;
}
}

#procedure-show {
.procedure-actions {
margin-left: auto;
Expand Down
2 changes: 0 additions & 2 deletions ...onents/instructeurs/dossiers_navigation_component/dossiers_navigation_component.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,3 @@
.fr.ml-auto.align-center.flex.fr-mt-2v
= link_previous
= link_next

%p.fr-text--bold.fr-mb-0= dossier.procedure.libelle.truncate_words(15)
4 changes: 3 additions & 1 deletion app/graphql/types/demarche_type.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ module Types
class DemarcheType < Types::BaseObject
class DemarcheState < Types::BaseEnum
Procedure.aasm.states.reject { |state| state.name == :hidden }.each do |state|
value(state.name.to_s, state.display_name, value: state.name)
value(state.name.to_s,
I18n.t(state, scope: [:activerecord, :attributes, :procedure, :api_state]),
value: state.name)
end
end

Expand Down
16 changes: 5 additions & 11 deletions app/helpers/procedure_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
# frozen_string_literal: true

module ProcedureHelper
def procedure_libelle(procedure)
parts = procedure.brouillon? ? [procedure_badge(procedure)] : []
parts << procedure.libelle
safe_join(parts, ' ')
def procedure_libelle_with_number(procedure)
"#{procedure.libelle} - n°#{procedure.id} "

Check warning on line 5 in app/helpers/procedure_helper.rb

View check run for this annotation

Codecov / codecov/patch

app/helpers/procedure_helper.rb#L5 

Added line #L5 was not covered by tests
end

def procedure_badge(procedure)
if procedure.close?
tag.span('Close', class: 'fr-badge')
elsif procedure.depubliee?
tag.span('Dépubliée', class: 'fr-badge')
elsif procedure.brouillon?
tag.span(t('helpers.procedure.testing_procedure'), class: 'fr-badge fr-badge--sm')
def procedure_badge(procedure, alignment_class = '')
if procedure.close? || procedure.depubliee? || procedure.brouillon?
tag.span(t("activerecord.attributes.procedure.aasm_state.#{procedure.aasm_state}"), class: "fr-badge fr-badge--sm #{alignment_class}")
end
end

Expand Down
29 changes: 18 additions & 11 deletions app/views/experts/avis/_header.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
.sub-header
.fr-container
.flex.justify-between
%nav.fr-breadcrumb{ "aria-label" => "vous êtes ici :", role: "navigation" }
%button.fr-breadcrumb__button{ "aria-controls" => "breadcrumb-1", "aria-expanded" => "false" } Voir le fil d’Ariane
#breadcrumb-1.fr-collapse
%ol.fr-breadcrumb__list
%li= link_to('Avis', expert_all_avis_path, class: 'fr-breadcrumb__link')
%li
= link_to(dossier.procedure.libelle.truncate_words(10), procedure_expert_avis_index_path(avis.procedure), class: "fr-breadcrumb__link")
= procedure_badge(dossier.procedure)
%li= content_tag("a","Dossier nº #{dossier.id}", class: 'fr-breadcrumb__link', 'aria-current': 'page')
%nav.fr-breadcrumb.fr-mt-0.fr-mb-1w{ "aria-label" => "vous êtes ici :", role: "navigation" }
%button.fr-breadcrumb__button{ "aria-controls" => "breadcrumb-1", "aria-expanded" => "false" } Voir le fil d’Ariane
#breadcrumb-1.fr-collapse
%ol.fr-breadcrumb__list
%li= link_to('Avis', expert_all_avis_path, class: 'fr-breadcrumb__link')
%li
= link_to(dossier.procedure.libelle.truncate_words(10), procedure_expert_avis_index_path(avis.procedure), class: "fr-breadcrumb__link")
%li= content_tag("a","Dossier nº #{dossier.id}", class: 'fr-breadcrumb__link', 'aria-current': 'page')

.header-actions

.flex
.fr-mb-3w
%h1.fr-h3.fr-mb-0
= t('show_dossier', scope: [:layouts, :breadcrumb], dossier_id: dossier.id, owner_name: dossier.owner_name)
%p.fr-text--bold.fr-mb-0
= dossier.procedure.libelle.truncate_words(15)
= procedure_badge(dossier.procedure)

.header-actions.fr-ml-auto
.fr-download
= link_to telecharger_pjs_expert_avis_path(avis.procedure, avis), download: :download, class: "menu-item menu-link fr-download__link" do
Télécharger le dossier et toutes ses pièces jointes
Expand Down
7 changes: 3 additions & 4 deletions app/views/experts/avis/index.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@
.procedure-details
.clipboard-container
.fr-mb-2w.fr-mt-2w
= badge = procedure_badge(p)
%h3{ class: class_names('font-weight-normal fr-link' => true, 'fr-ml-1v' => badge.present?) }
= link_to "#{p.libelle} - n°#{p.id}", instructeur_procedure_path(p)

%h3.font-weight-normal.fr-link.fr-mr-2w
= link_to procedure_libelle_with_number(p), instructeur_procedure_path(p)
= procedure_badge(p)

%ul.procedure-stats.flex.wrap.flex-gap-1
%li.fr-btn.fr-btn--tertiary.flex.justify-center.fr-enlarge-link.fr-mb-1w
Expand Down
6 changes: 1 addition & 5 deletions app/views/experts/avis/notification_settings.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@

.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}" }

.procedure-header
%h1.fr-h3= procedure_libelle @procedure
%h1.fr-h3= procedure_libelle_with_number(@procedure)

.fr-container
%h1.fr-h3
Expand Down
11 changes: 5 additions & 6 deletions app/views/experts/avis/procedure.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@
#procedure-show
.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}" }

.procedure-header
%h1.fr-h3= procedure_libelle @procedure
= link_to t('.management', procedure_id: @procedure.id), notification_settings_expert_procedure_path(@procedure), class: 'header-link'
%h1.fr-h3.fr-mb-0
= procedure_libelle_with_number(@procedure)
= procedure_badge(@procedure, 'super')
%p
= link_to t('.management', procedure_id: @procedure.id), notification_settings_expert_procedure_path(@procedure)



Expand Down
5 changes: 3 additions & 2 deletions app/views/instructeurs/dossiers/_header_top.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
#header-top.fr-container
= render Instructeurs::DossiersNavigationComponent.new(dossier:, procedure_presentation:, statut: params[:statut])

%p.fr-text--bold.fr-mb-0
= dossier.procedure.libelle.truncate_words(15)
= procedure_badge(dossier.procedure)
%div
.fr-my-1w.badge-group
= procedure_badge(dossier.procedure)

= status_badge(dossier.state)
- if dossier.pending_correction?
= pending_correction_badge(:for_instructeur)
Expand Down
3 changes: 2 additions & 1 deletion app/views/instructeurs/procedures/_header.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
.align-start.flex
= render Instructeurs::BackButtonComponent.new(to: instructeur_procedures_path)
%h1.fr-h3.fr-mb-0
= "#{procedure_libelle procedure} (n°#{procedure.id})"
= procedure_libelle_with_number(procedure)
= procedure_badge(procedure, 'super')
%nav.fr-nav#navigation{ role: "navigation", "aria-label": t('instructeurs.dossiers.header.banner.procedure_navigation') }
%ul.fr-nav__list
%li.fr-nav__item
Expand Down
156 changes: 80 additions & 76 deletions app/views/instructeurs/procedures/_list.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,90 @@
%li.list-style-type-none.fr-mb-3w
.procedure-details
.clipboard-container
.fr-mb-2w.fr-mt-2w.flex.align-center
%nav.fr-nav{ role: "navigation", "aria-label": "Menu de la procédure" }
%ul.fr-nav__list
%li.fr-nav__item.relative
%button.fr-nav__btn.fr-btn--tertiary.fr-h-5v.hide-chevron{ "aria-expanded": "false", "aria-controls": "mega-menu-#{p.id}" }
%span.fr-icon-menu-2-fill.fr-icon--sm.fr-mr-1w
Menu
.fr-collapse.fr-mega-menu{ id: "mega-menu-#{p.id}", tabindex: "-1" , style: "min-width: 350px" }
.fr-container.fr-container--fluid.fr-container-lg
%button.fr-btn--close.fr-btn.fr.fr-mb-3w{ "aria-controls": "mega-menu-#{p.id}" }
= t('instructeurs.procedures.index.close_button')
.fr-grid-row
.fr-col-12
.fr-mega-menu__leader
%h4.fr-h6= t('instructeurs.procedures.index.procedure_menu')
.fr-col-12
%h5.fr-mega-menu__category
= link_to t('instructeurs.dossiers.header.banner.follow_up'), instructeur_procedure_path(p), class: "fr-nav__link"
.fr-col-12
%ul.fr-mega-menu__list.fr-pb-0
%li.fr-nav__item
%button.fr-nav__btn.fr-mega-menu__category.flex.justify-between{ "aria-expanded": "false", "aria-controls": "procedure-management-#{p.id}", style: "height: 47px" }
= t('instructeurs.dossiers.header.banner.procedure_management')
.fr-collapse.width-100{ id: "procedure-management-#{p.id}" }
%ul.fr-menu__list.fr-mb-0
%li
= link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(p), class: 'fr-nav__link'
.fr-mb-2w.fr-mt-2w.flex.align-center
%nav.fr-nav{ role: "navigation", "aria-label": "Menu de la procédure" }
%ul.fr-nav__list
%li.fr-nav__item.relative
%button.fr-nav__btn.fr-btn--tertiary-no-outline.fr-h-5v.hide-chevron{ "aria-expanded": "false", "aria-controls": "mega-menu-#{p.id}" }
%span.fr-icon-menu-2-fill.fr-icon--sm.fr-mr-1w
Menu
.fr-collapse.fr-mega-menu{ id: "mega-menu-#{p.id}", tabindex: "-1" , style: "min-width: 350px" }
.fr-container.fr-container--fluid.fr-container-lg
%button.fr-btn--close.fr-btn.fr.fr-mb-3w{ "aria-controls": "mega-menu-#{p.id}" }
= t('instructeurs.procedures.index.close_button')
.fr-grid-row
.fr-col-12
.fr-mega-menu__leader
%h4.fr-h6= t('instructeurs.procedures.index.procedure_menu')
.fr-col-12
%h5.fr-mega-menu__category
= link_to t('instructeurs.dossiers.header.banner.follow_up'), instructeur_procedure_path(p), class: "fr-nav__link"
.fr-col-12
%ul.fr-mega-menu__list.fr-pb-0
%li.fr-nav__item
%button.fr-nav__btn.fr-mega-menu__category.flex.justify-between{ "aria-expanded": "false", "aria-controls": "procedure-management-#{p.id}", style: "height: 47px" }
= t('instructeurs.dossiers.header.banner.procedure_management')
.fr-collapse.width-100{ id: "procedure-management-#{p.id}" }
%ul.fr-menu__list.fr-mb-0
%li
= link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(p), class: 'fr-nav__link'

- if p.instructeurs_self_management_enabled?
%li
= link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(p), class: 'fr-nav__link'
- if p.instructeurs_self_management_enabled?
%li
= link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(p), class: 'fr-nav__link'

- elsif current_administrateur && p.administrateurs_procedures.any? { _1.administrateur_id == current_administrateur.id }
- elsif current_administrateur && p.administrateurs_procedures.any? { _1.administrateur_id == current_administrateur.id }

%li
= link_to t('instructeurs.dossiers.header.banner.instructeurs'), admin_procedure_groupe_instructeurs_path(p), class: 'fr-nav__link'
%li
= link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(p), class: 'fr-nav__link'
%li
= link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(p), class: 'fr-nav__link'
%li
= link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(p), class: 'fr-nav__link'
.fr-col-12
%ul.fr-mega-menu__list.fr-pb-0
%li.fr-nav__item
%button.fr-nav__btn.fr-mega-menu__category.flex.justify-between{ "aria-expanded": "false", "aria-controls": "user-support-#{p.id}", style: "height: 47px" }
= t('instructeurs.dossiers.header.banner.user_support')
.fr-collapse.width-100{ id: "user-support-#{p.id}" }
%ul.fr-menu__list.fr-mb-0
%li
= link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(p), class: 'fr-nav__link'
%li
= link_to t('instructeurs.dossiers.header.banner.preview'), apercu_instructeur_procedure_path(p), 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(p.path), action: "click->clipboard#copy" } do
= t('instructeurs.dossiers.header.banner.copy_link_button')
.fr-col-12
%ul.fr-mega-menu__list.fr-pb-0
%li.fr-nav__item
%button.fr-nav__btn.fr-mega-menu__category.flex.justify-between{ "aria-expanded": "false", "aria-controls": "downloads-#{p.id}", style: "height: 47px" }
= t('instructeurs.dossiers.header.banner.downloads')
%span.relative{ class: class_names("fr-pr-1w" => @has_export_notification) }
- if @has_export_notification
%span.notifications{ 'aria-label': t('instructeurs.dossiers.header.banner.exports_notification_label') }
.fr-collapse.width-100{ id: "downloads-#{p.id}" }
%ul.fr-menu__list.fr-mb-0
%li
= link_to exports_instructeur_procedure_path(p), class: 'fr-nav__link' do
= t('instructeurs.dossiers.header.banner.exports_list')
- if @has_export_notification
%span.fr-ml-1v.notifications{ 'aria-label': t('instructeurs.dossiers.header.banner.exports_notification_label') }
%li
= link_to t('instructeurs.dossiers.header.banner.archives'), list_instructeur_archives_path(p), class: 'fr-nav__link'
%li
= link_to t('instructeurs.dossiers.header.banner.export_templates'), export_templates_instructeur_procedure_path(p), class: 'fr-nav__link'
= badge = procedure_badge(p)
%h3{ class: class_names('font-weight-normal fr-link fr-ml-3v' => true, 'fr-ml-1v' => badge.present?) }
= link_to "#{p.libelle} - n° #{p.id}", instructeur_procedure_path(p)
= link_to t('instructeurs.dossiers.header.banner.instructeurs'), admin_procedure_groupe_instructeurs_path(p), class: 'fr-nav__link'
%li
= link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(p), class: 'fr-nav__link'
%li
= link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(p), class: 'fr-nav__link'
%li
= link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(p), class: 'fr-nav__link'
.fr-col-12
%ul.fr-mega-menu__list.fr-pb-0
%li.fr-nav__item
%button.fr-nav__btn.fr-mega-menu__category.flex.justify-between{ "aria-expanded": "false", "aria-controls": "user-support-#{p.id}", style: "height: 47px" }
= t('instructeurs.dossiers.header.banner.user_support')
.fr-collapse.width-100{ id: "user-support-#{p.id}" }
%ul.fr-menu__list.fr-mb-0
%li
= link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(p), class: 'fr-nav__link'
%li
= link_to t('instructeurs.dossiers.header.banner.preview'), apercu_instructeur_procedure_path(p), 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(p.path), action: "click->clipboard#copy" } do
= t('instructeurs.dossiers.header.banner.copy_link_button')
.fr-col-12
%ul.fr-mega-menu__list.fr-pb-0
%li.fr-nav__item
%button.fr-nav__btn.fr-mega-menu__category.flex.justify-between{ "aria-expanded": "false", "aria-controls": "downloads-#{p.id}", style: "height: 47px" }
= t('instructeurs.dossiers.header.banner.downloads')
%span.relative{ class: class_names("fr-pr-1w" => @has_export_notification) }
- if @has_export_notification
%span.notifications{ 'aria-label': t('instructeurs.dossiers.header.banner.exports_notification_label') }
.fr-collapse.width-100{ id: "downloads-#{p.id}" }
%ul.fr-menu__list.fr-mb-0
%li
= link_to exports_instructeur_procedure_path(p), class: 'fr-nav__link' do
= t('instructeurs.dossiers.header.banner.exports_list')
- if @has_export_notification
%span.fr-ml-1v.notifications{ 'aria-label': t('instructeurs.dossiers.header.banner.exports_notification_label') }
%li
= link_to t('instructeurs.dossiers.header.banner.archives'), list_instructeur_archives_path(p), class: 'fr-nav__link'
%li
= link_to t('instructeurs.dossiers.header.banner.export_templates'), export_templates_instructeur_procedure_path(p), class: 'fr-nav__link'

.fr-hidden.fr-unhidden-lg
%h3.font-weight-normal.fr-link.fr-mx-2w
= link_to procedure_libelle_with_number(p), instructeur_procedure_path(p)
= procedure_badge(p)

= render Dsfr::CopyButtonComponent.new(title: t('instructeurs.procedures.index.copy_link_button'), text: commencer_url(p.path))
.flex.align-center.fr-hidden-lg.fr-mb-2w
%h3.font-weight-normal.fr-link.fr-mr-2w
= link_to procedure_libelle_with_number(p), instructeur_procedure_path(p)
= procedure_badge(p)

%ul.procedure-stats.flex.wrap.flex-gap-1
%li.fr-btn.fr-btn--tertiary.flex.justify-center.fr-enlarge-link.fr-mb-1w
Expand Down
2 changes: 1 addition & 1 deletion app/views/shared/dossiers/_header.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
%h1
= procedure_libelle(dossier.procedure)
= dossier.procedure.libelle
= status_badge_user(dossier, 'super')
%h2
= t('views.users.dossiers.show.header.dossier_number_html', dossier_id: dossier.id)
Expand Down
Loading
Loading