[FIX] web: Avoid open too fast zoom

Picture of employees are maximazed directly which is annoying when you move the mouse in kanban view. Add the ability to put a waiting time before opening the zoom in option of the field in the view (default value is 0). closes odoo#45229 Taskid: 2191289 X-original-commit: a264b17 Signed-off-by: jbm-odoo <jbm-odoo@users.noreply.github.com>
rbonazzo · Feb 12, 2020 · 9a4da88 · 9a4da88
1 parent fdcab45
commit 9a4da88
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/addons/hr/views/hr_employee_public_views.xml b/addons/hr/views/hr_employee_public_views.xml
@@ -114,7 +114,7 @@
                     <templates>
                         <t t-name="kanban-box">
                         <div class="oe_kanban_global_click o_kanban_record_has_image_fill o_hr_kanban_record">
-                            <field name="image_128" widget="image" class="o_kanban_image_fill_left o_hr_rounded_circle" options="{'zoom': true, 'background': true, 'preventClicks': false}"/>
+                            <field name="image_128" widget="image" class="o_kanban_image_fill_left o_hr_rounded_circle" options="{'zoom': true, 'zoom_delay': 1000, 'background': true, 'preventClicks': false}"/>
 
                             <div class="oe_kanban_details">
                                 <div class="o_kanban_record_top">

diff --git a/addons/hr/views/hr_employee_views.xml b/addons/hr/views/hr_employee_views.xml
@@ -226,7 +226,7 @@
                    <templates>
                        <t t-name="kanban-box">
                        <div class="oe_kanban_global_click o_kanban_record_has_image_fill o_hr_kanban_record">
-                           <field name="image_128" widget="image" class="o_kanban_image_fill_left o_hr_rounded_circle" options="{'zoom': true, 'background': true, 'preventClicks': false}"/>
+                           <field name="image_128" widget="image" class="o_kanban_image_fill_left o_hr_rounded_circle" options="{'zoom': true, 'zoom_delay': 1000, 'background': true, 'preventClicks': false}"/>
 
                             <div class="oe_kanban_details">
                                <div class="o_kanban_record_top">

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
@@ -1917,13 +1917,18 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
             } else {
                 $img = this.$('img');
             }
+            var zoomDelay = 0;
+            if (this.nodeOptions.zoom_delay) {
+                zoomDelay = this.nodeOptions.zoom_delay;
+            }
 
             if(this.recordData[imageField]) {
                 $img.attr('data-zoom', 1);
                 $img.attr('data-zoom-image', url);
 
                 $img.zoomOdoo({
                     event: 'mouseenter',
+                    timer: zoomDelay,
                     attach: '.o_content',
                     attachToTarget: true,
                     onShow: function () {

diff --git a/addons/web/static/src/js/libs/zoomodoo.js b/addons/web/static/src/js/libs/zoomodoo.js
@@ -29,6 +29,9 @@ var defaults = {
     // event to trigger zoom
     event: 'click', //or mouseenter
 
+    // Timer before trigger zoom
+    timer: 0,
+
     // Prevent clicks on the zoom image link.
     preventClicks: true,
 
@@ -197,13 +200,17 @@ ZoomOdoo.prototype.show = function (e, testMouseOver) {
  * @param {Event} e
  */
 ZoomOdoo.prototype._onEnter = function (e) {
+    var self = this;
     var touches = e.originalEvent.touches;
-
+    e.preventDefault();
     this.isMouseOver = true;
-    if (!touches || touches.length === 1) {
-        e.preventDefault();
-        this.show(e, true);
-    }
+
+    setTimeout(function () {
+        if (self.isMouseOver && (!touches || touches.length === 1)) {
+            self.show(e, true);
+        }
+      }, this.opts.timer);
+
 };
 
 /**