diff --git a/web_tree_image_tooltip/__manifest__.py b/web_tree_image_tooltip/__manifest__.py index b46057c1b..a91692041 100644 --- a/web_tree_image_tooltip/__manifest__.py +++ b/web_tree_image_tooltip/__manifest__.py @@ -21,5 +21,8 @@ 'data': [ 'view/assets.xml', ], + 'demo': [ + 'demo/view_res_users.xml', + ], 'installable': True, } diff --git a/web_tree_image_tooltip/demo/view_res_users.xml b/web_tree_image_tooltip/demo/view_res_users.xml new file mode 100644 index 000000000..2007317cd --- /dev/null +++ b/web_tree_image_tooltip/demo/view_res_users.xml @@ -0,0 +1,12 @@ + + + + res.users + + + + + + + + diff --git a/web_tree_image_tooltip/readme/CONFIGURE.rst b/web_tree_image_tooltip/readme/CONFIGURE.rst index b992cb9d5..75b370d3c 100644 --- a/web_tree_image_tooltip/readme/CONFIGURE.rst +++ b/web_tree_image_tooltip/readme/CONFIGURE.rst @@ -1 +1,14 @@ Insert `widget='image'` in your field view definition in any image field + +.. code:: xml + + + + +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 + + \ No newline at end of file diff --git a/web_tree_image_tooltip/readme/CONTRIBUTORS.rst b/web_tree_image_tooltip/readme/CONTRIBUTORS.rst index 24b755f9a..89dc49395 100644 --- a/web_tree_image_tooltip/readme/CONTRIBUTORS.rst +++ b/web_tree_image_tooltip/readme/CONTRIBUTORS.rst @@ -3,4 +3,6 @@ * Jay Vora * Meet Dholakia * Nikul Chaudhary +* Sylvain LE GAL (https://www.twitter.com/legalsylvain) + diff --git a/web_tree_image_tooltip/readme/DESCRIPTION.rst b/web_tree_image_tooltip/readme/DESCRIPTION.rst index 092033b3b..cc26fccc8 100644 --- a/web_tree_image_tooltip/readme/DESCRIPTION.rst +++ b/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 \ No newline at end of file diff --git a/web_tree_image_tooltip/readme/USAGE.rst b/web_tree_image_tooltip/readme/USAGE.rst index a8eeccbfa..a23a87929 100644 --- a/web_tree_image_tooltip/readme/USAGE.rst +++ b/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 \ No newline at end of file diff --git a/web_tree_image_tooltip/static/description/tree_view_image.png b/web_tree_image_tooltip/static/description/tree_view_image.png new file mode 100644 index 000000000..efbd51cbd Binary files /dev/null and b/web_tree_image_tooltip/static/description/tree_view_image.png differ diff --git a/web_tree_image_tooltip/static/description/tree_view_image_tooltip.png b/web_tree_image_tooltip/static/description/tree_view_image_tooltip.png new file mode 100644 index 000000000..22b8c2ead Binary files /dev/null and b/web_tree_image_tooltip/static/description/tree_view_image_tooltip.png differ diff --git a/web_tree_image_tooltip/static/src/js/tooltip.js b/web_tree_image_tooltip/static/src/js/tooltip.js index ce57c2799..767a1386f 100644 --- a/web_tree_image_tooltip/static/src/js/tooltip.js +++ b/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: "", delay: 0,