diff --git a/addons/mail/static/src/core/message_model.js b/addons/mail/static/src/core/message_model.js index d91a0ca3007..ede580940ee 100644 --- a/addons/mail/static/src/core/message_model.js +++ b/addons/mail/static/src/core/message_model.js @@ -187,6 +187,25 @@ export class Message { ); } + /** + * Determines if the link preview is actually the main content of the + * message. Meaning: + * - The link is the only part of the message body. + * - There is only one link in the message body. + * - The link preview is of image type. + */ + get linkPreviewSquash() { + return ( + this._store.hasLinkPreviewFeature && + this.body && + this.body.startsWith("") && + this.body.match(/<\/a>/im)?.length === 1 && + this.linkPreviews.length === 1 && + this.linkPreviews[0].isImage + ); + } + get inlineBody() { if (!this.body) { return ""; diff --git a/addons/mail/static/src/core_ui/link_preview/link_preview.scss b/addons/mail/static/src/core_ui/link_preview/link_preview.scss index b4337ad2724..20365675b7c 100644 --- a/addons/mail/static/src/core_ui/link_preview/link_preview.scss +++ b/addons/mail/static/src/core_ui/link_preview/link_preview.scss @@ -17,7 +17,11 @@ .o-mail-LinkPreviewImage img { max-height: $o-mail-LinkPreview-height; - max-width: Min($o-mail-LinkPreview-width, 100%); + max-width: $o-mail-LinkPreview-width; +} + +.o-mail-ChatWindow-content .o-mail-LinkPreviewImage img { + max-width: 100%; } .o-mail-LinkPreviewVideo { diff --git a/addons/mail/static/src/core_ui/message.xml b/addons/mail/static/src/core_ui/message.xml index fb9a801e8f6..faadc33b892 100644 --- a/addons/mail/static/src/core_ui/message.xml +++ b/addons/mail/static/src/core_ui/message.xml @@ -94,21 +94,24 @@ >
-
-
-
- Subject: - - + +
+
+
+ Subject: + + +
-
+
+
@@ -167,7 +170,7 @@ attachments="message.attachments" unlinkAttachment.bind="onClickAttachmentUnlink" imagesHeight="300"/> - +
diff --git a/addons/mail/static/tests/message/link_preview_test.js b/addons/mail/static/tests/message/link_preview_test.js index b7346333e64..cd70ec1284f 100644 --- a/addons/mail/static/tests/message/link_preview_test.js +++ b/addons/mail/static/tests/message/link_preview_test.js @@ -262,3 +262,73 @@ QUnit.test("No crash on receiving link preview of non-known message", async (ass await nextAnimationFrame(); assert.ok(true); }); + +QUnit.test( + "Squash the message and the link preview when the link preview is an image and the link is the only text in the message", + async (assert) => { + const pyEnv = await startServer(); + const linkPreviewId = pyEnv["mail.link.preview"].create({ + image_mimetype: "image/jpg", + source_url: + "https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/290px-Siberischer_tiger_de_edit02.jpg", + }); + const channelId = pyEnv["mail.channel"].create({ name: "wololo" }); + pyEnv["mail.message"].create({ + body: "http://linkPreview", + link_preview_ids: [linkPreviewId], + message_type: "comment", + model: "mail.channel", + res_id: channelId, + }); + const { openDiscuss } = await start(); + await openDiscuss(channelId); + assert.containsNone($, ".o-mail-Message-bubble"); + } +); + +QUnit.test( + "Link preview and message should not be squashed when the link preview is not an image", + async (assert) => { + const pyEnv = await startServer(); + const linkPreviewId = pyEnv["mail.link.preview"].create({ + og_description: "Description", + og_title: "Article title", + og_type: "article", + source_url: "https://www.odoo.com", + }); + const channelId = pyEnv["mail.channel"].create({ name: "wololo" }); + pyEnv["mail.message"].create({ + body: "http://linkPreview", + link_preview_ids: [linkPreviewId], + message_type: "comment", + model: "mail.channel", + res_id: channelId, + }); + const { openDiscuss } = await start(); + await openDiscuss(channelId); + assert.containsOnce($, ".o-mail-Message-bubble"); + } +); + +QUnit.test( + "Link preview and message should not be squashed when there is more than the link in the message", + async (assert) => { + const pyEnv = await startServer(); + const linkPreviewId = pyEnv["mail.link.preview"].create({ + image_mimetype: "image/jpg", + source_url: + "https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/290px-Siberischer_tiger_de_edit02.jpg", + }); + const channelId = pyEnv["mail.channel"].create({ name: "wololo" }); + pyEnv["mail.message"].create({ + body: "http://linkPreview not empty", + link_preview_ids: [linkPreviewId], + message_type: "comment", + model: "mail.channel", + res_id: channelId, + }); + const { openDiscuss } = await start(); + await openDiscuss(channelId); + assert.containsOnce($, ".o-mail-Message-bubble"); + } +);