helpers: add variants to mailer_round_button

This commit is contained in:
Pierre de La Morinerie 2019-07-22 15:11:03 +02:00
parent 3abb0a1c44
commit 2c612f6448
3 changed files with 28 additions and 8 deletions

View file

@ -1,5 +1,24 @@
module MailerHelper
def round_button(text, url)
render 'shared/mailer_round_button', text: text, url: url
def round_button(text, url, variant)
render 'shared/mailer_round_button', text: text, url: url, theme: theme(variant)
end
private
def theme(variant)
case variant
when :primary
{ color: white, bg_color: blue, border_color: blue }
when :secondary
{ color: blue, bg_color: white, border_color: blue }
end
end
def blue
'#0069CC'
end
def white
'#FFFFFF'
end
end

View file

@ -11,7 +11,7 @@
%p
Pour le consulter et y répondre, cliquez sur le bouton ci-dessous :
= round_button('Lire le message', messagerie_dossier_url(@dossier))
= round_button('Lire le message', messagerie_dossier_url(@dossier), :primary)
= render 'layouts/mailers/signature', service: @service

View file

@ -1,9 +1,10 @@
/# From https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
%table{ width: "100%", border: "0", cellspacing:"0", cellpadding:"0" }
%table{ width: "100%", border: "0", cellspacing:"0", cellpadding:"5" }
%tr
%td
%table{ border:"0", cellspacing:"0", cellpadding:"0", style:"margin: auto" }
%td{ align: "center" }
%table{ border:"0", cellspacing:"0", cellpadding:"0" }
%tr
%td{ align:"center", style:"border-radius: 5px;", bgcolor:"#0069cc" }
%a{ href: url, target:"_blank", rel: "noopener", style:"font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; border-radius: 5px; padding: 12px 25px; border: 1px solid #0069cc; display: inline-block;" }
%td{ align:"center", style:"border-radius: 5px;", color: theme[:color], bgcolor: theme[:bg_color] }
%a{ href: url, target:"_blank", rel: "noopener", style:"font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #{theme[:color]}; text-decoration: none; text-decoration: none; border-radius: 5px; padding: 12px 25px; border: 1px solid #{theme[:border_color]}; display: inline-block; min-width: 250px" }
= text