Champ editor: Move champ header to footer

app/assets/stylesheets/procedure_champs_editor.scss

@@ -21,11 +21,19 @@
     .type-de-champ-container {
       width: 100%;
       border: 1px solid var(--border-default-grey);
+      padding-top: 12px;
+      border-left-width: 4px;
       border-radius: 5px;
-      margin-bottom: $default-padding;
+      margin-bottom: 3 * $default-spacer;
       box-shadow: 0px 2px 4px -4px;
     }
 
+    &.type-header-section {
+      .type-de-champ-container {
+        border-left: 4px solid var(--background-action-high-blue-france);
+      }
+    }
+
     .handle {
       cursor: grab;
 
@@ -49,31 +57,18 @@
       display: none;
     }
 
-    .head {
-      select {
-        margin-bottom: 0px;
-      }
-    }
-
-    &.type-header-section {
-      .head {
-        background-color: var(--background-contrast-blue-cumulus);
-      }
-    }
-
     .flex {
       &.flex-gap {
         column-gap: $default-spacer * 2;
       }
 
       &.section {
-        margin-bottom: 8px;
+        padding: $default-spacer $default-spacer * 2;
-        padding: $default-spacer / 2 $default-spacer * 2;
-      }
 
-      &.head {
+        &.footer {
-        border-bottom: 1px solid var(--border-default-grey);
+          padding: 1.5 * $default-spacer $default-spacer * 2;
-        padding: $default-spacer / 2 $default-spacer; // due to no-outline button horizontal padding, don't add twice the padding so it's aligned with section
+          border-top: 1px solid var(--border-default-grey);
+        }
       }
     }
 

app/components/types_de_champ_editor/champ_component/champ_component.html.haml

@@ -1,25 +1,10 @@
-%li.type-de-champ.flex.column.justify-start.fr-mb-6w{ html_options }
+%li.type-de-champ.flex.column.justify-start.fr-mb-5v{ html_options }
   .type-de-champ-container
-    .flex.justify-between.section.head
-      .position.flex.align-center= (@coordinate.position + 1).to_s
-      %button.fr-btn.fr-btn--tertiary-no-outline.fr-icon-arrow-up-line.move-up{ move_button_options(:up) }
-      %button.fr-btn.fr-btn--tertiary-no-outline.fr-icon-arrow-down-line.move-down{ move_button_options(:down) }
-      = render TypesDeChampEditor::SelectChampPositionComponent.new(revision:, coordinate:)
-
-      .flex.right
-        - if coordinate.used_by_routing_rules?
-          %span
-            utilisé pour
-            = link_to('le routage', admin_procedure_groupe_instructeurs_path(revision.procedure_id, anchor: 'routing-rules'))
-        - else
-          = button_to type_de_champ_path, class: 'fr-btn fr-btn--tertiary-no-outline fr-icon-delete-line', title: "Supprimer le champ", method: :delete, form: { data: { turbo_confirm: 'Êtes vous sûr de vouloir supprimer ce champ ?' } } do
-            %span.sr-only Supprimer
-
     - if @errors.present?
       .types-de-champ-errors
         = @errors
 
-    .flex.justify-start.section
+    .flex.justify-start.section.head
       = form_for(type_de_champ, form_options) do |form|
         .flex.justify-start.flex-gap
           .flex.justify-start.width-33
@@ -132,7 +117,7 @@
               = form.select :character_limit, options_for_character_limit, {}, { id: dom_id(type_de_champ, :character_limit), class: 'fr-select' }
 
     - if type_de_champ.block?
-      .flex.justify-start.section.fr-ml-1w.fr-mb-2w
+      .flex.justify-start.section.fr-ml-1w
         .editor-block.flex-grow.cell
           = render TypesDeChampEditor::BlockComponent.new(block: coordinate, coordinates: coordinate.revision_types_de_champ, upper_coordinates: @upper_coordinates)
           .type-de-champ-add-button{ id: dom_id(coordinate, :type_de_champ_add_button), class: class_names(hidden: !coordinate.empty?) }
@@ -140,5 +125,20 @@
 
     = render(Conditions::ChampsConditionsComponent.new(tdc: type_de_champ, upper_tdcs: @upper_coordinates.map(&:type_de_champ), procedure_id: procedure.id))
 
+    .flex.justify-between.section.footer
+      .position.flex.align-center= (@coordinate.position + 1).to_s
+      %button.fr-btn.fr-btn--tertiary-no-outline.fr-icon-arrow-up-line.move-up{ move_button_options(:up) }
+      %button.fr-btn.fr-btn--tertiary-no-outline.fr-icon-arrow-down-line.move-down{ move_button_options(:down) }
+      = render TypesDeChampEditor::SelectChampPositionComponent.new(revision:, coordinate:)
+
+      .flex.right
+        - if coordinate.used_by_routing_rules?
+          %span
+            utilisé pour
+            = link_to('le routage', admin_procedure_groupe_instructeurs_path(revision.procedure_id, anchor: 'routing-rules'))
+        - else
+          = button_to type_de_champ_path, class: 'fr-btn fr-btn--tertiary-no-outline fr-icon-delete-line', title: "Supprimer le champ", method: :delete, form: { data: { turbo_confirm: 'Êtes vous sûr de vouloir supprimer ce champ ?' } } do
+            %span.sr-only Supprimer
+
   .type-de-champ-add-button{ class: class_names(root: !coordinate.child?, flex: true) }
     = render TypesDeChampEditor::AddChampButtonComponent.new(revision: coordinate.revision, parent: coordinate&.parent, is_annotation: coordinate.private?, after_stable_id: type_de_champ.stable_id)

app/components/types_de_champ_editor/select_champ_position_component.rb

@@ -5,7 +5,7 @@ class TypesDeChampEditor::SelectChampPositionComponent < ApplicationComponent
   end
 
   def options
-    [["Sélectionner une option", @coordinate.stable_id]]
+    [["Déplacer le champ après", @coordinate.stable_id]]
   end
 
   def describedby_id

app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml

@@ -1,3 +1,2 @@
 = form_with(url: move_and_morph_admin_procedure_type_de_champ_path(@coordinate.revision.procedure, @coordinate.type_de_champ.stable_id), class: 'fr-ml-3w flex', method: :patch, data: { turbo: true }) do |f|
-  = label_tag :target_stable_id, "Déplacer le champ après ", for: describedby_id, class: 'flex align-center flex-no-shrink fr-mr-3w fr-label'
   = select_tag :target_stable_id, options_for_select(options), id: describedby_id, class: 'fr-select', data: { 'select-champ-position-template-target': 'select', selected: @coordinate.stable_id }