diff --git a/web_tree_image_tooltip/__manifest__.py b/web_tree_image_tooltip/__manifest__.py index d5ed10f2c..e88fb052b 100644 --- a/web_tree_image_tooltip/__manifest__.py +++ b/web_tree_image_tooltip/__manifest__.py @@ -17,6 +17,9 @@ "category": "Web", "depends": ["web"], "data": [], + "demo": [ + "demo/view_res_users.xml", + ], "assets": { "web.assets_backend": [ "web_tree_image_tooltip/static/src/scss/common.scss", 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..94535d8f4 --- /dev/null +++ b/web_tree_image_tooltip/demo/view_res_users.xml @@ -0,0 +1,17 @@ + + + + res.users + + + + + + + + diff --git a/web_tree_image_tooltip/readme/CONFIGURE.rst b/web_tree_image_tooltip/readme/CONFIGURE.rst index b992cb9d5..11a612f60 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 + + diff --git a/web_tree_image_tooltip/readme/CONTRIBUTORS.rst b/web_tree_image_tooltip/readme/CONTRIBUTORS.rst index 779590429..ce2d46287 100644 --- a/web_tree_image_tooltip/readme/CONTRIBUTORS.rst +++ b/web_tree_image_tooltip/readme/CONTRIBUTORS.rst @@ -5,3 +5,4 @@ * Nikul Chaudhary * Phuc Tran Thanh * Tharathip Chaweewongphan +* 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 95ac0f6b4..2796f0353 100644 --- a/web_tree_image_tooltip/readme/DESCRIPTION.rst +++ b/web_tree_image_tooltip/readme/DESCRIPTION.rst @@ -1,2 +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 diff --git a/web_tree_image_tooltip/readme/USAGE.rst b/web_tree_image_tooltip/readme/USAGE.rst index 0357aceea..037ec3259 100644 --- a/web_tree_image_tooltip/readme/USAGE.rst +++ b/web_tree_image_tooltip/readme/USAGE.rst @@ -1 +1,3 @@ Mouse Hover in tree view image that time Tooltip effect. + +.. image:: ../static/description/tree_view_image_tooltip.png 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 d3bd41231..b0008cc1f 100644 --- a/web_tree_image_tooltip/static/src/js/tooltip.js +++ b/web_tree_image_tooltip/static/src/js/tooltip.js @@ -1,13 +1,40 @@ 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"); + var img_src = + $(event.currentTarget) + .children(".img-fluid") + .attr("tooltip-image-src") || + $(event.currentTarget).children(".img-fluid").attr("src"); + $(event.currentTarget) .tooltip({ title: "",