diff options
| author | Dhruv Patel <dhp@odoo.com> | 2021-04-02 10:39:15 +0000 |
|---|---|---|
| committer | Dhruv Patel <dhp@odoo.com> | 2021-04-07 09:37:12 +0000 |
| commit | 08f152bb9ceb6bd4560aa177b392b0420162e131 (patch) | |
| tree | bac7f0d7264ce622976dea418cdd62d1b3015e2e /addons/mail | |
| parent | a1beb1a4b3d7cc9724f5a9adeb1183c0a89e175f (diff) | |
[FIX] mail: small image attachment preview too small for its box
In the chatter, the attachment preview image size is fixed with 160*160
but the actual preview area is 200*200px so the image is not filling correctly.
It appears padding around the image, especially visible when hovering it.
So with this commit, We should make sure to use a properly sized image in the
preview. we have to also provide the perfect resolution and preview for
the small images without upscaling incorrectly. For large images, it should be
display based on the aspect ratio.
Task : 2483885
closes odoo/odoo#68696
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
Diffstat (limited to 'addons/mail')
3 files changed, 14 insertions, 5 deletions
diff --git a/addons/mail/static/src/components/attachment/attachment.js b/addons/mail/static/src/components/attachment/attachment.js index a1c05fb8c62..a4b7b1363fe 100644 --- a/addons/mail/static/src/components/attachment/attachment.js +++ b/addons/mail/static/src/components/attachment/attachment.js @@ -94,10 +94,18 @@ class Attachment extends Component { if (this.detailsMode === 'card') { size = '38x38'; } else { - size = '160x160'; + // The size of background-image depends on the props.imageSize + // to sync with width and height of `.o_Attachment_image`. + if (this.props.imageSize === "large") { + size = '400x400'; + } else if (this.props.imageSize === "medium") { + size = '200x200'; + } else if (this.props.imageSize === "small") { + size = '100x100'; + } } // background-size set to override value from `o_image` which makes small image stretched - return `background-image:url(/web/image/${this.attachment.id}/${size}/?crop=true); background-size: auto;`; + return `background-image:url(/web/image/${this.attachment.id}/${size}); background-size: auto;`; } //-------------------------------------------------------------------------- diff --git a/addons/mail/static/src/components/attachment/attachment.scss b/addons/mail/static/src/components/attachment/attachment.scss index 22ff24f3880..583e5703691 100644 --- a/addons/mail/static/src/components/attachment/attachment.scss +++ b/addons/mail/static/src/components/attachment/attachment.scss @@ -71,7 +71,8 @@ &.o-details-overlay { position: relative; - + // small, medium and large size styles should be sync with + // the size of the background-image and `.o_Attachment_image`. &.o-small { min-width: 100px; min-height: 100px; diff --git a/addons/mail/static/src/components/attachment/attachment_tests.js b/addons/mail/static/src/components/attachment/attachment_tests.js index 302f39cd41a..eaeb267dfd8 100644 --- a/addons/mail/static/src/components/attachment/attachment_tests.js +++ b/addons/mail/static/src/components/attachment/attachment_tests.js @@ -107,8 +107,8 @@ QUnit.test('simplest layout + deletable', async function (assert) { async mockRPC(route, args) { if (route.includes('web/image/750')) { assert.ok( - route.includes('/160x160'), - "should fetch image with 160x160 pixels ratio"); + route.includes('/200x200'), + "should fetch image with 200x200 pixels ratio"); assert.step('fetch_image'); } return this._super(...arguments); |