From 09efd06dffab53884fb4f399d49deeb32a5bd930 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 15 Jul 2019 17:55:22 +0200 Subject: [PATCH 1/4] forms: add a focus indicator to focused fields --- app/assets/stylesheets/new_design/forms.scss | 30 +++++++++++--------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index 00fc6984c..5cd2d9590 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -145,12 +145,27 @@ border: solid 1px $border-grey; padding: $default-padding; + &.small { + padding: $default-padding / 2; + } + &:disabled { background-color: $border-grey; } - &.small { - padding: $default-padding / 2; + &:focus { + border: 1px solid $blue; + box-shadow: 0px 0px 2px 1px $blue; + } + + // Hide the browser default invalidity indicator until the field is touched + &:invalid:not(:focus) { + box-shadow: none; + } + + &.touched:invalid { + border: 1px solid $dark-red; + box-shadow: 0px 0px 2px 1px $dark-red; } } @@ -188,17 +203,6 @@ max-width: 180px; } - input:invalid, - textarea:invalid { - box-shadow: none; - } - - input.touched:invalid, - textarea.touched:invalid { - border: 1px solid $dark-red; - box-shadow: 0px 0px 5px $dark-red; - } - select, .select2-selection { // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript From 92dd91a31b89412cd53be421d34f9067fe3ad80e Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 16 Jul 2019 10:11:24 +0000 Subject: [PATCH 2/4] messagerie: add a reply button next to the latest message --- app/assets/images/icons/reply.svg | 1 + app/assets/stylesheets/new_design/icons.scss | 4 ++++ .../stylesheets/new_design/message.scss | 4 ++++ app/helpers/messagerie_helper.rb | 9 ++++++++ .../gestionnaires/dossiers/print.html.haml | 2 +- app/views/root/patron.html.haml | 1 + .../shared/dossiers/_messagerie.html.haml | 2 +- .../dossiers/messages/_message.html.haml | 22 ++++++++++++------- .../dossiers/show/_latest_message.html.haml | 2 +- .../messages/message.html.haml_spec.rb | 4 +++- 10 files changed, 39 insertions(+), 12 deletions(-) create mode 100644 app/assets/images/icons/reply.svg create mode 100644 app/helpers/messagerie_helper.rb diff --git a/app/assets/images/icons/reply.svg b/app/assets/images/icons/reply.svg new file mode 100644 index 000000000..d2de6d058 --- /dev/null +++ b/app/assets/images/icons/reply.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 19c858ac7..20a290c7d 100644 --- a/app/assets/stylesheets/new_design/icons.scss +++ b/app/assets/stylesheets/new_design/icons.scss @@ -91,6 +91,10 @@ background-image: image-url("icons/mail.svg"); } + &.reply { + background-image: image-url("icons/reply.svg"); + } + &.search { background-image: image-url("icons/search-blue.svg"); } diff --git a/app/assets/stylesheets/new_design/message.scss b/app/assets/stylesheets/new_design/message.scss index 7c87e763e..4edc672ac 100644 --- a/app/assets/stylesheets/new_design/message.scss +++ b/app/assets/stylesheets/new_design/message.scss @@ -38,4 +38,8 @@ .attachment-link { margin-top: $default-spacer; } + + .message-answer-button { + margin-left: auto; + } } diff --git a/app/helpers/messagerie_helper.rb b/app/helpers/messagerie_helper.rb new file mode 100644 index 000000000..cfea65b62 --- /dev/null +++ b/app/helpers/messagerie_helper.rb @@ -0,0 +1,9 @@ +module MessagerieHelper + def show_reply_button(commentaire, connected_user) + commentaire.dossier.present? && + commentaire.dossier.messagerie_available? && + commentaire.dossier.user == connected_user && + !commentaire.sent_by?(connected_user) && + commentaire.dossier.commentaires.last == commentaire + end +end diff --git a/app/views/gestionnaires/dossiers/print.html.haml b/app/views/gestionnaires/dossiers/print.html.haml index e41192349..acacdad2d 100644 --- a/app/views/gestionnaires/dossiers/print.html.haml +++ b/app/views/gestionnaires/dossiers/print.html.haml @@ -63,7 +63,7 @@ %ul.messages-list - @dossier.commentaires.with_attached_piece_jointe.each do |commentaire| %li - = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, connected_user: current_gestionnaire, messagerie_seen_at: nil } + = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, connected_user: current_gestionnaire, messagerie_seen_at: nil, show_reply_button: false } %script{ type: "text/javascript" } window.print(); diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index fa905ce27..dcb3462bd 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -21,6 +21,7 @@ %span.icon.person %span.icon.super-admin %span.icon.mail + %span.icon.reply %span.icon.search %span.icon.sign-out %span.icon.info diff --git a/app/views/shared/dossiers/_messagerie.html.haml b/app/views/shared/dossiers/_messagerie.html.haml index 123b5f510..abc4c3707 100644 --- a/app/views/shared/dossiers/_messagerie.html.haml +++ b/app/views/shared/dossiers/_messagerie.html.haml @@ -2,7 +2,7 @@ %ul.messages-list - dossier.commentaires.with_attached_piece_jointe.each do |commentaire| %li.message{ class: commentaire_is_from_me_class(commentaire, connected_user) } - = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, connected_user: connected_user, messagerie_seen_at: messagerie_seen_at } + = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, connected_user: connected_user, messagerie_seen_at: messagerie_seen_at, show_reply_button: show_reply_button(commentaire, connected_user) } - if dossier.messagerie_available? = render partial: "shared/dossiers/messages/form", locals: { commentaire: new_commentaire, form_url: form_url } diff --git a/app/views/shared/dossiers/messages/_message.html.haml b/app/views/shared/dossiers/messages/_message.html.haml index 4ccfa7707..0c1dc7bb8 100644 --- a/app/views/shared/dossiers/messages/_message.html.haml +++ b/app/views/shared/dossiers/messages/_message.html.haml @@ -10,11 +10,17 @@ = commentaire_date(commentaire) .rich-text= sanitize(simple_format(commentaire.body)) - - if commentaire.piece_jointe.attached? - .attachment-link - = render partial: "shared/attachment/show", locals: { attachment: commentaire.piece_jointe.attachment } - - elsif commentaire.file.present? - .attachment-link - = link_to commentaire.file_url, class: "button", target: "_blank", rel: "noopener", title: "Télécharger" do - %span.icon.attachment - = commentaire.file_identifier + .message-extras.flex.justify-start + - if commentaire.piece_jointe.attached? + .attachment-link + = render partial: "shared/attachment/show", locals: { attachment: commentaire.piece_jointe.attachment } + - elsif commentaire.file.present? + .attachment-link + = link_to commentaire.file_url, class: "button", target: "_blank", rel: "noopener", title: "Télécharger" do + %span.icon.attachment + = commentaire.file_identifier + + - if show_reply_button + = button_tag type: 'button', class: 'button small message-answer-button', onclick: 'document.querySelector("#commentaire_body").focus()' do + %span.icon.reply + Répondre diff --git a/app/views/users/dossiers/show/_latest_message.html.haml b/app/views/users/dossiers/show/_latest_message.html.haml index 255e79696..fa86d6a8b 100644 --- a/app/views/users/dossiers/show/_latest_message.html.haml +++ b/app/views/users/dossiers/show/_latest_message.html.haml @@ -4,6 +4,6 @@ %h3.tab-title Dernier message .message.inverted-background - = render partial: "shared/dossiers/messages/message", locals: { commentaire: latest_message, connected_user: current_user, messagerie_seen_at: nil } + = render partial: "shared/dossiers/messages/message", locals: { commentaire: latest_message, connected_user: current_user, messagerie_seen_at: nil, show_reply_button: false } = link_to commentaire_answer_action(latest_message, current_user), messagerie_dossier_url(dossier, anchor: 'new_commentaire'), class: 'button send' diff --git a/spec/views/shared/dossiers/messages/message.html.haml_spec.rb b/spec/views/shared/dossiers/messages/message.html.haml_spec.rb index 725fdf50c..e5674ae6b 100644 --- a/spec/views/shared/dossiers/messages/message.html.haml_spec.rb +++ b/spec/views/shared/dossiers/messages/message.html.haml_spec.rb @@ -1,12 +1,14 @@ describe 'shared/dossiers/messages/message.html.haml', type: :view do before { view.extend DossierHelper } - subject { render 'shared/dossiers/messages/message.html.haml', commentaire: commentaire, messagerie_seen_at: seen_at, connected_user: dossier.user } + subject { render 'shared/dossiers/messages/message.html.haml', commentaire: commentaire, messagerie_seen_at: seen_at, connected_user: dossier.user, show_reply_button: true } let(:dossier) { create(:dossier, :en_construction) } let(:commentaire) { create(:commentaire, dossier: dossier) } let(:seen_at) { commentaire.created_at + 1.hour } + it { is_expected.to have_button("Répondre") } + context "with a seen_at after commentaire created_at" do let(:seen_at) { commentaire.created_at + 1.hour } From b4fe6e236e9147041a295f09ad9b0ddc65a33f1b Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 16 Jul 2019 12:15:50 +0200 Subject: [PATCH 3/4] messagerie: improve the textarea placeholder --- app/views/shared/dossiers/messages/_form.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/dossiers/messages/_form.html.haml b/app/views/shared/dossiers/messages/_form.html.haml index 594bec357..30a598ff9 100644 --- a/app/views/shared/dossiers/messages/_form.html.haml +++ b/app/views/shared/dossiers/messages/_form.html.haml @@ -1,5 +1,5 @@ = form_for(commentaire, url: form_url, html: { class: 'form' }) do |f| - = f.text_area :body, rows: 5, placeholder: 'Répondre ici', required: true, class: 'message-textarea' + = f.text_area :body, rows: 5, placeholder: 'Écrivez votre message à l’administration ici', required: true, class: 'message-textarea' .flex.justify-between.wrap %div = f.file_field :piece_jointe, id: 'piece_jointe', direct_upload: true From d86030fb767d0153d42990dd25dab1bce7861951 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 16 Jul 2019 12:24:16 +0200 Subject: [PATCH 4/4] dossier: add a reply icon near to "Reply to message" button --- app/views/users/dossiers/show/_latest_message.html.haml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/views/users/dossiers/show/_latest_message.html.haml b/app/views/users/dossiers/show/_latest_message.html.haml index fa86d6a8b..a35d6547a 100644 --- a/app/views/users/dossiers/show/_latest_message.html.haml +++ b/app/views/users/dossiers/show/_latest_message.html.haml @@ -6,4 +6,6 @@ .message.inverted-background = render partial: "shared/dossiers/messages/message", locals: { commentaire: latest_message, connected_user: current_user, messagerie_seen_at: nil, show_reply_button: false } - = link_to commentaire_answer_action(latest_message, current_user), messagerie_dossier_url(dossier, anchor: 'new_commentaire'), class: 'button send' + = link_to messagerie_dossier_url(dossier, anchor: 'new_commentaire'), class: 'button send' do + %span.icon.reply + = commentaire_answer_action(latest_message, current_user)