remove button from header for champs and annotations views & harmonize footer

app/assets/stylesheets/forms.scss

@@ -628,14 +628,13 @@ textarea::placeholder {
   color: $dark-grey;
 }
 
-.sticky-action-footer {
+.fixed-footer {
   border-top: 2px solid $blue-france-500;
-  position: sticky;
+  position: fixed;
-  // scss-lint:disable VendorPrefix
-  position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
-  // scss-lint:enable VendorPrefix
   bottom: 0;
-  padding: $default-padding 0;
+  left: 0;
+  right: 0;
+  padding-top: $default-padding;
   background-color: $white;
   z-index: 2;
 }

app/assets/stylesheets/procedure_champs_editor.scss

@@ -4,7 +4,6 @@
 
 .types-de-champ-editor {
   > .types-de-champ-block {
-    padding-bottom: 50px;
     padding-left: 0;
 
     .types-de-champ-errors {
@@ -76,10 +75,6 @@
       display: none;
     }
 
-    &.last .type-de-champ-add-button.root {
-      display: none;
-    }
-
     .head {
       select {
         margin-bottom: 0px;
@@ -125,13 +120,6 @@
     }
   }
 
-  .bottom-container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
   .buttons {
     display: flex;
     justify-content: space-between;

app/components/types_de_champ_editor/editor_component/editor_component.html.haml

@@ -1,8 +1,6 @@
-.types-de-champ-editor.editor-root{ 'data-turbo': 'true', id: dom_id(@revision, :types_de_champ_editor) }
+.fr-container.fr-pb-12w
-  = render TypesDeChampEditor::ErrorsSummary.new(revision: @revision)
+  .types-de-champ-editor.editor-root{ 'data-turbo': 'true', id: dom_id(@revision, :types_de_champ_editor) }
-  = render TypesDeChampEditor::BlockComponent.new(block: @revision, coordinates: coordinates)
+    = render TypesDeChampEditor::ErrorsSummary.new(revision: @revision)
-  .bottom-container
+    = render TypesDeChampEditor::BlockComponent.new(block: @revision, coordinates: coordinates)
-    .fr-container
+  - if coordinates.empty?
-      .buttons
+    = render TypesDeChampEditor::AddChampButtonComponent.new(revision: @revision, is_annotation: annotations?)
-        = render TypesDeChampEditor::AddChampButtonComponent.new(revision: @revision, is_annotation: annotations?)
-        = render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @revision, is_annotation: annotations?)

app/views/administrateurs/_breadcrumbs.html.haml

@@ -14,11 +14,6 @@
             - else
               %li= link_to step[0], step[1], class: 'fr-breadcrumb__link'
 
-    - if defined?(preview) && preview
-      .mb-2
-        = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary'
-        = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'fr-btn fr-ml-2w fr-btn--icon-right fr-icon-arrow-right-fill'
-
     - if defined?(metadatas)
       .metadatas.pb-3
         %h1.fr-h6.fr-mb-1w

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

@@ -3,8 +3,17 @@
                     [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
                     ['Configuration des annotations privées']], preview: true }
 
-.container
+.fr-container
   %h1 Configuration des annotations privées
   %br
   = render  NestedForms::FormOwnerComponent.new
-  = render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision, is_annotation: true)
+= render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision, is_annotation: true)
+
+.fixed-footer
+  .fr-container
+    %ul.fr-btns-group.fr-btns-group--inline-md
+      %li
+        = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'fr-btn'
+      - if @procedure.draft_revision.revision_types_de_champ_private.count > 0
+        %li
+          = link_to t('preview_annotations', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure, params: {tab: 'annotations-privees'}), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary'

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

@@ -6,4 +6,16 @@
 .fr-container
   %h1 Configuration des champs
   = render NestedForms::FormOwnerComponent.new
-  = render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision)
+= render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision)
+
+.fixed-footer
+  .fr-container
+    .flex
+      %ul.fr-btns-group.fr-btns-group--inline-md
+        %li
+          = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'fr-btn'
+        - if @procedure.draft_revision.revision_types_de_champ_public.count > 0
+          %li
+            = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary'
+      .fr-ml-auto
+        = render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @procedure.draft_revision, is_annotation: false)

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

@@ -16,9 +16,12 @@
 
         = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
-  .sticky-action-footer
+  .fixed-footer
     .fr-container
       .fr-grid-row
         .fr-col-12.fr-col-offset-md-2.fr-col-md-8
-          = f.button 'Enregistrer', class: 'fr-btn fr-mr-2w'
+          %ul.fr-btns-group.fr-btns-group--inline-md
-          = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
+            %li
+              = f.button 'Enregistrer', class: 'fr-btn'
+            %li
+              = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}

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

@@ -15,9 +15,12 @@
 
         = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
-  .sticky-action-footer
+  .fixed-footer
     .fr-container
       .fr-grid-row
         .fr-col-12.fr-col-offset-md-2.fr-col-md-8
-          = f.button 'Créer la démarche', class: 'fr-btn fr-mr-2w'
+          %ul.fr-btns-group.fr-btns-group--inline-md
-          = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
+            %li
+              = f.button 'Créer la démarche', class: 'fr-btn'
+            %li
+              = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}

app/views/administrateurs/services/_form.html.haml

@@ -34,6 +34,10 @@
   - if procedure_id.present?
     = hidden_field_tag :procedure_id, procedure_id
 
-  .sticky-action-footer
+  .fixed-footer
-    = f.submit "Enregistrer", class: "fr-btn fr-mr-2w"
+    .fr-container
-    = link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary"
+      %ul.fr-btns-group.fr-btns-group--inline-md
+        %li
+          = f.submit "Enregistrer", class: "fr-btn"
+        %li
+          = link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary"

app/views/instructeurs/contact_informations/_form.html.haml

@@ -28,12 +28,18 @@
   - if procedure_id.present?
     = hidden_field_tag :procedure_id, procedure_id
 
-  .sticky-action-footer
+  .fixed-footer
-    = f.submit "Enregistrer", class: "fr-btn fr-mr-2w"
+    .fr-container
-    = link_to "Annuler", instructeur_groupe_path(@groupe_instructeur, procedure_id: procedure_id), class: "fr-btn fr-btn--secondary"
+      %ul.fr-btns-group.fr-btns-group--inline-md
-    - if [ "edit", "update"].include? params[:action]
+        %li
-      = link_to 'Supprimer',
+          = f.submit "Enregistrer", class: "fr-btn"
-        instructeur_groupe_contact_information_path(procedure_id: @procedure.id, groupe_id: @groupe_instructeur.id),
+        %li
-          method: :delete,
+          = link_to "Annuler", instructeur_groupe_path(@groupe_instructeur, procedure_id: procedure_id), class: "fr-btn fr-btn--secondary"
-            data: { confirm: "Confirmez vous la suppression de ces informations de contact ?" },
+
-              class: 'fr-btn fr-btn--secondary'
+        - if [ "edit", "update"].include? params[:action]
+          %li
+            = link_to 'Supprimer',
+            instructeur_groupe_contact_information_path(procedure_id: @procedure.id, groupe_id: @groupe_instructeur.id),
+              method: :delete,
+                data: { confirm: "Confirmez vous la suppression de ces informations de contact ?" },
+                  class: 'fr-btn fr-btn--secondary'

config/locales/views/layouts/_breadcrumb.en.yml

@@ -5,6 +5,7 @@ en:
       you_are_here: "You are here"
       show: Show breadcrumb
       preview: "Preview the form"
+      preview_annotations: "Preview annotations"
       continue: "Continue"
       continue_title: "You can comeback using this link"
       since: "since %{date}"

config/locales/views/layouts/_breadcrumb.fr.yml

@@ -5,6 +5,7 @@ fr:
       you_are_here: "Vous êtes ici"
       show: "Voir le fil d’Ariane"
       preview: "Prévisualiser le formulaire"
+      preview_annotations: "Prévisualiser les annotations"
       continue: "Continuer"
       continue_title: "Vous pourrez revenir ici par la suite"
       since: "depuis le %{date}"