From 1a3859d8e22c4b5a99f7ce09237ac859e4e760be Mon Sep 17 00:00:00 2001 From: HTeuMeuLeu Date: Wed, 17 Jan 2024 15:37:04 +0100 Subject: [PATCH] Update follow and follow_request emails (#28755) Co-authored-by: Claire --- 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 6301919a9e1..158a0815e12 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 6d0168969e7..bd220bb1a8d 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 00000000000..27493f770dc --- /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 607cdb36669..8247aa5b448 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 12e3e2ee333..9344ef7eb38 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')