From 1a3859d8e22c4b5a99f7ce09237ac859e4e760be Mon Sep 17 00:00:00 2001
From: HTeuMeuLeu <remi@hteumeuleu.fr>
Date: Wed, 17 Jan 2024 15:37:04 +0100
Subject: [PATCH] Update follow and follow_request emails (#28755)
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
---
app/helpers/accounts_helper.rb | 10 ++-
app/javascript/styles/mailer.scss | 87 +++++++++++++++++++
.../application/mailer/_account.html.haml | 30 +++++++
.../notification_mailer/follow.html.haml | 8 +-
.../follow_request.html.haml | 8 +-
5 files changed, 136 insertions(+), 7 deletions(-)
create mode 100644 app/views/application/mailer/_account.html.haml
diff --git a/app/helpers/accounts_helper.rb b/app/helpers/accounts_helper.rb
index 6301919a9..158a0815e 100644
--- a/app/helpers/accounts_helper.rb
+++ b/app/helpers/accounts_helper.rb
@@ -27,20 +27,24 @@ module AccountsHelper
end
end
+ def account_formatted_stat(value)
+ number_to_human(value, precision: 3, strip_insignificant_zeros: true)
+ end
+
def account_description(account)
prepend_str = [
[
- number_to_human(account.statuses_count, precision: 3, strip_insignificant_zeros: true),
+ account_formatted_stat(account.statuses_count),
I18n.t('accounts.posts', count: account.statuses_count),
].join(' '),
[
- number_to_human(account.following_count, precision: 3, strip_insignificant_zeros: true),
+ account_formatted_stat(account.following_count),
I18n.t('accounts.following', count: account.following_count),
].join(' '),
[
- number_to_human(account.followers_count, precision: 3, strip_insignificant_zeros: true),
+ account_formatted_stat(account.followers_count),
I18n.t('accounts.followers', count: account.followers_count),
].join(' '),
].join(', ')
diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index 6d0168969..bd220bb1a 100644
--- a/app/javascript/styles/mailer.scss
+++ b/app/javascript/styles/mailer.scss
@@ -88,6 +88,85 @@ table + p {
padding: 24px;
}
+// Account
+.email-account-banner-table {
+ background-color: #f3f2f5;
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+}
+
+.email-account-banner-td {
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ height: 140px;
+ vertical-align: bottom;
+ background-color: #f3f2f5;
+ background-position: center;
+ background-size: cover;
+}
+
+.email-account-banner-inner-td {
+ padding: 24px 24px 0;
+ mso-padding-alt: 24px;
+}
+
+.email-account-banner-overlap-div {
+ max-height: 42px;
+}
+
+.email-account-banner-icon-table {
+ width: auto;
+ margin: 0;
+ overflow: hidden;
+ border-radius: 8px;
+ border-collapse: separate;
+ background-color: #fff;
+ border: 2px solid #fff;
+
+ img {
+ display: block;
+ max-width: 100%;
+ border: none;
+ border-radius: 6px;
+ }
+}
+
+.email-account-body-td {
+ padding: 56px 24px 24px;
+ mso-padding-alt: 24px;
+}
+
+.email-account-name {
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 24px;
+ color: #17063b;
+}
+
+.email-account-handle {
+ font-size: 14px;
+ line-height: 20px;
+ color: #746a89;
+}
+
+.email-account-stats-table {
+ td {
+ padding-right: 16px;
+ font-size: 14px;
+ line-height: 20px;
+ color: #746a89;
+ }
+
+ b {
+ font-weight: 600;
+ color: #17063b;
+ }
+
+ span {
+ white-space: nowrap;
+ }
+}
+
// Utility classes
.email-w-full {
width: 100%;
@@ -122,6 +201,14 @@ table + p {
padding-top: 24px;
}
+.email-padding-top-16 {
+ padding-top: 16px;
+}
+
+.email-padding-top-0 {
+ padding-top: 0;
+}
+
.email-border-top {
border-top: 1px solid #dfdee3;
}
diff --git a/app/views/application/mailer/_account.html.haml b/app/views/application/mailer/_account.html.haml
new file mode 100644
index 000000000..27493f770
--- /dev/null
+++ b/app/views/application/mailer/_account.html.haml
@@ -0,0 +1,30 @@
+%table.email-w-full.email-account-banner-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+ %tr
+ %td.email-account-banner-td{ height: 140, background: full_asset_url(account.header.url) }
+ %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+ %tr
+ %td.email-account-banner-inner-td
+ .email-account-banner-overlap-div
+ %table.email-account-banner-icon-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+ %tr
+ %td
+ %img{ src: full_asset_url(account.avatar.url), width: 80, height: 80, alt: '' }
+%table.email-w-full.email-account-body-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+ %tr
+ %td.email-account-body-td
+ %p.email-account-name= display_name(account)
+ %p.email-account-handle= acct(account)
+ %table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+ %tr
+ %td.email-padding-top-16
+ %table.email-w-full.email-account-stats-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+ %tr
+ %td
+ %b= account_formatted_stat(account.statuses_count)
+ %span= t('accounts.posts', count: account.statuses_count)
+ %td
+ %b= account_formatted_stat(account.following_count)
+ %span= t('accounts.following')
+ %td
+ %b= account_formatted_stat(account.followers_count)
+ %span= t('accounts.followers', count: account.followers_count)
diff --git a/app/views/notification_mailer/follow.html.haml b/app/views/notification_mailer/follow.html.haml
index 607cdb366..8247aa5b4 100644
--- a/app/views/notification_mailer/follow.html.haml
+++ b/app/views/notification_mailer/follow.html.haml
@@ -5,5 +5,9 @@
%td.email-body-padding-td
%table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
%tr
- %td.email-inner-card-td
- = render 'application/mailer/button', text: t('application_mailer.view_profile'), url: web_url("@#{@account.pretty_acct}")
+ %td.email-inner-card-td-without-padding
+ = render 'application/mailer/account', account: @account
+ %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+ %tr
+ %td.email-padding-24.email-padding-top-0
+ = render 'application/mailer/button', text: t('application_mailer.view_profile'), url: web_url("@#{@account.pretty_acct}")
diff --git a/app/views/notification_mailer/follow_request.html.haml b/app/views/notification_mailer/follow_request.html.haml
index 12e3e2ee3..9344ef7eb 100644
--- a/app/views/notification_mailer/follow_request.html.haml
+++ b/app/views/notification_mailer/follow_request.html.haml
@@ -5,5 +5,9 @@
%td.email-body-padding-td
%table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
%tr
- %td.email-inner-card-td
- = render 'application/mailer/button', text: t('notification_mailer.follow_request.action'), url: web_url('follow_requests')
+ %td.email-inner-card-td-without-padding
+ = render 'application/mailer/account', account: @account
+ %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+ %tr
+ %td.email-padding-24.email-padding-top-0
+ = render 'application/mailer/button', text: t('notification_mailer.follow_request.action'), url: web_url('follow_requests')