[MERGE] [IMP] website_mail: email template visual editor:
- reordered email snippets: 2 categories with clearer name, holding basic and advanced email structures - email_template: better display of the front-end link - email designer: added a link to the backend - added forgotten dependency towards email_template bzr revid: tde@openerp.com-20140213124508-xr6xzmqgd9qqrtp0
This commit is contained in:
Thibault Delavallée
@@ -26,7 +26,7 @@
|
||||
'version': '0.1',
|
||||
'description': """Glue module holding mail improvements for website.""",
|
||||
'author': 'OpenERP SA',
|
||||
'depends': ['website', 'mail'],
|
||||
'depends': ['website', 'mail', 'email_template'],
|
||||
'data': [
|
||||
'views/snippets.xml',
|
||||
'views/website_mail.xml',
|
||||
|
||||
@@ -30,7 +30,7 @@ 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)
|
||||
return dict((id, _('<a href="website_mail/email_designer/%s">Open with visual editor</a>') % id) for id in ids)
|
||||
|
||||
_columns = {
|
||||
'website_link': fields.function(
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -6,8 +6,10 @@
|
||||
<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 expr="//field[@name='model']" position="before">
|
||||
<br />
|
||||
<field name="website_link" widget='html' radonly='1'
|
||||
style='margin: 0px; padding: 0px;'/>
|
||||
</xpath>
|
||||
</field>
|
||||
</record>
|
||||
|
||||
@@ -5,14 +5,62 @@
|
||||
|
||||
<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>
|
||||
<li class="active"><a href="#snippet_email_structure" data-toggle="tab">Email Design</a></li>
|
||||
<li><a href="#snippet_email_feature" data-toggle="tab">Advanced Email Features</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
|
||||
<div id="snippet_structure" class="tab-pane fade in active">
|
||||
<div id="snippet_email_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_block.png"/>
|
||||
<span class="oe_snippet_thumbnail_title">Text Block</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 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td valign="top" style="width:600px">
|
||||
<h2 style="text-align: center">
|
||||
A Great Headline
|
||||
</h2>
|
||||
<h3 style="text-align: center">
|
||||
A good subtitle
|
||||
</h3>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
|
||||
@@ -97,125 +145,34 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
|
||||
<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_jumbotron.png"/>
|
||||
<span class="oe_snippet_thumbnail_title">Big Message</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 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td valign="top" style="width:600px">
|
||||
<div style="padding:0px 5px">
|
||||
<h1 style="text-align: center">Sell Online. Easily.</h1>
|
||||
<p style="overflow:hidden">
|
||||
Write one sentence to convince visitor about your message.
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</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>
|
||||
<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:600px">
|
||||
<h2 style="text-align: center">
|
||||
A Great Headline
|
||||
</h2>
|
||||
<h3 style="text-align: center">
|
||||
A good subtitle
|
||||
</h3>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
<img class="oe_snippet_thumbnail_img" src="/website_mail/static/src/img/blocks/block_two_columns.png"/>
|
||||
<span class="oe_snippet_thumbnail_title">Two 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: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>
|
||||
<td valign="top" style="width:300px">
|
||||
<img width="275" style="display:block;border:none;min-height:50px" src="/website/static/src/img/desert_thumb.jpg"/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</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 valign="top" style="width:300px">
|
||||
<img width="275" style="display:block;border:none;min-height:50px" src="/website/static/src/img/deers_thumb.jpg"/>
|
||||
</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>
|
||||
<td valign="top" style="width:300px">
|
||||
<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>
|
||||
<p style="text-align: center; overflow:hidden">
|
||||
</td>
|
||||
<td valign="top" style="width:300px">
|
||||
<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.
|
||||
@@ -230,7 +187,7 @@
|
||||
|
||||
<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"/>
|
||||
<img class="oe_snippet_thumbnail_img" src="/website_mail/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">
|
||||
@@ -278,10 +235,67 @@
|
||||
</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: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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="snippet_feature" class="tab-pane fade">
|
||||
<div id="snippet_email_feature" class="tab-pane fade">
|
||||
|
||||
|
||||
<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="pricing" data-selector-children=".oe_structure, [data-oe-type=html]">
|
||||
@@ -375,6 +389,30 @@
|
||||
</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>
|
||||
<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:600px">
|
||||
<div style="padding:0px 5px">
|
||||
<h1 style="text-align: center">Sell Online. Easily.</h1>
|
||||
<p style="overflow:hidden">
|
||||
Write one sentence to convince visitor about your message.
|
||||
</p>
|
||||
</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"/>
|
||||
@@ -443,8 +481,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div id="snippet_effect" class="tab-pane fade">
|
||||
</div>
|
||||
|
||||
<div id="snippet_styles" class="hidden">
|
||||
</div>
|
||||
|
||||
@@ -10,35 +10,43 @@
|
||||
</t>
|
||||
<div id="wrap">
|
||||
<div class="container">
|
||||
<h1 t-field="template.name"/>
|
||||
<div class="row" style="width: 600px;">
|
||||
<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="row">
|
||||
<div class="col-md-8">
|
||||
<a class="pull-right mt32"
|
||||
t-att-href="'/web#return_label=Website&action=email_template.action_email_template_tree_all&view_type=form&id=%d' % template.id">
|
||||
<button class="btn btn-primary">Back to Template Form</button>
|
||||
</a>
|
||||
<h1 t-field="template.name"/>
|
||||
<div class="row" style="width: 600px;">
|
||||
<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="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 (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>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>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">
|
||||
<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" style="position: relative;"/>
|
||||
<div class="row well">
|
||||
<div t-field="template.body_html" style="position: relative;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user