From 6d26024aa1efab4554a4089d265a9f10ee56973a Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 9 Jul 2018 12:54:58 +0200 Subject: [PATCH 1/6] patron: add missing icons --- app/assets/stylesheets/new_design/icons.scss | 24 ++++++++++++++++++++ app/views/root/patron.html.haml | 6 +++++ 2 files changed, 30 insertions(+) diff --git a/app/assets/stylesheets/new_design/icons.scss b/app/assets/stylesheets/new_design/icons.scss index 0dfbb1ec5..dca469649 100644 --- a/app/assets/stylesheets/new_design/icons.scss +++ b/app/assets/stylesheets/new_design/icons.scss @@ -60,4 +60,28 @@ &.printer { background-image: image-url("icons/printer.svg"); } + + &.account { + background-image: image-url("icons/account-circle.svg"); + } + + &.person { + background-image: image-url("icons/blue-person.svg"); + } + + &.super-admin { + background-image: image-url("icons/super-admin.svg"); + } + + &.mail { + background-image: image-url("icons/mail.svg"); + } + + &.search { + background-image: image-url("icons/search-blue.svg"); + } + + &.sign-out { + background-image: image-url("icons/sign-out.svg"); + } } diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index c40b7bd4c..90466b38a 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -16,6 +16,12 @@ %span.icon.attachment %span.icon.lock %span.icon.printer + %span.icon.account + %span.icon.person + %span.icon.super-admin + %span.icon.mail + %span.icon.search + %span.icon.sign-out %h1 Formulaires From defee1d2d5a4a985bd1505464b2acdf3936aed8a Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 9 Jul 2018 13:55:58 +0000 Subject: [PATCH 2/6] tests: refactor modifier.html.haml_spec.rb to use "subject" --- .../dossiers/modifier.html.haml_spec.rb | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/spec/views/new_user/dossiers/modifier.html.haml_spec.rb b/spec/views/new_user/dossiers/modifier.html.haml_spec.rb index d6ee1e0e4..3fbfa3d1f 100644 --- a/spec/views/new_user/dossiers/modifier.html.haml_spec.rb +++ b/spec/views/new_user/dossiers/modifier.html.haml_spec.rb @@ -1,7 +1,8 @@ require 'spec_helper' describe 'new_user/dossiers/modifier.html.haml', type: :view do - let(:dossier) { create(:dossier, :with_entreprise, :with_service, state: 'brouillon', procedure: create(:procedure, :with_api_carto, :with_two_type_de_piece_justificative, for_individual: true)) } + let(:procedure) { create(:procedure, :with_api_carto, :with_two_type_de_piece_justificative, :with_notice, for_individual: true) } + let(:dossier) { create(:dossier, :with_entreprise, :with_service, state: 'brouillon', procedure: procedure) } let(:footer) { view.content_for(:footer) } before do @@ -9,21 +10,17 @@ describe 'new_user/dossiers/modifier.html.haml', type: :view do assign(:dossier, dossier) end - context 'test de composition de la page' do - before do - render - end + subject! { render } - it 'affiche le libellé de la procédure' do - expect(rendered).to have_text(dossier.procedure.libelle) - end + it 'affiche le libellé de la procédure' do + expect(rendered).to have_text(dossier.procedure.libelle) + end - it 'affiche les boutons de validation' do - expect(rendered).to have_selector('.send-wrapper') - end + it 'affiche les boutons de validation' do + expect(rendered).to have_selector('.send-wrapper') + end - it 'prépare le footer' do - expect(footer).to have_selector('footer') - end + it 'prépare le footer' do + expect(footer).to have_selector('footer') end end From 97a92e279b25bf536bc0b4eac6fde1712eccdb90 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Wed, 11 Jul 2018 17:10:56 +0200 Subject: [PATCH 3/6] assets: add the info icon --- app/assets/images/icons/info-blue.svg | 1 + app/assets/stylesheets/new_design/icons.scss | 5 +++++ app/views/root/patron.html.haml | 1 + 3 files changed, 7 insertions(+) create mode 100644 app/assets/images/icons/info-blue.svg diff --git a/app/assets/images/icons/info-blue.svg b/app/assets/images/icons/info-blue.svg new file mode 100644 index 000000000..6e1db0579 --- /dev/null +++ b/app/assets/images/icons/info-blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/new_design/icons.scss b/app/assets/stylesheets/new_design/icons.scss index dca469649..c640357d0 100644 --- a/app/assets/stylesheets/new_design/icons.scss +++ b/app/assets/stylesheets/new_design/icons.scss @@ -84,4 +84,9 @@ &.sign-out { background-image: image-url("icons/sign-out.svg"); } + + &.info { + background-image: image-url("icons/info-blue.svg"); + object-fit: contain; + } } diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index 90466b38a..be4844693 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -22,6 +22,7 @@ %span.icon.mail %span.icon.search %span.icon.sign-out + %span.icon.info %h1 Formulaires From 2ef6f46ef4a1c5a351c46461fcef1d27da0c78c2 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Wed, 11 Jul 2018 17:11:19 +0200 Subject: [PATCH 4/6] style: add the styling for hr elements inside forms --- app/assets/stylesheets/new_design/forms.scss | 9 +++++++++ app/views/root/patron.html.haml | 2 ++ 2 files changed, 11 insertions(+) diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index a984f5806..11988feab 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -7,6 +7,15 @@ margin-bottom: 20px; } + hr { + width: 100%; + height: 0; + margin-top: $default-padding; + margin-bottom: 2 * $default-padding; + border: none; + border-bottom: 1px solid $border-grey; + } + @mixin notice-text-style { font-size: 14px; color: $grey; diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index be4844693..e2d3e5ad7 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -38,6 +38,8 @@ = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send' = f.submit 'Envoyer', class: 'button send' + %hr + %h1 Boutons %p From 02829949908ae459d5f52a0ef2b7e107d302a244 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Wed, 11 Jul 2018 17:11:44 +0200 Subject: [PATCH 5/6] form: move the procedure notice link to a button --- .../stylesheets/new_design/dossier-edit.scss | 17 +++++++++++++++-- app/views/shared/dossiers/_edit.html.haml | 19 +++++++++++-------- .../dossiers/modifier.html.haml_spec.rb | 9 +++++++++ 3 files changed, 35 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/new_design/dossier-edit.scss b/app/assets/stylesheets/new_design/dossier-edit.scss index a2bd0a6fb..cce0af864 100644 --- a/app/assets/stylesheets/new_design/dossier-edit.scss +++ b/app/assets/stylesheets/new_design/dossier-edit.scss @@ -15,7 +15,20 @@ } } - .thanks { - padding: (1.5 * $default-padding) 0; + .prologue { + margin: (1.5 * $default-padding) 0; + display: flex; + flex-wrap: wrap; + align-items: baseline; + + .mandatory-explanation { + flex-grow: 1; // Push the "notice" button to the right + flex-shrink: 1; // Allow the text to shrink + margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text + } + + .button.notice { + flex-shrink: 0; // Display the button label on a single line + } } } diff --git a/app/views/shared/dossiers/_edit.html.haml b/app/views/shared/dossiers/_edit.html.haml index e03afa09e..83f4d2867 100644 --- a/app/views/shared/dossiers/_edit.html.haml +++ b/app/views/shared/dossiers/_edit.html.haml @@ -8,15 +8,18 @@ = form_for dossier, form_options do |f| - - if notice_url(dossier.procedure).present? - %p - Pour vous aider à remplir votre dossier, vous pouvez consulter - = link_to 'le guide de cette démarche', notice_url(dossier.procedure), { target: '_blank' } + .prologue + .mandatory-explanation + Les champs avec une astérisque ( + %span.mandatory> * + ) sont obligatoires. - %p.thanks - Les champs avec une astérisque ( - %span.mandatory> * - ) sont obligatoires. + - if notice_url(dossier.procedure).present? + = link_to notice_url(dossier.procedure), class: 'button notice', title: "Pour vous aider à remplir votre dossier, vous pouvez consulter le guide de cette démarche." do + %span.icon.info> + Guide de la démarche + + %hr = f.fields_for :champs, dossier.champs do |champ_form| - champ = champ_form.object diff --git a/spec/views/new_user/dossiers/modifier.html.haml_spec.rb b/spec/views/new_user/dossiers/modifier.html.haml_spec.rb index 3fbfa3d1f..7db3fce4e 100644 --- a/spec/views/new_user/dossiers/modifier.html.haml_spec.rb +++ b/spec/views/new_user/dossiers/modifier.html.haml_spec.rb @@ -16,6 +16,10 @@ describe 'new_user/dossiers/modifier.html.haml', type: :view do expect(rendered).to have_text(dossier.procedure.libelle) end + it 'affiche un lien vers la notice' do + expect(rendered).to have_link("Guide de la démarche", href: url_for(procedure.notice)) + end + it 'affiche les boutons de validation' do expect(rendered).to have_selector('.send-wrapper') end @@ -23,4 +27,9 @@ describe 'new_user/dossiers/modifier.html.haml', type: :view do it 'prépare le footer' do expect(footer).to have_selector('footer') end + + context 'quand la procédure ne comporte pas de notice' do + let(:procedure) { create(:procedure) } + it { is_expected.not_to have_link("Guide de la démarche") } + end end From da0a505cbc15709b571d035f955e3bfaf23aa1db Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Wed, 11 Jul 2018 15:24:22 +0000 Subject: [PATCH 6/6] form: add folder icon next to the procedure title --- app/assets/stylesheets/new_design/dossier-edit.scss | 4 ++++ app/views/new_user/dossiers/modifier.html.haml | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/new_design/dossier-edit.scss b/app/assets/stylesheets/new_design/dossier-edit.scss index cce0af864..cfea3941d 100644 --- a/app/assets/stylesheets/new_design/dossier-edit.scss +++ b/app/assets/stylesheets/new_design/dossier-edit.scss @@ -12,6 +12,10 @@ h1 { font-size: 22px; + + .icon.folder { + vertical-align: -3px; + } } } diff --git a/app/views/new_user/dossiers/modifier.html.haml b/app/views/new_user/dossiers/modifier.html.haml index 169aca13c..f7fd7a58f 100644 --- a/app/views/new_user/dossiers/modifier.html.haml +++ b/app/views/new_user/dossiers/modifier.html.haml @@ -4,6 +4,8 @@ .dossier-edit .dossier-header .container - %h1= @dossier.procedure.libelle + %h1 + %span.icon.folder + = @dossier.procedure.libelle = render partial: "shared/dossiers/edit", locals: { dossier: @dossier, apercu: false }