From 02194838dd64558cd974e68cb0bf800dffd25c91 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 16 Jan 2018 20:20:15 +0100 Subject: [PATCH] HTML e-mails for NotificationMailer (#6263) * HTML e-mails for NotificationMailer (except digest) * Add HTML template for digest * Fix build --- app/javascript/images/icon_cached.svg | 4 + app/javascript/images/icon_grade.svg | 4 + app/javascript/images/icon_person_add.svg | 4 + app/javascript/images/icon_reply.svg | 4 + app/javascript/styles/mailer.scss | 78 +++++++++++++++++++ app/mailers/notification_mailer.rb | 4 +- .../notification_mailer/_status.html.haml | 30 +++++++ .../notification_mailer/digest.html.haml | 44 +++++++++++ .../notification_mailer/favourite.html.haml | 45 +++++++++++ .../notification_mailer/follow.html.haml | 43 ++++++++++ .../follow_request.html.haml | 43 ++++++++++ .../notification_mailer/mention.html.haml | 45 +++++++++++ .../notification_mailer/reblog.html.haml | 45 +++++++++++ config/locales/en.yml | 16 +++- .../previews/notification_mailer_preview.rb | 6 ++ 15 files changed, 410 insertions(+), 5 deletions(-) create mode 100644 app/javascript/images/icon_cached.svg create mode 100644 app/javascript/images/icon_grade.svg create mode 100644 app/javascript/images/icon_person_add.svg create mode 100644 app/javascript/images/icon_reply.svg create mode 100644 app/views/notification_mailer/_status.html.haml create mode 100644 app/views/notification_mailer/digest.html.haml create mode 100644 app/views/notification_mailer/favourite.html.haml create mode 100644 app/views/notification_mailer/follow.html.haml create mode 100644 app/views/notification_mailer/follow_request.html.haml create mode 100644 app/views/notification_mailer/mention.html.haml create mode 100644 app/views/notification_mailer/reblog.html.haml diff --git a/app/javascript/images/icon_cached.svg b/app/javascript/images/icon_cached.svg new file mode 100644 index 0000000000..8fdd63f44d --- /dev/null +++ b/app/javascript/images/icon_cached.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/javascript/images/icon_grade.svg b/app/javascript/images/icon_grade.svg new file mode 100644 index 0000000000..f48b468899 --- /dev/null +++ b/app/javascript/images/icon_grade.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/javascript/images/icon_person_add.svg b/app/javascript/images/icon_person_add.svg new file mode 100644 index 0000000000..068b8ae7cc --- /dev/null +++ b/app/javascript/images/icon_person_add.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/javascript/images/icon_reply.svg b/app/javascript/images/icon_reply.svg new file mode 100644 index 0000000000..cf6a09abc6 --- /dev/null +++ b/app/javascript/images/icon_reply.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index 2fd3f26610..d84763612e 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -254,6 +254,10 @@ h3 { .content-cell { background-color: darken($ui-base-color, 4%); + + &.darker { + background-color: darken($ui-base-color, 8%); + } } .hero { @@ -261,6 +265,18 @@ h3 { padding-top: 20px; } +.hero-with-button { + h1 { + margin-bottom: 4px; + } + + p.lead { + margin-bottom: 32px; + } + + padding-bottom: 16px; +} + .header { border-radius: 5px 5px 0 0; background-color: darken($ui-base-color, 8%); @@ -385,6 +401,68 @@ h3 { } } +.hr { + width: 100%; + + td { + font-size: 0; + line-height: 1px; + mso-line-height-rule: exactly; + min-height: 1px; + overflow: hidden; + height: 2px; + background-color: transparent !important; + border-top: 1px solid lighten($ui-base-color, 8%); + } +} + +.status { + padding-bottom: 32px; + + .status-header { + td { + font-size: 14px; + padding-bottom: 15px; + } + + bdi { + color: $white; + font-size: 16px; + display: block; + font-weight: 500; + } + + td:first-child { + padding-right: 10px; + } + + img { + width: 48px; + height: 48px; + border-radius: 4px; + } + } + + p { + font-size: 19px; + margin-bottom: 20px; + + &.status-footer { + color: lighten($ui-base-color, 26%); + font-size: 14px; + margin-bottom: 0; + + a { + color: lighten($ui-base-color, 26%); + } + } + } +} + +.border-top { + border-top: 1px solid lighten($ui-base-color, 8%); +} + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { body { min-height: 1024px !important; diff --git a/app/mailers/notification_mailer.rb b/app/mailers/notification_mailer.rb index 07992102da..9fed4a6369 100644 --- a/app/mailers/notification_mailer.rb +++ b/app/mailers/notification_mailer.rb @@ -1,10 +1,10 @@ # frozen_string_literal: true class NotificationMailer < ApplicationMailer - layout 'plain_mailer' - helper :stream_entries + add_template_helper RoutingHelper + def mention(recipient, notification) @me = recipient @status = notification.target_status diff --git a/app/views/notification_mailer/_status.html.haml b/app/views/notification_mailer/_status.html.haml new file mode 100644 index 0000000000..1e796ed294 --- /dev/null +++ b/app/views/notification_mailer/_status.html.haml @@ -0,0 +1,30 @@ +- i ||= 0 + +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell{ class: i.zero? ? 'content-start' : nil } + .email-row + .col-6 + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.padded.status + %table.status-header{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td{ align: 'left', width: 48 } + = image_tag status.account.avatar + %td{ align: 'left' } + %bdi= display_name(status.account) + = "@#{status.account.acct}" + + = Formatter.instance.format(status) + + %p.status-footer + = link_to l(status.created_at), web_url("statuses/#{status.id}") diff --git a/app/views/notification_mailer/digest.html.haml b/app/views/notification_mailer/digest.html.haml new file mode 100644 index 0000000000..10e44f8dde --- /dev/null +++ b/app/views/notification_mailer/digest.html.haml @@ -0,0 +1,44 @@ +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.darker.hero-with-button + .email-row + .col-6 + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.text-center.padded + %h1= t 'notification_mailer.digest.title' + %p.lead= t('notification_mailer.digest.body', since: l(@since.to_date, format: :short), instance: site_hostname) + %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.button-primary + = link_to web_url do + %span= t 'notification_mailer.digest.action' + +- @notifications.each_with_index do |n, i| + = render 'status', status: n.target_status, i: i + +- unless @follows_since.zero? + %table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.content-start.border-top + .email-row + .col-6 + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.text-center + %p= t('notification_mailer.digest.new_followers_summary', count: @follows_since) diff --git a/app/views/notification_mailer/favourite.html.haml b/app/views/notification_mailer/favourite.html.haml new file mode 100644 index 0000000000..6cbc552faa --- /dev/null +++ b/app/views/notification_mailer/favourite.html.haml @@ -0,0 +1,45 @@ +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.hero + .email-row + .col-6 + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.text-center.padded + %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td + = image_tag asset_pack_path('icon_grade.svg') + + %h1= t 'notification_mailer.favourite.title' + %p.lead= t('notification_mailer.favourite.body', name: @account.acct) + += render 'status', status: @status + +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.content-start.border-top + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.button-cell + %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.button-primary + = link_to web_url("statuses/#{@status.id}") do + %span= t 'application_mailer.view_status' diff --git a/app/views/notification_mailer/follow.html.haml b/app/views/notification_mailer/follow.html.haml new file mode 100644 index 0000000000..d1ae18ea96 --- /dev/null +++ b/app/views/notification_mailer/follow.html.haml @@ -0,0 +1,43 @@ +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.hero + .email-row + .col-6 + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.text-center.padded + %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td + = image_tag asset_pack_path('icon_person_add.svg') + + %h1= t 'notification_mailer.follow.title' + %p.lead= t('notification_mailer.follow.body', name: @account.acct) + +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.content-start + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.button-cell + %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.button-primary + = link_to web_url("accounts/#{@account.id}") do + %span= t 'application_mailer.view_profile' diff --git a/app/views/notification_mailer/follow_request.html.haml b/app/views/notification_mailer/follow_request.html.haml new file mode 100644 index 0000000000..ce5f578b11 --- /dev/null +++ b/app/views/notification_mailer/follow_request.html.haml @@ -0,0 +1,43 @@ +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.hero + .email-row + .col-6 + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.text-center.padded + %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td + = image_tag asset_pack_path('icon_person_add.svg') + + %h1= t 'notification_mailer.follow_request.title' + %p.lead= t('notification_mailer.follow_request.body', name: @account.acct) + +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.content-start + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.button-cell + %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.button-primary + = link_to web_url("follow_requests") do + %span= t 'notification_mailer.follow_request.action' diff --git a/app/views/notification_mailer/mention.html.haml b/app/views/notification_mailer/mention.html.haml new file mode 100644 index 0000000000..9ecbe8550d --- /dev/null +++ b/app/views/notification_mailer/mention.html.haml @@ -0,0 +1,45 @@ +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.hero + .email-row + .col-6 + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.text-center.padded + %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td + = image_tag asset_pack_path('icon_reply.svg') + + %h1= t 'notification_mailer.mention.title' + %p.lead= t('notification_mailer.mention.body', name: @status.account.acct) + += render 'status', status: @status + +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.content-start.border-top + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.button-cell + %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.button-primary + = link_to web_url("statuses/#{@status.id}") do + %span= t 'notification_mailer.mention.action' diff --git a/app/views/notification_mailer/reblog.html.haml b/app/views/notification_mailer/reblog.html.haml new file mode 100644 index 0000000000..895e903ea5 --- /dev/null +++ b/app/views/notification_mailer/reblog.html.haml @@ -0,0 +1,45 @@ +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.hero + .email-row + .col-6 + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.text-center.padded + %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td + = image_tag asset_pack_path('icon_cached.svg') + + %h1= t 'notification_mailer.reblog.title' + %p.lead= t('notification_mailer.reblog.body', name: @account.acct) + += render 'status', status: @status + +%table.email-table{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.email-body + .email-container + %table.content-section{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.content-cell.content-start.border-top + %table.column{ cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.column-cell.button-cell + %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } + %tbody + %tr + %td.button-primary + = link_to web_url("statuses/#{@status.id}") do + %span= t 'application_mailer.view_status' diff --git a/config/locales/en.yml b/config/locales/en.yml index 93ff88fd8f..7b9a1f15d2 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -343,6 +343,7 @@ en: settings: 'Change e-mail preferences: %{link}' signature: Mastodon notifications from %{instance} view: 'View:' + view_status: View status applications: created: Application successfully created destroyed: Application successfully deleted @@ -483,29 +484,38 @@ en: title: Moderation notification_mailer: digest: - body: 'Here is a brief summary of what you missed on %{instance} since your last visit on %{since}:' + action: View all notifications + body: Here is a brief summary of the messages you missed since your last visit on %{since} mention: "%{name} mentioned you in:" new_followers_summary: - one: You have acquired one new follower! Yay! - other: You have gotten %{count} new followers! Amazing! + one: Also, you have acquired one new follower while being away! Yay! + other: Also, you have acquired %{count} new followers while being away! Amazing! subject: one: "1 new notification since your last visit \U0001F418" other: "%{count} new notifications since your last visit \U0001F418" + title: In your absence… favourite: body: 'Your status was favourited by %{name}:' subject: "%{name} favourited your status" + title: New favourite follow: body: "%{name} is now following you!" subject: "%{name} is now following you" + title: New follower follow_request: + action: Manage follow requests body: "%{name} has requested to follow you" subject: 'Pending follower: %{name}' + title: New follow request mention: + action: Reply body: 'You were mentioned by %{name} in:' subject: You were mentioned by %{name} + title: New mention reblog: body: 'Your status was boosted by %{name}:' subject: "%{name} boosted your status" + title: New boost number: human: decimal_units: diff --git a/spec/mailers/previews/notification_mailer_preview.rb b/spec/mailers/previews/notification_mailer_preview.rb index 99495d8621..e31445c365 100644 --- a/spec/mailers/previews/notification_mailer_preview.rb +++ b/spec/mailers/previews/notification_mailer_preview.rb @@ -13,6 +13,12 @@ class NotificationMailerPreview < ActionMailer::Preview NotificationMailer.follow(f.target_account, Notification.find_by(activity: f)) end + # Preview this email at http://localhost:3000/rails/mailers/notification_mailer/follow_request + def follow_request + f = Follow.last + NotificationMailer.follow_request(f.target_account, Notification.find_by(activity: f)) + end + # Preview this email at http://localhost:3000/rails/mailers/notification_mailer/favourite def favourite f = Favourite.last