instructeur header dossier view restructuration

app/assets/stylesheets/02_utils.scss

@@ -139,6 +139,10 @@
   overflow: visible;
 }
 
+.super {
+  vertical-align: super;
+}
+
 // generate spacer utility like bootstrap my-2 -> margin-left/right: 2 * $default-spacer
 // using $direction.key as css modifier, $direction.values to set css properties
 // scale it using $steps

app/helpers/dossier_helper.rb

@@ -60,10 +60,10 @@ module DossierHelper
     end
   end
 
-  def status_badge(state)
+  def status_badge(state, alignment_class = '')
     status_text = dossier_display_state(state, lower: true)
     status_class = state.tr('_', '-')
-    tag.span(status_text, class: "label #{status_class} ", role: 'status')
+    tag.span(status_text, class: "label #{status_class} #{alignment_class}", role: 'status')
   end
 
   def deletion_reason_badge(reason)

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

@@ -7,16 +7,19 @@
 
 .sub-header
   .container
-    .flex.justify-between
+    .flex.fr-mb-3w
-      %ul.breadcrumbs
+      %div
-        %li
+        %h1.fr-h2.fr-mb-1w
-          = link_to dossier.procedure.libelle.truncate_words(10), instructeur_procedure_path(dossier.procedure), title: dossier.procedure.libelle, class: "fr-link"
-          = procedure_badge(dossier.procedure)
-        %li
           = "Dossier nº #{dossier.id}"
 
-      .header-actions
+          = status_badge(dossier.state, 'super')
+        = link_to dossier.procedure.libelle.truncate_words(10), instructeur_procedure_path(dossier.procedure), title: dossier.procedure.libelle, class: "fr-link"
+        = procedure_badge(dossier.procedure)
+
+      .header-actions.fr-ml-auto
         = render partial: 'instructeurs/dossiers/header_actions', locals: { dossier: dossier }
+        = render(partial: 'instructeurs/dossiers/print_and_export_actions', locals: {dossier: dossier})
+
 
     = render(partial: 'instructeurs/dossiers/expiration_banner', locals: {dossier: dossier})
 

app/views/instructeurs/dossiers/_header_actions.html.haml

@@ -1,32 +1,4 @@
-%ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline-md.fr-btns-group--icon-right
+%ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline-md.fr-btns-group--icon-right.flex.justify-end.fr-mb-1w
-  = render Dropdown::MenuComponent.new(wrapper: :li, menu_options: { id: 'print-menu'}, button_options: { class: ['fr-btn--tertiary', 'fr-icon-printer-line']}) do |menu|
-    - menu.with_button_inner_html do
-      Imprimer
-
-    - menu.with_item do
-      = link_to print_instructeur_dossier_path(dossier.procedure, dossier), role: 'menuitem', target: "_blank", rel: "noopener", class: "menu-item menu-link" do
-        Tout le dossier
-
-    - menu.with_item do
-      = link_to '#', role: 'menuitem', onclick: "window.print()", class: "menu-item menu-link" do
-        Uniquement cet onglet
-
-    - menu.with_item do
-      = link_to instructeur_dossier_path(dossier.procedure, dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link", role: 'menuitem' do
-        Export PDF
-
-    - if dossier.geo_data?
-      - menu.with_item do
-        = link_to  geo_data_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link", role: 'menuitem' do
-          Export GeoJSON
-
-  = render Dropdown::MenuComponent.new(wrapper: :li, menu_options: { id: 'print-pj-menu'}, button_options: { class: ['fr-btn--tertiary', 'fr-icon-download-line']}) do |menu|
-    - menu.with_button_inner_html do
-      Télécharger
-    - menu.with_item do
-      = link_to telecharger_pjs_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link", role: 'menuitem'  do
-        Télécharger le dossier et toutes ses pièces jointes
-
   %li
     = render partial: "instructeurs/procedures/dossier_actions",
       locals: { procedure_id: dossier.procedure.id,

app/views/instructeurs/dossiers/_print_and_export_actions.html.haml

@@ -0,0 +1,28 @@
+%ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline-md.fr-btns-group--icon-right.flex.justify-end
+  = render Dropdown::MenuComponent.new(wrapper: :li, menu_options: { id: 'print-menu'}, button_options: { class: ['fr-btn--tertiary-no-outline', 'fr-icon-printer-line']}) do |menu|
+    - menu.with_button_inner_html do
+      Imprimer
+
+    - menu.with_item do
+      = link_to print_instructeur_dossier_path(dossier.procedure, dossier), role: 'menuitem', target: "_blank", rel: "noopener", class: "menu-item menu-link" do
+        Tout le dossier
+
+    - menu.with_item do
+      = link_to '#', role: 'menuitem', onclick: "window.print()", class: "menu-item menu-link" do
+        Uniquement cet onglet
+
+    - menu.with_item do
+      = link_to instructeur_dossier_path(dossier.procedure, dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link", role: 'menuitem' do
+        Export PDF
+
+    - if dossier.geo_data?
+      - menu.with_item do
+        = link_to  geo_data_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link", role: 'menuitem' do
+          Export GeoJSON
+
+  = render Dropdown::MenuComponent.new(wrapper: :li, menu_options: { id: 'print-pj-menu'}, button_options: { class: ['fr-btn--tertiary-no-outline', 'fr-icon-download-line']}) do |menu|
+    - menu.with_button_inner_html do
+      Télécharger
+    - menu.with_item do
+      = link_to telecharger_pjs_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link", role: 'menuitem'  do
+        Télécharger le dossier et toutes ses pièces jointes