diff --git a/app/javascript/images/icon_cached.svg b/app/javascript/images/icon_cached.svg
new file mode 100644
index 00000000000..8fdd63f44dc
--- /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 00000000000..f48b468899a
--- /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 00000000000..068b8ae7cc1
--- /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 00000000000..cf6a09abc60
--- /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 2fd3f266104..d84763612e2 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 07992102da6..9fed4a63695 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 00000000000..1e796ed2940
--- /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 00000000000..10e44f8dde9
--- /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 00000000000..6cbc552faa8
--- /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 00000000000..d1ae18ea96e
--- /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 00000000000..ce5f578b118
--- /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 00000000000..9ecbe8550d6
--- /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 00000000000..895e903ea59
--- /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 93ff88fd8fa..7b9a1f15d2e 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 99495d86211..e31445c365c 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