Merge PR #2163 into 12.0

Signed-off-by legalsylvain

web_tree_image_tooltip/__manifest__.py

@@ -21,5 +21,8 @@
     'data': [
         'view/assets.xml',
     ],
+    'demo': [
+        'demo/view_res_users.xml',
+    ],
     'installable': True,
 }

web_tree_image_tooltip/demo/view_res_users.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <record id="view_users_tree" model="ir.ui.view">
+        <field name="model">res.users</field>
+        <field name="inherit_id" ref="base.view_users_tree" />
+        <field name="arch" type="xml">
+            <field name="name" position="before">
+                <field name="image_small" options="{'tooltip_image': 'image'}" widget="image" string="Image"/>
+            </field>
+        </field>
+    </record>
+</odoo>

web_tree_image_tooltip/readme/CONFIGURE.rst

@@ -1 +1,14 @@
 Insert `widget='image'` in your field view definition in any image field
+
+.. code:: xml
+
+    <field name="image_field" widget="image"/>
+
+
+If the model has different fields of the same image with different size
+(as ``product.product`` for instance with ``image``, ``image_medium``, ``image_small``),
+you can write the following code to reduce the load duration of the tree view.
+
+.. code:: xml
+
+    <field name="image_small" widget="image" options="{'tooltip_image': 'image'}"/>

web_tree_image_tooltip/readme/CONTRIBUTORS.rst

@@ -3,4 +3,6 @@
 * Jay Vora <jay.vora@serpentcs.com>
 * Meet Dholakia <m.dholakia.serpentcs@gmail.com>
 * Nikul Chaudhary <nikul.chaudhary.serpentcs@gmail.com>
+* Sylvain LE GAL (https://www.twitter.com/legalsylvain)
+
 

web_tree_image_tooltip/readme/DESCRIPTION.rst

@@ -1,3 +1,4 @@
 This module defines a images and icons in tree view via Tooltip.
 Additionally, Default width with 30px.
 
+.. image:: ../static/description/tree_view_image.png

web_tree_image_tooltip/readme/USAGE.rst

@@ -1,2 +1,3 @@
 Mouse Hover in tree view image that time Tooltip effect.
 
+.. image:: ../static/description/tree_view_image_tooltip.png

web_tree_image_tooltip/static/src/js/tooltip.js

@@ -2,14 +2,36 @@ odoo.define('web_tree_image_tooltip.web_tree_image_tooltip',
         function (require) {
     "use strict";
 
+    var session = require('web.session');
+    var field_utils = require('web.field_utils');
+    var FieldBinaryImage = require('web.basic_fields').FieldBinaryImage;
     var ListRenderer = require('web.ListRenderer');
+
+    FieldBinaryImage.include({
+        _render: function () {
+            this._super();
+            if (this.nodeOptions.tooltip_image) {
+                var image_src = session.url('/web/image', {
+                    model: this.model,
+                    id: JSON.stringify(this.res_id),
+                    field: this.nodeOptions.tooltip_image,
+                    // unique forces a reload of the image when the record has been updated
+                    unique: field_utils.format.datetime(this.recordData.__last_update).replace(/[^0-9]/g, ''),
+                })
+                this.$('.img-fluid')[0].setAttribute("tooltip-image-src", image_src);
+            }
+        },
+    });
+
     ListRenderer.include({
         events: _.extend({}, ListRenderer.prototype.events, {
             'mouseover tbody tr td .o_field_image': '_onHoverRecord_img',
         }),
         _onHoverRecord_img: function (event) {
             var img_src =
-                $(event.currentTarget).children('.img-fluid').attr('src')
+                $(event.currentTarget).children('.img-fluid').attr('tooltip-image-src') ||
+                $(event.currentTarget).children('.img-fluid').attr('src');
+
             $(event.currentTarget).tooltip({
                 title: "<img src="+img_src+" class='tooltip_image' />",
                 delay: 0,