[IMP] gamification: make email templates bioutifoul

Purpose of this commit is to enhance quality of templates proposed by Odoo
and make them use notification layout when send by emails. Those emails
are cleaner and more up to date compared to other emails.

Including
  * calls to message_post now use the light notification layout. It is
    given as parameter to the message_post process;
  * some cleaning in templates;

This commit is related to task ID 51122 (and PR #24052).

1 files changed, 98 insertions, 29 deletions

diff --git a/addons/gamification/data/badge.xml b/addons/gamification/data/badge.xml
index 7af0b859048..61112ffbd9a 100644
--- a/addons/gamification/data/badge.xml
+++ b/addons/gamification/data/badge.xml
@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <data noupdate="1">
         <record id="badge_good_job" model="gamification.badge">
@@ -47,36 +48,104 @@
             <field name="partner_to">${object.user_id.partner_id.id}</field>
             <field name="lang">${object.user_id.lang}</field>
             <field name="body_html" type="xml">
-<div>
-    <p>Congratulations ${object.user_id.name} !</p>
-    <p>You just received badge <strong>${object.badge_id.name}</strong> !</p>
-</div>
-<div>
-% if object.badge_id.description
-<table cellspacing="0" cellpadding="0" border="0" style="width: 600px; margin-top: 5px;">
-<tbody><tr>
-    <td valign="center">
-        <img src="/web/image/gamification.badge/${object.badge_id.id}/image/80x80" style="padding: 0px; margin: 0px; height: auto; width: 80px;" alt="${user.company_id.name}"/>
-    </td>
-    <td valign="center">
-        <cite>${object.badge_id.description}</cite>
-    </td>
-</tr></tbody>
+<table border="0" cellpadding="0" style="padding-top: 16px; background-color: #F1F1F1; 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 Badge</span><br/>
+                    <span style="font-size: 20px; font-weight: bold;">
+                        ${object.badge_id.name}
+                    </span>
+                </td><td valign="middle" align="right">
+                    <img src="/logo.png?company=${object.user_id.company_id.id}" style="padding: 0px; margin: 0px; height: auto; width: 80px;" alt="${object.user_id.company_id.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;">
+                    <div>
+                        Congratulations ${object.user_id.name} !<br/>
+                        You just received badge <strong>${object.badge_id.name}</strong> !<br/>
+                        % if object.badge_id.description
+                            <table cellspacing="0" cellpadding="0" border="0" style="width: 560px; margin-top: 5px;">
+                            <tbody><tr>
+                                <td valign="center">
+                                    <img src="/web/image/gamification.badge/${object.badge_id.id}/image/80x80" style="padding: 0px; margin: 0px; height: auto; width: 80px;" alt="${user.company_id.name}"/>
+                                </td>
+                                <td valign="center">
+                                    <cite>${object.badge_id.description}</cite>
+                                </td>
+                            </tr></tbody>
+                            </table>
+                        % endif
+                        <br/>
+                        % if object.sender_id
+                            This badge was granted by <strong>${object.sender_id.name}</strong>.
+                        % endif
+                        <br/>
+                        % if object.comment
+                            ${object.comment}
+                        % endif
+                        <br/><br/>
+                        Thank you,
+                        <br/>
+                        % if object.sender_id and object.sender_id.signature:
+                            ${object.sender_id.signature | safe}
+                        % endif
+                    </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>
+    </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">
+                    ${object.user_id.company_id.name}
+                </td></tr>
+                <tr><td valign="middle" align="left" style="opacity: 0.7;">
+                    ${object.user_id.company_id.phone}
+                    % if object.user_id.company_id.email
+                        | <a href="'mailto:%s' % ${object.user_id.company_id.email}" style="text-decoration:none; color: #454748;">${object.user_id.company_id.email}</a>
+                    % endif
+                    % if object.user_id.company_id.website
+                        | <a href="'%s' % ${object.user_id.company_id.website}" style="text-decoration:none; color: #454748;">
+                        ${object.user_id.company_id.website}
+                    </a>
+                    % endif
+                </td></tr>
+            </table>
+        </td>
+    </tr>
+</tbody>
 </table>
-% endif
-</div>
-<div>
-    <p>
-% if object.sender_id
-        This badge was granted by <strong>${object.sender_id.name}</strong>.
-% endif
-    </p>
-    <p>
-% if object.comment
-        <em>${object.comment}</em>
-% endif
-    </p>
-</div>
+</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>
+
+
 </field>
         </record>
     </data>