[IMP] mail: add new classy layout for email notifications

This commit adds a new QWeb layout mail_notification_light. It is a new
lighter template using more modern styling. Its purpose is to be used as
a basis for all future templates used in notification mechanism (chatter,
sale orders, ...). During some time all templates will exist separately.

Future commits will gradually improve or add various notification
mechanisms. This new template will gradually be used more often in order
to replace old ones.

Thanks to @est-odoo for its in-depth testing of the template.
This commit is contained in:
Thibault Delavallée
2018-02-20 14:30:06 +01:00
parent 257bf539d5
commit 2709ffe0e2
+70
View File
@@ -182,5 +182,75 @@
</table>
</div>
</template>
<template id="mail_notification_light">
<table border="0" cellpadding="0" style="padding-top: 16px; background-color: #F1F1F1; font-family:Verdana, Arial,sans-serif; color: #454748; width: 100%; border-collapse:separate;"><tr><td align="center">
<table border="0" width="590" cellpadding="0" style="padding: 16px; background-color: white; color: #454748; border-collapse:separate;" summary="o_mail_notification">
<tbody>
<!-- HEADER -->
<tr>
<td align="center" style="min-width: 590px;">
<table width="590" border="0" cellpadding="0" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
<tr><td valign="middle">
<span style="font-size: 10px;">Your <t t-esc="'%s' % model_description or 'document'"/></span><br/>
<span style="font-size: 20px; font-weight: bold;">
<t t-esc="message.record_name"/>
</span>
</td><td valign="middle" align="right">
<img t-att-src="'/logo.png?company=%s' % company.id" style="padding: 0px; margin: 0px; height: auto; width: 40px;" t-att-alt="'%s' % company.name"/>
</td></tr>
<tr><td colspan="2" style="text-align:center;">
<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; margin:16px 0px 16px 0px;"/>
</td></tr>
</table>
</td>
</tr>
<!-- CONTENT -->
<tr>
<td align="center" style="min-width: 590px;">
<table width="590" border="0" cellpadding="0" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
<tr><td valign="top" style="font-size: 14px;">
<t t-raw="message.body"/>
</td></tr>
<tr><td style="text-align:center;">
<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; margin: 16px 0px 16px 0px;"/>
</td></tr>
</table>
</td>
</tr>
<!-- FOOTER -->
<tr>
<td align="center" style="min-width: 590px;">
<table width="590" border="0" cellpadding="0" style="min-width: 590px; background-color: white; font-size: 12px; padding: 0px 8px 0px 8px; border-collapse:separate;">
<tr><td valign="middle" align="left">
<t t-esc="company.name"/>
</td></tr>
<tr><td valign="middle" align="left" style="opacity: 0.7;">
<t t-esc="company.phone"/>
<t t-if="company.email"> |
<a t-att-href="'mailto:%s' % company.email" style="text-decoration:none; color: #454748;"><t t-esc="company.email"/></a>
</t>
<t t-if="company.website"> |
<a t-att-href="'%s' % company.website" style="text-decoration:none; color: #454748;">
<t t-esc="company.website"/>
</a>
</t>
</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</td></tr>
<!-- POWERED BY -->
<tr><td align="center" style="min-width: 590px;">
<table width="590" border="0" cellpadding="0" style="min-width: 590px; background-color: #F1F1F1; color: #454748; padding: 8px; border-collapse:separate;">
<tr><td style="text-align: center; font-size: 14px;">
Powered by <a target="_blank" href="https://www.odoo.com" style="color: #875A7B;">Odoo</a>
</td></tr>
</table>
</td></tr>
</table>
</template>
</data>
</odoo>