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

[FIX] web: FieldBinaryImage size attribute not applied correctly in CSS

Browse Source 
Steps to follow

  - Go to the product page
  - Open studio
  - Click on the picture and set the size to large
  - Save and quit studio
  -> The size doesn't change

Cause of the issue

  Studio sets the size attribute on the field as `[0, 270]`
  This means the picture should have a height of 270px and an unspecified width.
  But for that to work, we need to handle the case were only one
  dimension is set.

opw-2745625

closes odoo/odoo#87226

X-original-commit: 50368a9db8ac67986cf64ff84ee625cbf7a90a1f
Signed-off-by: Anh Thao PHAM <pta@odoo.com>
Signed-off-by: Hubert Van De Walle <huvw@odoo.com>
This commit is contained in:
Hubert Van de Walle (huvw)
2022-03-24 22:28:43 +01:00
parent fca16554e1
commit f1fa85fe65
2 changed files with 91 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/legacy/js/fields/basic_fields.js
+16
View File
@@ -2131,10 +2131,18 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
if (width) {
$img.attr('width', width);
$img.css('max-width', width + 'px');
if (!height) {
$img.css('height', 'auto');
$img.css('max-height', '100%');
}
}
if (height) {
$img.attr('height', height);
$img.css('max-height', height + 'px');
if (!width) {
$img.css('width', 'auto');
$img.css('max-width', '100%');
}
}
this.$('> img').remove();
this.$el.prepend($img);
@@ -2241,10 +2249,18 @@ var CharImageUrl = AbstractField.extend({
if (width) {
$img.attr('width', width);
$img.css('max-width', width + 'px');
if (!height) {
$img.css('height', 'auto');
$img.css('max-height', '100%');
}
}
if (height) {
$img.attr('height', height);
$img.css('max-height', height + 'px');
if (!width) {
$img.css('width', 'auto');
$img.css('max-width', '100%');
}
}
this.$('> img').remove();
this.$el.prepend($img);
addons/web/static/tests/legacy/fields/basic_fields_tests.js
+75
View File
@@ -2976,6 +2976,48 @@ QUnit.module('basic_fields', {
form.destroy();
});
QUnit.test('image fields are correctly rendered with one dimension set', async function (assert) {
assert.expect(6);
this.data.partner.fields.picture = { string: 'Picture', type: 'binary' };
this.data.partner.records[0].__last_update = '2017-02-08 10:00:00';
this.data.partner.records[0].document = 'myimage1';
this.data.partner.records[0].picture = 'myimage2';
const form = await createView({
View: FormView,
model: 'partner',
data: this.data,
arch: '<form string="Partners">' +
'<field name="document" widget="image" options="{\'size\': [180, 0]}"/> ' +
'<field name="picture" widget="image" options="{\'size\': [0, 270]}"/> ' +
'</form>',
res_id: 1,
mockRPC: function (route, args) {
if (route.startsWith('data:image/png;base64,myimage')) {
return Promise.resolve('wow');
}
return this._super.apply(this, arguments);
},
});
assert.containsOnce(form, 'div[name="document"] > img', "the widget should contain an image");
assert.hasAttrValue(form.$('div[name="document"] > img'), 'width', "180",
"the image should correctly set its attributes");
const image1Style = form.$('div[name="document"] > img').attr('style');
assert.ok(['max-width: 180px', 'height: auto', 'max-height: 100%'].every(e => image1Style.includes(e)),
"the image should correctly set its style");
assert.containsOnce(form, 'div[name="picture"] > img', "the widget should contain an image");
assert.hasAttrValue(form.$('div[name="picture"] > img'), 'height', "270",
"the image should correctly set its attributes");
const image2Style = form.$('div[name="picture"] > img').attr('style');
assert.ok(['max-height: 270px', 'width: auto', 'max-width: 100%'].every(e => image2Style.includes(e)),
"the image should correctly set its style");
form.destroy();
});
QUnit.test('image fields are correctly replaced when given an incorrect value', async function (assert) {
assert.expect(6);
@@ -3203,6 +3245,39 @@ QUnit.module('basic_fields', {
form.destroy();
});
QUnit.test('image fields are correctly rendered with one dimension set', async function (assert) {
assert.expect(6);
this.data.partner.fields.tortue = {string: "Tortue", type: "char", default: "a"};
const form = await createView({
View: FormView,
model: 'partner',
data: this.data,
arch: '<form string="Partners">' +
'<field name="foo" widget="image_url" options="{\'size\': [180, 0]}"/> ' +
'<field name="tortue" widget="image_url" options="{\'size\': [0, 270]}"/> ' +
'</form>',
res_id: 6,
});
assert.containsOnce(form, 'div[name="foo"] > img', "the widget should contain an image");
assert.hasAttrValue(form.$('div[name="foo"] > img'), 'width', "180",
"the image should correctly set its attributes");
const image1Style = form.$('div[name="foo"] > img').attr('style');
assert.ok(['max-width: 180px', 'height: auto', 'max-height: 100%'].every(e => image1Style.includes(e)),
"the image should correctly set its style");
assert.containsOnce(form, 'div[name="tortue"] > img', "the widget should contain an image");
assert.hasAttrValue(form.$('div[name="tortue"] > img'), 'height', "270",
"the image should correctly set its attributes");
const image2Style = form.$('div[name="tortue"] > img').attr('style');
assert.ok(['max-height: 270px', 'width: auto', 'max-width: 100%'].every(e => image2Style.includes(e)),
"the image should correctly set its style");
form.destroy();
});
QUnit.test('image_url widget in subviews are loaded correctly', async function (assert) {
assert.expect(4);