From 6cf977b078609dc9f763aa3ffc02dc83cfc80eae Mon Sep 17 00:00:00 2001
From: Dossogne Bertrand <bedo@odoo.com>
Date: Tue, 7 Jun 2022 09:14:14 +0000
Subject: [PATCH] [IMP] hr_contract: avoid screen shaking

On a contract view, if you hover the warning of a calendar mismatch,
the appearing warning text may lengthen the page, adding a scrollbar and
modifying the overhaul layout of the page on the chrome browser.
This commit keeps the text visible anyway so that no changes can cause
that screenshake.

Visual of the error:
https://watch.screencastify.com/v/MGPnCksg2eW49b7CoZc5

taskID 2878189

closes odoo/odoo#94142

X-original-commit: ddb4d6e463cbd410d59685effb189d654c581994
Signed-off-by: Kevin Baptiste <kba@odoo.com>
---
 addons/hr_contract/__manifest__.py            |  5 ++++-
 .../static/src/scss/calendar_mismatch.scss    | 14 -------------
 .../static/src/xml/hr_contract_templates.xml  |  9 +++++++++
 .../hr_contract/views/hr_contract_views.xml   | 20 ++++++++++---------
 4 files changed, 24 insertions(+), 24 deletions(-)
 create mode 100644 addons/hr_contract/static/src/xml/hr_contract_templates.xml

diff --git a/addons/hr_contract/__manifest__.py b/addons/hr_contract/__manifest__.py
index 741c249b614..ed75cd3afab 100644
--- a/addons/hr_contract/__manifest__.py
+++ b/addons/hr_contract/__manifest__.py
@@ -35,7 +35,10 @@ You can assign several contracts per employee.
     'application': True,
     'assets': {
         'web.assets_backend': [
-            'hr_contract/static/src/**/*',
+            'hr_contract/static/src/scss/*',
+        ],
+        'web.assets_qweb': [
+            'hr_contract/static/src/xml/*',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/hr_contract/static/src/scss/calendar_mismatch.scss b/addons/hr_contract/static/src/scss/calendar_mismatch.scss
index 9699718c975..9d9d1268335 100644
--- a/addons/hr_contract/static/src/scss/calendar_mismatch.scss
+++ b/addons/hr_contract/static/src/scss/calendar_mismatch.scss
@@ -2,18 +2,4 @@
     .o_calendar_warning {
         cursor: help;
     }
-
-    .o_calendar_warning_tooltip {
-        display: block;
-        height: 0;
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    .o_calendar_warning:hover + .o_calendar_warning_tooltip {
-        display: inline;
-        height: auto;
-        opacity: 1;
-        transition: opacity 0.5s linear;
-    }
 }
diff --git a/addons/hr_contract/static/src/xml/hr_contract_templates.xml b/addons/hr_contract/static/src/xml/hr_contract_templates.xml
new file mode 100644
index 00000000000..c2c1eeb17f1
--- /dev/null
+++ b/addons/hr_contract/static/src/xml/hr_contract_templates.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="hr_contract.CalendarMismatch" owl="1">
+        <div class="o-tooltip px-1 py-2">
+            <p style="font-size: 12px;" class="text-danger"
+                t-esc="info.text"/>
+        </div>
+    </t>
+</templates>
diff --git a/addons/hr_contract/views/hr_contract_views.xml b/addons/hr_contract/views/hr_contract_views.xml
index 7ac94420a59..c62e2700f83 100644
--- a/addons/hr_contract/views/hr_contract_views.xml
+++ b/addons/hr_contract/views/hr_contract_views.xml
@@ -52,10 +52,11 @@
                         <div>
                             <field name="resource_calendar_id" required="1" nolabel="1"/>
                             <span attrs="{'invisible': [('calendar_mismatch', '=', False)]}"
-                                class="fa fa-exclamation-triangle text-danger o_calendar_warning pl-3">
-                            </span>
-                            <span class="o_calendar_warning_tooltip text-danger">
-                                Calendar Mismatch : The employee's calendar does not match its current contract calendar. This could lead to unexpected behaviors.
+                                class="fa fa-exclamation-triangle text-danger o_calendar_warning ml-3"
+                                data-tooltip-template="hr_contract.CalendarMismatch"
+                                data-tooltip-info='{
+                                        "text":"Calendar Mismatch : The employee&apos;s calendar does not match this contract&apos;s calendar. This could lead to unexpected behaviors."
+                                    }'>
                             </span>
                         </div>
                     </xpath>
@@ -163,10 +164,11 @@
                                 <div id="resource_calendar_warning">
                                     <field name="resource_calendar_id" required="1" nolabel="1" options="{'no_open': True, 'no_create': True}"/>
                                     <span attrs="{'invisible': ['|', ('calendar_mismatch', '=', False), ('state', '!=', 'open')]}"
-                                        class="fa fa-exclamation-triangle text-danger o_calendar_warning pl-3">
-                                    </span>
-                                    <span class="o_calendar_warning_tooltip text-danger">
-                                        Calendar Mismatch : The employee's calendar does not match this contract's calendar. This could lead to unexpected behaviors.
+                                        class="fa fa-exclamation-triangle text-danger o_calendar_warning ml-3"
+                                        data-tooltip-template="hr_contract.CalendarMismatch"
+                                        data-tooltip-info='{
+                                                "text":"Calendar Mismatch : The employee&apos;s calendar does not match this contract&apos;s calendar. This could lead to unexpected behaviors."
+                                            }'>
                                     </span>
                                 </div>
                             </group>
@@ -302,7 +304,7 @@
                     </templates>
                 </kanban>
             </field>
-         </record>
+        </record>
 
         <record id="hr_contract_view_activity" model="ir.ui.view">
             <field name="name">hr.contract.activity</field>