DGNum/demarches-normaliennes
14
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #8810 from demarches-simplifiees/ask-avis-remove-specific-css-v2

Browse source 
[UX] améliorer UX de la demande d'avis - partie 2 CSS
This commit is contained in:
Colin Darie 2023-03-27 14:02:13 +00:00 committed by GitHub
commit b26f477fe1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 96 additions and 288 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/assets/stylesheets/02_utils.scss
View file

@ -143,6 +143,11 @@
vertical-align: super;
}
.border-left {
border-left: 4px solid var(--background-contrast-grey);
padding-left: $default-padding;
}
// Labels that we only want for screen readers
// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
.sr-only {

120
app/assets/stylesheets/avis.scss
View file

@ -1,120 +0,0 @@
@import "colors";
@import "constants";
.give-avis {
.lock {
margin-right: $default-spacer;
}
h2 {
margin-bottom: $default-padding;
font-size: 16px;
.email {
font-weight: bold;
}
}
.introduction {
margin-bottom: $default-padding;
}
.confidentiel {
color: $dark-grey;
font-weight: normal;
margin-bottom: 2 * $default-padding;
}
.date {
font-size: 12px;
color: $dark-grey;
float: right;
}
}
.ask-avis {
margin-bottom: 2 * $default-padding;
.avis-notice {
font-size: 14px;
color: $dark-grey;
margin-bottom: 2 * $default-padding;
}
input[type=email] {
max-width: 500px;
}
form > label {
display: inline-block;
}
.confidentiel {
color: $dark-grey;
font-weight: normal;
margin-bottom: 2 * $default-padding;
}
.confidentiel-wrapper {
label,
select {
display: inline-block;
}
}
.lock {
margin-right: $default-spacer;
}
}
.list-avis {
ul {
padding-inline-start: 0;
}
.one-avis {
border-top: 1px solid $grey;
padding: $default-padding 0;
.lock {
margin-right: $default-spacer;
}
h2 {
margin-bottom: $default-spacer;
font-size: 16px;
.email {
font-weight: bold;
}
}
.answer {
margin-top: $default-padding;
}
.answer-body p:not(:last-of-type) {
margin-bottom: $default-padding;
}
.avis-icon {
margin-right: $default-spacer;
}
.confidentiel {
color: $dark-grey;
font-size: 12px;
.lock {
width: 12px;
height: 12px;
background-size: 12px 12px;
vertical-align: sub;
}
}
}
.date {
float: right;
}
}

2
app/views/experts/avis/avis_list.html.haml
View file

@ -8,7 +8,7 @@
= render partial: 'sidemenu'
.fr-col
- if @dossier.avis_for_expert(current_expert).present?
= render partial: 'experts/avis/shared/list', locals: { avis: @dossier.avis_for_expert(current_expert), avis_seen_at: nil }
= render partial: 'shared/avis/list', locals: { avis: @dossier.avis_for_expert(current_expert), avis_seen_at: nil, expert_or_instructeur: current_expert }
- else
%h2.empty-text

8
app/views/experts/avis/avis_new.html.haml
View file

@ -8,7 +8,13 @@
= render partial: 'sidemenu'
.fr-col
- if !@dossier.termine?
= render partial: "experts/avis/shared/form", locals: { url: avis_expert_avis_path(@avis.procedure, @avis), linked_dossiers: @dossier.linked_dossiers_for(current_expert), must_be_confidentiel: @avis.confidentiel?, avis: @new_avis }
- if @dossier.procedure.allow_expert_review
= render partial: "shared/avis/form", locals: { url: avis_expert_avis_path(@avis.procedure, @avis), linked_dossiers: @dossier.linked_dossiers_for(current_expert), must_be_confidentiel: @avis.confidentiel?, avis: @new_avis }
- else
%h2.empty-text
= t('helpers.information_text.unauthorized_avis_text')
%p.empty-text-details
= t('helpers.information_text.unauthorized_avis_text_detail')
- else
%h2.empty-text
= t('helpers.information_text.no_new_avis_text')

26
app/views/experts/avis/instruction.html.haml
View file

@ -10,15 +10,15 @@
- if !@dossier.termine?
%section.give-avis
%h1.tab-title Donner votre avis
%h2.claimant
%h2.fr-text--sm.fr-mb-2w
Demandeur :
%span.email.font-weight-normal= safe_claimant_email(@avis.claimant)
%span.date.font-weight-normal Demande d’avis envoyée le #{l(@avis.created_at, format: '%d/%m/%y')}
%span.fr-text--xs.fr-text-mention--grey.pull-right Demande d’avis envoyée le #{l(@avis.created_at, format: '%d/%m/%y')}
%p.introduction= @avis.introduction
- if @avis.introduction_file.attached?
= render Attachment::ShowComponent.new(attachment: @avis.introduction_file.attachment)
%br/
= render Attachment::DeleteFormComponent.new
= form_for @avis, url: expert_avis_path(@avis.procedure, @avis), html: { data: { controller: 'persisted-form', persisted_form_key_value: dom_id(@avis) }, multipart: true } do |f|
@ -43,17 +43,15 @@
= render Attachment::EditComponent.new(attached_file: @avis.piece_justificative_file, view_as: :download)
.flex.justify-between.align-baseline
%p.confidentiel.flex
- if @avis.confidentiel?
%span.icon.lock
%span
Cet avis est confidentiel et n’est pas affiché aux autres experts consultés
- else
%span
Cet avis est partagé avec les autres experts
.send-wrapper
= f.submit 'Envoyer votre avis', class: 'fr-btn'
%p.confidentiel
- if @avis.confidentiel?
%span
Cet avis est confidentiel et n’est pas affiché aux autres experts consultés
- else
%span
Cet avis est partagé avec les autres experts
.send-wrapper
= f.submit 'Envoyer votre avis', class: 'fr-btn'
- else
%h2.empty-text
= t('helpers.information_text.no_new_avis_text')

39
app/views/experts/avis/shared/_form.html.haml
View file

@ -1,39 +0,0 @@
- if !@dossier.procedure.experts_require_administrateur_invitation?
%section.ask-avis
%h1.tab-title Inviter des personnes à donner leur avis
%p.avis-notice Les invités pourront consulter le dossier, donner un avis et contribuer au fil de messagerie. Ils ne pourront pas modifier le dossier.
= render Attachment::DeleteFormComponent.new
= form_for avis, url: url, html: { multipart: true, data: { controller: 'persisted-form', persisted_form_key_value: dom_id(@avis.dossier, :avis_by_expert) } } do |f|
= hidden_field_tag 'avis[emails]', nil
.fr-input-group
= react_component("ComboMultiple",
options: [], selected: [], disabled: [],
group: '.ask-avis',
name: 'emails',
label: 'Emails',
acceptNewValues: true)
.fr-input-group
= f.text_area :introduction, rows: 3, class: 'fr-input', value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
%p.tab-title Ajouter une pièce jointe
.form-group
= render Attachment::EditComponent.new(attached_file: avis.introduction_file)
- if linked_dossiers.present?
= f.check_box :invite_linked_dossiers, {}, true, false
= f.label :invite_linked_dossiers, t('helpers.label.invite_linked_dossiers', count: linked_dossiers.length, ids: linked_dossiers.map(&:id).to_sentence)
.flex.justify-between.align-baseline
- if must_be_confidentiel
%p.confidentiel.flex
%span.icon.lock
%span
Cet avis sera confidentiel : il ne sera pas affiché aux autres experts consultés, mais sera visible par les instructeurs.
- else
.confidentiel-wrapper
= f.label :confidentiel, 'Cet avis sera ', class: 'fr-label'
= f.select :confidentiel, [['partagé avec les autres experts', false], ['confidentiel', true]], {}, onchange: "javascript:DS.toggleCondidentielExplanation(event);", class: 'fr-input'
.confidentiel-explanation.hidden
Il ne sera pas affiché aux autres experts consultés, mais sera visible par les instructeurs.
= f.submit 'Demander un avis', class: 'fr-btn fr-mt-2w'

42
app/views/experts/avis/shared/_list.html.haml
View file

@ -1,42 +0,0 @@
%section.list-avis
%h1.tab-title
Avis des invités
%span.fr-badge= avis.count
%ul
- avis.each do |avis|
%li.one-avis.flex.align-start
.width-100
%h2.claimant.fr-font--md.font-weight-normal
= "#{t('claimant', scope: 'activerecord.attributes.avis')} :"
%span.font-weight-bold= (safe_claimant_email(avis.claimant) == current_expert.email) ? 'Vous' : safe_claimant_email(avis.claimant)
- if avis.confidentiel?
%span.confidentiel
= t('confidentiel', scope: 'activerecord.attributes.avis')
%span.icon.lock{ title: t('confidentiel', scope: 'helpers.hint') }
%span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.created_at) }
= t('demande_envoyee_le', scope: 'views.shared.avis', date: l(avis.created_at, format: '%d/%m/%y à %H:%M'))
%p= avis.introduction
- if avis.question_label
%p= avis.question_label
.answer.flex.align-start
%span.icon.bubble.avis-icon
.width-100
%h2.instructeur.fr-font--md.font-weight-normal
= (avis.expert.email == current_expert.email) ? 'Vous' : avis.expert.email
- if avis.answer.present?
- if avis.revoked?
%span.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.revoked_at) }
= t('demande_revoquee_le', scope: 'views.shared.avis', date: l(avis.revoked_at, format: '%d/%m/%y à %H:%M'))
%span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.updated_at) }
= t('reponse_donnee_le', scope: 'views.shared.avis', date: l(avis.updated_at, format: '%d/%m/%y à %H:%M'))
- else
%span.fr-text--xs.fr-text-mention--grey
= t('en_attente', scope: 'views.shared.avis')
- if avis.piece_justificative_file.attached?
= render Attachment::ShowComponent.new(attachment: avis.piece_justificative_file.attachment)
.answer-body
- if [true, false].include? avis.question_answer
%p= t("question_answer.#{avis.question_answer}", scope: 'helpers.label')
= render SimpleFormatComponent.new(avis.answer, allow_a: false)

59
app/views/instructeurs/avis/_list.html.haml
View file

@ -1,59 +0,0 @@
%section.list-avis
%h1.tab-title
Avis des invités
%span.fr-badge= avis.count
%ul
- avis.each do |avis|
%li.one-avis.flex.align-start
.width-100
%h2.claimant.fr-font--md.font-weight-normal
= "#{t('claimant', scope: 'activerecord.attributes.avis')} :"
%span.font-weight-bold= (avis.claimant.email == current_instructeur.email) ? 'Vous' : avis.claimant.email
- if avis.confidentiel?
%span.confidentiel
= t('confidentiel', scope: 'activerecord.attributes.avis')
%span.icon.lock{ title: t('confidentiel', scope: 'helpers.hint') }
%span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.created_at) }
= t('demande_envoyee_le', scope: 'views.shared.avis', date: l(avis.created_at, format: '%d/%m/%y à %H:%M'))
%p= avis.introduction
- if avis.question_label
%p= avis.question_label
.answer.flex.align-start
%span.icon.bubble.avis-icon
.width-100
%h2.instructeur.fr-font--md.font-weight-normal
= (avis.expert.email == current_instructeur.email) ? 'Vous' : avis.expert.email
- if avis.answer.present?
- if avis.revoked?
%span.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.revoked_at) }
= t('demande_revoquee_le', scope: 'views.shared.avis', date: l(avis.revoked_at, format: '%d/%m/%y à %H:%M'))
- else
- if avis.revokable_by?(current_instructeur)
%span.fr-text--xs.fr-text-mention--grey= link_to(t('revoke', scope: 'helpers.label'), revoquer_instructeur_avis_path(avis.procedure, avis), data: { confirm: t('revoke', scope: 'helpers.confirmation', email: avis.expert.email) }, method: :patch)
%span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.updated_at) }
= t('reponse_donnee_le', scope: 'views.shared.avis', date: l(avis.updated_at, format: '%d/%m/%y à %H:%M'))
- else
%span.fr-text--xs.fr-text-mention--grey
= t('en_attente', scope: 'views.shared.avis')
|
%span= link_to(t('remind', scope: 'helpers.label'), remind_instructeur_avis_path(avis.procedure, avis), data: { confirm: t('remind', scope: 'helpers.confirmation', email: avis.expert.email) })
- if avis.revokable_by?(current_instructeur)
|
= link_to(t('revoke', scope: 'helpers.label'), revoquer_instructeur_avis_path(avis.procedure, avis), data: { confirm: t('revoke', scope: 'helpers.confirmation', email: avis.expert.email) }, method: :patch)
- if avis.reminded_at
%span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.reminded_at) }
= t('relance_effectuee_le', scope: 'views.shared.avis', date: l(avis.reminded_at, format: '%d/%m/%y à %H:%M'))
- if avis.introduction_file.attached?
= render Attachment::ShowComponent.new(attachment: avis.introduction_file.attachment)
.answer-body.mb-3
%p #{t('views.instructeurs.avis.introduction_file_explaination')} #{avis.claimant.email}
- if avis.piece_justificative_file.attached?
= render Attachment::ShowComponent.new(attachment: avis.piece_justificative_file.attachment)
.answer-body
- if [true, false].include? avis.question_answer
%p= t("question_answer.#{avis.question_answer}", scope: 'helpers.label')
= render SimpleFormatComponent.new(avis.answer, allow_a: false)

2
app/views/instructeurs/dossiers/avis.html.haml
View file

@ -8,7 +8,7 @@
= render partial: 'instructeurs/avis/sidemenu'
.fr-col
- if @dossier.avis.present?
= render partial: 'instructeurs/avis/list', locals: { avis: @dossier.avis, avis_seen_at: @avis_seen_at }
= render partial: 'shared/avis/list', locals: { avis: @dossier.avis, avis_seen_at: @avis_seen_at, expert_or_instructeur: current_instructeur }
- else
%h2.empty-text

2
app/views/instructeurs/dossiers/avis_new.html.haml
View file

@ -9,7 +9,7 @@
.fr-col
- if !@dossier.termine?
- if @dossier.procedure.allow_expert_review
= render partial: "instructeurs/avis/form", locals: { url: avis_instructeur_dossier_path(@dossier.procedure, @dossier), linked_dossiers: @dossier.linked_dossiers_for(current_instructeur), must_be_confidentiel: false, avis: @avis }
= render partial: "shared/avis/form", locals: { url: avis_instructeur_dossier_path(@dossier.procedure, @dossier), linked_dossiers: @dossier.linked_dossiers_for(current_instructeur), must_be_confidentiel: false, avis: @avis }
- else
%h2.empty-text
= t('helpers.information_text.unauthorized_avis_text')

0
app/views/instructeurs/avis/_form.html.haml → app/views/shared/avis/_form.html.haml
View file

63
app/views/shared/avis/_list.html.haml Normal file
View file

@ -0,0 +1,63 @@
%section
%h1.tab-title
Avis des invités
%span.fr-badge= avis.count
%ul.list-style-type-none.fr-p-0
- avis.each do |avis|
%li
%h2.fr-text--sm.fr-mb-2w
%span.fr-icon-questionnaire-line.fr-mr-1v
= "#{t('claimant', scope: 'activerecord.attributes.avis')} :"
%span= (avis.claimant.email == expert_or_instructeur.email) ? 'Vous' : avis.claimant.email
- if avis.confidentiel?
%span.fr-badge.fr-badge--sm.fr-badge--warning.fr-badge--no-icon
= t('confidentiel', scope: 'activerecord.attributes.avis')
%span.fr-text--xs.fr-text-mention--grey.pull-right{ class: highlight_if_unseen_class(avis_seen_at, avis.created_at) }
= t('demande_envoyee_le', scope: 'views.shared.avis', date: l(avis.created_at, format: '%d/%m/%y à %H:%M'))
.border-left
%p= avis.introduction
- if avis.question_label
%p= avis.question_label
%h2.fr-text--sm.fr-mt-5w.fr-mb-2w
%span.fr-icon-message-2-line.fr-mr-1v
= (avis.expert.email == expert_or_instructeur.email) ? 'Vous' : avis.expert.email
- if avis.answer.present?
- if avis.revoked?
%span.fr-badge.fr-badge--sm{ class: highlight_if_unseen_class(avis_seen_at, avis.revoked_at) }
= t('demande_revoquee_le', scope: 'views.shared.avis', date: l(avis.revoked_at, format: '%d/%m/%y à %H:%M'))
%span.fr-text--xs.fr-text-mention--grey.pull-right{ class: highlight_if_unseen_class(avis_seen_at, avis.updated_at) }
= t('reponse_donnee_le', scope: 'views.shared.avis', date: l(avis.updated_at, format: '%d/%m/%y à %H:%M'))
- else
%span.fr-badge.fr-badge--sm
= t('en_attente', scope: 'views.shared.avis')
.fr-mb-2w
- if avis.reminded_at
%span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.reminded_at) }
= t('relance_effectuee_le', scope: 'views.shared.avis', date: l(avis.reminded_at, format: '%d/%m/%y à %H:%M'))
- if expert_or_instructeur.is_a?(Instructeur)
- if avis.answer.blank?
= link_to(t('remind', scope: 'helpers.label'), remind_instructeur_avis_path(avis.procedure, avis), class:'fr-btn fr-btn--sm fr-btn--tertiary-no-outline', data: { confirm: t('remind', scope: 'helpers.confirmation', email: avis.expert.email) })
- if avis.revokable_by?(expert_or_instructeur)
= link_to(t('revoke', scope: 'helpers.label'), revoquer_instructeur_avis_path(avis.procedure, avis), class:'fr-btn fr-btn--sm fr-btn--tertiary-no-outline', data: { confirm: t('revoke', scope: 'helpers.confirmation', email: avis.expert.email) }, method: :patch)
.border-left
- if avis.introduction_file.attached?
= render Attachment::ShowComponent.new(attachment: avis.introduction_file.attachment)
.fr-mb-2w
%p #{t('views.instructeurs.avis.introduction_file_explaination')} #{avis.claimant.email}
- if avis.piece_justificative_file.attached?
= render Attachment::ShowComponent.new(attachment: avis.piece_justificative_file.attachment)
.fr-mb-2w
- if [true, false].include? avis.question_answer
%p= t("question_answer.#{avis.question_answer}", scope: 'helpers.label')
= render SimpleFormatComponent.new(avis.answer, allow_a: false)
%hr.fr-mt-2w.fr-mb-2w

2
config/locales/models/avis/en.yml
View file

@ -21,8 +21,6 @@ en:
question_answer:
true: 'yes'
false: 'no'
hint:
confidentiel: "This advice is not displayed to the others consulted experts"
confirmation:
revoke: "Would you like to revoke the opinion request to %{email} ?"
remind: "Would you like to remind %{email} ?"

2
config/locales/models/avis/fr.yml
View file

@ -21,8 +21,6 @@ fr:
question_answer:
true: oui
false: non
hint:
confidentiel: "Cet avis n’est pas affiché avec les autres experts consultés"
confirmation:
revoke: "Souhaitez-vous révoquer la demande d’avis à %{email} ?"
remind: "Souhaitez-vous relancer %{email} ?"

2
spec/system/instructeurs/expert_spec.rb
View file

@ -39,7 +39,7 @@ describe 'Inviting an expert:', js: true do
expect(page).to have_content('Une demande d’avis a été envoyée')
expect(page).to have_content('Avis des invités')
within('.list-avis') do
within('section') do
expect(page).to have_content(expert.email.to_s)
expect(page).to have_content(expert2.email.to_s)
expect(page).to have_content('Bonjour, merci de me donner votre avis sur ce dossier.')

10
spec/views/instructeur/avis/list.html.haml_spec.rb → spec/views/shared/avis/list.html.haml_spec.rb
View file

@ -1,7 +1,7 @@
describe 'instructeurs/avis/_list.html.haml', type: :view do
describe 'shared/avis/_list.html.haml', type: :view do
before { view.extend DossierHelper }
subject { render 'instructeurs/avis/list.html.haml', avis: avis, avis_seen_at: seen_at, current_instructeur: instructeur }
subject { render 'shared/avis/list.html.haml', avis: avis, avis_seen_at: seen_at, expert_or_instructeur: instructeur }
let(:instructeur) { create(:instructeur) }
let(:instructeur2) { create(:instructeur) }
@ -26,9 +26,9 @@ describe 'instructeurs/avis/_list.html.haml', type: :view do
let(:avis) { [create(:avis, :with_answer, claimant: instructeur, experts_procedure: experts_procedure)] }
it 'renders the answer formatted with newlines' do
expect(subject).to have_selector(".answer-body p", text: avis.first.answer.split("\n").first)
expect(subject).to have_selector(".answer-body ul", count: 1) # avis.answer has two list item
expect(subject).to have_selector(".answer-body ul li", count: 2)
expect(subject).to have_selector("p", text: avis.first.answer.split("\n").first)
expect(subject).to have_selector("ul.list-style-type-none ul", count: 1) # avis.answer has two list item
expect(subject).to have_selector("ul.list-style-type-none ul li", count: 2)
end
end