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:
commit
1ff641ed34
4 changed files with 33 additions and 39 deletions
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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:)
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 }
|
||||||
|
|
Loading…
Reference in a new issue