From 2c73aa64a2ca2cc5e2af084ece02c1bf47260425 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Thu, 12 Oct 2023 16:04:58 +0200 Subject: [PATCH] remove button from header for champs and annotations views & harmonize footer --- app/assets/stylesheets/forms.scss | 11 ++++----- .../stylesheets/procedure_champs_editor.scss | 12 ---------- .../editor_component.html.haml | 14 +++++------ .../administrateurs/_breadcrumbs.html.haml | 5 ---- .../procedures/annotations.html.haml | 13 ++++++++-- .../procedures/champs.html.haml | 14 ++++++++++- .../administrateurs/procedures/edit.html.haml | 9 ++++--- .../administrateurs/procedures/new.html.haml | 9 ++++--- .../administrateurs/services/_form.html.haml | 10 +++++--- .../contact_informations/_form.html.haml | 24 ++++++++++++------- .../locales/views/layouts/_breadcrumb.en.yml | 1 + .../locales/views/layouts/_breadcrumb.fr.yml | 1 + 12 files changed, 71 insertions(+), 52 deletions(-) diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 49a2185f6..1bb3be8bc 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -628,14 +628,13 @@ textarea::placeholder { color: $dark-grey; } -.sticky-action-footer { +.fixed-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 + position: fixed; bottom: 0; - padding: $default-padding 0; + left: 0; + right: 0; + padding-top: $default-padding; background-color: $white; z-index: 2; } diff --git a/app/assets/stylesheets/procedure_champs_editor.scss b/app/assets/stylesheets/procedure_champs_editor.scss index 0b254dde1..6fff56e38 100644 --- a/app/assets/stylesheets/procedure_champs_editor.scss +++ b/app/assets/stylesheets/procedure_champs_editor.scss @@ -4,7 +4,6 @@ .types-de-champ-editor { > .types-de-champ-block { - padding-bottom: 50px; padding-left: 0; .types-de-champ-errors { @@ -76,10 +75,6 @@ display: none; } - &.last .type-de-champ-add-button.root { - display: none; - } - .head { select { margin-bottom: 0px; @@ -125,13 +120,6 @@ } } - .bottom-container { - position: fixed; - bottom: 0; - left: 0; - right: 0; - } - .buttons { display: flex; justify-content: space-between; diff --git a/app/components/types_de_champ_editor/editor_component/editor_component.html.haml b/app/components/types_de_champ_editor/editor_component/editor_component.html.haml index 3d5f644f1..24db548e2 100644 --- a/app/components/types_de_champ_editor/editor_component/editor_component.html.haml +++ b/app/components/types_de_champ_editor/editor_component/editor_component.html.haml @@ -1,8 +1,6 @@ -.types-de-champ-editor.editor-root{ 'data-turbo': 'true', id: dom_id(@revision, :types_de_champ_editor) } - = render TypesDeChampEditor::ErrorsSummary.new(revision: @revision) - = render TypesDeChampEditor::BlockComponent.new(block: @revision, coordinates: coordinates) - .bottom-container - .fr-container - .buttons - = render TypesDeChampEditor::AddChampButtonComponent.new(revision: @revision, is_annotation: annotations?) - = render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @revision, is_annotation: annotations?) +.fr-container.fr-pb-12w + .types-de-champ-editor.editor-root{ 'data-turbo': 'true', id: dom_id(@revision, :types_de_champ_editor) } + = render TypesDeChampEditor::ErrorsSummary.new(revision: @revision) + = render TypesDeChampEditor::BlockComponent.new(block: @revision, coordinates: coordinates) + - if coordinates.empty? + = render TypesDeChampEditor::AddChampButtonComponent.new(revision: @revision, is_annotation: annotations?) diff --git a/app/views/administrateurs/_breadcrumbs.html.haml b/app/views/administrateurs/_breadcrumbs.html.haml index a7be444e9..95c4295ac 100644 --- a/app/views/administrateurs/_breadcrumbs.html.haml +++ b/app/views/administrateurs/_breadcrumbs.html.haml @@ -14,11 +14,6 @@ - else %li= link_to step[0], step[1], class: 'fr-breadcrumb__link' - - if defined?(preview) && preview - .mb-2 - = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary' - = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'fr-btn fr-ml-2w fr-btn--icon-right fr-icon-arrow-right-fill' - - if defined?(metadatas) .metadatas.pb-3 %h1.fr-h6.fr-mb-1w diff --git a/app/views/administrateurs/procedures/annotations.html.haml b/app/views/administrateurs/procedures/annotations.html.haml index 5b70472c5..42d85e278 100644 --- a/app/views/administrateurs/procedures/annotations.html.haml +++ b/app/views/administrateurs/procedures/annotations.html.haml @@ -3,8 +3,17 @@ [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)], ['Configuration des annotations privées']], preview: true } -.container +.fr-container %h1 Configuration des annotations privées %br = render NestedForms::FormOwnerComponent.new - = render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision, is_annotation: true) += render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision, is_annotation: true) + +.fixed-footer + .fr-container + %ul.fr-btns-group.fr-btns-group--inline-md + %li + = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'fr-btn' + - if @procedure.draft_revision.revision_types_de_champ_private.count > 0 + %li + = link_to t('preview_annotations', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure, params: {tab: 'annotations-privees'}), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary' diff --git a/app/views/administrateurs/procedures/champs.html.haml b/app/views/administrateurs/procedures/champs.html.haml index 5065ff8a1..5a204c22d 100644 --- a/app/views/administrateurs/procedures/champs.html.haml +++ b/app/views/administrateurs/procedures/champs.html.haml @@ -6,4 +6,16 @@ .fr-container %h1 Configuration des champs = render NestedForms::FormOwnerComponent.new - = render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision) += render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision) + +.fixed-footer + .fr-container + .flex + %ul.fr-btns-group.fr-btns-group--inline-md + %li + = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'fr-btn' + - if @procedure.draft_revision.revision_types_de_champ_public.count > 0 + %li + = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary' + .fr-ml-auto + = render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @procedure.draft_revision, is_annotation: false) diff --git a/app/views/administrateurs/procedures/edit.html.haml b/app/views/administrateurs/procedures/edit.html.haml index 843d5ed51..8413f602d 100644 --- a/app/views/administrateurs/procedures/edit.html.haml +++ b/app/views/administrateurs/procedures/edit.html.haml @@ -16,9 +16,12 @@ = render partial: 'administrateurs/procedures/informations', locals: { f: f } - .sticky-action-footer + .fixed-footer .fr-container .fr-grid-row .fr-col-12.fr-col-offset-md-2.fr-col-md-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 ?'} + %ul.fr-btns-group.fr-btns-group--inline-md + %li + = f.button 'Enregistrer', class: 'fr-btn' + %li + = 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 a0e49e8e0..9203efa27 100644 --- a/app/views/administrateurs/procedures/new.html.haml +++ b/app/views/administrateurs/procedures/new.html.haml @@ -15,9 +15,12 @@ = render partial: 'administrateurs/procedures/informations', locals: { f: f } - .sticky-action-footer + .fixed-footer .fr-container .fr-grid-row .fr-col-12.fr-col-offset-md-2.fr-col-md-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 ?'} + %ul.fr-btns-group.fr-btns-group--inline-md + %li + = f.button 'Créer la démarche', class: 'fr-btn' + %li + = 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 62b058522..870fdb109 100644 --- a/app/views/administrateurs/services/_form.html.haml +++ b/app/views/administrateurs/services/_form.html.haml @@ -34,6 +34,10 @@ - if procedure_id.present? = hidden_field_tag :procedure_id, procedure_id - .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" + .fixed-footer + .fr-container + %ul.fr-btns-group.fr-btns-group--inline-md + %li + = f.submit "Enregistrer", class: "fr-btn" + %li + = link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary" diff --git a/app/views/instructeurs/contact_informations/_form.html.haml b/app/views/instructeurs/contact_informations/_form.html.haml index c08656e14..bce1ecec3 100644 --- a/app/views/instructeurs/contact_informations/_form.html.haml +++ b/app/views/instructeurs/contact_informations/_form.html.haml @@ -28,12 +28,18 @@ - if procedure_id.present? = hidden_field_tag :procedure_id, procedure_id - .sticky-action-footer - = f.submit "Enregistrer", class: "fr-btn fr-mr-2w" - = link_to "Annuler", instructeur_groupe_path(@groupe_instructeur, procedure_id: procedure_id), class: "fr-btn fr-btn--secondary" - - if [ "edit", "update"].include? params[:action] - = link_to 'Supprimer', - instructeur_groupe_contact_information_path(procedure_id: @procedure.id, groupe_id: @groupe_instructeur.id), - method: :delete, - data: { confirm: "Confirmez vous la suppression de ces informations de contact ?" }, - class: 'fr-btn fr-btn--secondary' + .fixed-footer + .fr-container + %ul.fr-btns-group.fr-btns-group--inline-md + %li + = f.submit "Enregistrer", class: "fr-btn" + %li + = link_to "Annuler", instructeur_groupe_path(@groupe_instructeur, procedure_id: procedure_id), class: "fr-btn fr-btn--secondary" + + - if [ "edit", "update"].include? params[:action] + %li + = link_to 'Supprimer', + instructeur_groupe_contact_information_path(procedure_id: @procedure.id, groupe_id: @groupe_instructeur.id), + method: :delete, + data: { confirm: "Confirmez vous la suppression de ces informations de contact ?" }, + class: 'fr-btn fr-btn--secondary' diff --git a/config/locales/views/layouts/_breadcrumb.en.yml b/config/locales/views/layouts/_breadcrumb.en.yml index 29abb6edd..bc843b902 100644 --- a/config/locales/views/layouts/_breadcrumb.en.yml +++ b/config/locales/views/layouts/_breadcrumb.en.yml @@ -5,6 +5,7 @@ en: you_are_here: "You are here" show: Show breadcrumb preview: "Preview the form" + preview_annotations: "Preview annotations" continue: "Continue" continue_title: "You can comeback using this link" since: "since %{date}" diff --git a/config/locales/views/layouts/_breadcrumb.fr.yml b/config/locales/views/layouts/_breadcrumb.fr.yml index 46674f182..c0c18195a 100644 --- a/config/locales/views/layouts/_breadcrumb.fr.yml +++ b/config/locales/views/layouts/_breadcrumb.fr.yml @@ -5,6 +5,7 @@ fr: you_are_here: "Vous êtes ici" show: "Voir le fil d’Ariane" preview: "Prévisualiser le formulaire" + preview_annotations: "Prévisualiser les annotations" continue: "Continuer" continue_title: "Vous pourrez revenir ici par la suite" since: "depuis le %{date}"