From c6f13f63b5f4ac0b999e190e1b749baca8c638f1 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Wed, 31 May 2023 11:33:59 +0200 Subject: [PATCH] remove previsualisation from procedure creation form --- app/assets/stylesheets/forms.scss | 20 +++++------ app/assets/stylesheets/procedure_form.scss | 2 -- app/javascript/entrypoints/application.js | 1 - app/javascript/new_design/procedure-form.js | 26 -------------- .../procedures/_informations.html.haml | 8 +++-- .../administrateurs/procedures/edit.html.haml | 34 ++++++++---------- .../administrateurs/procedures/new.html.haml | 35 ++++++++----------- .../administrateurs/services/_form.html.haml | 5 ++- .../shared/_procedure_description.html.haml | 2 +- 9 files changed, 47 insertions(+), 86 deletions(-) delete mode 100644 app/javascript/new_design/procedure-form.js diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 2974a2fae..681f5e1c7 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -3,15 +3,6 @@ @import "placeholders"; .form { - h1 { - text-align: center; - margin-bottom: 20px; - - @media (max-width: $two-columns-breakpoint) { - font-size: 26px; - } - } - hr { width: 100%; height: 0; @@ -649,6 +640,13 @@ textarea::placeholder { color: $dark-grey; } -.send-wrapper--with-border-top { - border-top: 2px solid rgba(0, 0, 145, 1); +.sticky-action-footer { + border-top: 2px solid $blue-france-500; + position: sticky; + // scss-lint:disable VendorPrefix + position: -webkit-sticky; // This is needed on Safari (tested on 12.1) + // scss-lint:enable VendorPrefix + bottom: 0; + padding: $default-padding 0; + background-color: $white; } diff --git a/app/assets/stylesheets/procedure_form.scss b/app/assets/stylesheets/procedure_form.scss index 54100eb45..b4d64c839 100644 --- a/app/assets/stylesheets/procedure_form.scss +++ b/app/assets/stylesheets/procedure_form.scss @@ -69,8 +69,6 @@ .procedure-form__actions { display: flex; - margin-left: -$default-padding; - margin-right: -$default-padding; padding: $default-spacer $default-padding; background: $light-grey; border-top: 1px solid $border-grey; diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index f8eb08b1b..d347c7eb4 100644 --- a/app/javascript/entrypoints/application.js +++ b/app/javascript/entrypoints/application.js @@ -12,7 +12,6 @@ import '../shared/toggle-target'; import { registerControllers } from '../shared/stimulus-loader'; import '../new_design/form-validation'; -import '../new_design/procedure-form'; import { toggleCondidentielExplanation } from '../new_design/avis'; import { diff --git a/app/javascript/new_design/procedure-form.js b/app/javascript/new_design/procedure-form.js deleted file mode 100644 index 153b806ce..000000000 --- a/app/javascript/new_design/procedure-form.js +++ /dev/null @@ -1,26 +0,0 @@ -import { delegate } from '@utils'; - -function syncInputToElement(fromSelector, toSelector) { - const fromElement = document.querySelector(fromSelector); - const toElement = document.querySelector(toSelector); - if (toElement && fromElement) { - toElement.innerText = fromElement.value; - } -} - -function syncFormToPreview() { - syncInputToElement('#procedure_libelle', '.procedure-title'); - syncInputToElement('#procedure_description', '.js_description p'); - syncInputToElement( - '#procedure_description_target_audience', - '.js_description_target_audience p' - ); -} - -delegate('input', '.procedure-form #procedure_libelle', syncFormToPreview); -delegate('input', '.procedure-form #procedure_description', syncFormToPreview); -delegate( - 'input', - '.procedure-form #procedure_description_target_audience', - syncFormToPreview -); diff --git a/app/views/administrateurs/procedures/_informations.html.haml b/app/views/administrateurs/procedures/_informations.html.haml index ddaed9ad1..52d8add12 100644 --- a/app/views/administrateurs/procedures/_informations.html.haml +++ b/app/views/administrateurs/procedures/_informations.html.haml @@ -21,7 +21,9 @@ = t(:notice, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds]) - if f.object.duree_conservation_dossiers_dans_ds.to_i < Procedure::NEW_MAX_DUREE_CONSERVATION = t(:new_duration_constraint, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds], new_duration_in_month: f.object.max_duree_conservation_dossiers_dans_ds) -= f.number_field :duree_conservation_dossiers_dans_ds, { class: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds } + +.fr-input-group + = f.number_field :duree_conservation_dossiers_dans_ds, { class: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds } - if @procedure.created_at.present? = render Dsfr::InputComponent.new(form: f, attribute: :lien_site_web, input_type: :text_field, opts: {}, required: false) @@ -89,11 +91,11 @@ %p.notice En choisissant cette option, l’usager devra renseigner son n° SIRET.
Grâce à l’API Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées. - %p.explication + %p Si votre démarche s’adresse indifféremment à une personne morale ou un particulier, choisissez l'option « Particuliers ». Vous pourrez ajouter un champ SIRET directement dans le formulaire. %h3.header-subsection Ajouter des tags -%p.explication Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs. +%p Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs. = hidden_field_tag 'procedure[tags]', JSON.generate(@procedure.tags) = react_component("ComboMultiple", id: "procedure_tags_combo", diff --git a/app/views/administrateurs/procedures/edit.html.haml b/app/views/administrateurs/procedures/edit.html.haml index 7571094af..7c03be268 100644 --- a/app/views/administrateurs/procedures/edit.html.haml +++ b/app/views/administrateurs/procedures/edit.html.haml @@ -4,25 +4,21 @@ locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)], [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)], ['Description']] } -.procedure-form - .procedure-form__columns.container - = render NestedForms::FormOwnerComponent.new - = form_for @procedure, - url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }), - html: { class: 'form procedure-form__column--form', - multipart: true } do |f| - %h1.page-title Description += render NestedForms::FormOwnerComponent.new += form_for @procedure, + url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }), + html: { class: 'form', multipart: true } do |f| + .fr-container + .fr-grid-row + .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8 + %h1.fr-h2 Description - = render partial: 'administrateurs/procedures/informations', locals: { f: f } + = render partial: 'administrateurs/procedures/informations', locals: { f: f } - .procedure-form__actions.sticky--bottom - .actions-right - = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'} - = f.button 'Enregistrer', class: 'fr-btn' - - .procedure-form__column--preview - .procedure-form__preview.sticky--top - %h3.procedure-form__preview-title Aperçu - .procedure-preview - = render partial: 'shared/procedure_description', locals: { procedure: @procedure } + .sticky-action-footer + .fr-container + .fr-grid-row + .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8 + = f.button 'Enregistrer', class: 'fr-btn fr-mr-2w' + = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'} diff --git a/app/views/administrateurs/procedures/new.html.haml b/app/views/administrateurs/procedures/new.html.haml index 99b375169..120a2c45e 100644 --- a/app/views/administrateurs/procedures/new.html.haml +++ b/app/views/administrateurs/procedures/new.html.haml @@ -4,25 +4,20 @@ locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)], ['Nouvelle']] } -.procedure-form - .procedure-form__columns.container - = render NestedForms::FormOwnerComponent.new - = form_for @procedure, - url: url_for({ controller: 'administrateurs/procedures', action: :create, id: @procedure.id }), - html: { class: 'form procedure-form__column--form', multipart: true } do |f| += render NestedForms::FormOwnerComponent.new += form_for @procedure, + url: url_for({ controller: 'administrateurs/procedures', action: :create, id: @procedure.id }), + html: { class: 'form', multipart: true } do |f| + .fr-container + .fr-grid-row + .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8 + %h1.fr-h2 Nouvelle démarche - %h1.page-title Nouvelle démarche + = render partial: 'administrateurs/procedures/informations', locals: { f: f } - - = render partial: 'administrateurs/procedures/informations', locals: { f: f } - - .procedure-form__actions.sticky--bottom - .actions-right - = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'} - = f.button 'Créer la démarche', class: 'fr-btn' - - .procedure-form__column--preview - .procedure-form__preview.sticky--top - %h3.procedure-form__preview-title Aperçu - .procedure-preview - = render partial: 'shared/procedure_description', locals: { procedure: @procedure } + .sticky-action-footer + .fr-container + .fr-grid-row + .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8 + = f.button 'Créer la démarche', class: 'fr-btn fr-mr-2w' + = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'} diff --git a/app/views/administrateurs/services/_form.html.haml b/app/views/administrateurs/services/_form.html.haml index fb9b1793c..72e6c33ef 100644 --- a/app/views/administrateurs/services/_form.html.haml +++ b/app/views/administrateurs/services/_form.html.haml @@ -71,7 +71,6 @@ - if procedure_id.present? = hidden_field_tag :procedure_id, procedure_id - .send-wrapper.justify-content--space-between.send-wrapper--with-border-top.my-0.py-3 + .sticky-action-footer + = f.submit "Enregistrer", class: "fr-btn fr-mr-2w" = link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary" - = f.submit "Enregistrer", class: "fr-btn" - diff --git a/app/views/shared/_procedure_description.html.haml b/app/views/shared/_procedure_description.html.haml index 0a3f2dc7f..a1ba00f14 100644 --- a/app/views/shared/_procedure_description.html.haml +++ b/app/views/shared/_procedure_description.html.haml @@ -5,7 +5,7 @@ = image_tag procedure.logo_url, alt: procedure_logo_alt - if procedure.euro_flag = image_tag("flag_of_europe.svg", id: 'euro_flag', class: (!procedure.euro_flag ? "hidden" : "")) -%h1.procedure-title.fr-h2 +%h1.fr-h2 = procedure.libelle - if procedure.persisted? && procedure.estimated_duration_visible?