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

Merge pull request #3592 from betagouv/help-button

Browse source 
Ajout d'un bouton d'aide en haut de toutes les pages
This commit is contained in:
Pierre de La Morinerie 2019-03-20 11:14:27 +01:00 committed by GitHub
commit 514549fa22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 353 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/images/header/logo-ds-narrow.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 29 KiB

1
app/assets/images/header/logo-ds-wide.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

2
app/assets/images/header/logo-ds.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

1
app/assets/images/icons/clock.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path style="text-indent:0;text-transform:none" d="M16 0C7.18 0 0 7.18 0 16s7.18 16 16 16 16-7.18 16-16S24.82 0 16 0zm0 2.91c7.247 0 13.09 5.843 13.09 13.09S23.248 29.09 16 29.09A13.069 13.069 0 0 1 2.91 16C2.91 8.753 8.752 2.91 16 2.91zm0 2.423c-.803 0-1.455.652-1.455 1.455V16c0 .402.161.767.425 1.03l5.833 5.834a1.459 1.459 0 0 0 2.06 0 1.459 1.459 0 0 0 0-2.061l-5.408-5.409V6.788c0-.803-.652-1.455-1.455-1.455z" overflow="visible" color="#000" fill="#0069cc"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 534 B

1
app/assets/images/icons/help.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><g fill="#0069cc"><path d="M19.733 4.406c-2.687 0-4.872 2.172-4.872 4.843 0 .628.51 1.136 1.142 1.136.632 0 1.143-.508 1.143-1.136a2.581 2.581 0 0 1 2.587-2.571 2.581 2.581 0 0 1 2.586 2.57c0 1.418-1.16 2.57-2.586 2.57-.632 0-1.143.508-1.143 1.137 0 .022.011.04.012.062 0 .023-.012.041-.012.064v2.364c0 .628.51 1.136 1.143 1.136.632 0 1.142-.508 1.142-1.136v-1.502c2.134-.515 3.73-2.416 3.73-4.693-.002-2.672-2.187-4.844-4.872-4.844zM19.733 17.01c-.632 0-1.143.507-1.143 1.135v.704c0 .628.51 1.136 1.143 1.136.632 0 1.142-.508 1.142-1.136v-.704a1.14 1.14 0 0 0-1.142-1.136z"/><path d="M19.733 0C12.968 0 7.464 5.47 7.464 12.195c0 3.006 1.105 5.755 2.926 7.883l-2.944 2.916c-1.27-.569-2.87-.363-3.883.644l-2.557 2.543A3.379 3.379 0 0 0 0 28.591c0 .912.358 1.768 1.003 2.41A3.419 3.419 0 0 0 3.43 32c.915 0 1.777-.356 2.424-.999L8.41 28.46a3.378 3.378 0 0 0 1.005-2.41 3.37 3.37 0 0 0-.342-1.459l2.951-2.92a12.248 12.248 0 0 0 7.707 2.722C26.497 24.39 32 18.919 32 12.195 32 5.47 26.497 0 19.733 0zM6.794 26.852l-2.557 2.543c-.436.428-1.184.43-1.616-.001a1.119 1.119 0 0 1-.335-.802c0-.304.119-.589.335-.803l2.557-2.543a1.143 1.143 0 0 1 1.616.001 1.129 1.129 0 0 1 0 1.605zm12.939-4.734c-5.504 0-9.982-4.45-9.982-9.922s4.476-9.924 9.982-9.924c5.505 0 9.981 4.451 9.981 9.923 0 5.471-4.477 9.923-9.981 9.923z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
app/assets/images/icons/phone.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M10.666 11.042l1.426-2.137c.44-.662.45-1.524.023-2.194L7.845 0 2.762 1.694C.698 2.382-.476 4.595.184 6.668c1.148 3.61 3.787 9.355 9.79 15.356 6.002 6.004 11.747 8.642 15.36 9.792 2.072.66 4.285-.515 4.974-2.58L32 24.157l-6.71-4.27a2.008 2.008 0 0 0-2.195.023l-2.135 1.424a1.99 1.99 0 0 1-2.162.044 25.691 25.691 0 0 1-4.56-3.616 25.755 25.755 0 0 1-3.616-4.558 1.993 1.993 0 0 1 .044-2.161" fill="#0069cc" fill-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 505 B

2
app/assets/images/icons/trash.svg
View file

@ -1 +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="M6 18.857C6 20.037 6.749 21 7.667 21h8.666C17.25 21 18 20.037 18 18.857V6H6v12.857zM4 6h16M9 11v5m3-5v5m3-5v5M8.5 4.889c0-.858.696-1.89 1.556-1.89h3.888c.86 0 1.556 1.032 1.556 1.89" stroke="#4393F3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M0 0h24v24H0z"/></g></svg>
<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="M6 18.857C6 20.037 6.749 21 7.667 21h8.666C17.25 21 18 20.037 18 18.857V6H6v12.857zM4 6h16M9 11v5m3-5v5m3-5v5M8.5 4.889c0-.858.696-1.89 1.556-1.89h3.888c.86 0 1.556 1.032 1.556 1.89" stroke="#0069cc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M0 0h24v24H0z"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 427 B

After

Width:  |  Height:  |  Size: 427 B

6
app/assets/stylesheets/new_design/buttons.scss
View file

@ -56,13 +56,13 @@
border-color: $border-grey;
background-color: #FFFFFF;
&:hover {
&:hover:not(:disabled) {
color: #FFFFFF;
border-color: $medium-red;
background-color: $medium-red;
> .icon {
filter: brightness(100);
filter: contrast(0) brightness(100);
}
}
}
@ -232,7 +232,7 @@
flex-shrink: 0;
}
div {
.dropdown-description {
padding-left: $default-spacer;
}
}

51
app/assets/stylesheets/new_design/help_dropdown.scss Normal file
View file

@ -0,0 +1,51 @@
@import "colors";
@import "constants";
.help-dropdown {
.dropdown-content {
width: 340px;
}
.dropdown-description {
font-size: 14px;
}
}
h4.help-dropdown-title {
font-size: 16px;
color: $blue;
}
.dropdown-items li.help-dropdown-service {
cursor: default;
&:hover {
background: inherit;
}
a {
display: inline;
color: $blue;
}
}
.help-dropdown-service-action {
margin-top: $default-padding;
margin-bottom: $default-spacer;
}
.help-dropdown-service-item {
margin-top: $default-spacer;
line-height: 18px;
.icon {
vertical-align: middle;
margin-right: 5px;
&.clock {
filter: contrast(0) brightness(120%);
vertical-align: -4px;
}
}
}

18
app/assets/stylesheets/new_design/icons.scss
View file

@ -5,6 +5,12 @@
background-size: 24px 24px;
vertical-align: bottom;
&.small {
width: 16px;
height: 16px;
background-size: 16px 16px;
}
&.follow {
background-image: image-url("icons/follow-folder.svg");
}
@ -94,6 +100,18 @@
object-fit: contain;
}
&.help {
background-image: image-url("icons/help.svg");
}
&.phone {
background-image: image-url("icons/phone.svg");
}
&.clock {
background-image: image-url("icons/clock.svg");
}
&.smile {
background-image: image-url("icons/smile-regular.svg");
}

39
app/assets/stylesheets/new_design/new_header.scss
View file

@ -3,7 +3,8 @@
@import "constants";
@import "mixins";
$landing-breakpoint: 1040px;
$header-landing-breakpoint: 1040px;
$header-mobile-breakpoint: 550px;
// FIXME: Rename when the header is generalized
.new-header {
@ -23,24 +24,28 @@ $landing-breakpoint: 1040px;
.header-logo {
display: inline-block;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.header-logo-wide {
margin-right: 4 * $default-spacer;
// Logo large
background-image: url("/assets/header/logo-ds-wide.svg");
width: 360px;
margin-right: 4 * $default-spacer;
// Logo normal
@media (max-width: $header-landing-breakpoint) {
background-image: url("/assets/header/logo-ds.svg");
width: 132px;
margin-right: $default-spacer;
}
.header-logo-narrow {
display: none;
}
@media (max-width: $landing-breakpoint) {
.header-logo-wide {
display: none;
}
.header-logo-narrow {
display: inline;
margin-right: 0;
}
// Logo narrow
@media (max-width: $header-mobile-breakpoint) {
background-image: url("/assets/header/logo-ds-narrow.svg");
width: 32px;
margin-right: 0;
}
}
@ -173,6 +178,8 @@ $landing-breakpoint: 1040px;
.header-menu-button {
border: none;
padding: 0;
line-height: 14px;
vertical-align: middle;
&:hover {
background: none;

5
app/controllers/new_user/dossiers_controller.rb
View file

@ -240,6 +240,11 @@ module NewUser
flash.notice = 'La pièce jointe a bien été supprimée.'
end
def dossier_for_help
dossier_id = params[:id] || params[:dossier_id]
@dossier || (dossier_id.present? && Dossier.find_by(id: dossier_id.to_i))
end
private
def store_user_location!

5
app/helpers/service_helper.rb Normal file
View file

@ -0,0 +1,5 @@
module ServiceHelper
def formatted_horaires(horaires)
horaires.sub(/\S/, &:downcase)
end
end

4
app/models/dossier.rb
View file

@ -170,6 +170,10 @@ class Dossier < ApplicationRecord
brouillon? || en_construction?
end
def messagerie_available?
!brouillon? && !archived
end
def retention_end_date
if instruction_commencee?
en_instruction_at + procedure.duree_conservation_dossiers_dans_ds.months

22
app/views/layouts/_new_header.haml
View file

@ -1,13 +1,12 @@
/ We can't use &. because the controller may not implement #nav_bar_profile
-# We can't use &. because the controller may not implement #nav_bar_profile
- nav_bar_profile = controller.try(:nav_bar_profile)
- dossier = controller.try(:dossier_for_help)
.new-header{ class: current_page?(root_path) ? nil : "new-header-with-border" }
.header-inner-content
.flex.align-center
= link_to root_path_for_profile(nav_bar_profile), class: "header-logo" do
= image_tag "header/logo-ds.svg", alt: "demarches-simplifiees.fr", class: "header-logo-wide"
= image_tag "header/logo-ds-narrow.svg", alt: "demarches-simplifiees.fr", class: "header-logo-narrow"
= link_to '', root_path_for_profile(nav_bar_profile), class: "header-logo", title: "Revenir à l’accueil"
- if nav_bar_profile == :gestionnaire && gestionnaire_signed_in?
- current_url = request.path_info
@ -22,12 +21,6 @@
- avis_counter = current_gestionnaire.avis.without_answer.count
- if avis_counter > 0
%span.badge.warning= avis_counter
%li
.tab-link.contact-link
Aide
.contact-details
Besoin d’aide technique ? Contactez-nous
= contact_link("par email")
- if nav_bar_profile == :user
%ul.header-tabs
@ -92,3 +85,12 @@
Vous avez déjà un compte ?
%li
= link_to "Connexion", new_user_session_path, class: "button secondary"
%li
.header-help
- if nav_bar_profile == :user && dossier.present?
= render partial: 'new_user/dossier_help_dropdown', locals: { dossier: dossier }
- elsif nav_bar_profile == :gestionnaire
= render partial: 'new_gestionnaire/help_dropdown'
- else
= link_to 'Aide', FAQ_URL, class: "button primary"

20
app/views/new_gestionnaire/_help_dropdown.html.haml Normal file
View file

@ -0,0 +1,20 @@
.dropdown.help-dropdown
.button.primary.dropdown-button Aide
.dropdown-content.fade-in-down
%ul.dropdown-items
-# Use the help website
%li
= link_to FAQ_URL, target: "_blank", rel: "noopener" do
%span.icon.help
.dropdown-description
%h4.help-dropdown-title Un problème avec le site ?
%p Trouvez votre réponse dans l’aide en ligne.
-# Technical contact
%li
= mail_to CONTACT_EMAIL do
%span.icon.mail
.dropdown-description
%h4.help-dropdown-title Contact technique
%p Envoyez nous un message à #{CONTACT_EMAIL}.

14
app/views/new_gestionnaire/dossiers/_state_button.html.haml
View file

@ -7,13 +7,13 @@
- if dossier.en_construction?
%li.selected
%span.icon.edit
.description
.dropdown-description
%h4 En construction
Vous permettez à l'usager de modifier ses réponses au formulaire
%li
= link_to passer_en_instruction_gestionnaire_dossier_path(dossier.procedure, dossier), method: :post, data: { remote: true, confirm: "Confirmer vous le passage en instruction de ce dossier ?" } do
%span.icon.in-progress
.description
.dropdown-description
%h4 Passer en instruction
L'usager ne pourra plus modifier le formulaire
@ -21,30 +21,30 @@
%li
= link_to repasser_en_construction_gestionnaire_dossier_path(dossier.procedure, dossier), method: :post, data: { remote:true, confirm: "Confirmer vous le passage en construction de ce dossier ?" } do
%span.icon.edit
.description
.dropdown-description
%h4 Repasser en construction
Vous permettrez à l'usager de modifier ses réponses au formulaire
%li.selected
%span.icon.in-progress
.description
.dropdown-description
%h4 En instruction
L'usager ne peut modifier son dossier pendant l'instruction
%li
%a{ href: '#', onclick: "DS.showMotivation(event, 'accept');" }
%span.icon.accept
.description
.dropdown-description
%h4 Accepter
L'usager sera notifié que son dossier a été accepté
%li
%a{ href: '#', onclick: "DS.showMotivation(event, 'without-continuation');" }
%span.icon.without-continuation
.description
.dropdown-description
%h4 Classer sans suite
L'usager sera notifié que son dossier a été classé sans suite
%li
%a{ href: '#', onclick: "DS.showMotivation(event, 'refuse');" }
%span.icon.refuse
.description
.dropdown-description
%h4 Refuser
L'usager sera notifié que son dossier a été refusé
= render partial: 'new_gestionnaire/dossiers/state_button_motivation', locals: { dossier: dossier, popup_title: 'Accepter le dossier', placeholder: 'Expliquez au demandeur pourquoi ce dossier est accepté (facultatif)', popup_class: 'accept', process_action: 'accepter', title: 'Accepter', confirm: "Confirmez-vous l'acceptation ce dossier ?" }

42
app/views/new_user/_dossier_help_dropdown.html.haml Normal file
View file

@ -0,0 +1,42 @@
.dropdown.help-dropdown
.button.primary.dropdown-button Aide
.dropdown-content.fade-in-down
%ul.dropdown-items
- title = dossier.brouillon? ? "Besoin d’aide pour remplir votre dossier ?" : "Une question sur votre dossier ?"
- if dossier.messagerie_available?
-# Contact the administration using the messagerie
%li
= link_to messagerie_dossier_path(dossier) do
%span.icon.mail
.dropdown-description
%h4.help-dropdown-title= title
%p Envoyez directement un message à l’instructeur.
- elsif dossier.procedure.service.present?
- service = dossier.procedure.service
-# Contact the administration using email or phone
%li.help-dropdown-service
%span.icon.person
.dropdown-description
%h4.help-dropdown-title= title
.help-dropdown-service-action
%p Contactez directement l’administration :
%p.help-dropdown-service-item
%span.icon.small.mail
= link_to service.email, "mailto:#{service.email}"
%p.help-dropdown-service-item
%span.icon.small.phone
= link_to service.telephone, "tel:#{service.telephone}"
%p.help-dropdown-service-item
%span.icon.small.clock
= service.horaires
-# Use the help website
%li
= link_to FAQ_URL, target: "_blank", rel: "noopener" do
%span.icon.help
.dropdown-description
%h4.help-dropdown-title Un problème avec le site ?
%p Trouvez votre réponse dans l’aide en ligne.

4
app/views/new_user/_procedure_footer.html.haml
View file

@ -15,7 +15,7 @@
%li.footer-column
%h3.footer-header Poser une question sur votre dossier :
%p
- if dossier.present? && !dossier.brouillon?
- if dossier.present? && dossier.messagerie_available?
Directement
= link_to "par la messagerie", messagerie_dossier_path(dossier)
- else
@ -27,7 +27,7 @@
%a{ href: "tel:#{service.telephone}" }= service.telephone
%p
Horaires : #{ service.horaires.sub(/\S/, &:downcase) }
Horaires : #{formatted_horaires(service.horaires)}
- politiques = politiques_conservation_de_donnees(procedure)
- if politiques.present?

37
app/views/root/patron.html.haml
View file

@ -23,6 +23,10 @@
%span.icon.search
%span.icon.sign-out
%span.icon.info
%span.icon.delete
%span.icon.help
%span.icon.phone
%span.icon.clock
%span.icon.download
%span.icon.frown
%span.icon.meh
@ -91,6 +95,39 @@
.patron-section
= link_to ".button.primary.expand", "#", class: "button primary expand"
%h1 Dropdown
.dropdown
.button.primary.dropdown-button .button.primary.dropdown-button
.dropdown-content.fade-in-down
%ul.dropdown-items
%li .dropdown-content ul.dropdown-items li
%li .dropdown-content ul.dropdown-items li
.dropdown
.button.dropdown-button .button.dropdown-button
.dropdown-content.fade-in-down
%ul.dropdown-items
%li
%a{ href: '#' }
%span.icon.mail
.dropdown-description
%h4 Action
%p Explanation
%li
%a{ href: '#' }
%span.icon.edit
.dropdown-description
%h4 Other action
%p Explanation
.dropdown
.button.dropdown-button .button.dropdown-button (left)
.dropdown-content.fade-in-down.left-aligned
%ul.dropdown-items
%li .dropdown-content.left-aligned ul.dropdown-items li
%li .dropdown-content.left-aligned ul.dropdown-items li
%h1 Labels
%span.label .label

26
spec/controllers/new_user/dossiers_controller_spec.rb
View file

@ -952,4 +952,30 @@ describe NewUser::DossiersController, type: :controller do
end
end
end
describe "#dossier_for_help" do
before do
sign_in(user)
controller.params[:dossier_id] = dossier_id.to_s
end
subject { controller.dossier_for_help }
context 'when the id matches an existing dossier' do
let(:dossier) { create(:dossier) }
let(:dossier_id) { dossier.id }
it { is_expected.to eq dossier }
end
context 'when the id doesn’t match an existing dossier' do
let(:dossier_id) { 9999999 }
it { is_expected.to be nil }
end
context 'when the id is empty' do
let(:dossier_id) { nil }
it { is_expected.to be_falsy }
end
end
end

84
spec/features/help_spec.rb Normal file
View file

@ -0,0 +1,84 @@
require 'spec_helper'
feature 'Getting help:' do
scenario 'a Help button is visible on public pages' do
visit '/'
within('.new-header') do
expect(page).to have_help_button
end
end
context 'as a signed-in user' do
let(:user) { create(:user) }
let(:procedure) { create(:procedure, :with_service) }
before do
login_as user, scope: :user
end
scenario 'a Help button is visible on signed-in pages' do
visit dossiers_path
within('.new-header') do
expect(page).to have_help_button
end
end
context 'on a page related to a draft dossier' do
let(:dossier) { create(:dossier, user: user, procedure: procedure) }
scenario 'a Help menu provides administration contacts and a link to the FAQ' do
visit dossier_path(dossier)
within('.new-header') do
expect(page).to have_help_menu
end
within('.help-dropdown') do
expect(page).to have_content(dossier.procedure.service.email)
expect(page).to have_content(dossier.procedure.service.telephone)
expect(page).to have_link(nil, href: FAQ_URL)
end
end
end
context 'on a page related to a submitted dossier' do
let(:dossier) { create(:dossier, :en_construction, user: user, procedure: procedure) }
scenario 'a Help menu provides links to the Messagerie and to the FAQ' do
visit dossier_path(dossier)
within('.new-header') do
expect(page).to have_help_menu
end
within('.help-dropdown') do
expect(page).to have_link(nil, href: messagerie_dossier_path(dossier))
expect(page).to have_link(nil, href: FAQ_URL)
end
end
end
end
context 'as a gestionnaire' do
let(:gestionnaire) { create(:gestionnaire) }
before do
login_as gestionnaire, scope: :gestionnaire
end
scenario 'a Help menu is visible on signed-in pages' do
visit gestionnaire_procedures_path
within('.new-header') do
expect(page).to have_help_menu
end
end
end
def have_help_button
have_link('Aide', href: FAQ_URL)
end
def have_help_menu
have_selector('.help-dropdown')
end
end

2
spec/features/new_gestionnaire/gestionnaire_spec.rb
View file

@ -54,7 +54,7 @@ feature 'The gestionnaire part' do
click_on 'En instruction'
within('.dropdown-items') do
within('.state-button') do
click_on 'Accepter'
end

9
spec/views/layouts/_new_header_spec.rb
View file

@ -16,6 +16,10 @@ describe 'layouts/_new_header.html.haml', type: :view do
it { is_expected.to have_css("a.header-logo[href=\"#{dossiers_path}\"]") }
it { is_expected.to have_link("Dossiers", href: dossiers_path) }
it 'displays the Help button' do
expect(subject).to have_link("Aide", href: FAQ_URL)
end
end
context 'when rendering for gestionnaire' do
@ -24,9 +28,8 @@ describe 'layouts/_new_header.html.haml', type: :view do
it { is_expected.to have_css("a.header-logo[href=\"#{gestionnaire_procedures_path}\"]") }
it "displays the contact infos" do
expect(rendered).to have_text("Contact")
expect(rendered).to have_link("par email", href: contact_url)
it 'displays the Help dropdown menu' do
expect(rendered).to have_css(".help-dropdown")
end
end
end