From 778de23d6f436dfd55721e75c2f0022212624afe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@openerp.com>
Date: Mon, 13 Jan 2014 10:24:40 +0100
Subject: [PATCH 1/6] [IMP] email_template: body_html is now an html file, not
 a text file anymore. Now that tools.mail.html_sanitize() has been detroyed,
 there is no need anymore to keep this field as a text field.

bzr revid: tde@openerp.com-20140113092440-je3vpgohvljukjmn
---
 addons/email_template/email_template.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/email_template/email_template.py b/addons/email_template/email_template.py
index 904481096d3..1c5c9693c79 100644
--- a/addons/email_template/email_template.py
+++ b/addons/email_template/email_template.py
@@ -176,7 +176,7 @@ class email_template(osv.osv):
         'mail_server_id': fields.many2one('ir.mail_server', 'Outgoing Mail Server', readonly=False,
                                           help="Optional preferred server for outgoing mails. If not set, the highest "
                                                "priority one will be used."),
-        'body_html': fields.text('Body', translate=True, help="Rich-text/HTML version of the message (placeholders may be used here)"),
+        'body_html': fields.html('Body', translate=True, help="Rich-text/HTML version of the message (placeholders may be used here)"),
         'report_name': fields.char('Report Filename', translate=True,
                                    help="Name to use for the generated report file (may contain placeholders)\n"
                                         "The extension can be omitted and will then come from the report type."),

From b97727701c703baad223f17db8a18435def3a9a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@openerp.com>
Date: Mon, 13 Jan 2014 13:55:34 +0100
Subject: [PATCH 2/6] [IMP] [ADD] website: added base for template designer.

[ADD] website: email_template: added website_link field, a link to edit the template
directly in the website
[ADD] website_mail: added controller and page to edit templates. They are still jinja
templates editable in the website. Not qweb templates.
[ADD] website_mail: JS file and editor override to enable only certain snippets. Those
are still to add, but will be base templates for email.
[IMP] website: improved the addition of editor JS in the template header to be able
to add JS file that override the editor without having to hack everything in the
template.

bzr revid: tde@openerp.com-20140113125534-djy48pi7lf42f9ms
---
 .../static/src/js/website.snippets.editor.js  |  5 +-
 addons/website/views/website_templates.xml    |  4 +-
 addons/website_mail/__openerp__.py            |  3 +
 addons/website_mail/controllers/__init__.py   |  1 +
 .../controllers/email_designer.py             | 21 +++++
 addons/website_mail/models/__init__.py        |  1 +
 addons/website_mail/models/email_template.py  | 87 +++++++++++++++++++
 .../static/src/js/website_email_designer.js   | 17 ++++
 .../views/email_template_view.xml             | 16 ++++
 addons/website_mail/views/snippets.xml        | 60 +++++++++++++
 .../views/website_email_designer.xml          | 64 ++++++++++++++
 11 files changed, 276 insertions(+), 3 deletions(-)
 create mode 100644 addons/website_mail/controllers/email_designer.py
 create mode 100644 addons/website_mail/models/email_template.py
 create mode 100644 addons/website_mail/static/src/js/website_email_designer.js
 create mode 100644 addons/website_mail/views/email_template_view.xml
 create mode 100644 addons/website_mail/views/snippets.xml
 create mode 100644 addons/website_mail/views/website_email_designer.xml

diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 6c0a062125d..ee4b0caf90e 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -148,10 +148,13 @@
             });
             self.$el.css('top', this.parent.get('height'));
         },
+        _get_snippet_url: function () {
+            return '/website/snippets';
+        },
         fetch_snippet_templates: function () {
             var self = this;
 
-            openerp.jsonRpc("/website/snippets", 'call', {})
+            openerp.jsonRpc(this._get_snippet_url(), 'call', {})
                 .then(function (html) {
                     var $html = $(html);
 
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index de91cd30bd6..d78e01948da 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -75,7 +75,7 @@
             <script type="text/javascript" src="/website/static/src/js/website.js"></script>
             <script t-if="not translatable" type="text/javascript" src="/website/static/src/js/website.snippets.animation.js"></script>
 
-            <t t-raw="head or ''"/>
+            <t t-raw="head or ''" name='layout_head'/>
         </head>
         <body>
             <div id="wrapwrap">
@@ -195,7 +195,7 @@
 </template>
 
 <template id="editor_head" inherit_id="website.layout" name="Editor" groups="base.group_website_publisher">
-    <xpath expr="//head" position="inside">
+    <xpath expr='//t[@name="layout_head"]' position="before">
         <link rel='stylesheet' href='/website/static/src/css/snippets.css'/>
         <link rel='stylesheet' href='/website/static/src/css/editor.css'/>
         <link rel='stylesheet' href='/website/static/lib/bootstrap-tour/bootstrap-tour.css'/>
diff --git a/addons/website_mail/__openerp__.py b/addons/website_mail/__openerp__.py
index 55efcf01dbf..400411ed329 100644
--- a/addons/website_mail/__openerp__.py
+++ b/addons/website_mail/__openerp__.py
@@ -28,7 +28,10 @@
     'author': 'OpenERP SA',
     'depends': ['website', 'mail'],
     'data': [
+        'views/snippets.xml',
         'views/website_mail.xml',
+        'views/website_email_designer.xml',
+        'views/email_template_view.xml',
         'security/website_mail.xml',
     ],
     'css': [
diff --git a/addons/website_mail/controllers/__init__.py b/addons/website_mail/controllers/__init__.py
index 8ee9bae18d9..d70eef6b8ee 100644
--- a/addons/website_mail/controllers/__init__.py
+++ b/addons/website_mail/controllers/__init__.py
@@ -1 +1,2 @@
+import email_designer
 import main
diff --git a/addons/website_mail/controllers/email_designer.py b/addons/website_mail/controllers/email_designer.py
new file mode 100644
index 00000000000..a7f6ef8d287
--- /dev/null
+++ b/addons/website_mail/controllers/email_designer.py
@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+
+# from openerp import SUPERUSER_ID
+from openerp.addons.web import http
+from openerp.addons.web.http import request
+from openerp.addons.website.models import website
+
+
+class WebsiteEmailDesigner(http.Controller):
+
+    @website.route('/website_mail/email_designer/<model("email.template"):template>/', type='http', auth="public", multilang=True)
+    def index(self, template, **kw):
+        values = {
+            'template': template,
+        }
+        print template
+        return request.website.render("website_mail.designer_index", values)
+
+    @website.route(['/website_mail/snippets'], type='json', auth="public")
+    def snippets(self):
+        return request.website._render('website_mail.email_designer_snippets')
diff --git a/addons/website_mail/models/__init__.py b/addons/website_mail/models/__init__.py
index f8d603716a2..e60de014149 100644
--- a/addons/website_mail/models/__init__.py
+++ b/addons/website_mail/models/__init__.py
@@ -1,2 +1,3 @@
 import mail_message
 import mail_thread
+import email_template
diff --git a/addons/website_mail/models/email_template.py b/addons/website_mail/models/email_template.py
new file mode 100644
index 00000000000..720ac8bfb0e
--- /dev/null
+++ b/addons/website_mail/models/email_template.py
@@ -0,0 +1,87 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2014-Today OpenERP SA (<http://www.openerp.com>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+import lxml
+import urlparse
+
+from openerp.osv import osv, fields
+from openerp.tools.translate import _
+
+
+class EmailTemplate(osv.Model):
+    _inherit = 'email.template'
+
+    def _get_website_link(self, cr, uid, ids, name, args, context=None):
+        return dict((id, _('<a href="website_mail/email_designer/%s">Edit in Website</a>') % id) for id in ids)
+
+    _columns = {
+        'website_link': fields.function(
+            _get_website_link, type='text',
+            string='Website Link',
+            help='Link to the website',
+        ),
+    }
+
+    def _postprocess_html_replace_links(self, cr, uid, body_html, context=None):
+        """ Post-processing of body_html. Indeed the content generated by the
+        website builder contains references to local addresses, for example
+        for images. This method changes those addresses to absolute addresses. """
+        html = body_html
+        if not body_html:
+            return html
+
+        # form a tree
+        root = lxml.html.fromstring(html)
+        if not len(root) and root.text is None and root.tail is None:
+            html = '<div>%s</div>' % html
+            root = lxml.html.fromstring(html)
+
+        base_url = self.pool['ir.config_parameter'].get_param(cr, uid, 'web.base.url')
+        (base_scheme, base_netloc, bpath, bparams, bquery, bfragment) = urlparse.urlparse(base_url)
+
+        def _process_link(url):
+            new_url = url
+            (scheme, netloc, path, params, query, fragment) = urlparse.urlparse(url)
+            if not scheme and not netloc:
+                new_url = urlparse.urlunparse((base_scheme, base_netloc, path, params, query, fragment))
+            return new_url
+
+        # check all nodes, replace :
+        # - img src -> check URL
+        # - a href -> check URL
+        for node in root.iter():
+            if node.tag == 'a':
+                node.set('href', _process_link(node.get('href')))
+            elif node.tag == 'img' and not node.get('src', 'data').startswith('data'):
+                node.set('src', _process_link(node.get('src')))
+
+        html = lxml.etree.tostring(root, pretty_print=False)
+        return html
+
+    def create(self, cr, uid, values, context=None):
+        if 'body_html' in values:
+            values['body_html'] = self._postprocess_html_replace_links(cr, uid, values['body_html'], context=context)
+        return super(EmailTemplate, self).create(cr, uid, values, context=context)
+
+    def write(self, cr, uid, ids, values, context=None):
+        if 'body_html' in values:
+            values['body_html'] = self._postprocess_html_replace_links(cr, uid, values['body_html'], context=context)
+        return super(EmailTemplate, self).write(cr, uid, ids, values, context=context)
diff --git a/addons/website_mail/static/src/js/website_email_designer.js b/addons/website_mail/static/src/js/website_email_designer.js
new file mode 100644
index 00000000000..25577004700
--- /dev/null
+++ b/addons/website_mail/static/src/js/website_email_designer.js
@@ -0,0 +1,17 @@
+(function () {
+    'use strict';
+
+    var website = openerp.website;
+
+    website.snippet.BuildingBlock.include({
+
+        // init: function (parent) {
+        //     this._super.apply(this, arguments);
+        // },
+
+        _get_snippet_url: function () {
+            return '/website_mail/snippets';
+        }
+
+    });
+})();
diff --git a/addons/website_mail/views/email_template_view.xml b/addons/website_mail/views/email_template_view.xml
new file mode 100644
index 00000000000..3206eaeaee6
--- /dev/null
+++ b/addons/website_mail/views/email_template_view.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+    <data>
+        <record model="ir.ui.view" id="email_template_form_inherit_website_link">
+            <field name="name">email.template.form</field>
+            <field name="model">email.template</field>
+            <field name="inherit_id" ref="email_template.email_template_form"/>
+            <field name="arch" type="xml">
+                <xpath expr="//page[@string='Mailing Template']/group" position="before">
+                    <field name="website_link" widget='html' radonly='1'/>
+                </xpath>
+            </field>
+        </record>
+
+    </data>
+</openerp>
diff --git a/addons/website_mail/views/snippets.xml b/addons/website_mail/views/snippets.xml
new file mode 100644
index 00000000000..e49cf301964
--- /dev/null
+++ b/addons/website_mail/views/snippets.xml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+<data>
+<template id="email_designer_snippets">
+
+    <div class="scroll" t-ignore="1">
+        <ul class="nav navbar-nav nav-tabs">
+          <li class="active"><a href="#snippet_structure" data-toggle="tab">Structure</a></li>
+          <li><a href="#snippet_content" data-toggle="tab">Content</a></li>
+          <li><a href="#snippet_feature" data-toggle="tab">Features</a></li>
+          <li><a href="#snippet_effect" data-toggle="tab">Effects</a></li>
+        </ul>
+        <div class="tab-content">
+
+<div id="snippet_structure" class="tab-pane fade in active">
+
+    <div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
+            <span class="oe_snippet_thumbnail_title">Text-Image</span>
+        </div>
+        <section class="oe_snippet_body">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mt16">
+                        <h3>A Section Subtitle</h3>
+                        <p>
+                            Write one or two paragraphs describing your product or
+                            services. To be successful your content needs to be
+                            useful to your readers.
+                        </p><p>
+                            Start with the customer – find out what they want
+                            and give it to them.
+                        </p>
+                    </div>
+                    <div class="col-md-6 mt16 mb16">
+                        <img class="img img-responsive shadow" src="/website/static/src/img/text_image.png"/>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
+</div>
+
+<div id="snippet_feature" class="tab-pane fade">
+</div>
+
+<div id="snippet_effect" class="tab-pane fade">
+</div>
+
+<div id="snippet_styles" class="hidden">
+</div>
+
+        </div>
+    </div>
+
+</template>
+</data>
+</openerp>
diff --git a/addons/website_mail/views/website_email_designer.xml b/addons/website_mail/views/website_email_designer.xml
new file mode 100644
index 00000000000..3d18e765ead
--- /dev/null
+++ b/addons/website_mail/views/website_email_designer.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+<data>
+
+<!-- Email Designer main page -->
+<template id="designer_index" name="Email Designer">
+    <t t-call="website.layout">
+        <t t-set="head">
+            <script type="text/javascript" src="/website_mail/static/src/js/website_email_designer.js"></script>
+        </t>
+        <div id="wrap">
+            <div class="oe_structure container">
+                <div class="row">
+                    <form class="form-horizontal" role="form">
+                        <div class="form-group">
+                            <label for="email_from" class="col-sm-2 control-label">Email From</label>
+                            <div class="col-sm-10">
+                                <input type="char" class="form-control" id="email_from"
+                                    placeholder="my.email@example.com" t-att-value="template.email_from"/>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="email_to" class="col-sm-2 control-label">To (Email)</label>
+                            <div class="col-sm-10">
+                                <input type="char" class="form-control" id="email_to"
+                                    placeholder="my.email@example.com" t-att-value="template.email_to"/>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="partner_to" class="col-sm-2 control-label">To (Partners)</label>
+                            <div class="col-sm-10">
+                                <input type="char" class="form-control" id="partner_to"
+                                    placeholder="1,2,3" t-att-value="template.partner_to"/>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="reply_to" class="col-sm-2 control-label">Reply-To</label>
+                            <div class="col-sm-10">
+                                <input type="char" class="form-control" id="reply_to"
+                                    placeholder="my.email@example.com" t-att-value="template.reply_to"/>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="subject" class="col-sm-2 control-label">Subject</label>
+                            <div class="col-sm-10">
+                                <input type="char" class="form-control" id="subject"
+                                    placeholder="Subject" t-att-value="template.subject"/>
+                            </div>
+                        </div>
+                    </form>
+                    <div t-field="template.body_html"/>
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-set="website.footer"></t>
+</template>
+
+</data>
+</openerp>
+
+
+

From 4ec71cd82b1f9ffa6cc0123d4ae5a4dd45ef2a1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@openerp.com>
Date: Mon, 13 Jan 2014 19:00:51 +0100
Subject: [PATCH 3/6] [ADD] website_mail: template designer: added some
 snippets for template design

bzr revid: tde@openerp.com-20140113180051-dqtzzn9mrya0ythq
---
 addons/website_mail/views/snippets.xml        | 221 ++++++++++++++++--
 .../views/website_email_designer.xml          |   2 +-
 2 files changed, 204 insertions(+), 19 deletions(-)

diff --git a/addons/website_mail/views/snippets.xml b/addons/website_mail/views/snippets.xml
index e49cf301964..16e23a489b6 100644
--- a/addons/website_mail/views/snippets.xml
+++ b/addons/website_mail/views/snippets.xml
@@ -14,33 +14,214 @@
 
 <div id="snippet_structure" class="tab-pane fade in active">
 
+
     <div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
             <span class="oe_snippet_thumbnail_title">Text-Image</span>
         </div>
         <section class="oe_snippet_body">
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-6 mt16">
-                        <h3>A Section Subtitle</h3>
-                        <p>
-                            Write one or two paragraphs describing your product or
-                            services. To be successful your content needs to be
-                            useful to your readers.
-                        </p><p>
-                            Start with the customer – find out what they want
-                            and give it to them.
-                        </p>
-                    </div>
-                    <div class="col-md-6 mt16 mb16">
-                        <img class="img img-responsive shadow" src="/website/static/src/img/text_image.png"/>
-                    </div>
-                </div>
-            </div>
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td style="width:580px" valign="top">
+                            <div style="padding:0px 5px">
+                                <table style="font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                                    <tbody>
+                                        <tr>
+                                            <td valign="top">
+                                                <h3>A Section Subtitle</h3>
+                                                <p style="overflow:hidden; font-size:12px">
+                                                    Write one or two paragraphs describing your product,
+                                                    services or a specific feature. To be successful
+                                                    your content needs to be useful to your readers.
+                                                </p><p style="overflow:hidden; font-size:12px">
+                                                    Start with the customer – find out what they want
+                                                    and give it to them.
+                                                </p>
+                                            </td>
+                                            <td width="10"></td>
+                                            <td valign="top" width="283">
+                                                <img width="270" style="display:block;border:none;min-height:263px" alt="" src="/website/static/src/img/text_image.png"/>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </section>
     </div>
 
+
+    <div data-snippet-id="image-text" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_text.png"/>
+            <span class="oe_snippet_thumbnail_title">Image-Text</span>
+        </div>
+        <section class="oe_snippet_body">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td style="width:580px" valign="top">
+                            <div style="padding:0px 5px">
+                                <table style="font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                                    <tbody>
+                                        <tr>
+                                            <td valign="top" width="283">
+                                                <img width="270" style="display:block;border:none;min-height:263px" alt="" src="/website/static/src/img/image_text.jpg"/>
+                                            </td>
+                                            <td width="10"></td>
+                                            <td valign="top">
+                                                <h3>A Section Subtitle</h3>
+                                                <p style="overflow:hidden; font-size:12px">
+                                                    Write one or two paragraphs describing your product,
+                                                    services or a specific feature. To be successful
+                                                    your content needs to be useful to your readers.
+                                                </p><p style="overflow:hidden; font-size:12px">
+                                                    Start with the customer – find out what they want
+                                                    and give it to them.
+                                                </p>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+    </div>
+
+
+    <div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_jumbotron.png"/>
+            <span class="oe_snippet_thumbnail_title">Big Message</span>
+        </div>
+        <section class="oe_snippet_body">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:580px">
+                            <div style="padding:0px 5px">
+                                <h1>Sell Online. Easily.</h1>
+                                <p style="overflow:hidden">
+                                    Write one sentence to convince visitor about your message.
+                                </p>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+    </div>
+
+
+    <div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_block.png"/>
+            <span class="oe_snippet_thumbnail_title">Text Block</span>
+        </div>
+        <!-- <section class="oe_snippet_body"> -->
+        <div class="oe_snippet_body" style="padding:0px;margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:580px">
+                            <h2>
+                                A Great Headline
+                            </h2>
+                            <h3>A good subtitle</h3>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:580px">
+                            <div style="padding:0px 5px">
+                                <p style="overflow:hidden">
+                                    A great way to catch your reader's attention is to tell a story.
+                                    Everything you consider writing can be told as a story.
+                                </p><p style="overflow:hidden">
+                                    <strong>Great stories have personality</strong>. Consider telling 
+                                    a great story that provides personality. Writing a story 
+                                    with personality for potential clients will asist with 
+                                    making a relationship connection. This shows up in small
+                                    quirks like word choices or phrases. Write from your point 
+                                    of view, not from someone else's experience.
+                                </p><p style="overflow:hidden">
+                                    <strong>Great stories are for everyone even when only written for
+                                    just one person</strong>. If you try to write with a wide general
+                                    audience in mind, your story will ring false and be bland. 
+                                    No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
+                                </p>
+
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        <!-- </section> -->
+        </div>
+    </div>
+
+
+    <div data-snippet-id="hr" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_separator.png"/>
+            <span class="oe_snippet_thumbnail_title">Separator</span>        
+        </div>
+        <div class="oe_snippet_body" style="padding:0px;margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:580px">
+                            <div style="padding:0px 5px">
+                                <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0"/>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+
+    <div data-snippet-id="cta" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>
+            <span class="oe_snippet_thumbnail_title">Button</span>   
+        </div>
+        <div class="oe_snippet_body" style="padding:0px;margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">   
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:580px">
+                            <div style="padding:0px 5px">      
+                                <table style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:rgb(153,153,153);border-collapse:collapse;width:51px;font-family:arial;font-size:12px;color:rgb(51,51,51)" border="0" cellpadding="0" cellspacing="0" align="left">
+                                    <tbody>
+                                        <tr>
+                                            <td style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;padding:15px 5px;border-collapse:collapse;background-color:rgb(101,101,101)" align="center" valign="middle"> 
+                                                <a href="http://r.info.openerp.com/3bbh9o3y3tjskrk.html" style="text-decoration:none;border:none rgb(221,221,221);font-weight:bold;line-height:100%;text-align:center;color:rgb(0,136,204);word-wrap:break-word!important;background-color:rgb(101,101,101)" target="_blank">
+                                                    <span style="color:rgb(255,255,255);font-family:arial;font-size:12px;display:block;width:auto;text-align:center;white-space:nowrap">View Product</span>
+                                                </a>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+
 </div>
 
 <div id="snippet_feature" class="tab-pane fade">
@@ -52,6 +233,10 @@
 <div id="snippet_styles" class="hidden">
 </div>
 
+
+
+
+
         </div>
     </div>
 
diff --git a/addons/website_mail/views/website_email_designer.xml b/addons/website_mail/views/website_email_designer.xml
index 3d18e765ead..7969cf435b3 100644
--- a/addons/website_mail/views/website_email_designer.xml
+++ b/addons/website_mail/views/website_email_designer.xml
@@ -10,7 +10,7 @@
         </t>
         <div id="wrap">
             <div class="oe_structure container">
-                <div class="row">
+                <div class="row" style="width: 600px;">
                     <form class="form-horizontal" role="form">
                         <div class="form-group">
                             <label for="email_from" class="col-sm-2 control-label">Email From</label>

From 0aa495f5cbff9c77757c9f870b36c8888b5edd19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@openerp.com>
Date: Tue, 14 Jan 2014 18:17:15 +0100
Subject: [PATCH 4/6] [IMP] website_mail: improved email template snippets +
 added comparison / three columns / big pictures + some improvements in the
 page layout of template designer

bzr revid: tde@openerp.com-20140114171715-akbkj9x8ls8i5phf
---
 addons/website_mail/views/snippets.xml        | 252 +++++++++++++++---
 .../views/website_email_designer.xml          |  66 ++---
 2 files changed, 244 insertions(+), 74 deletions(-)

diff --git a/addons/website_mail/views/snippets.xml b/addons/website_mail/views/snippets.xml
index 16e23a489b6..daae9e5a368 100644
--- a/addons/website_mail/views/snippets.xml
+++ b/addons/website_mail/views/snippets.xml
@@ -24,13 +24,13 @@
             <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
                 <tbody>
                     <tr>
-                        <td style="width:580px" valign="top">
+                        <td style="width:600px" valign="top">
                             <div style="padding:0px 5px">
                                 <table style="font-family:arial;font-size:12px;color:rgb(51,51,51)">
                                     <tbody>
                                         <tr>
                                             <td valign="top">
-                                                <h3>A Section Subtitle</h3>
+                                                <h3 style="text-align: center; padding:0px 5px">A Section Subtitle</h3>
                                                 <p style="overflow:hidden; font-size:12px">
                                                     Write one or two paragraphs describing your product,
                                                     services or a specific feature. To be successful
@@ -41,8 +41,8 @@
                                                 </p>
                                             </td>
                                             <td width="10"></td>
-                                            <td valign="top" width="283">
-                                                <img width="270" style="display:block;border:none;min-height:263px" alt="" src="/website/static/src/img/text_image.png"/>
+                                            <td valign="top" width="290">
+                                                <img width="270" style="display:block;border:none;min-height:150px" src="/website/static/src/img/text_image.png"/>
                                             </td>
                                         </tr>
                                     </tbody>
@@ -61,21 +61,21 @@
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_text.png"/>
             <span class="oe_snippet_thumbnail_title">Image-Text</span>
         </div>
-        <section class="oe_snippet_body">
-            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
                 <tbody>
                     <tr>
-                        <td style="width:580px" valign="top">
+                        <td style="width:600px" valign="top">
                             <div style="padding:0px 5px">
                                 <table style="font-family:arial;font-size:12px;color:rgb(51,51,51)">
                                     <tbody>
                                         <tr>
-                                            <td valign="top" width="283">
-                                                <img width="270" style="display:block;border:none;min-height:263px" alt="" src="/website/static/src/img/image_text.jpg"/>
+                                            <td valign="top" width="290">
+                                                <img width="270" style="display:block;border:none;min-height:150px" alt="" src="/website/static/src/img/image_text.jpg"/>
                                             </td>
                                             <td width="10"></td>
                                             <td valign="top">
-                                                <h3>A Section Subtitle</h3>
+                                                <h3 style="text-align: center; padding:0px 5px">A Section Subtitle</h3>
                                                 <p style="overflow:hidden; font-size:12px">
                                                     Write one or two paragraphs describing your product,
                                                     services or a specific feature. To be successful
@@ -93,7 +93,7 @@
                     </tr>
                 </tbody>
             </table>
-        </section>
+        </div>
     </div>
 
 
@@ -102,13 +102,13 @@
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_jumbotron.png"/>
             <span class="oe_snippet_thumbnail_title">Big Message</span>
         </div>
-        <section class="oe_snippet_body">
-            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+        <section class="oe_snippet_body" style="padding:0px; margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
                 <tbody>
                     <tr>
-                        <td valign="top" style="width:580px">
+                        <td valign="top" style="width:600px">
                             <div style="padding:0px 5px">
-                                <h1>Sell Online. Easily.</h1>
+                                <h1 style="text-align: center">Sell Online. Easily.</h1>
                                 <p style="overflow:hidden">
                                     Write one sentence to convince visitor about your message.
                                 </p>
@@ -126,36 +126,40 @@
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_block.png"/>
             <span class="oe_snippet_thumbnail_title">Text Block</span>
         </div>
-        <!-- <section class="oe_snippet_body"> -->
-        <div class="oe_snippet_body" style="padding:0px;margin:0px">
-            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
                 <tbody>
                     <tr>
-                        <td valign="top" style="width:580px">
-                            <h2>
+                        <td valign="top" style="width:600px">
+                            <h2 style="text-align: center">
                                 A Great Headline
                             </h2>
-                            <h3>A good subtitle</h3>
+                            <h3 style="text-align: center">
+                                A good subtitle
+                            </h3>
                         </td>
                     </tr>
                     <tr>
-                        <td valign="top" style="width:580px">
+                        <td valign="top" style="width:600px">
                             <div style="padding:0px 5px">
                                 <p style="overflow:hidden">
                                     A great way to catch your reader's attention is to tell a story.
                                     Everything you consider writing can be told as a story.
-                                </p><p style="overflow:hidden">
+                                </p>
+                                <p style="overflow:hidden">
                                     <strong>Great stories have personality</strong>. Consider telling 
                                     a great story that provides personality. Writing a story 
                                     with personality for potential clients will asist with 
                                     making a relationship connection. This shows up in small
                                     quirks like word choices or phrases. Write from your point 
                                     of view, not from someone else's experience.
-                                </p><p style="overflow:hidden">
+                                </p>
+                                <p style="overflow:hidden">
                                     <strong>Great stories are for everyone even when only written for
                                     just one person</strong>. If you try to write with a wide general
                                     audience in mind, your story will ring false and be bland. 
-                                    No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
+                                    No one will be interested. Write for one person. If it’s genuine
+                                    for the one, it’s genuine for the rest.
                                 </p>
 
                             </div>
@@ -163,7 +167,6 @@
                     </tr>
                 </tbody>
             </table>
-        <!-- </section> -->
         </div>
     </div>
 
@@ -173,11 +176,11 @@
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_separator.png"/>
             <span class="oe_snippet_thumbnail_title">Separator</span>        
         </div>
-        <div class="oe_snippet_body" style="padding:0px;margin:0px">
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
             <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
                 <tbody>
                     <tr>
-                        <td valign="top" style="width:580px">
+                        <td valign="top" style="width:600px">
                             <div style="padding:0px 5px">
                                 <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0"/>
                             </div>
@@ -189,16 +192,199 @@
     </div>
 
 
+    <div data-snippet-id="big-picture" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_big_picture.png"/>
+            <span class="oe_snippet_thumbnail_title">Big Picture</span>          
+        </div>
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <h2 style="text-align: center; padding:0px 5px">A Punchy Headline</h2>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <img width="500" style="display:block;border:none;min-height:250px;margin:0 auto;" src="/website/static/src/img/big_picture.png"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <p style="text-align: center; overflow:hidden">
+                                <h3 style="text-align: center; padding:0px 5px">A Small Subtitle</h3>
+                            </p>
+                            <p style="text-align: center; overflow:hidden">
+                                Choose a vibrant image and write an inspiring paragraph
+                                about it. It does not have to be long, but it should
+                                reinforce your image.
+                            </p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+
+    <div data-snippet-id="three-columns" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_three_columns.png"/>
+            <span class="oe_snippet_thumbnail_title">Three Columns</span>            
+        </div>
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:200px">
+                            <img width="175" style="display:block;border:none;min-height:50px" src="/website/static/src/img/desert_thumb.jpg"/>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <img width="175" style="display:block;border:none;min-height:50px" src="/website/static/src/img/deers_thumb.jpg"/>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <img width="175" style="display:block;border:none;min-height:50px" src="/website/static/src/img/china_thumb.jpg"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:200px">
+                            <h3 style="text-align: center; padding:0px 5px">Feature One</h3>
+                            <p style="overflow:hidden">
+                                Choose a vibrant image and write an inspiring paragraph
+                                about it. It does not have to be long, but it should
+                                reinforce your image.
+                            </p>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <h3 style="text-align: center; padding:0px 5px">Feature Two</h3>
+                            <p style="overflow:hidden">
+                                Choose a vibrant image and write an inspiring paragraph
+                                about it. It does not have to be long, but it should
+                                reinforce your image.
+                            </p>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <h3 style="text-align: center; padding:0px 5px">Feature Three</h3>
+                            <p style="overflow:hidden">
+                                Choose a vibrant image and write an inspiring paragraph
+                                about it. It does not have to be long, but it should
+                                reinforce your image.
+                            </p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+</div>
+
+
+<div id="snippet_feature" class="tab-pane fade">
+
+
+    <div data-snippet-id="pricing" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_comparison.png"/>
+            <span class="oe_snippet_thumbnail_title">Comparisons</span>         
+        </div>
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
+            <div style="width:600px">
+                <h2 style="text-align: center">Our Offers</h2>
+            </div>
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">   
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:200px">
+                            <h2 style="text-align: center">Beginner</h2>
+                            <p style="text-align: center; overflow:hidden">Starter Package</p>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <h2 style="text-align: center">Professional</h2>
+                            <p style="text-align: center; overflow:hidden">Enterprise package</p>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <h2 style="text-align: center">Expert</h2>
+                            <p style="text-align: center; overflow:hidden">The top of the top</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:200px">
+                            <h2 style="margin: 0; text-align: center">$<strong style="font-size: 30px">450</strong><small>.00</small></h2>
+                            <p style="text-align: center">per month</p>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <h2 style="margin: 0; text-align: center">$<strong style="font-size: 30px">590</strong><small>.00</small></h2>
+                            <p style="text-align: center">per month</p>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <h2 style="margin: 0; text-align: center">$<strong style="font-size: 30px">890</strong><small>.00</small></h2>
+                            <p style="text-align: center">per month</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:200px">
+                            <ul>
+                                <li>Battery: 8 hours</li>
+                                <li>Screen: 2.5 inch</li>
+                                <li>Weight: 1.1 ounces</li>
+                                <li>No support</li>
+                            </ul>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <ul>
+                                <li>Battery: 12 hours</li>
+                                <li>Screen: 2.8 inch</li>
+                                <li>Weight: 1.2 ounces</li>
+                                <li>Limited support</li>
+                            </ul>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <ul>
+                                <li>Battery: 20 hours</li>
+                                <li>Screen: 2.8 inch</li>
+                                <li>Weight: 1.2 ounces</li>
+                                <li>Unlimited support</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:200px">
+                            <p style="text-align: center; overflow: hidden">
+                                <i>Free shipping, satisfied or reimbursed.</i><br/>
+                                <a href="/page/website.contactus">Order now</a>
+                            </p>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <p style="text-align: center; overflow: hidden">
+                                <i>Free shipping, satisfied or reimbursed.</i><br/>
+                                <a href="/page/website.contactus">Order now</a>
+                            </p>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <p style="text-align: center; overflow: hidden">
+                                <i>Free shipping, satisfied or reimbursed.</i><br/>
+                                <a href="/page/website.contactus">Contact us</a>
+                            </p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+
     <div data-snippet-id="cta" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>
             <span class="oe_snippet_thumbnail_title">Button</span>   
         </div>
-        <div class="oe_snippet_body" style="padding:0px;margin:0px">
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
             <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">   
                 <tbody>
                     <tr>
-                        <td valign="top" style="width:580px">
+                        <td valign="top" style="width:600px">
                             <div style="padding:0px 5px">      
                                 <table style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:rgb(153,153,153);border-collapse:collapse;width:51px;font-family:arial;font-size:12px;color:rgb(51,51,51)" border="0" cellpadding="0" cellspacing="0" align="left">
                                     <tbody>
@@ -221,10 +407,6 @@
         </div>
     </div>
 
-
-</div>
-
-<div id="snippet_feature" class="tab-pane fade">
 </div>
 
 <div id="snippet_effect" class="tab-pane fade">
@@ -235,8 +417,6 @@
 
 
 
-
-
         </div>
     </div>
 
diff --git a/addons/website_mail/views/website_email_designer.xml b/addons/website_mail/views/website_email_designer.xml
index 7969cf435b3..d65d9358360 100644
--- a/addons/website_mail/views/website_email_designer.xml
+++ b/addons/website_mail/views/website_email_designer.xml
@@ -10,46 +10,36 @@
         </t>
         <div id="wrap">
             <div class="oe_structure container">
+                <h1 t-field="template.name"/>
                 <div class="row" style="width: 600px;">
-                    <form class="form-horizontal" role="form">
-                        <div class="form-group">
-                            <label for="email_from" class="col-sm-2 control-label">Email From</label>
-                            <div class="col-sm-10">
-                                <input type="char" class="form-control" id="email_from"
-                                    placeholder="my.email@example.com" t-att-value="template.email_from"/>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="email_to" class="col-sm-2 control-label">To (Email)</label>
-                            <div class="col-sm-10">
-                                <input type="char" class="form-control" id="email_to"
-                                    placeholder="my.email@example.com" t-att-value="template.email_to"/>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="partner_to" class="col-sm-2 control-label">To (Partners)</label>
-                            <div class="col-sm-10">
-                                <input type="char" class="form-control" id="partner_to"
-                                    placeholder="1,2,3" t-att-value="template.partner_to"/>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="reply_to" class="col-sm-2 control-label">Reply-To</label>
-                            <div class="col-sm-10">
-                                <input type="char" class="form-control" id="reply_to"
-                                    placeholder="my.email@example.com" t-att-value="template.reply_to"/>
-                            </div>
-                        </div>
+                    <div class="row">
+                        <div class="col-lg-3"><b>Email From</b></div>
+                        <div class="col-lg-9"><span t-field="template.email_from"/></div>
+                    </div>
 
-                        <div class="form-group">
-                            <label for="subject" class="col-sm-2 control-label">Subject</label>
-                            <div class="col-sm-10">
-                                <input type="char" class="form-control" id="subject"
-                                    placeholder="Subject" t-att-value="template.subject"/>
-                            </div>
-                        </div>
-                    </form>
-                    <div t-field="template.body_html"/>
+                    <div class="row">
+                        <div class="col-lg-3"><b>To (Email)</b></div>
+                        <div class="col-lg-9"><span t-field="template.email_to"/></div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-lg-3"><b>To (Partners)</b></div>
+                        <div class="col-lg-9"><span t-field="template.partner_to"/></div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-lg-3"><b>Reply To</b></div>
+                        <div class="col-lg-9"><span t-field="template.reply_to"/></div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-lg-3"><b>Subject</b></div>
+                        <div class="col-lg-9"><span t-field="template.subject"/></div>
+                    </div>
+
+                    <div class="row well">
+                        <div t-field="template.body_html"/>
+                    </div>
                 </div>
             </div>
         </div>

From cb26621d2bf499e2f539924238ce364cf9a1db38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@openerp.com>
Date: Tue, 14 Jan 2014 18:36:29 +0100
Subject: [PATCH 5/6] [IMP] website_mail: template designer: improved button
 snippet

bzr revid: tde@openerp.com-20140114173629-zfxili82zn6zi6yv
---
 addons/website_mail/views/snippets.xml | 44 +++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/addons/website_mail/views/snippets.xml b/addons/website_mail/views/snippets.xml
index daae9e5a368..17937180ef7 100644
--- a/addons/website_mail/views/snippets.xml
+++ b/addons/website_mail/views/snippets.xml
@@ -296,15 +296,15 @@
             <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">   
                 <tbody>
                     <tr>
-                        <td valign="top" style="width:200px">
+                        <td valign="top" style="width:200px; bgcolor: #bce8f1; background-color: #bce8f1;">
                             <h2 style="text-align: center">Beginner</h2>
                             <p style="text-align: center; overflow:hidden">Starter Package</p>
                         </td>
-                        <td valign="top" style="width:200px">
+                        <td valign="top" style="width:200px; bgcolor: #428bca; background-color: #428bca;">
                             <h2 style="text-align: center">Professional</h2>
                             <p style="text-align: center; overflow:hidden">Enterprise package</p>
                         </td>
-                        <td valign="top" style="width:200px">
+                        <td valign="top" style="width:200px; bgcolor: #bce8f1; background-color: #bce8f1;">
                             <h2 style="text-align: center">Expert</h2>
                             <p style="text-align: center; overflow:hidden">The top of the top</p>
                         </td>
@@ -384,9 +384,43 @@
             <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">   
                 <tbody>
                     <tr>
-                        <td valign="top" style="width:600px">
+                        <td valign="top" style="width:200px">
                             <div style="padding:0px 5px">      
-                                <table style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:rgb(153,153,153);border-collapse:collapse;width:51px;font-family:arial;font-size:12px;color:rgb(51,51,51)" border="0" cellpadding="0" cellspacing="0" align="left">
+                                <table style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:rgb(153,153,153);border-collapse:collapse;width:70px;font-family:arial;font-size:12px;color:rgb(51,51,51);margin-left:60px" border="0" cellpadding="0" cellspacing="0">
+                                    <tbody>
+                                        <tr>
+                                            <td style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;padding:15px 5px;border-collapse:collapse;background-color:rgb(101,101,101)" align="center" valign="middle"> 
+                                                <a href="http://r.info.openerp.com/3bbh9o3y3tjskrk.html" style="text-decoration:none;border:none rgb(221,221,221);font-weight:bold;line-height:100%;text-align:center;color:rgb(0,136,204);word-wrap:break-word!important;background-color:rgb(101,101,101)" target="_blank">
+                                                    <span style="color:rgb(255,255,255);font-family:arial;font-size:12px;display:block;width:auto;text-align:center;white-space:nowrap">View Product</span>
+                                                </a>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <div style="padding:0px 5px">      
+                                <table style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:rgb(153,153,153);border-collapse:collapse;width:70px;font-family:arial;font-size:12px;color:rgb(51,51,51);margin-left:60px" border="0" cellpadding="0" cellspacing="0">
+                                    <tbody>
+                                        <tr>
+                                            <td style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;padding:15px 5px;border-collapse:collapse;background-color:rgb(101,101,101)" align="center" valign="middle"> 
+                                                <a href="http://r.info.openerp.com/3bbh9o3y3tjskrk.html" style="text-decoration:none;border:none rgb(221,221,221);font-weight:bold;line-height:100%;text-align:center;color:rgb(0,136,204);word-wrap:break-word!important;background-color:rgb(101,101,101)" target="_blank">
+                                                    <span style="color:rgb(255,255,255);font-family:arial;font-size:12px;display:block;width:auto;text-align:center;white-space:nowrap">View Product</span>
+                                                </a>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </td>
+                        <td valign="top" style="width:200px">
+                            <div style="padding:0px 5px">      
+                                <table style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:rgb(153,153,153);border-collapse:collapse;width:70px;font-family:arial;font-size:12px;color:rgb(51,51,51);margin-left:60px" border="0" cellpadding="0" cellspacing="0">
                                     <tbody>
                                         <tr>
                                             <td style="border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;padding:15px 5px;border-collapse:collapse;background-color:rgb(101,101,101)" align="center" valign="middle"> 

From 7a9bafc39c020c33e6e95918113ab88bec4d8b07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@openerp.com>
Date: Wed, 15 Jan 2014 10:17:38 +0100
Subject: [PATCH 6/6] [CLEAN] website_mail: template designer: cleaned a bit
 the snippets to remove section tag

bzr revid: tde@openerp.com-20140115091738-q0gpxqpn80m9r1sd
---
 addons/website_mail/views/snippets.xml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/addons/website_mail/views/snippets.xml b/addons/website_mail/views/snippets.xml
index 17937180ef7..0ec93296ddd 100644
--- a/addons/website_mail/views/snippets.xml
+++ b/addons/website_mail/views/snippets.xml
@@ -20,7 +20,7 @@
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
             <span class="oe_snippet_thumbnail_title">Text-Image</span>
         </div>
-        <section class="oe_snippet_body">
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
             <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
                 <tbody>
                     <tr>
@@ -52,7 +52,7 @@
                     </tr>
                 </tbody>
             </table>
-        </section>
+        </div>
     </div>
 
 
@@ -102,7 +102,7 @@
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_jumbotron.png"/>
             <span class="oe_snippet_thumbnail_title">Big Message</span>
         </div>
-        <section class="oe_snippet_body" style="padding:0px; margin:0px">
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
             <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
                 <tbody>
                     <tr>
@@ -117,7 +117,7 @@
                     </tr>
                 </tbody>
             </table>
-        </section>
+        </div>
     </div>