[FIX] web: fix zoomodoo attachToTarget/dashboard compatible

Issue

    - Install Employees & Dashboard
    - Add employees to kanban
    - Dashboard
    - Hover an employee picture

    There is only the picture visible
    on the page, the remaining space is white.

Cause

    I found several issues.

    1. The pictures are not shown on hover in employees
        But they are on dashboard.

    2. $attach = all `.content` and on dashboard there is
        2 `.content` so the flyout is append 2 times

    3. The move method is trigerred on hover too, it hides
        the flyout if we are not in it. But with attachToTarget
        we are not in it so it's hidden all time.

    4. If everything above is solved, the image is shown but
        not at the correct position because the flyout base
        position is not top 0, left 0

Solution

    1. Reduce the minimum required size to 128px
    2. use closest instead of parents
    3. Don't hide if we have the option attachToTarget
    4. Calculate the flyout offset and replace it correctly
       and set it to position fixed to handle scrolling

OPW-2291493

closes odoo/odoo#54333

X-original-commit: 2c6d692ee40c97d2ae63da64db7623702948407e
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>
Signed-off-by: Jason Van Malder (jvm) <jvm@odoo.com>

1 files changed, 3 insertions, 1 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 0a58d9e4895..590b2a3b241 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1912,7 +1912,9 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
                     attach: '.o_content',
                     attachToTarget: true,
                     onShow: function () {
-                        if(this.$zoom.height() < 256 && this.$zoom.width() < 256) {
+                        var zoomHeight = Math.ceil(this.$zoom.height());
+                        var zoomWidth = Math.ceil(this.$zoom.width());
+                        if( zoomHeight < 128 && zoomWidth < 128) {
                             this.hide();
                         }
                         core.bus.on('keydown', this, this.hide);