DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Champ editor: Move champ header to footer

Browse source
This commit is contained in:
Christian Lautier 2024-04-23 09:39:33 -10:00
parent 55a4c73f4a
commit 602cf92901
4 changed files with 33 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/assets/stylesheets/procedure_champs_editor.scss
View file

@ -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 / 2 $default-spacer * 2;
}
padding: $default-spacer $default-spacer * 2;
&.head {
border-bottom: 1px solid var(--border-default-grey);
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
&.footer {
padding: 1.5 * $default-spacer $default-spacer * 2;
border-top: 1px solid var(--border-default-grey);
}
}
}

36
app/components/types_de_champ_editor/champ_component/champ_component.html.haml
View file

@ -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)

2
app/components/types_de_champ_editor/select_champ_position_component.rb
View file

@ -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

1
app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml
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|
= 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 }