OCA
/
social
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[8.0][website_mail_snippet_responsive] Pseudoresponsive mail snippets. 

Responsive is a hard thing in mails, because mail clients usually render very badly everything.

This new module adds a good collection of snippets in a pseudoresponsive manner, that will seem responsive in most cases, although they are not, technically.

Inspired by https://css-tricks.com/ideas-behind-responsive-emails/.
pull/41/head
Jairo Llopis 9 years ago
parent
45799dcf0c
commit
0a9574a884
21 changed files with 881 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 93
      website_mail_snippet_responsive/README.rst
  2. 0
      website_mail_snippet_responsive/__init__.py
  3. 30
      website_mail_snippet_responsive/__openerp__.py
  4. 98
      website_mail_snippet_responsive/i18n/es.po
  5. BIN
      website_mail_snippet_responsive/images/snippets.png
  6. BIN
      website_mail_snippet_responsive/static/description/icon.png
  7. BIN
      website_mail_snippet_responsive/static/src/img/snippet_1_col.png
  8. BIN
      website_mail_snippet_responsive/static/src/img/snippet_2_cols.png
  9. BIN
      website_mail_snippet_responsive/static/src/img/snippet_3_cols.png
  10. BIN
      website_mail_snippet_responsive/static/src/img/snippet_hr.png
  11. BIN
      website_mail_snippet_responsive/static/src/img/snippet_img_text.png
  12. BIN
      website_mail_snippet_responsive/static/src/img/snippet_text_img.png
  13. 38
      website_mail_snippet_responsive/static/src/js/vertical_resize.js
  14. 16
      website_mail_snippet_responsive/views/assets.xml
  15. 60
      website_mail_snippet_responsive/views/snippet_1_col.xml
  16. 127
      website_mail_snippet_responsive/views/snippet_2_cols.xml
  17. 178
      website_mail_snippet_responsive/views/snippet_3_cols.xml
  18. 41
      website_mail_snippet_responsive/views/snippet_hr.xml
  19. 83
      website_mail_snippet_responsive/views/snippet_img_text.xml
  20. 83
      website_mail_snippet_responsive/views/snippet_text_img.xml
  21. 34
      website_mail_snippet_responsive/views/templates.xml

93
website_mail_snippet_responsive/README.rst
View File

@ -0,0 +1,93 @@
.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
:alt: License: AGPL-3
=============================================
Responsive Layout Snippets for Writing Emails
=============================================
This module extends the functionality of the website mail designer to support a
responsive layout and allow you to read those mails comfortably in a mobile
mail client.
Well... actually this is not really responsive. It is pseudo-responsive.
Responsiveness in current mail clients sucks a lot, so these templates are very
verbose to ensure compatibility in most scenarios. Ideas are taken from
https://css-tricks.com/ideas-behind-responsive-emails/.
Installation
============
This module is prepared to be compatible with module ``website_mail_bg_color``.
If you install it, you will be able to change snippets' background colors, but
it is not required.
Usage
=====
To use this module, you need to:
#. Install any module that makes use of the website mail designer, such as
``mass_mailing``.
#. Edit an email with the website mail designer.
#. You have a new collection of snippets. Use them as usual.
If you choose the *Horizontal Separator* snippet, you will be able to set its
height too. For that, you will have to aim carefully to click inside the green
line, and then use the option that will float above it.
.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
:alt: Try me on Runbot
:target: https://runbot.odoo-community.org/runbot/205/8.0
Known issues / Roadmap
======================
* Snippet code sucks, but that's because mail client HTML engines suck. I
hope we will be able to improve this as mail clients keep improving.
* To set the *Horizontal Separator* height, you have to click inside it, which
will insert a ``<br type="_moz"/>`` in Firefox, that will make it seem like
its height is at least like a caret, even if you set a lower value. Do not
worry, it goes away when you press *Save*.
Bug Tracker
===========
Bugs are tracked on `GitHub Issues
<https://github.com/OCA/social/issues>`_. In case of trouble, please
check there if your issue has already been reported. If you spotted it first,
help us smashing it by providing a detailed and welcomed `feedback
<https://github.com/OCA/
social/issues/new?body=module:%20
website_mail_snippet_responsive%0Aversion:%20
8.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
Credits
=======
Images
------
* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_.
Contributors
------------
* Daniel Gómez-Zurita <danielgz@antiun.com>
* Rafael Blasco <rafabn@antiun.com>
* Jairo Llopis <yajo.sk8@gmail.com>
Maintainer
----------
.. image:: https://odoo-community.org/logo.png
:alt: Odoo Community Association
:target: https://odoo-community.org
This module is maintained by the OCA.
OCA, or the Odoo Community Association, is a nonprofit organization whose
mission is to support the collaborative development of Odoo features and
promote its widespread use.
To contribute to this module, please visit https://odoo-community.org.

0
website_mail_snippet_responsive/__init__.py
View File

30
website_mail_snippet_responsive/__openerp__.py
View File

@ -0,0 +1,30 @@
# -*- coding: utf-8 -*-
# © 2016 Antiun Ingeniería S.L. - Jairo Llopis
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
{
"name": "Responsive Layout Snippets for Writing Emails",
"summary": "Well... pseudo-responsive (see description)",
"version": "8.0.1.0.0",
"category": "Marketing",
"website": "http://www.antiun.com",
"author": "Antiun Ingeniería S.L., Odoo Community Association (OCA)",
"license": "AGPL-3",
"application": False,
"installable": True,
"images": [
"images/snippets.png",
],
"depends": [
"website_mail",
],
"data": [
"views/assets.xml",
"views/templates.xml",
"views/snippet_1_col.xml",
"views/snippet_2_cols.xml",
"views/snippet_3_cols.xml",
"views/snippet_hr.xml",
"views/snippet_img_text.xml",
"views/snippet_text_img.xml",
],
}

98
website_mail_snippet_responsive/i18n/es.po
View File

@ -0,0 +1,98 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * website_mail_snippet_responsive
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 8.0\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2016-02-10 16:43+0100\n"
"PO-Revision-Date: 2016-02-10 16:44+0100\n"
"Last-Translator: <>\n"
"Language-Team: \n"
"Language: es\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: \n"
"X-Generator: Poedit 1.8.6\n"
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Big image + Text + Button (1 column)"
msgstr "Imagen grande + texto + botón (1 columna)"
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Change Height"
msgstr "Cambiar altura"
#. module: website_mail_snippet_responsive
#. openerp-web
#: code:addons/website_mail_snippet_responsive/static/src/js/vertical_resize.js:23
#, python-format
msgid "Element height in pixels"
msgstr "Altura del elemento en píxeles"
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Horizontal Separator"
msgstr "Separador horizontal"
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Image + Text + Button (2 columns)"
msgstr "Imagen + texto + botón (2 columnas)"
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Image + Text + Button (3 columns)"
msgstr "Imagen + texto + botón (3 columnas)"
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Integer ut tempor lectus. Vivamus at gravida arcu."
msgstr "Integer ut tempor lectus. Vivamus at gravida arcu."
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Learn more"
msgstr "Aprenda más"
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Left Image, Right Text + Button"
msgstr "Imagen a la izquierda, texto + botón a la derecha"
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Left Text and Button, Right Image"
msgstr "Texto + botón a la izquierda, imagen a la derecha"
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid ""
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a "
"ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a "
"est. Aenean at mollis ipsum."
msgstr ""
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a "
"ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a "
"est. Aenean at mollis ipsum."
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "News Item"
msgstr "Noticia del boletín"
#. module: website_mail_snippet_responsive
#. openerp-web
#: code:addons/website_mail_snippet_responsive/static/src/js/vertical_resize.js:22
#, python-format
msgid "Set element height"
msgstr ""
#. module: website_mail_snippet_responsive
#: view:website:website_mail.email_designer_snippets
msgid "Title"
msgstr "Título"

BIN
website_mail_snippet_responsive/images/snippets.png
View File

Side by Side

After

Width: 607  |  Height: 1827  |  Size: 60 KiB

BIN
website_mail_snippet_responsive/static/description/icon.png
View File

Side by Side

After

Width: 128  |  Height: 128  |  Size: 9.2 KiB

BIN
website_mail_snippet_responsive/static/src/img/snippet_1_col.png
View File

Side by Side

After

Width: 100  |  Height: 79  |  Size: 1.3 KiB

BIN
website_mail_snippet_responsive/static/src/img/snippet_2_cols.png
View File

Side by Side

After

Width: 100  |  Height: 79  |  Size: 2.0 KiB

BIN
website_mail_snippet_responsive/static/src/img/snippet_3_cols.png
View File

Side by Side

After

Width: 100  |  Height: 79  |  Size: 3.0 KiB

BIN
website_mail_snippet_responsive/static/src/img/snippet_hr.png
View File

Side by Side

After

Width: 100  |  Height: 79  |  Size: 320 B

BIN
website_mail_snippet_responsive/static/src/img/snippet_img_text.png
View File

Side by Side

After

Width: 100  |  Height: 79  |  Size: 1.5 KiB

BIN
website_mail_snippet_responsive/static/src/img/snippet_text_img.png
View File

Side by Side

After

Width: 100  |  Height: 79  |  Size: 1.3 KiB

38
website_mail_snippet_responsive/static/src/js/vertical_resize.js
View File

@ -0,0 +1,38 @@
/* © 2016 Antiun Ingeniería S.L. - Jairo Llopis
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). */
"use strict";
(function ($) {
var _t = openerp._t,
prompt = openerp.website.prompt,
snippet = openerp.website.snippet;
snippet.options.vertical_resize = snippet.Option.extend({
start: function () {
var self = this;
self._super();
return self.$el.find(".js_vertical_resize").click(function(){
return self.ask();
});
},
ask: function() {
var self = this;
return prompt({
window_title: _t("Set element height"),
input: _t("Element height in pixels"),
}).then(function (answer) {
return self.resize(answer);
});
},
resize: function(size) {
this.$target.css("height", String(size) + "px");
// Old-school height attribute changed too if needed
if (this.$target.attr("height")) {
this.$target.attr("height", size);
}
},
});
})(jQuery);

16
website_mail_snippet_responsive/views/assets.xml
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). -->
<openerp>
<data>
<template id="assets_editor" inherit_id="website.assets_editor">
<xpath expr=".">
<script type="text/javascript"
src="/website_mail_snippet_responsive/static/src/js/vertical_resize.js"/>
</xpath>
</template>
</data>
</openerp>

60
website_mail_snippet_responsive/views/snippet_1_col.xml
View File

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). -->
<openerp>
<data>
<template id="snippet_1_col"
inherit_id="website_mail.email_designer_snippets">
<xpath expr="//div[@id='snippet_email_structure']">
<t t-call="website_mail_snippet_responsive.snippet">
<t t-set="image" t-value="'snippet_1_col'"/>
<t t-set="title">Big image + Text + Button (1 column)</t>
<tbody>
<tr>
<td bgcolor="#ECECEC" height="10"></td>
</tr>
<tr>
<td><a href="#" target="_blank"><img src="http://placehold.it/570x200/333333/ffffff?text=width 570px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 100%; max-width: 570px; min-width:285px;" border="0"/> </a></td>
</tr>
<tr>
<td style="padding:0 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 25px 20px;" align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</t>
</xpath>
</template>
</data>
</openerp>

127
website_mail_snippet_responsive/views/snippet_2_cols.xml
View File

@ -0,0 +1,127 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). -->
<openerp>
<data>
<template id="snippet_2_cols"
inherit_id="website_mail.email_designer_snippets">
<xpath expr="//div[@id='snippet_email_structure']">
<t t-call="website_mail_snippet_responsive.snippet">
<t t-set="image" t-value="'snippet_2_cols'"/>
<t t-set="title">Image + Text + Button (2 columns)</t>
<tbody>
<tr>
<td bgcolor="#ECECEC" height="10"></td>
</tr>
<tr>
<td style="padding: 0;" valign="top">
<!-- LEFT COLUMN -->
<table style="width: 50%; min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody>
<tr>
<td style="padding: 20px 0 20px 20px;">
<table style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td><a href="#" target="_blank"><img src="http://placehold.it/245x200/333333/ffffff?text=width 245px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; max-width: 245px;" border="0"/></a></td>
</tr>
<tr>
<td style="padding:0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 25px 0;" align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- RIGHT COLUMN -->
<table style="width: 50%; min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody>
<tr>
<td style="padding: 20px 0 20px 20px;">
<table style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td><a href="#" target="_blank"><img src="http://placehold.it/245x200/333333/ffffff?text=width 245px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 50% max-width: 245px;" border="0"/></a></td>
</tr>
<tr>
<td style="padding:0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 25px 0;" align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</t>
</xpath>
</template>
</data>
</openerp>

178
website_mail_snippet_responsive/views/snippet_3_cols.xml
View File

@ -0,0 +1,178 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). -->
<openerp>
<data>
<template id="snippet_3_cols"
inherit_id="website_mail.email_designer_snippets">
<xpath expr="//div[@id='snippet_email_structure']">
<t t-call="website_mail_snippet_responsive.snippet">
<t t-set="image" t-value="'snippet_3_cols'"/>
<t t-set="title">Image + Text + Button (3 columns)</t>
<tbody>
<tr>
<td bgcolor="#ECECEC" height="10"></td>
</tr>
<tr>
<td style="padding: 0;" valign="top">
<!-- FIRST COLUMN -->
<table style="width: 32%; min-width:182px;" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody>
<tr>
<td style="padding: 20px 0 20px 20px;">
<table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td width="150"><a href="#" target="_blank"><img src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt;width: 100%; min-width:150px;" border="0"/></a></td>
</tr>
<tr>
<td style="padding:0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 25px 0px;" align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- SECOND COLUMN -->
<table style="width: 32%; min-width:182px;" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody>
<tr>
<td style="padding: 20px 0 20px 20px;">
<table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td width="150"><a href="#" target="_blank"><img src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt;width: 100%; min-width:150px;" border="0"/></a></td>
</tr>
<tr>
<td style="padding:0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 25px 0px;" align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- THIRD COLUMN -->
<table style="width: 32%; min-width:182px;" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody>
<tr>
<td style="padding: 20px 0 20px 20px;">
<table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF" width="150">
<tbody>
<tr>
<td width="150"><a href="#" target="_blank"><img src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt;width: 100%; min-width:150px;" border="0"/></a></td>
</tr>
<tr>
<td style="padding:0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 25px 0px;" align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</t>
</xpath>
</template>
</data>
</openerp>

41
website_mail_snippet_responsive/views/snippet_hr.xml
View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). -->
<openerp>
<data>
<template id="snippet_hr"
inherit_id="website_mail.email_designer_snippets">
<xpath expr="//div[@id='snippet_options']">
<div
data-snippet-option-id='vertical_resize'
data-selector=".vertical_resizable">
<li>
<a href="#" class="button js_vertical_resize">
Change Height
</a>
</li>
</div>
</xpath>
<xpath expr="//div[@id='snippet_email_structure']">
<t t-call="website_mail_snippet_responsive.snippet">
<t t-set="image" t-value="'snippet_hr'"/>
<t t-set="title">Horizontal Separator</t>
<tbody>
<tr>
<td bgcolor="#ECECEC" height="10"/>
</tr>
<tr>
<td bgcolor="#00B518"
height="5"
class="bg_color_picker vertical_resizable"/>
</tr>
</tbody>
</t>
</xpath>
</template>
</data>
</openerp>

83
website_mail_snippet_responsive/views/snippet_img_text.xml
View File

@ -0,0 +1,83 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). -->
<openerp>
<data>
<template id="snippet_img_text"
inherit_id="website_mail.email_designer_snippets">
<xpath expr="//div[@id='snippet_email_structure']">
<t t-call="website_mail_snippet_responsive.snippet">
<t t-set="image" t-value="'snippet_img_text'"/>
<t t-set="title">Left Image, Right Text + Button</t>
<tbody>
<tr>
<td bgcolor="#ECECEC" height="10"></td>
</tr>
<tr>
<td style="padding: 0;" valign="top">
<!-- LEFT COLUMN -->
<table style="width: 50%; min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody>
<tr>
<td style="padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="middle"><a href="#" target="_blank"><img src="http://placehold.it/245x150/333333/ffffff?text=width 245px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 100%; min-width:245px; max-width: none; height:auto;" border="0"/></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- RIGHT COLUMN -->
<table style="width: 50%; min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody>
<tr>
<td style="padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" align="left">News Item</td>
</tr>
<tr>
<td style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #000000; font-size: 9pt; line-height: 20px;" align="left">Integer ut tempor lectus. Vivamus at gravida arcu.</td>
</tr>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 25px 0 0 0;" align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</t>
</xpath>
</template>
</data>
</openerp>

83
website_mail_snippet_responsive/views/snippet_text_img.xml
View File

@ -0,0 +1,83 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). -->
<openerp>
<data>
<template id="snippet_text_img"
inherit_id="website_mail.email_designer_snippets">
<xpath expr="//div[@id='snippet_email_structure']">
<t t-call="website_mail_snippet_responsive.snippet">
<t t-set="image" t-value="'snippet_text_img'"/>
<t t-set="title">Left Text and Button, Right Image</t>
<tbody>
<tr>
<td bgcolor="#ECECEC" height="10"></td>
</tr>
<tr>
<td style="padding: 0;" valign="top">
<!-- LEFT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="50%">
<tbody>
<tr>
<td style="padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" align="left">News Item</td>
</tr>
<tr>
<td style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #000000; font-size: 9pt; line-height: 20px;" align="left">Integer ut tempor lectus. Vivamus at gravida arcu.</td>
</tr>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 25px 0 0 0;" align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- RIGHT COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="50%">
<tbody>
<tr>
<td style="padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="middle"><a href="#" target="_blank"><img src="http://placehold.it/245x150/333333/ffffff?text=width 245px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 100%; min-width:245px;" border="0"/></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</t>
</xpath>
</template>
</data>
</openerp>

34
website_mail_snippet_responsive/views/templates.xml
View File

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). -->
<openerp>
<data>
<template id="snippet">
<div>
<div class="oe_snippet_thumbnail">
<img
class="oe_snippet_thumbnail_img"
t-attf-src="/website_mail_snippet_responsive/static/src/img/#{image}.png"/>
<span
t-esc="title"
class="oe_snippet_thumbnail_title"/>
</div>
<div
class="oe_snippet_body"
style="padding:0px; width:100%; background-color:#ececec; color:rgb(0,0,0); line-height:20px; font-family:Arial,sans-serif; font-size:9pt">
<table
style="width: 100%; max-width: 570px; border-collapse: collapse; background: inherit; color: inherit; background: #FFFFFF"
cellpadding="0"
cellspacing="0"
align="center"
bgcolor="#FFFFFF">
<t t-raw="0"/>
</table>
</div>
</div>
</template>
</data>
</openerp>
Write Preview
Loading…
Cancel
Save