[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).

4 files changed, 157 insertions, 105 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>
diff --git a/addons/gamification/data/goal_base.xml b/addons/gamification/data/goal_base.xml
index de76683ddc0..3552be22061 100644
--- a/addons/gamification/data/goal_base.xml
+++ b/addons/gamification/data/goal_base.xml
@@ -8,38 +8,40 @@
             <field name="name">Reminder for Goal Update</field>
             <field name="model_id" ref="gamification.model_gamification_goal"/>
             <field name="lang">${object.user_id.lang}</field>
-            <field name="body_html"><![CDATA[
-    <p>
-        <strong>Reminder ${object.name}</strong>
-    </p>
-    
-    <p>You have not updated your progress for the goal ${object.definition_id.name} (currently reached at ${object.completeness}%) for at least ${object.remind_update_delay} days. Do not forget to do it.</p>
-            ]]></field>
+            <field name="body_html" type="html">
+<div>
+    <strong>Reminder ${object.name}</strong><br/>
+You have not updated your progress for the goal ${object.definition_id.name} (currently reached at ${object.completeness}%) for at least ${object.remind_update_delay} days. Do not forget to do it.
+<br/><br/>
+Thank you,
+    <br/>
+    % if object.challenge_id.manager_id and object.challenge_id.manager_id.signature:
+    ${object.challenge_id.manager_id.signature | safe}
+    % endif
+</div></field>
         </record>
         
         <record id="simple_report_template" model="mail.template">
             <field name="name">Simple Challenge Report Progress</field>
             <field name="model_id" ref="gamification.model_gamification_challenge"/>
-            <field name="body_html">
-                <![CDATA[ 
-% set record = ctx.get('record')
-% set company = record and record.company_id or user.company_id
-% set challenge_lines = ctx.get('challenge_lines', [])     
-<table cellspacing="0" cellpadding="0" width="100%" style="font-family: 'Helvetica'; background-color: #EEE; border-collapse: collapse;">
+            <field name="body_html" type="html">
+<table cellspacing="0" cellpadding="0" width="100%" style="background-color: #EEE; border-collapse: collapse;">
 <tr>
     <td valign="top" align="center">
-        <table cellspacing="0" cellpadding="0" width="600" style="margin: 0 auto; width: 600px;">
+        % set record = ctx.get('record')
+        % set company = record and record.company_id or user.company_id
+        % set challenge_lines = ctx.get('challenge_lines', [])     
+        <table cellspacing="0" cellpadding="0" width="600" style="margin: 0 auto; width: 570px;">
             <tr><td>
                 <table cellspacing="0" cellpadding="0" width="100%">
                     <tr>
-                        <td valign="middle" align="left" style="padding:30px 15px;">
-                            <img width="90" src="/logo.png?company=${user.company_id.id}" style="width:80px;"/>
-                        </td>
-                        % if object.visibility_mode == 'ranking':
-                            <td style="padding:15px;">
-                                <p style="font-size:20px;color:#666666;" align="right">Leaderboard</p>
-                            </td>
-                        % endif
+                        <div>
+                            % if object.visibility_mode == 'ranking':
+                                <td style="padding:15px;">
+                                    <p style="font-size:20px;color:#666666;" align="center">Leaderboard</p>
+                                </td>
+                            % endif
+                        </div>
                     </tr>
                 </table>
                 <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#fff" style="background-color:#fff;">
@@ -49,7 +51,7 @@
                             <table cellspacing="0" cellpadding="0" width="100%" style="margin-top:20px;">
                                 <tr>
                                     <td align="center">
-                                        <p style="font-size:27px;color:#666666;">Personal Performance</p>
+                                        <div>Personal Performance</div>
                                     </td>
                                 </tr>
                             </table>
@@ -67,11 +69,7 @@
                                 </thead>
                                 <tbody>
                                 % for line in challenge_lines:
-                                    <tr
-                                        % if line['completeness'] >= 100:
-                                            style="font-weight:bold;"
-                                        % endif
-                                        >
+                                    <tr style="font-weight:bold;">
                                         <td style="padding: 20px 0;" align="left">
                                             ${line['name']}
                                             % if line['suffix'] or line['monetary']:
@@ -102,15 +100,15 @@
                             </span> 
                             % for line in challenge_lines:
                                 <!-- Header + Button table -->
-                                <table cellspacing="0" cellpadding="0" width="100%"style="margin-top:35px;">
+                                <table cellspacing="0" cellpadding="0" width="100%" style="margin-top:35px;">
                                     <tr>
                                         <td width="50%">
-                                            <p style="font-size:22px;color:#666666;">Top Achievers for goal <strong>${line['name']}</strong></p>
+                                            <div>Top Achievers for goal <strong>${line['name']}</strong></div>
                                         </td>
                                     </tr>
                                 </table>
                                 <!-- Podium -->
-                                % if len(line['goals'])>2:
+                                % if len(line['goals']) == 2:
                                     <table cellspacing="0" cellpadding="0" width="100%" style="margin-top:10px;">
                                         <tr><td style="padding:0 30px;">
                                             <table cellspacing="0" cellpadding="0" width="100%" style="table-layout: fixed;">
@@ -149,18 +147,16 @@
                                                                     </div> 
                                                                     <div align="center" style ="color:${bgColor};height:20px">
                                                                         ${goal['name']}
-                                                                    </div 
+                                                                    </div>
                                                                 </div>
                                                                 <div style="background-color:${bgColor | safe};height:${heightB}px;">
                                                                     <strong><span style="color:#fff;font-size:${fontSize}px;">${podiumPosition | safe}</span></strong>
                                                                 </div>
                                                                 <div style="height:30px;">
-                                                                    <p style="color:#9A6C8E;font-size:20px;margin-top:10px;">
-                                                                        ${"%.2f" % goal['current']}
-                                                                        % if line['suffix'] or line['monetary']:
-                                                                            ${line['full_suffix']}
-                                                                        % endif
-                                                                    </p>
+                                                                    ${"%.2f" % goal['current']}
+                                                                    % if line['suffix'] or line['monetary']:
+                                                                        ${line['full_suffix']}
+                                                                    % endif
                                                                 </div>
                                                             </div>
                                                         </td>
@@ -187,7 +183,7 @@
                                                                 (${company.currency_id.symbol})
                                                             % endif
                                                         </th>
-                                                        <th style="width:30%;text-align:right;"">Completeness</th>
+                                                        <th style="width:30%;text-align:right;">Completeness</th>
                                                     </tr>
                                                     <tr>
                                                         <td colspan="5" style="height:1px;background-color:#9A6C8E;"></td>
@@ -220,43 +216,12 @@
                         % endif
                     </td></tr>
                 </table>
-                <table cellspacing="0" cellpadding="0" width="100%" style="padding: 15px; color: #666666;margin-bottom: 5px;">
-                    <tr>
-                        <td align="center" style="min-width: 590px;">
-                            <table width="580" border="0" cellpadding="0" style="min-width: 580px; font-size: 12px;">
-                                <tr>
-                                    <td valign="middle" align="left" style="padding-top: 10px; padding-bottom: 10px;">
-                                        ${company.name}<br/>
-                                        ${company.phone or ''}
-                                    </td>
-                                    <td valign="middle" align="right" style="padding-top: 10px; padding-bottom: 10px;">
-                                        % if company.email:
-                                            <a href="mailto:${company.email}" style="text-decoration:none; color: #666666;">${company.email}</a><br/>
-                                        % endif
-                                        % if company.website:
-                                            <a href="${company.website}" style="text-decoration:none; color: #666666;">
-                                               ${company.website}
-                                            </a>
-                                        % endif
-                                    </td>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr> 
-                    <tr>
-                        <td align="center">
-                            Powered by <a target="_blank" href="https://www.odoo.com">Odoo</a>.
-                        </td>
-                    </tr>
-                </table>
             </td></tr>
         </table>
     </td>
 </tr>
 </table>
-            ]]>
-
-</field>
+            </field>
         </record>
 
         <!-- goal definitions -->
diff --git a/addons/gamification/models/challenge.py b/addons/gamification/models/challenge.py
index 140576da889..ac5286813c3 100644
--- a/addons/gamification/models/challenge.py
+++ b/addons/gamification/models/challenge.py
@@ -551,7 +551,12 @@ class Challenge(models.Model):
             challenge.message_post(
                 body=body_html,
                 partner_ids=challenge.mapped('user_ids.partner_id.id'),
-                subtype='mail.mt_comment')
+                subtype='mail.mt_comment',
+                notif_layout='mail.mail_notification_light',
+                notif_values={
+                        'model_description': challenge._description.lower(),
+                    }
+                )
             if challenge.report_message_group_id:
                 challenge.report_message_group_id.message_post(
                     body=body_html,
@@ -573,12 +578,21 @@ class Challenge(models.Model):
                 self.env['gamification.challenge'].message_post(
                     body=body_html,
                     partner_ids=[(4, user.partner_id.id)],
-                    subtype='mail.mt_comment'
+                    subtype='mail.mt_comment',
+                    notif_layout='mail.mail_notification_light',
+                    notif_values={
+                        'model_description': self._description.lower(),
+                    }
                 )
                 if challenge.report_message_group_id:
                     challenge.report_message_group_id.message_post(
-                         body=body_html,
-                         subtype='mail.mt_comment')
+                        body=body_html,
+                        subtype='mail.mt_comment',
+                        notif_layout='mail.mail_notification_light',
+                        notif_values={
+                            'model_description': self._description.lower(),
+                        }
+                    )
         return challenge.write({'last_report_date': fields.Date.today()})
 
     ##### Challenges #####
diff --git a/addons/gamification/models/goal.py b/addons/gamification/models/goal.py
index 6cd52b2ab81..77966b00c77 100644
--- a/addons/gamification/models/goal.py
+++ b/addons/gamification/models/goal.py
@@ -225,7 +225,11 @@ class Goal(models.Model):
         self.env['mail.thread'].message_post(
             body=body_html,
             partner_ids=[ self.user_id.partner_id.id],
-            subtype='mail.mt_comment'
+            subtype='mail.mt_comment',
+            notif_layout='mail.mail_notification_light',
+            notif_values={
+                'model_description': self._description.lower(),
+            }
         )
 
         return {'to_update': True}