[IMP] digest: improve digest layout and add new digest tips

PURPOSE

Review the tips and digest layout design to make sure they have a WOW effect
and increase trial conversion/retention.

SPECIFICATIONS: LAYOUT

Besides changing the tips, a cleaning of digest layout was performed. Emails
were reported to look not neat in Outlook and somewhat random in mail.com or
gmail.com.

Most recent HTML CSS cannot be used to make HTML emails because each email
provider renders emails its own way. This means a given email may renders
differently in gmail.com and outlook.

The layout of the email was composed of several levels of embedded tables
which means huge maintenance effort. So it was totally rewritten with divs
and CSS, but some properties are not taken into account.

A lot of page component improvements were done. It consisted in replacing most
of the style attribute in tags with CSS classes and ids. This step is
especially useful for tip formatting because before, if a style modification
was needed, it had to be performed on each tip individually.

SPECIFICATIONS: TIPS

“Speed up your workflow with shortcuts”
“Click on an avatar to chat with a user”
“A calculator in Odoo”
“How to ping users in internal notes?”
“Knowledge is power”

LINKS

Task ID-2274264
COM PR: odoo/odoo#53580
ENT PR: odoo/enterprise#1139

X-original-commit: 04aa36da30c107e482935b1673374c9302e4cf6a

1 files changed, 33 insertions, 67 deletions

diff --git a/addons/digest/data/digest_tips_data.xml b/addons/digest/data/digest_tips_data.xml
index 9b690a7f770..1a479a541d6 100644
--- a/addons/digest/data/digest_tips_data.xml
+++ b/addons/digest/data/digest_tips_data.xml
@@ -2,106 +2,72 @@
 <odoo>
     <data noupdate="1">
         <record id="digest_digest_default" model="digest.digest">
-            <field name="name">Your Odoo Periodic Report</field>
+            <field name="name">Your Odoo Periodic Digest</field>
             <field name="periodicity">daily</field>
             <field name="user_ids" eval="[(4, ref('base.user_admin'))]"/>
             <field name="next_run_date" eval="(DateTime.now() + timedelta(days=1)).strftime('%Y-%m-%d')"/>
             <field name="kpi_res_users_connected">True</field>
             <field name="kpi_mail_message_total">True</field>
         </record>
-    </data>
 
-    <data>
         <record id="digest_tip_digest_0" model="digest.tip">
-            <field name="name">Invite Team Members</field>
-            <field name="sequence">1</field>
-            <field name="group_id" ref="base.group_erp_manager"/>
+            <field name="name">Tip: Speed up your workflow with shortcuts</field>
+            <field name="sequence">800</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Invite Team Members</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Go to your general settings to invite new users to your database.</p>
-    <img src="/digest/static/src/img/tips-digest-invite-team.jpg" style="max-width: 580px" width="100%"/>
+    <p class="tip_title">Tip: Speed up your workflow with shortcuts</p>
+    <p class="tip_content">Press ALT in any screen to highlight shortcuts for every button in the screen. It is useful to process multiple documents in batch.</p>
+    <img src="/digest/static/src/img/alt-shortcuts.gif" class="illustration_border" />
 </div>
             </field>
         </record>
-
         <record id="digest_tip_digest_1" model="digest.tip">
-            <field name="name"> Want to learn more about Odoo?</field>
-            <field name="sequence">2</field>
-            <field name="group_id" ref="base.group_user"/>
+            <field name="name">Tip: Click on an avatar to chat with a user</field>
+            <field name="sequence">2100</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px"> Want to learn more about Odoo?</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Visit our <a href="https://www.odoo.com/slides">eLearning Platform</a></p>
+    <p class="tip_title">Tip: Click on an avatar to chat with a user</p>
+    <p class="tip_content">Have a question about a document? Click on the responsible user's picture to start a conversation. If his avatar has a green dot, he is online.</p>
+    <img src="/digest/static/src/img/avatar.gif" class="illustration_border" />
 </div>
             </field>
         </record>
-
         <record id="digest_tip_digest_2" model="digest.tip">
-            <field name="name">Odoo Push Notifications</field>
-            <field name="sequence">3</field>
-            <field name="group_id" ref="base.group_erp_manager"/>
+            <field name="name">Tip: A calculator in Odoo</field>
+            <field name="sequence">2300</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Odoo Push Notifications</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Change your browser settings to "Allow Push Notifications" and never miss a thing.</p>
-    <img src="/digest/static/src/img/tips-digest-browser-notifications.jpg" style="max-width: 580px" width="100%"/>
+    <p class="tip_title">Tip: A calculator in Odoo</p>
+    <p class="tip_content">When editing a number, you can use formulae by typing the `=` character. This is useful when computing a margin or a discount on a quotation, sale order or invoice.</p>
+    <img src="/digest/static/src/img/calculator.gif" class="illustration_border" />
 </div>
             </field>
         </record>
-
         <record id="digest_tip_digest_3" model="digest.tip">
-            <field name="name">Reach your full potential with Odoo</field>
-            <field name="sequence">4</field>
-            <field name="group_id" ref="base.group_erp_manager"/>
-            <field name="tip_description" type="html">
-<div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Reach your full potential with Odoo</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Take a look at our <a href="https://www.odoo.com/page/tour">App videos</a> and discover the next tool that will allow you to work better and faster.</p>
-</div>
-            </field>
-        </record>
-
-        <record id="digest_tip_mail_0" model="digest.tip">
-            <field name="name">Did you know?</field>
-            <field name="sequence">10</field>
-            <field name="group_id" ref="base.group_user"/>
-            <field name="tip_description" type="html">
-<div>
-    % set users = object.env['res.users'].search([('share', '=' , False)], limit=10, order='id desc')
-    % set channel_id = object.env.ref('mail.channel_all_employees').id
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Did you know?</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">You can ping your colleagues by tagging them in your messages using “@” followed by their name. They will be instantly notified.</p>
-    <img src="/digest/static/src/img/tips-mail-notifications.jpg" style="max-width: 580px" width="100%"/>
-    <div style="margin-top: 20px; background-color: #f8f9fa">
-        <p class="font-12" style="text-align:center; color:#888888;font-size: 13px; line-height: 25px; margin:0;"><b>${', '.join(users.mapped('name'))}</b> just signed up.  <a href="/web#action=mail.action_discuss&amp;active_id=${channel_id}" style="color: #875a7b; font-weight: bold">Say hello in the company's discussion channel.</a>
-        </p>
-    </div>
-</div>
-            </field>
-        </record>
-        <record id="digest_tip_mail_1" model="digest.tip">
-            <field name="name">Get things done with activities</field>
-            <field name="sequence">11</field>
-            <field name="group_id" ref="base.group_user"/>
+            <field name="name">Tip: How to ping users in internal notes?</field>
+            <field name="sequence">2400</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Get things done with activities</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Use activities on any business document to schedule meetings, calls and todos.</p>
-    <img src="/digest/static/src/img/tips-mail-activities.jpg" style="max-width: 580px" width="100%" />
+    <p class="tip_title">Tip: How to ping users in internal notes?</p>
+    <p class="tip_content">Type "@" to notify someone in a message, or "#" to link to a channel. Try to notify @OdooBot to test the feature.</p>
+    <img src="/digest/static/src/img/notifications.gif" class="illustration_border" />
 </div>
             </field>
         </record>
-
-        <record id="digest_tip_mail_2" model="digest.tip">
-            <field name="name">Follow what you want</field>
-            <field name="sequence">12</field>
-            <field name="group_id" ref="base.group_user"/>
+        <record id="digest_tip_digest_4" model="digest.tip">
+            <field name="name">Tip: Knowledge is power</field>
+            <field name="sequence">2500</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Follow what you want</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Keep track of any object in Odoo (opportunity, sales order, etc.) and choose exactly what you want to follow (discussion, status, status change, etc.).</p>
-    <img src="/digest/static/src/img/tips-mail-following.jpg" style="max-width: 580px" width="100%" />
+    <p class="tip_title">Tip: Knowledge is power</p>
+    <p class="tip_content">When following documents, use the pencil icon to fine-tune the information you want to receive.
+Follow a project / sales team to keep track of this project's tasks / this team's opportunities.</p>
+    <img src="/digest/static/src/img/following.png" class="illustration_border" />
 </div>
             </field>
         </record>