From 592f040ada2334ef33dc8b44e9220c3d9b23eb35 Mon Sep 17 00:00:00 2001 From: Christian Lautier <15379878+maatinito@users.noreply.github.com> Date: Thu, 18 Apr 2024 08:58:33 -1000 Subject: [PATCH 1/3] Procedure champ editor: place the 'Move champ after' selection in the champ's header. --- app/assets/stylesheets/procedure_champs_editor.scss | 1 + .../champ_component/champ_component.html.haml | 2 +- .../select_champ_position_component.html.haml | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/procedure_champs_editor.scss b/app/assets/stylesheets/procedure_champs_editor.scss index 6f1db8ac1..b12f0ef46 100644 --- a/app/assets/stylesheets/procedure_champs_editor.scss +++ b/app/assets/stylesheets/procedure_champs_editor.scss @@ -52,6 +52,7 @@ .head { select { margin-bottom: 0px; + font-size: smaller; } } diff --git a/app/components/types_de_champ_editor/champ_component/champ_component.html.haml b/app/components/types_de_champ_editor/champ_component/champ_component.html.haml index c7ce05900..26f4c5882 100644 --- a/app/components/types_de_champ_editor/champ_component/champ_component.html.haml +++ b/app/components/types_de_champ_editor/champ_component/champ_component.html.haml @@ -4,6 +4,7 @@ .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? @@ -141,4 +142,3 @@ .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::SelectChampPositionComponent.new(revision:, coordinate:) diff --git a/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml b/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml index c51b1d287..e997bc45c 100644 --- a/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml +++ b/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml @@ -1,3 +1,3 @@ = 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' + = 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-hint-text' = 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 } From 55a4c73f4a9bb96e4a7258ae30e497cbc48325c2 Mon Sep 17 00:00:00 2001 From: Christian Lautier <15379878+maatinito@users.noreply.github.com> Date: Mon, 22 Apr 2024 07:52:37 -1000 Subject: [PATCH 2/3] Stick to DSFR design. --- app/assets/stylesheets/procedure_champs_editor.scss | 1 - .../select_champ_position_component.html.haml | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/stylesheets/procedure_champs_editor.scss b/app/assets/stylesheets/procedure_champs_editor.scss index b12f0ef46..6f1db8ac1 100644 --- a/app/assets/stylesheets/procedure_champs_editor.scss +++ b/app/assets/stylesheets/procedure_champs_editor.scss @@ -52,7 +52,6 @@ .head { select { margin-bottom: 0px; - font-size: smaller; } } diff --git a/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml b/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml index e997bc45c..0c7f0314a 100644 --- a/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml +++ b/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml @@ -1,3 +1,3 @@ = 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-hint-text' + = 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 } From 602cf9290148e6cfafd20dd823e1f9889b33b249 Mon Sep 17 00:00:00 2001 From: Christian Lautier <15379878+maatinito@users.noreply.github.com> Date: Tue, 23 Apr 2024 09:39:33 -1000 Subject: [PATCH 3/3] Champ editor: Move champ header to footer --- .../stylesheets/procedure_champs_editor.scss | 33 ++++++++--------- .../champ_component/champ_component.html.haml | 36 +++++++++---------- .../select_champ_position_component.rb | 2 +- .../select_champ_position_component.html.haml | 1 - 4 files changed, 33 insertions(+), 39 deletions(-) diff --git a/app/assets/stylesheets/procedure_champs_editor.scss b/app/assets/stylesheets/procedure_champs_editor.scss index 6f1db8ac1..0423a6faf 100644 --- a/app/assets/stylesheets/procedure_champs_editor.scss +++ b/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 / 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); + } } } diff --git a/app/components/types_de_champ_editor/champ_component/champ_component.html.haml b/app/components/types_de_champ_editor/champ_component/champ_component.html.haml index 26f4c5882..980bd064c 100644 --- a/app/components/types_de_champ_editor/champ_component/champ_component.html.haml +++ b/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) diff --git a/app/components/types_de_champ_editor/select_champ_position_component.rb b/app/components/types_de_champ_editor/select_champ_position_component.rb index 22b06c806..898c48556 100644 --- a/app/components/types_de_champ_editor/select_champ_position_component.rb +++ b/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 diff --git a/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml b/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml index 0c7f0314a..41a651644 100644 --- a/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml +++ b/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 }