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/dossier-edit.scss b/app/assets/stylesheets/new_design/dossier-edit.scss index a2bd0a6fb..cfea3941d 100644 --- a/app/assets/stylesheets/new_design/dossier-edit.scss +++ b/app/assets/stylesheets/new_design/dossier-edit.scss @@ -12,10 +12,27 @@ h1 { font-size: 22px; + + .icon.folder { + vertical-align: -3px; + } } } - .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/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index b60b2ba5e..11988feab 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -7,24 +7,37 @@ 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; } + .mandatory { + color: $dark-red; + } + label { margin-bottom: $default-padding; display: block; font-weight: bold; - .mandatory { - color: $dark-red; - } - .notice { @include notice-text-style; display: block; margin-top: $default-spacer; + + p { + margin-bottom: $default-spacer; + } } &.required { @@ -247,9 +260,13 @@ } .explication { - background-color: $light-grey; - padding: $default-padding; margin-bottom: 2 * $default-padding; + padding: $default-padding; + background-color: $light-grey; + + p:not(:last-child) { + margin-bottom: $default-padding; + } } .send-wrapper { diff --git a/app/assets/stylesheets/new_design/icons.scss b/app/assets/stylesheets/new_design/icons.scss index 0dfbb1ec5..c640357d0 100644 --- a/app/assets/stylesheets/new_design/icons.scss +++ b/app/assets/stylesheets/new_design/icons.scss @@ -60,4 +60,33 @@ &.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"); + } + + &.info { + background-image: image-url("icons/info-blue.svg"); + object-fit: contain; + } } diff --git a/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml b/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml index 362576da5..759b08b57 100644 --- a/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml +++ b/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml @@ -2,7 +2,7 @@ .en-cours %b = dossier_count = current_administrateur.procedures.count - = "Procedures".pluralize(dossier_count) + = "Procédure".pluralize(dossier_count) #action-block 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 } diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index c40b7bd4c..e2d3e5ad7 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -16,6 +16,13 @@ %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 + %span.icon.info %h1 Formulaires @@ -31,6 +38,8 @@ = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send' = f.submit 'Envoyer', class: 'button send' + %hr + %h1 Boutons %p diff --git a/app/views/shared/dossiers/_edit.html.haml b/app/views/shared/dossiers/_edit.html.haml index f67399e73..83f4d2867 100644 --- a/app/views/shared/dossiers/_edit.html.haml +++ b/app/views/shared/dossiers/_edit.html.haml @@ -1,19 +1,26 @@ .container = render partial: "shared/dossiers/submit_is_over", locals: { dossier: dossier } - - 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' } - - %p.thanks Les champs avec une astérisque (*) sont obligatoires. - - if apercu - form_options = { url: '', method: :get, html: { class: 'form', multipart: true } } - else - form_options = { html: { class: 'form', multipart: true, novalidate: dossier.brouillon? } } = form_for dossier, form_options do |f| + + .prologue + .mandatory-explanation + 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 = render partial: "shared/dossiers/editable_champs/editable_champ", 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..7db3fce4e 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,26 @@ 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 un lien vers la notice' do + expect(rendered).to have_link("Guide de la démarche", href: url_for(procedure.notice)) + end - it 'prépare le footer' do - expect(footer).to have_selector('footer') - 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 + + 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