pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: fix zoomodoo attachToTarget/dashboard compatible

Browse Source 
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>
This commit is contained in:
jvm-odoo
2020-07-10 13:48:20 +00:00
parent 6fcbcde823
commit ccea563abb
2 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/js/fields/basic_fields.js
+3 -1
View File
@@ -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);
addons/web/static/src/js/libs/zoomodoo.js
+18 -5
View File
@@ -84,8 +84,8 @@ ZoomOdoo.prototype._init = function () {
this.$flyout = $('<div class="zoomodoo-flyout" />');
var $attach = this.$target;
if (this.opts.attach !== undefined && this.$target.parents(this.opts.attach).length) {
$attach = this.$target.parents(this.opts.attach);
if (this.opts.attach !== undefined && this.$target.closest(this.opts.attach).length) {
$attach = this.$target.closest(this.opts.attach);
}
$attach.parent().on('mousemove.zoomodoo touchmove.zoomodoo', $.proxy(this._onMove, this));
$attach.parent().on('mouseleave.zoomodoo touchend.zoomodoo', $.proxy(this._onLeave, this));
@@ -120,8 +120,8 @@ ZoomOdoo.prototype.show = function (e, testMouseOver) {
}
var $attach = this.$target;
if (this.opts.attach !== undefined && this.$target.parents(this.opts.attach).length) {
$attach = this.$target.parents(this.opts.attach);
if (this.opts.attach !== undefined && this.$target.closest(this.opts.attach).length) {
$attach = this.$target.closest(this.opts.attach);
}
// Prevents having multiple zoom flyouts
@@ -132,6 +132,19 @@ ZoomOdoo.prototype.show = function (e, testMouseOver) {
if (this.opts.attachToTarget) {
this.opts.beforeAttach.call(this);
// Be sure that the flyout is at top 0, left 0 to ensure correct computation
// e.g. employees kanban on dashboard
this.$flyout.css('position', 'fixed');
var flyoutOffset = this.$flyout.offset();
if (flyoutOffset.left > 0) {
var flyoutLeft = parseFloat(this.$flyout.css('left').replace('px',''));
this.$flyout.css('left', flyoutLeft - flyoutOffset.left + 'px');
}
if (flyoutOffset.top > 0) {
var flyoutTop = parseFloat(this.$flyout.css('top').replace('px',''));
this.$flyout.css('top', flyoutTop - flyoutOffset.top + 'px');
}
if(this.$zoom.height() < this.$flyout.height()) {
this.$flyout.css('height', this.$zoom.height() + 'px');
}
@@ -296,7 +309,7 @@ ZoomOdoo.prototype._move = function (e) {
var xl = Math.ceil(pl * rw);
// Close if outside
if (xl < 0 || xt < 0 || xl > dw || xt > dh || lx > (offset.left + this.$target.outerWidth())) {
if (!this.opts.attachToTarget && (xl < 0 || xt < 0 || xl > dw || xt > dh || lx > (offset.left + this.$target.outerWidth()))) {
this.hide();
} else {
var top = xt * -1;