Merge pull request #2229 from betagouv/new-invites
Ajout d'un bouton vers la notice dans le formulaire
This commit is contained in:
commit
67ecc5cc2b
8 changed files with 101 additions and 25 deletions
1
app/assets/images/icons/info-blue.svg
Normal file
1
app/assets/images/icons/info-blue.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M0-2h24v24H0z"/><path d="M9 8.011h3M9.011 16.99h5.978M12 8v9" stroke="#0069cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" fill="#0069cc"/></g></svg>
|
After Width: | Height: | Size: 351 B |
|
@ -12,10 +12,27 @@
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
|
||||||
|
.icon.folder {
|
||||||
|
vertical-align: -3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.thanks {
|
.prologue {
|
||||||
padding: (1.5 * $default-padding) 0;
|
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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,15 @@
|
||||||
margin-bottom: 20px;
|
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 {
|
@mixin notice-text-style {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $grey;
|
color: $grey;
|
||||||
|
|
|
@ -60,4 +60,33 @@
|
||||||
&.printer {
|
&.printer {
|
||||||
background-image: image-url("icons/printer.svg");
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,8 @@
|
||||||
.dossier-edit
|
.dossier-edit
|
||||||
.dossier-header
|
.dossier-header
|
||||||
.container
|
.container
|
||||||
%h1= @dossier.procedure.libelle
|
%h1
|
||||||
|
%span.icon.folder
|
||||||
|
= @dossier.procedure.libelle
|
||||||
|
|
||||||
= render partial: "shared/dossiers/edit", locals: { dossier: @dossier, apercu: false }
|
= render partial: "shared/dossiers/edit", locals: { dossier: @dossier, apercu: false }
|
||||||
|
|
|
@ -16,6 +16,13 @@
|
||||||
%span.icon.attachment
|
%span.icon.attachment
|
||||||
%span.icon.lock
|
%span.icon.lock
|
||||||
%span.icon.printer
|
%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
|
%h1 Formulaires
|
||||||
|
|
||||||
|
@ -31,6 +38,8 @@
|
||||||
= f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'
|
= f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'
|
||||||
= f.submit 'Envoyer', class: 'button send'
|
= f.submit 'Envoyer', class: 'button send'
|
||||||
|
|
||||||
|
%hr
|
||||||
|
|
||||||
%h1 Boutons
|
%h1 Boutons
|
||||||
|
|
||||||
%p
|
%p
|
||||||
|
|
|
@ -8,15 +8,18 @@
|
||||||
|
|
||||||
= form_for dossier, form_options do |f|
|
= form_for dossier, form_options do |f|
|
||||||
|
|
||||||
- if notice_url(dossier.procedure).present?
|
.prologue
|
||||||
%p
|
.mandatory-explanation
|
||||||
Pour vous aider à remplir votre dossier, vous pouvez consulter
|
Les champs avec une astérisque (
|
||||||
= link_to 'le guide de cette démarche', notice_url(dossier.procedure), { target: '_blank' }
|
%span.mandatory> *
|
||||||
|
) sont obligatoires.
|
||||||
|
|
||||||
%p.thanks
|
- if notice_url(dossier.procedure).present?
|
||||||
Les champs avec une astérisque (
|
= 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.mandatory> *
|
%span.icon.info>
|
||||||
) sont obligatoires.
|
Guide de la démarche
|
||||||
|
|
||||||
|
%hr
|
||||||
|
|
||||||
= f.fields_for :champs, dossier.champs do |champ_form|
|
= f.fields_for :champs, dossier.champs do |champ_form|
|
||||||
- champ = champ_form.object
|
- champ = champ_form.object
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
require 'spec_helper'
|
require 'spec_helper'
|
||||||
|
|
||||||
describe 'new_user/dossiers/modifier.html.haml', type: :view do
|
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) }
|
let(:footer) { view.content_for(:footer) }
|
||||||
|
|
||||||
before do
|
before do
|
||||||
|
@ -9,21 +10,26 @@ describe 'new_user/dossiers/modifier.html.haml', type: :view do
|
||||||
assign(:dossier, dossier)
|
assign(:dossier, dossier)
|
||||||
end
|
end
|
||||||
|
|
||||||
context 'test de composition de la page' do
|
subject! { render }
|
||||||
before do
|
|
||||||
render
|
|
||||||
end
|
|
||||||
|
|
||||||
it 'affiche le libellé de la procédure' do
|
it 'affiche le libellé de la procédure' do
|
||||||
expect(rendered).to have_text(dossier.procedure.libelle)
|
expect(rendered).to have_text(dossier.procedure.libelle)
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'affiche les boutons de validation' do
|
it 'affiche un lien vers la notice' do
|
||||||
expect(rendered).to have_selector('.send-wrapper')
|
expect(rendered).to have_link("Guide de la démarche", href: url_for(procedure.notice))
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'prépare le footer' do
|
it 'affiche les boutons de validation' do
|
||||||
expect(footer).to have_selector('footer')
|
expect(rendered).to have_selector('.send-wrapper')
|
||||||
end
|
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
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue