pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] mass_mailing, mail: added support for media queries in mass mail

Browse Source 
- Email generated from mass mailing will have its own layout with internal css.
- strip_classes is removed from mail_message because mail client are now supporting
  internal stylesheet. we need it for make mail responsive.

mail: manually removed classes from incoming mail body

Because we removed strip_classes from mail message body field because we want to
allow classes in outgoing mail to make it responsive but classes are not removed
from incoming mails so here we manually removed classes from incoming mail.

opw-1836556
This commit is contained in:
Deep Patel
2018-08-06 16:06:45 +02:00
committed by Christophe Matthieu
parent 8b4b61dfcc
commit 967d228a44
12 changed files with 143 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/models/mail_message.py
+1 -1
View File
@@ -40,7 +40,7 @@ class Message(models.Model):
# content
subject = fields.Char('Subject')
date = fields.Datetime('Date', default=fields.Datetime.now)
body = fields.Html('Contents', default='', sanitize_style=True, strip_classes=True)
body = fields.Html('Contents', default='', sanitize_style=True)
attachment_ids = fields.Many2many(
'ir.attachment', 'message_attachment_rel',
'message_id', 'attachment_id',
addons/mail/models/mail_thread.py
+2
View File
@@ -1567,6 +1567,8 @@ class MailThread(models.AbstractModel):
body = html
else:
body = tools.append_content_to_html(body, html, plaintext=False)
# we only strip_classes here everything else will be done in by html field of mail.message
body = tools.html_sanitize(body, sanitize_tags=False, strip_classes=True)
# 4) Anything else -> attachment
else:
attachments.append(self._Attachment(filename or 'attachment', part.get_payload(decode=True), {}))
addons/mass_mailing/__manifest__.py
+1
View File
@@ -31,6 +31,7 @@
'views/mass_mailing_views.xml',
'views/res_config_settings_views.xml',
'security/ir.model.access.csv',
'views/mass_mailing_layout.xml',
'views/editor_field_html.xml',
'views/themes_templates.xml',
'views/snippets_themes.xml',
addons/mass_mailing/static/src/scss/themes/theme_default.scss
+1 -15
View File
@@ -162,7 +162,7 @@ td {
}
}
.o_mail_block_steps {
.o_mail_block_steps .o_mail_snippet_general{
background-color: $o-mm-def-color-alpha;
}
@@ -306,20 +306,6 @@ td {
border-collapse:separate;
}
// ===== Mobile =====
@media screen and (max-width: $o-mm-def-body-bobile) {
.o_mail_col_mv {
display: block!important;
max-width: $o-mm-def-body-bobile!important;
width: 100%!important;
}
.o_mail_table_styles {
max-width: $o-mm-def-body-bobile!important;
width: 100%!important;
}
}
// Compatibility: mb/mt classes on <td/> elements were interpreted as paddings
// instead of margins before the introduction of pb/pt classes. As thoses mb/mt
// classes may remain on clients' templates, <td/> are forced to 0 margin to
addons/mass_mailing/tests/__init__.py
+1
View File
@@ -2,3 +2,4 @@
# Part of Odoo. See LICENSE file for full copyright and licensing details.
from . import test_mass_mailing_list_merge
from . import test_mass_mailing_responsive
addons/mass_mailing/tests/test_mass_mailing_responsive.py
+33
View File
@@ -0,0 +1,33 @@
# -*- coding: utf-8 -*-
# Part of Odoo. See LICENSE file for full copyright and licensing details.
from odoo.tests import common
class TestResponsiveMail(common.SavepointCase):
def test_responsive_mail(self):
"""
Testing mail mailing responsive mail body
"""
test_record = self.env['res.partner'].create({'name': 'Mass Mail Partner'})
mass_mail_record = self.env.ref('mass_mailing.mass_mail_2')
composer = self.env['mail.compose.message'].sudo().with_context({
'default_composition_mode': 'mass_mail',
'default_model': 'res.partner',
'default_res_id': test_record.id,
}).create({
'subject': 'Mass Mail Responsive',
'body': 'I am Responsive body',
'mass_mailing_id': mass_mail_record.id
})
mail_values = composer.get_mail_values([test_record.id])
body_html = str(mail_values[test_record.id]['body_html'])
self.assertIn('<!DOCTYPE html>', body_html)
self.assertIn('<head>', body_html)
self.assertIn('viewport', body_html)
self.assertIn('@media', body_html)
self.assertIn('I am Responsive body', body_html)
addons/mass_mailing/views/editor_field_html.xml
+1
View File
@@ -3,6 +3,7 @@
<template id="assets_mail_themes">
<link rel="stylesheet" type="text/scss" href="/mass_mailing/static/src/scss/themes/theme_basic.scss"/>
<link rel="stylesheet" type="text/scss" href="/mass_mailing/static/src/scss/themes/theme_default.scss"/>
<t t-call="mass_mailing.mass_mailing_mail_style"/>
</template>
<template id="FieldTextHtmlInline" name="Editor layout">
addons/mass_mailing/views/mass_mailing_layout.xml
+37
View File
@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="mass_mailing_mail_style">
<style>
@media screen and (max-width: 768px) {
.o_mail_col_mv {
display: block !important;
width: auto !important;
}
.o_mail_table_styles {
width: 100% !important;
}
.o_mail_col_container {
margin: 0px 0px 10px 0px !important;
}
}
</style>
</template>
<!-- Reference: https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch -->
<template id="mass_mailing_mail_layout">
&lt;!DOCTYPE html&gt;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<t t-call="mass_mailing.mass_mailing_mail_style"/>
</head>
<body>
<t t-raw="body"/>
</body>
</html>
</template>
</odoo>
addons/mass_mailing/views/snippets_themes.xml
+60 -54
View File
@@ -121,13 +121,13 @@
<div class="o_mail_snippet_general">
<table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles o_mail_h_padding">
<tr>
<td width="20%"/>
<td valign="center" width="60%" class="text-center o_mail_v_padding">
<td width="35%"/>
<td valign="center" width="30%" class="text-center o_mail_v_padding">
<a t-att-href="(company_id.website) or '#'" style="text-decoration:none;">
<img border="0" src="/mass_mailing/static/src/img/theme_basic/s_default_image_logo.png" style="height:auto;max-width:400px;width:auto" alt="Your Logo" />
</a>
</td>
<td width="20%" style="text-align:right"/>
<td width="35%" style="text-align:right"/>
</tr>
</table>
</div>
@@ -140,7 +140,7 @@
<table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
<tbody>
<tr>
<td width="100%" valign="top" class="o_mail_full_width_padding">
<td width="100%" valign="top" class="o_mail_full_width_padding o_mail_no_colorpicker">
<a href="#">
<img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_banner.jpg" class="d-block mx-auto" alt="Your Banner Image" />
</a>
@@ -158,7 +158,7 @@
<table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
<tbody>
<tr>
<td width="100%" class="o_mail_h_padding o_mail_v_padding">
<td width="100%" class="o_mail_h_padding o_mail_v_padding o_mail_no_colorpicker">
<h2 class="mt0">Thank you for joining us!</h2>
<p>We want to take this opportunity to welcome you to our ever-growing community!<br/></p>
<p>Your platform is ready for work. It will help you reduce the costs of digital signage, attract new customers and increase sales.</p>
@@ -188,7 +188,7 @@
<table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
<tbody>
<tr>
<td width="100%" class="o_mail_h_padding o_mail_v_padding">
<td width="100%" class="o_mail_h_padding o_mail_v_padding o_mail_no_colorpicker">
<p> The open source model of Odoo has allowed us to leverage thousands of developers and
business experts to build hundreds of apps in just a few years.</p>
<p> With strong technical foundations, Odoo's framework is unique.
@@ -211,7 +211,7 @@
<table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
<tbody>
<tr>
<td class="o_mail_h_padding o_mail_v_padding">
<td class="o_mail_h_padding o_mail_v_padding o_mail_no_colorpicker">
<h2 class="o_mail_no_margin">Check this out!</h2>
<p class="o_mail_no_margin">Apps That Help You Grow Your Business!</p>
</td>
@@ -237,47 +237,47 @@
</th>
</tr>
</thead>
<tbody class="bg-gray-lighter">
<tbody>
<tr>
<td class="text-center o_mail_col_mv">
<td class="text-center o_mail_col_mv bg-gray-lighter">
<p class="o_mail_display_coupon text-center" style="margin-top:10px;">$8</p>
<small>user / month (billed annually)</small>
</td>
</tr>
<tr>
<td valign="top" class="o_mail_v_padding o_mail_col_mv">
<td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
<div class="separator"></div>
</td>
</tr>
<tr>
<td class="o_mail_col_mv">
<td class="o_mail_col_mv bg-gray-lighter">
<p>Basic features</p>
</td>
</tr>
<tr>
<td class="o_mail_col_mv">
<td class="o_mail_col_mv bg-gray-lighter">
<p>Basic management</p>
</td>
</tr>
<tr>
<td class="o_mail_col_mv">
<td class="o_mail_col_mv bg-gray-lighter">
<p>No customization</p>
</td>
</tr>
<tr>
<td class="o_mail_col_mv">
<td class="o_mail_col_mv bg-gray-lighter">
<p>No support</p>
</td>
</tr>
</tbody>
<tfoot class="bg-gray-lighter">
<tfoot>
<tr>
<td valign="top" class="o_mail_v_padding o_mail_col_mv">
<td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
<div class="separator"></div>
</td>
</tr>
<tr>
<td valign="top" class="text-center o_mail_h_padding o_mail_col_mv" style="padding-bottom: 20px;">
<td valign="top" class="text-center o_mail_h_padding o_mail_col_mv bg-gray-lighter" style="padding-bottom: 20px;">
<a role="button" href="#" class="btn btn-block btn-primary">More</a>
</td>
</tr>
@@ -293,47 +293,47 @@
</th>
</tr>
</thead>
<tbody class="bg-gray-lighter">
<tbody>
<tr>
<td class="text-center o_mail_col_mv">
<td class="text-center o_mail_col_mv bg-gray-lighter">
<p class="o_mail_display_coupon text-center" style="margin-top:10px;">$18</p>
<small>user / month (billed annually)</small>
</td>
</tr>
<tr>
<td valign="top" class="o_mail_v_padding o_mail_col_mv">
<td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
<div class="separator"></div>
</td>
</tr>
<tr>
<td class="o_mail_col_mv">
<td class="o_mail_col_mv bg-gray-lighter">
<p><strong>Advanced</strong> features</p>
</td>
</tr>
<tr>
<td class="o_mail_col_mv">
<td class="o_mail_col_mv bg-gray-lighter">
<p><strong>Total</strong> management</p>
</td>
</tr>
<tr>
<td class="o_mail_col_mv">
<td class="o_mail_col_mv bg-gray-lighter">
<p><strong>Fully customizable</strong></p>
</td>
</tr>
<tr>
<td class="o_mail_col_mv">
<td class="o_mail_col_mv bg-gray-lighter">
<p><strong>24/7 Support</strong></p>
</td>
</tr>
</tbody>
<tfoot class="bg-gray-lighter">
<tfoot>
<tr>
<td valign="top" class="o_mail_v_padding o_mail_col_mv">
<td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
<div class="separator"></div>
</td>
</tr>
<tr>
<td valign="top" class="text-center o_mail_h_padding o_mail_col_mv" style="padding-bottom: 20px;">
<td valign="top" class="text-center o_mail_h_padding o_mail_col_mv bg-gray-lighter" style="padding-bottom: 20px;">
<a role="button" href="#" class="btn btn-block btn-primary">More</a>
</td>
</tr>
@@ -353,8 +353,8 @@
<table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
<tbody>
<tr>
<td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
<div class="o_mail_col_container">
<td style="vertical-align:top;width:270px;" class="o_mail_col_mv o_mail_col_container">
<div>
<img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_1.jpg" class="d-block mx-auto" alt="Your Picture" />
<h4 class="text-center">Column title</h4>
<p class="text-center o_mail_no_margin">
@@ -368,8 +368,8 @@
</div>
</td>
<td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
<div class="o_mail_col_container">
<td style="vertical-align:top;width:270px;" class="o_mail_col_mv o_mail_col_container">
<div>
<img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_2.jpg" class="d-block mx-auto" alt="Your Picture" />
<h4 class="text-center">Column title</h4>
<p class="text-center o_mail_no_margin">
@@ -395,8 +395,8 @@
<table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
<tbody>
<tr>
<td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
<div class="o_mail_col_container">
<td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container">
<div>
<img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_1.jpg" class="d-block mx-auto" alt="Your Picture" />
<h4 class="text-center">Column Title</h4>
<p class="text-center o_mail_no_margin">
@@ -408,8 +408,8 @@
</div>
</td>
<td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
<div class="o_mail_col_container">
<td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container">
<div>
<img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_2.jpg" class="d-block mx-auto" alt="Your Picture" />
<h4 class="text-center">Column Title</h4>
<p class="text-center o_mail_no_margin">
@@ -421,8 +421,8 @@
</div>
</td>
<td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
<div class="o_mail_col_container">
<td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container">
<div>
<img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_3.jpg" class="d-block mx-auto" alt="Your Picture" />
<h4 class="text-center">Column Title</h4>
<p class="text-center o_mail_no_margin">
@@ -469,14 +469,14 @@
<table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
<tbody>
<tr>
<td style="width:270px;vertical-align:middle;text-align:center;" class="o_mail_col_mvo_mail_col_mv o_mail_h_padding o_mail_v_padding">
<td style="width:270px;vertical-align:middle;text-align:center;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
<h3>A unique value</h3>
<p class="o_mail_no_margin" style="text-align:justify;">The open source model of Odoo has allowed us to leverage thousands of developers and business experts to build hundreds of apps in just a few years.</p>
<div class="text-center" style="margin-top:15px;">
<a role="button" href="#" class="btn btn-link">Read More...</a>
</div>
</td>
<td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_img_container o_mail_h_padding o_mail_v_padding">
<td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_col_mv o_mail_img_container o_mail_h_padding o_mail_v_padding">
<img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_text_image.jpg" class="d-block mx-auto" alt="Your Picture" />
</td>
</tr>
@@ -489,16 +489,20 @@
<template id="s_mail_block_image" name="Image">
<div class="o_mail_block_image">
<div class="o_mail_snippet_general">
<table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_h_padding">
<table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
<tbody>
<tr>
<td width="100%" align="center" style="text-align:center" class="">
<td width="100%" align="center" style="text-align:center" class="o_mail_h_padding">
<img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_image.jpg" class="d-block mx-auto" alt="Your Picture" />
</td>
</tr>
<tr>
<td width="100%" class="o_mail_col_mv o_mail_v_padding bg-beta">
<p class="text-center">With strong technical foundations, Odoo's framework is unique. It provides <strong>top notch usability that scales across all apps</strong>.</p>
<td width="100%" align="center" style="text-align:center" class="o_mail_h_padding">
<table>
<td class="bg-beta o_mail_v_padding">
<p class="text-center">With strong technical foundations, Odoo's framework is unique. It provides <strong>top notch usability that scales across all apps</strong>.</p>
</td>
</table>
</td>
</tr>
</tbody>
@@ -513,7 +517,7 @@
<table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
<tbody>
<tr>
<td valign="top" style="width:100%;" class="o_mail_v_padding">
<td valign="top" style="width:100%;" class="o_mail_v_padding o_mail_no_colorpicker">
<div style="width:100%;" class="separator"></div>
</td>
</tr>
@@ -534,7 +538,7 @@
</td>
</tr>
<tr>
<td class="o_mail_h_padding o_mail_v_padding bg-beta" style="padding:10px;">
<td class="text-center o_mail_h_padding o_mail_v_padding bg-beta" style="padding:10px;">
&amp;nbsp;
<a role="button" href="#" class="btn btn-primary">My Account</a>
&amp;nbsp;
@@ -574,7 +578,7 @@
Use This Promo Code BEFORE 1st of August
</p>
<p class="o_mail_h_padding text-center">
<small>CODE</small>: <strong class="o_code h3">45A9E77DGW8455</strong>
<span style="line-height: 30px;"><small>CODE: </small></span><strong class="o_code h3">45A9E77DGW8455</strong>
</p>
<p class="text-center">
and save $20 on your next order!
@@ -583,7 +587,7 @@
</tr>
<tr>
<td class="mb16 mt16 text-center">
<a role="button" class="btn btn-primary">Use now</a>
<a role="button" href="#" class="btn btn-primary">Use now</a>
</td>
</tr>
</tbody>
@@ -599,7 +603,7 @@
<tbody>
<tr>
<td class="o_mail_h_padding o_mail_v_padding text-center o_mail_col_mv" width="250">
<table>
<table class="o_mail_table_styles">
<tr>
<td>
<p class="o_mail_display_coupon text-beta text-center o_mail_no_margin" style="font-weight:800;">20%</p>
@@ -634,9 +638,11 @@
<div class="o_mail_snippet_general">
<table align="center" cellpadding="0" cellspacing="0" class="o_mail_table_styles">
<tr>
<td style="width:25%;min-height: 150px;vertical-align:middle;" class="o_mail_h_padding o_mail_v_padding bg-beta text-center o_mail_col_mv">
<h3 class="o_mail_no_margin">21 Jul</h3>
<p class="o_mail_no_margin">ALL DAY</p>
<td style="width:25%;min-height: 150px;vertical-align:middle;" class="bg-beta text-center o_mail_col_mv">
<div class="o_mail_h_padding o_mail_v_padding">
<h3 class="o_mail_no_margin">21 Jul</h3>
<p class="o_mail_no_margin">ALL DAY</p>
</div>
</td>
<td style="width:25%;min-height: 150px;" class="text-center bg-delta o_mail_col_mv">
<img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_event.jpg" class="d-block mx-auto" alt="Your Picture" />
@@ -667,7 +673,7 @@
<tbody>
<tr>
<td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
<table class="o_mail_table_styles">
<table align="center">
<tr>
<td rowspan="2" class="text-right">
&amp;nbsp;
@@ -682,7 +688,7 @@
</table>
</td>
<td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
<table class="o_mail_table_styles">
<table align="center">
<tr>
<td rowspan="2" class="text-right">
&amp;nbsp;
@@ -697,7 +703,7 @@
</table>
</td>
<td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
<table class="o_mail_table_styles">
<table align="center">
<tr>
<td rowspan="2" class="text-right">
&amp;nbsp;
addons/mass_mailing/wizard/mail_compose_message.py
+3
View File
@@ -57,6 +57,7 @@ class MailComposeMessage(models.TransientModel):
blacklist = self._context.get('mass_mailing_blacklist')
seen_list = self._context.get('mass_mailing_seen_list')
mass_mail_layout = self.env.ref('mass_mailing.mass_mailing_mail_layout', raise_if_not_found=False)
for res_id in res_ids:
mail_values = res[res_id]
if mail_values.get('email_to'):
@@ -74,6 +75,8 @@ class MailComposeMessage(models.TransientModel):
'res_id': res_id,
'mass_mailing_id': mass_mailing.id
}
if mail_values.get('body_html') and mass_mail_layout:
mail_values['body_html'] = mass_mail_layout.render({'body': mail_values['body_html']}, engine='ir.qweb', minimal_qcontext=True)
# propagate exception state to stat when still-born
if mail_values.get('state') == 'cancel':
stat_vals['exception'] = fields.Datetime.now()
addons/mass_mailing/wizard/test_mailing.py
+3 -1
View File
@@ -18,15 +18,17 @@ class TestMassMailing(models.TransientModel):
mails = self.env['mail.mail']
mailing = self.mass_mailing_id
test_emails = tools.email_split(self.email_to)
mass_mail_layout = self.env.ref('mass_mailing.mass_mailing_mail_layout')
for test_mail in test_emails:
# Convert links in absolute URLs before the application of the shortener
mailing.write({'body_html': self.env['mail.thread']._replace_local_links(mailing.body_html)})
body = tools.html_sanitize(mailing.body_html, sanitize_attributes=True, sanitize_style=True)
mail_values = {
'email_from': mailing.email_from,
'reply_to': mailing.reply_to,
'email_to': test_mail,
'subject': mailing.name,
'body_html': tools.html_sanitize(mailing.body_html, sanitize_attributes=True, sanitize_style=True, strip_classes=True),
'body_html': mass_mail_layout.render({'body': body}, engine='ir.qweb', minimal_qcontext=True),
'notification': True,
'mailing_id': mailing.id,
'attachment_ids': [(4, attachment.id) for attachment in mailing.attachment_ids],
addons/web_editor/static/src/js/editor/transcoder.js
-1
View File
@@ -37,7 +37,6 @@ function getMatchedCSSRules(a) {
selectorText.indexOf(':active') === -1 &&
selectorText.indexOf(':link') === -1 &&
selectorText.indexOf('::') === -1 &&
selectorText.indexOf('"') === -1 &&
selectorText.indexOf("'") === -1) {
var st = selectorText.split(/\s*,\s*/);
for (k = 0 ; k < st.length ; k++) {