[FIX] mail, sale: button texts are translatable

[IMP] mail: improve email templates and simplify DOM

2 files changed, 72 insertions, 95 deletions

diff --git a/addons/mail/data/mail_data.xml b/addons/mail/data/mail_data.xml
index c499dd5c5e7..9e402792ade 100644
--- a/addons/mail/data/mail_data.xml
+++ b/addons/mail/data/mail_data.xml
@@ -67,12 +67,12 @@
         </t>
     </td>
     <td valign="center" align="right">
-        <img t-att-src="'/logo.png?company=%s' % company.id" style="padding: 0px; margin: 0px; height: auto; max-width: 80px; max-height: 40px;" t-att-alt="'%s' % company.name"/>
+        <img t-att-src="'/logo.png?company=%s' % company.id" style="padding: 0px; margin: 0px; height: auto; max-width: 200px; max-height: 36px;" 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:10px 0;"/>
+            style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin:4px 0 12px 0;"/>
         <p t-if="subtype.internal" style="background-color: #f2dede; padding: 5px; margin-bottom: 16px;">
             <strong>Internal communication</strong>: Replying will post an internal note. Followers won't receive any email notification.
         </p>
@@ -86,15 +86,15 @@
         <li><t t-esc="tracking[0]"/>: <t t-esc="tracking[1]"/> -&gt; <t t-esc="tracking[2]"/></li>
     </t>
 </ul>
-<div t-if="signature" t-raw="signature"/>
-<p style="color: #555555;">
+<div t-if="signature" t-raw="signature" class="font-size: 13px;"/>
+<p style="color: #555555; margin-top:32px;">
     Sent by
     <a t-if="website_url" t-att-href="website_url" style="text-decoration:none; color: #875A7B;">
         <span t-esc="company.name"/>
     </a>
     <span t-if="not website_url" t-esc="company.name"/>
     using
-    <a target="_blank" href="https://www.odoo.com" style="text-decoration:none; color: #875A7B;">Odoo</a>.
+    <a target="_blank" href="https://www.odoo.com?utm_source=db&utm_medium=email" style="text-decoration:none; color: #875A7B;">Odoo</a>.
 </p>
 </div>
         </template>
@@ -148,8 +148,8 @@
         </td>
     </tr>
     <tr>
-        <td align="center">
-            Powered by <a target="_blank" href="https://www.odoo.com">Odoo</a>.
+        <td align="center" style="padding: 8px; font-size:11px;">
+            Powered by <a target="_blank" href="https://www.odoo.com?utm_source=db&utm_medium=email">Odoo</a>.
         </td>
     </tr>
 </tbody>
@@ -159,58 +159,48 @@
 
         <template id="mail_notification_light">
 <table border="0" cellpadding="0" cellspacing="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" cellpadding="0" cellspacing="0" width="590" style="padding: 16px; background-color: white; color: #454748; border-collapse:separate;">
+<table border="0" cellpadding="0" cellspacing="0" width="590" style="padding: 24px; background-color: white; color: #454748; border-collapse:separate;">
 <tbody>
     <!-- HEADER -->
     <tr>
         <td align="center" style="min-width: 590px;">
-            <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: white; padding: 0; 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 and message.record_name.replace('/','-') or ''"/>
                     </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: 80px;" t-att-alt="'%s' % company.name"/>
+                    <img t-att-src="'/logo.png?company=%s' % company.id" style="padding: 0px; margin: 0px; height: 48px;" 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;"/>
+                  <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:4px 0px 32px 0px;"/>
                 </td></tr>
             </table>
         </td>
     </tr>
     <!-- CONTENT -->
     <tr>
-        <td align="center" style="min-width: 590px;">
-            <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
-                <tr><td valign="top" style="font-size: 13px;">
-                    <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 style="min-width: 590px;">
+            <t t-raw="message.body"/>
         </td>
     </tr>
     <!-- FOOTER -->
     <tr>
-        <td align="center" style="min-width: 590px;">
-            <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; font-size: 11px; 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 align="center" style="min-width: 590px; padding: 0 8px 0 8px; font-size:11px;">
+            <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 4px 0px;"/>
+            <b t-esc="company.name"/><br/>
+            <div style="color: #999999;">
+                <t t-esc="company.phone"/>
+                <t t-if="company.email"> |
+                    <a t-att-href="'mailto:%s' % company.email" style="text-decoration:none; color: #999999;"><t t-esc="company.email"/></a>
+                </t>
+                <t t-if="company.website"> |
+                    <a t-att-href="'%s' % company.website" style="text-decoration:none; color: #999999;">
+                        <t t-esc="company.website"/>
+                    </a>
+                </t>
+            </div>
         </td>
     </tr>
 </tbody>
@@ -218,11 +208,7 @@
 </td></tr>
 <!-- POWERED BY -->
 <tr><td align="center" style="min-width: 590px;">
-    <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: #F1F1F1; color: #454748; padding: 8px; border-collapse:separate;">
-      <tr><td style="text-align: center; font-size: 13px;">
-        Powered by <a target="_blank" href="https://www.odoo.com" style="color: #875A7B;">Odoo</a>
-      </td></tr>
-    </table>
+        Powered by <a target="_blank" href="https://www.odoo.com?utm_source=db&utm_medium=email" style="color: #875A7B;">Odoo</a>
 </td></tr>
 </table>
         </template>
@@ -235,7 +221,7 @@
         -->
         <template id="mail_notification_paynow" name="blableblu">
 <table border="0" cellpadding="0" cellspacing="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" cellpadding="0" cellspacing="0" width="590" style="padding: 16px; background-color: white; color: #454748; border-collapse:separate;">
+<table border="0" cellpadding="0" cellspacing="0" width="590" style="padding: 24px; background-color: white; color: #454748; border-collapse:separate;">
 <tbody>
     <!-- HEADER -->
     <tr>
@@ -244,78 +230,67 @@
             <t t-set="is_online" t-value="access_action and access_action['type'] == 'ir.actions.act_url'"/>
             <t t-set="access_url" t-value="is_online and record.get_mail_url() or ''"/>
             <t t-set="access_code" t-value="'view'"/>
-            <t t-set="access_name" t-value="'View %s' % (record._description.lower())"/>
-            <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+            <t t-set="access_name">
+                View <t t-esc="record._description.lower()"/>
+            </t>
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: white; padding: 0; 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: 80px;" t-att-alt="'%s' % company.name"/>
+                    <img t-att-src="'/logo.png?company=%s' % company.id" style="padding: 0px; margin: 0px; height: 48px;" 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;"/>
+                  <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:4px 0px 32px 0px;"/>
                 </td></tr>
             </table>
         </td>
     </tr>
     <!-- CONTENT -->
     <tr>
-        <td align="center" style="min-width: 590px;">
-            <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
-                <tr><td valign="top" style="font-size: 13px;">
-                    <t t-raw="message.body"/>
-                    <div t-if="is_online and not record._context.get('proforma')" style="margin: 32px 0px 32px 0px; text-align: center;">
-                        <a t-att-href="access_url"
-                            style="background-color: #875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:13px;">
-                            <t t-esc="access_name"/>
-                        </a>
-                    </div>
-                    <div style="margin: 0px; padding: 0px;">
-                        Best regards,
-                    </div>
-                    <div t-if="record.user_id and record.user_id.signature">
-                        <div t-raw="record.user_id.signature"/>
-                    </div>
-                </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 style="padding: 0">
+            <t t-raw="message.body"/>
+            <div t-if="is_online and not record._context.get('proforma')" style="margin: 32px 0px 32px 0px; text-align: center;">
+                <a t-att-href="access_url"
+                    style="background-color: #875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:13px;">
+                    <t t-esc="access_name"/>
+                </a>
+            </div>
+            <div style="margin: 0px; padding: 0px; font-size:13px;">
+                Best regards,
+            </div>
+            <div>&amp;nbsp;</div>
+            <div t-if="record.user_id and record.user_id.signature" style="font-size: 13px;">
+                <div t-raw="record.user_id.signature"/>
+            </div>
         </td>
     </tr>
     <!-- FOOTER -->
     <tr>
-        <td align="center" style="min-width: 590px;">
-            <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; font-size: 11px; 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 style="padding: 0; font-size:11px;">
+            <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: 32px 0px 4px 0px;"/>
+            <b t-esc="company.name"/><br/>
+            <div style="color: #999999">
+                <t t-esc="company.phone"/>
+                <t t-if="company.email"> |
+                    <a t-att-href="'mailto:%s' % company.email" style="text-decoration:none; color: #999999;"><t t-esc="company.email"/></a>
+                </t>
+                <t t-if="company.website"> |
+                    <a t-att-href="'%s' % company.website" style="text-decoration:none; color: #999999;">
+                        <t t-esc="company.website"/>
+                    </a>
+                </t>
+            </div>
         </td>
     </tr>
 </tbody>
 </table>
 </td></tr>
 <!-- POWERED BY -->
-<tr><td align="center" style="min-width: 590px;">
-    <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: #F1F1F1; color: #454748; padding: 8px; border-collapse:separate;">
-      <tr><td style="text-align: center; font-size: 13px;">
-        Powered by <a target="_blank" href="https://www.odoo.com" style="color: #875A7B;">Odoo</a>
-      </td></tr>
-    </table>
+<tr><td align="center" style="min-width: 590px; padding: 8px; font-size:11px;">
+    Powered by <a target="_blank" href="https://www.odoo.com?utm_source=db&utm_medium=email" style="color: #875A7B;">Odoo</a>
 </td></tr>
 </table>
         </template>
diff --git a/addons/sale/data/mail_data.xml b/addons/sale/data/mail_data.xml
index b8e9b5fd637..2e5b5f24553 100644
--- a/addons/sale/data/mail_data.xml
+++ b/addons/sale/data/mail_data.xml
@@ -61,10 +61,12 @@
                 <t t-set="access_code" t-value="(record._name == 'sale.order' and record.state in ('draft', 'sent') and record.get_portal_confirmation_action()) or access_code"/>
             </xpath>
             <xpath expr="//t[@t-set='access_name']" position="after">
-                <t t-set="access_name" t-value="
-(record._name == 'sale.order' and access_code == 'sign' and record.has_to_be_paid() and 'Sign and pay online') or
-(record._name == 'sale.order' and access_code != 'view' and 'Accept and sign online') or
-access_name"/>
+                <t t-if="record._name == 'sale.order' and access_code != 'view'">
+                    <t t-set="access_name">Accept and sign online</t>
+                </t>
+                <t t-if="record._name == 'sale.order' and access_code == 'sign' and record.has_to_be_paid()">
+                    <t t-set="access_name">Sign and pay online</t>
+                </t>
             </xpath>
         </template>