chore(attestation): publish button on sticky header

app/assets/stylesheets/forms.scss

@@ -623,40 +623,10 @@ textarea::placeholder {
   color: $dark-grey;
 }
 
-@media (max-width: 62em) {
-
-  .padded-fixed-footer {
-    padding-top: 120px;
-  }
-}
-
-@media (min-width: 62em) {
-
-  .padded-fixed-footer {
-    padding-top: 60px;
-  }
-}
-
-[data-fr-theme="dark"] .fixed-footer {
-  border-top: 2px solid var(--background-action-low-blue-france-hover);
-  background-color: var(--background-action-low-blue-france);
-}
-
 .mandatory {
   fill: currentColor;
 }
 
-.fixed-footer {
-  border-top: 2px solid $blue-france-500;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding-top: $default-padding;
-  background-color: $white;
-  z-index: 2;
-}
-
 .fr-menu__list {
   padding: $default-spacer;
   overflow-y: auto;

app/assets/stylesheets/sticky.scss

@@ -0,0 +1,49 @@
+@import "constants";
+
+.fixed-footer {
+  border-top: 2px solid var(--border-plain-blue-france);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-top: $default-padding;
+  background-color: var(--background-default-grey);
+  z-index: 2;
+}
+
+@media (max-width: 62em) {
+  .padded-fixed-footer {
+    padding-top: 120px;
+  }
+}
+
+@media (min-width: 62em) {
+  .padded-fixed-footer {
+    padding-top: 60px;
+  }
+}
+
+[data-fr-theme="dark"] .fixed-footer {
+  background-color: var(--background-action-low-blue-france);
+}
+
+.sticky-header {
+  padding-top: $default-padding;
+  padding-bottom: $default-padding;
+
+  &-container {
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 800;
+  }
+
+  &-warning {
+    background-color: var(--background-contrast-warning);
+  }
+
+  p {
+    margin: 0;
+  }
+}

app/views/administrateurs/attestation_template_v2s/_fixed_footer.html.haml

@@ -11,8 +11,3 @@
         %p.fr-hint-text Cette attestation est actuellement délivrée aux usagers.
 
       %span#autosave-notice
-
-      - if procedure.feature_enabled?(:attestation_v2) && attestation_template.draft?
-        %button.fr-btn.fr-ml-2w{ name: field_name(:attestation_template, :state), value: "published",
-          data: { 'disable-with': "Publication en cours…", controller: 'autosave-submit' } }
-          Publier

app/views/administrateurs/attestation_template_v2s/_sticky_header.html.haml

@@ -0,0 +1,10 @@
+.sticky-header.sticky-header-warning
+  .fr-container
+    %p.flex.justify-between.align-center.fr-text-default--warning
+      %span
+        = dsfr_icon("fr-icon-warning-fill fr-mr-1v")
+        Les modifications effectuées ne seront appliquées qu’une fois que vous aurez publié cette version de l’attestation.
+      %span
+        %button.fr-btn.fr-ml-2w{ form: "attestation-template", name: field_name(:attestation_template, :state), value: "published",
+          data: { 'disable-with': "Publication en cours…", controller: 'autosave-submit' } }
+          Publier l’attestation

app/views/administrateurs/attestation_template_v2s/edit.html.haml

@@ -4,7 +4,8 @@
                     ['Attestation']] }
 
 = render NestedForms::FormOwnerComponent.new
-= form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), html: { multipart: true },
+= form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure),
+  html: { multipart: true , id: "attestation-template" },
   data: { turbo: 'true',
     controller: 'autosubmit attestation',
     autosubmit_debounce_delay_value: 1000,
@@ -118,6 +119,10 @@
             L’aperçu est mis à jour automatiquement après chaque modification.
             Pour générer un aperçu fidèle avec tous les champs et les dates, créez-vous un dossier et acceptez-le : l’aperçu l’utilisera.
 
+  - if @procedure.feature_enabled?(:attestation_v2) && @attestation_template.draft?
+    - content_for(:sticky_header) do
+      = render partial: "sticky_header"
+
   .padded-fixed-footer
     .fixed-footer#fixed_footer
       = render partial: "fixed_footer", locals: { procedure: @procedure, attestation_template: @attestation_template }

app/views/administrateurs/attestation_template_v2s/update.turbo_stream.haml

@@ -1,5 +1,6 @@
 - if @attestation_template.previously_new_record? || @attestation_template.state_changed?
   = turbo_stream.update "fixed_footer", render(partial: "fixed_footer", locals: { procedure: @procedure, attestation_template: @attestation_template })
+  = turbo_stream.update "sticky-header", render(partial: "sticky_header")
 
 = turbo_stream.show 'autosave-notice'
 = turbo_stream.replace 'autosave-notice', render(partial: 'administrateurs/autosave_notice', locals: { success: !@attestation_template.changed? })

app/views/layouts/application.html.haml

@@ -45,6 +45,9 @@
         #beta
           Env Test
 
+      #sticky-header.sticky-header-container
+        = content_for(:sticky_header)
+
       = render partial: "layouts/header"
       %main#contenu{ role: :main }
         = render partial: "layouts/flash_messages"