HTML e-mails for NotificationMailer (#6263)
* HTML e-mails for NotificationMailer (except digest) * Add HTML template for digest * Fix build
This commit is contained in:
Eugen Rochko
GitHub
parent
3323b4173e
commit
02194838dd
15 changed files with 410 additions and 5 deletions
4
app/javascript/images/icon_cached.svg
Normal file
4
app/javascript/images/icon_cached.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
4
app/javascript/images/icon_grade.svg
Normal file
4
app/javascript/images/icon_grade.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 252 B |
4
app/javascript/images/icon_person_add.svg
Normal file
4
app/javascript/images/icon_person_add.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 305 B |
4
app/javascript/images/icon_reply.svg
Normal file
4
app/javascript/images/icon_reply.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 220 B |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
30
app/views/notification_mailer/_status.html.haml
Normal file
30
app/views/notification_mailer/_status.html.haml
Normal file
|
|
@ -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}")
|
||||
44
app/views/notification_mailer/digest.html.haml
Normal file
44
app/views/notification_mailer/digest.html.haml
Normal file
|
|
@ -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)
|
||||
45
app/views/notification_mailer/favourite.html.haml
Normal file
45
app/views/notification_mailer/favourite.html.haml
Normal file
|
|
@ -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'
|
||||
43
app/views/notification_mailer/follow.html.haml
Normal file
43
app/views/notification_mailer/follow.html.haml
Normal file
|
|
@ -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'
|
||||
43
app/views/notification_mailer/follow_request.html.haml
Normal file
43
app/views/notification_mailer/follow_request.html.haml
Normal file
|
|
@ -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'
|
||||
45
app/views/notification_mailer/mention.html.haml
Normal file
45
app/views/notification_mailer/mention.html.haml
Normal file
|
|
@ -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'
|
||||
45
app/views/notification_mailer/reblog.html.haml
Normal file
45
app/views/notification_mailer/reblog.html.haml
Normal file
|
|
@ -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'
|
||||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue