From 07be63b48ea1006812c4bd70f6a5dd9152664f0f Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 24 Jul 2018 17:43:07 +0200 Subject: [PATCH 1/4] patron: add missing button styles --- app/views/root/patron.html.haml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index e2d3e5ad7..5b3405a76 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -49,7 +49,6 @@ = link_to ".button.secondary", "#", class: "button secondary" - = link_to ".button.accepted", "#", class: "button accepted" = link_to "#", class: "button" do %span.icon.follow @@ -58,6 +57,13 @@ = link_to "#", class: "button icon-only" do %span.icon.follow + %p + = link_to ".button.accepted", "#", class: "button accepted" + + = link_to ".button.refused", "#", class: "button refused" + + = link_to ".button.without-continuation", "#", class: "button without-continuation" + %p = link_to ".button.large", "#", class: "button large" From 768537fedc7602516276ede27ee2e0a30b4c0e7d Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 24 Jul 2018 18:25:10 +0200 Subject: [PATCH 2/4] buttons: center text also on link styled as buttons --- app/assets/stylesheets/new_design/buttons.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/new_design/buttons.scss b/app/assets/stylesheets/new_design/buttons.scss index 78be9682c..ca4d53c6b 100644 --- a/app/assets/stylesheets/new_design/buttons.scss +++ b/app/assets/stylesheets/new_design/buttons.scss @@ -11,6 +11,7 @@ background-color: #FFFFFF; color: $black; cursor: pointer; + text-align: center; -webkit-appearance: none; &:hover { From 0f1811dd4ed206c7fec7790f8e023f35dd90bce0 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 24 Jul 2018 15:43:28 +0000 Subject: [PATCH 3/4] dossier: add an button to delete a brouillon --- app/assets/stylesheets/new_design/buttons.scss | 12 ++++++++++++ app/assets/stylesheets/new_design/forms.scss | 3 +++ app/views/root/patron.html.haml | 1 + app/views/shared/dossiers/_edit.html.haml | 9 ++++++++- spec/features/new_user/dossier_spec.rb | 14 ++++++++++++++ 5 files changed, 38 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/new_design/buttons.scss b/app/assets/stylesheets/new_design/buttons.scss index ca4d53c6b..1fe64d228 100644 --- a/app/assets/stylesheets/new_design/buttons.scss +++ b/app/assets/stylesheets/new_design/buttons.scss @@ -45,6 +45,18 @@ } } + &.danger { + color: $black; + border-color: $border-grey; + background-color: #FFFFFF; + + &:hover { + color: #FFFFFF; + border-color: $medium-red; + background-color: $medium-red; + } + } + &.accepted { color: #FFFFFF; border-color: $green; diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index ba7b16d39..470e78524 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -288,6 +288,9 @@ .button { margin-bottom: 0; } + .button.danger { + float:left; + } } .inline-champ { diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index 5b3405a76..be5252fce 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -49,6 +49,7 @@ = link_to ".button.secondary", "#", class: "button secondary" + = link_to ".button.danger", "#", class: "button danger" = link_to "#", class: "button" do %span.icon.follow diff --git a/app/views/shared/dossiers/_edit.html.haml b/app/views/shared/dossiers/_edit.html.haml index c975b16d2..eaf3e6c18 100644 --- a/app/views/shared/dossiers/_edit.html.haml +++ b/app/views/shared/dossiers/_edit.html.haml @@ -62,9 +62,16 @@ = hidden_field_tag 'submit_action', 'draft' - if dossier.brouillon? + - if current_user.owns?(dossier) + = link_to ask_deletion_dossier_path(dossier), + method: :post, + class: 'button danger', + data: { confirm: "En continuant, vous allez supprimer ce dossier ainsi que les informations qu’il contient. Toute suppression entraine l’annulation de la démarche en cours.\n\nConfirmer la suppression ?" } do + Supprimer le brouillon + = f.button 'Enregistrer le brouillon', formnovalidate: true, - class: 'button send', + class: 'button send secondary', data: { action: 'draft', disable_with: 'Envoi...' } - if current_user.owns?(dossier) && dossier.can_transition_to_en_construction? diff --git a/spec/features/new_user/dossier_spec.rb b/spec/features/new_user/dossier_spec.rb index 26acaa12d..4b8100e65 100644 --- a/spec/features/new_user/dossier_spec.rb +++ b/spec/features/new_user/dossier_spec.rb @@ -112,6 +112,20 @@ feature 'The user' do expect(page).to have_current_path(merci_dossier_path(user_dossier)) end + scenario 'delete a draft', js: true do + log_in(user.email, password, simple_procedure) + fill_individual + + page.accept_alert('Confirmer la suppression ?') do + click_on 'Supprimer le brouillon' + end + + expect(page).to have_current_path(dossiers_path) + expect(page).to have_text('Votre dossier a bien été supprimé') + expect(page).not_to have_text(user_dossier.procedure.libelle) + expect(user_dossier.reload.hidden_at).to be_present + end + private def log_in(email, password, procedure) From 547c36243d09aa26ffceab3b212df552c9ace403 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 24 Jul 2018 18:10:00 +0200 Subject: [PATCH 4/4] dossier: add responsive layout for action buttons --- app/assets/stylesheets/new_design/forms.scss | 36 +++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index 470e78524..5322c2f90 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -281,15 +281,43 @@ } .send-wrapper { - text-align: right; - margin-top: 2 * $default-padding; + display: flex; + width: 100%; + justify-content: flex-end; + margin-top: $default-padding; margin-bottom: 2 * $default-padding; .button { + margin-top: $default-padding; margin-bottom: 0; } - .button.danger { - float:left; + + // Wide layout: align buttons on a single row + @media (min-width: 550px) { + flex-direction: row; + + .button:not(:first-of-type) { + margin-left: $default-spacer; + } + + .button.danger { + margin-right: auto; + } + } + + // Narrow layout: stack buttons vertically + @media (max-width: 550px) { + flex-direction: column-reverse; + align-items: center; + + .button, + .button.danger { + width: 100%; + max-width: 350px; + line-height: 30px; + margin-left: none; + margin-right: none; + } } }