Merge pull request #10356 from govpf/feature/better_place_for_the_move_champ_after_in_champ_editor

ETQ Administrateur les actions sur un champ dans l'editeur (déplacement, suppression,...) sont rassemblés en bas de chaque champ
This commit is contained in:
Lisa Durand 2024-05-21 09:11:46 +00:00 committed by GitHub
commit 1ff641ed34
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 33 additions and 39 deletions

View file

@ -21,11 +21,19 @@
.type-de-champ-container { .type-de-champ-container {
width: 100%; width: 100%;
border: 1px solid var(--border-default-grey); border: 1px solid var(--border-default-grey);
padding-top: 12px;
border-left-width: 4px;
border-radius: 5px; border-radius: 5px;
margin-bottom: $default-padding; margin-bottom: 3 * $default-spacer;
box-shadow: 0px 2px 4px -4px; box-shadow: 0px 2px 4px -4px;
} }
&.type-header-section {
.type-de-champ-container {
border-left: 4px solid var(--background-action-high-blue-france);
}
}
.handle { .handle {
cursor: grab; cursor: grab;
@ -49,31 +57,18 @@
display: none; display: none;
} }
.head {
select {
margin-bottom: 0px;
}
}
&.type-header-section {
.head {
background-color: var(--background-contrast-blue-cumulus);
}
}
.flex { .flex {
&.flex-gap { &.flex-gap {
column-gap: $default-spacer * 2; column-gap: $default-spacer * 2;
} }
&.section { &.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);
}
} }
} }

View file

@ -1,24 +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 .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) }
.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? - if @errors.present?
.types-de-champ-errors .types-de-champ-errors
= @errors = @errors
.flex.justify-start.section .flex.justify-start.section.head
= form_for(type_de_champ, form_options) do |form| = form_for(type_de_champ, form_options) do |form|
.flex.justify-start.flex-gap .flex.justify-start.flex-gap
.flex.justify-start.width-33 .flex.justify-start.width-33
@ -131,7 +117,7 @@
= form.select :character_limit, options_for_character_limit, {}, { id: dom_id(type_de_champ, :character_limit), class: 'fr-select' } = form.select :character_limit, options_for_character_limit, {}, { id: dom_id(type_de_champ, :character_limit), class: 'fr-select' }
- if type_de_champ.block? - 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 .editor-block.flex-grow.cell
= render TypesDeChampEditor::BlockComponent.new(block: coordinate, coordinates: coordinate.revision_types_de_champ, upper_coordinates: @upper_coordinates) = 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?) } .type-de-champ-add-button{ id: dom_id(coordinate, :type_de_champ_add_button), class: class_names(hidden: !coordinate.empty?) }
@ -139,6 +125,20 @@
= render(Conditions::ChampsConditionsComponent.new(tdc: type_de_champ, upper_tdcs: @upper_coordinates.map(&:type_de_champ), procedure_id: procedure.id)) = 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) } .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) = render TypesDeChampEditor::AddChampButtonComponent.new(revision: coordinate.revision, parent: coordinate&.parent, is_annotation: coordinate.private?, after_stable_id: type_de_champ.stable_id)
= render TypesDeChampEditor::SelectChampPositionComponent.new(revision:, coordinate:)

View file

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

View file

@ -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| = 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'
= 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 } = 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 }