[MIG] attachment_preview: Migration to 16.0

Overall implementation remains the same as in previous versions:
* patch into attachment list to prepare prev/next buttons in the viewer
* patch into attachment cards to observe clicks on new buttons this
  module adds
* fetch attachment extensions
* add an iframe into the DOM tree next to the main form one, display
  viewer inside it
* add preview button within binary fields

Main changes in this migration:
* update imports/exports to proper JS modules - in particular, this
  fixes "service already defined" console messages we also get in 15.0
* rework FormRenderer injector, previous (legacy) one was no longer used
* patch attachment list / cards with new methods in the mail module
* fix preview button inclusion within binary fields
* fix previous/next viewer buttons

attachment_preview/__manifest__.py

@@ -3,7 +3,7 @@
 
 {
     "name": "Preview attachments",
-    "version": "15.0.1.0.0",
+    "version": "16.0.1.0.0",
     "author": "Therp BV," "Onestein," "Odoo Community Association (OCA)",
     "website": "https://github.com/OCA/knowledge",
     "license": "AGPL-3",
@@ -15,15 +15,15 @@
     "assets": {
         "web._assets_primary_variables": [],
         "web.assets_backend": [
-            "attachment_preview/static/src/js/models/attachment_card/attachment_card.esm.js",
             "attachment_preview/static/src/js/attachmentPreviewWidget.esm.js",
+            "attachment_preview/static/src/js/models/attachment_card/attachment_card.esm.js",
             "attachment_preview/static/src/js/components/chatter/chatter.esm.js",
             "attachment_preview/static/src/scss/attachment_preview.scss",
+            "attachment_preview/static/src/xml/attachment_preview.xml",
         ],
         "web.assets_frontend": [],
         "web.assets_tests": [],
         "web.qunit_suite_tests": [],
-        "web.assets_qweb": ["attachment_preview/static/src/xml/attachment_preview.xml"],
     },
     "installable": True,
 }

attachment_preview/readme/CONTRIBUTORS.rst

@@ -1,2 +1,5 @@
 * Holger Brunn <mail@hunki-enterprises.com>
 * Dennis Sluijk <d.sluijk@onestein.nl>
+* `XCG Consulting <https://xcg-consulting.fr>`_:
+
+  * Houzéfa Abbasbhay

attachment_preview/readme/ROADMAP.rst

@@ -0,0 +1,8 @@
+* Remove `FormRenderer` patch, convert `AttachmentPreviewWidget` into a component instead.
+* Remove `BinaryField` patch, convert preview button into a component instead.
+* Don't use `bus.trigger("open_attachment_preview", ...)` to open viewer from an attachment; there
+  must be a smoother way.
+* Binary fields only have an external preview button. Also add inline preview; stub code is already
+  there.
+* Add tests to ensure preview & open buttons are rendered in attachment cards.
+* Add JS tests to ensure preview & open buttons work as expected (display viewer / open url).

attachment_preview/static/src/js/attachmentPreviewWidget.esm.js

@@ -1,10 +1,7 @@
 /** @odoo-module */
 import Widget from "web.Widget";
 
-var active_attachment_index = 0;
+export const AttachmentPreviewWidget = Widget.extend({
-var is_first_click = true;
-
-var AttachmentPreviewWidget = Widget.extend({
     template: "attachment_preview.AttachmentPreviewWidget",
     activeIndex: 0,
 
@@ -16,7 +13,6 @@ var AttachmentPreviewWidget = Widget.extend({
     },
 
     start: function () {
-        // First_click = true;
         var res = this._super.apply(this, arguments);
         this.$overlay = $(".attachment_preview_overlay");
         this.$iframe = $(".attachment_preview_iframe");
@@ -37,17 +33,11 @@ var AttachmentPreviewWidget = Widget.extend({
     },
 
     _onPopoutClick: function () {
-        if (!this.attachments[this.activeIndex]) {
+        if (!this.attachments[this.activeIndex]) return;
-            return;
-        }
-
         window.open(this.attachments[this.activeIndex].previewUrl);
     },
 
     next: function () {
-        if (is_first_click) {
-            is_first_click = !is_first_click;
-        }
         var index = this.activeIndex + 1;
         if (index >= this.attachments.length) {
             index = 0;
@@ -58,9 +48,6 @@ var AttachmentPreviewWidget = Widget.extend({
     },
 
     previous: function () {
-        if (is_first_click) {
-            is_first_click = !is_first_click;
-        }
         var index = this.activeIndex - 1;
         if (index < 0) {
             index = this.attachments.length - 1;
@@ -76,7 +63,6 @@ var AttachmentPreviewWidget = Widget.extend({
     },
 
     hide: function () {
-        is_first_click = true;
         this.$el.addClass("d-none");
         this.trigger("hidden");
     },
@@ -98,37 +84,19 @@ var AttachmentPreviewWidget = Widget.extend({
             this.$iframe.attr("src", "about:blank");
             return;
         }
-
+        var att = this.attachments[this.activeIndex];
-        if (is_first_click) {
-            for (let i = 0; i < this.attachments.length; i++) {
-                if (
-                    parseInt(this.attachments[i].id, 10) === this.active_attachment_id
-                ) {
-                    active_attachment_index = i;
-                    is_first_click = false;
-                }
-            }
-        } else {
-            active_attachment_index = this.activeIndex;
-        }
-
-        var att = this.attachments[active_attachment_index];
         this.$iframe.attr("src", att.previewUrl);
     },
 
-    setAttachments: function (attachments, active_attachment_id, first_click) {
+    setAttachments: function (attachments, active_attachment_id) {
-        is_first_click = first_click;
-
-        if (active_attachment_id) {
-            this.active_attachment_id = active_attachment_id;
-        }
-        if (attachments) {
         this.attachments = attachments;
-            this.activeIndex = 0;
+        if (!attachments) return;
+        for (let i = 0; i < attachments.length; ++i) {
+            if (parseInt(attachments[i].id, 10) === active_attachment_id) {
+                this.activeIndex = i;
+            }
+        }
         this.updatePaginator();
         this.loadPreview();
-        }
     },
 });
-
-export default AttachmentPreviewWidget;

attachment_preview/static/src/js/components/chatter/chatter.esm.js

@@ -1,277 +1,65 @@
 /** @odoo-module **/
-import AttachmentPreviewWidget from "../../attachmentPreviewWidget";
+import {
-import {Chatter} from "@mail/components/chatter/chatter";
+    canPreview,
-import {patch} from "web.utils";
+    showPreview,
+} from "../../models/attachment_card/attachment_card.esm";
+import {BinaryField} from "@web/views/fields/binary/binary_field";
+import {_t} from "@web/core/l10n/translation";
+import {onMounted} from "@odoo/owl";
+import {patch} from "@web/core/utils/patch";
+import {query} from "web.rpc";
+import {sprintf} from "@web/core/utils/strings";
 
-odoo.define("attachment_preview.chatter", function (require) {
+patch(BinaryField.prototype, "attachment_preview.BinaryField", {
-    const components = {Chatter};
+    setup() {
-    var rpc = require("web.rpc");
+        var res = this._super(...arguments);
-    var basic_fields = require("web.basic_fields");
+        onMounted(this._preview_onMounted);
-    var core = require("web.core");
+        return res;
-    var _t = core._t;
-
-    function getUrl(
-        attachment_id,
-        attachment_url,
-        attachment_extension,
-        attachment_title
-    ) {
-        var url = "";
-        if (attachment_url) {
-            if (attachment_url.slice(0, 21) === "/web/static/lib/pdfjs") {
-                url = (window.location.origin || "") + attachment_url;
-            } else {
-                url =
-                    (window.location.origin || "") +
-                    "/attachment_preview/static/lib/ViewerJS/index.html" +
-                    "?type=" +
-                    encodeURIComponent(attachment_extension) +
-                    "&zoom=automatic" +
-                    "&title=" +
-                    encodeURIComponent(attachment_title) +
-                    "#" +
-                    attachment_url.replace(window.location.origin, "");
-            }
-        } else {
-            url =
-                (window.location.origin || "") +
-                "/attachment_preview/static/lib/ViewerJS/index.html" +
-                "?type=" +
-                encodeURIComponent(attachment_extension) +
-                "&title=" +
-                encodeURIComponent(attachment_title) +
-                "&zoom=automatic" +
-                "#" +
-                "/web/content/" +
-                attachment_id +
-                "?model%3Dir.attachment";
-        }
-
-        return url;
-    }
-
-    function canPreview(extension) {
-        return (
-            $.inArray(extension, [
-                "odt",
-                "odp",
-                "ods",
-                "fodt",
-                "pdf",
-                "ott",
-                "fodp",
-                "otp",
-                "fods",
-                "ots",
-            ]) > -1
-        );
-    }
-
-    patch(
-        components.Chatter.prototype,
-        "attachment_preview/static/src/js/components/chatter/chatter.js",
-        {
-            /**
-             * @override
-             */
-            constructor(...args) {
-                this._super(...args);
-
-                this._showPreview = this._showPreview.bind(this);
-                this.canPreview = this.canPreview.bind(this);
     },
 
-            /**
+    _preview_onMounted() {
-             * @override
+        if (this.props.record.data.id) {
-             */
-            _update() {
-                // Var res = this._super.apply(this, arguments);
             var self = this;
-                self._getPreviewableAttachments().then(function (atts) {
+            query({
-                    self.previewableAttachments = atts;
-                    self._updatePreviewButtons(self.previewableAttachments);
-                    if (!self.attachmentPreviewWidget) {
-                        self.attachmentPreviewWidget = new AttachmentPreviewWidget(
-                            self
-                        );
-                        self.attachmentPreviewWidget.setAttachments(atts);
-                    }
-                    self.previewableAttachments = atts;
-                    // ChatterpreviewableAttachments = atts;
-                    self.attachmentPreviewWidget.setAttachments(atts);
-                });
-            },
-
-            _getPreviewableAttachments: function () {
-                var self = this;
-                var deferred = $.Deferred();
-                const chatter = self.messaging.models["mail.chatter"].get(
-                    self.props.chatterLocalId
-                );
-                const thread = chatter ? chatter.thread : undefined;
-
-                var attachments = {};
-                if (thread) {
-                    attachments = thread.allAttachments;
-                }
-
-                attachments = _.object(
-                    attachments.map((attachment) => {
-                        return attachment.id;
-                    }),
-                    attachments.map((attachment) => {
-                        if (attachment.defaultSource) {
-                            return {
-                                url: attachment.defaultSource,
-                                extension: attachment.extension,
-                                title: attachment.name,
-                            };
-                        }
-                        return {
-                            url: "/web/content?id=" + attachment.id + "&download=true",
-                            extension: attachment.extension,
-                            title: attachment.name,
-                        };
-                    })
-                );
-
-                rpc.query({
                 model: "ir.attachment",
                 method: "get_attachment_extension",
-                    args: [
+                args: [this.props.record.data.id],
-                        _.map(_.keys(attachments), function (id) {
+            }).then(function (extension) {
-                            return parseInt(id, 10);
-                        }),
-                    ],
-                }).then(
-                    function (extensions) {
-                        var reviewableAttachments = _.map(
-                            _.keys(
-                                _.pick(extensions, function (extension) {
-                                    return canPreview(extension);
-                                })
-                            ),
-                            function (id) {
-                                return {
-                                    id: id,
-                                    url: attachments[id].url,
-                                    extension: extensions[id],
-                                    title: attachments[id].title,
-                                    previewUrl: getUrl(
-                                        id,
-                                        attachments[id].url,
-                                        extensions[id],
-                                        attachments[id].title
-                                    ),
-                                };
-                            }
-                        );
-
-                        deferred.resolve(reviewableAttachments);
-                    },
-
-                    function () {
-                        deferred.reject();
-                    }
-                );
-
-                return deferred.promise();
-            },
-
-            _updatePreviewButtons: function (previewableAttachments) {
-                $(this)
-                    .find(".o_attachment_preview")
-                    .each(function () {
-                        var $this = $(this);
-                        var att = _.findWhere(previewableAttachments, {
-                            id: $this.attr("data-id"),
-                        });
-                        if (att) {
-                            $this.attr("data-extension", att.extension);
-                        } else {
-                            $this.remove();
-                        }
-                    });
-            },
-        }
-    );
-
-    basic_fields.FieldBinaryFile.include(components.Chatter);
-    basic_fields.FieldBinaryFile.include({
-        showPreview(
-            attachment_id,
-            attachment_url,
-            attachment_extension,
-            attachment_title,
-            split_screen
-        ) {
-            if (!canPreview(attachment_extension)) {
-                return;
-            }
-
-            var url = getUrl(
-                attachment_id,
-                attachment_url,
-                attachment_extension,
-                attachment_title
-            );
-
-            if (split_screen) {
-                this.trigger("onAttachmentPreview", {url: url});
-            } else {
-                window.open(url);
-            }
-        },
-
-        _renderReadonly: function () {
-            var self = this;
-            this._super.apply(this, arguments);
-
-            if (this.recordData.id) {
-                this._getBinaryExtension().then(function (extension) {
                 if (canPreview(extension)) {
-                        // Self._renderPreviewButton(extension, recordData);
                     self._renderPreviewButton(extension);
                 }
             });
         }
     },
 
-        _renderPreviewButton: function (extension) {
+    _renderPreviewButton(extension) {
-            this.$previewBtn = $("<a/>");
+        // Add a button same as standard fa-download one.
-            this.$previewBtn.addClass("fa fa-external-link mr-2");
+        var dl_button = $(this.__owl__.bdom.parentEl).find("button.fa-download");
-            this.$previewBtn.attr("href");
+        if (dl_button.length !== 1) return;
-            this.$previewBtn.attr(
+        var preview_button = $("<button/>");
-                "title",
+        preview_button.addClass("btn btn-secondary fa fa-external-link");
-                _.str.sprintf(_t("Preview %s"), this.field.string)
+        preview_button.attr("data-tooltip", "Preview");
-            );
+        preview_button.attr("aria-label", "Preview");
-            this.$previewBtn.attr("data-extension", extension);
+        preview_button.attr("title");
-            this.$el.find(".fa-download").after(this.$previewBtn);
+        preview_button.attr("data-extension", extension);
-            this.$previewBtn.on("click", this._onPreview.bind(this));
+        dl_button.after(preview_button);
+        preview_button.on("click", this._onPreview.bind(this));
     },
 
-        _getBinaryExtension: function () {
+    _onPreview(event) {
-            return rpc.query({
+        showPreview(
-                model: "ir.attachment",
-                method: "get_binary_extension",
-                args: [this.model, this.recordData.id, this.name, this.attrs.filename],
-            });
-        },
-
-        _onPreview: function (event) {
-            this.showPreview(
             null,
-                _.str.sprintf(
+            sprintf(
-                    "/web/content?model=%s&field=%s&id=%d",
+                "/web/content?model=%s&field=%s&id=%s",
-                    this.model,
+                this.props.record.resModel,
-                    this.name,
+                this.props.name,
-                    this.recordData.id
+                this.props.record.data.id
             ),
             $(event.currentTarget).attr("data-extension"),
-                _.str.sprintf(_t("Preview %s"), this.field.string),
+            sprintf(_t("Preview %s"), this.state.fileName),
-                false
+            false,
+            null
         );
         event.stopPropagation();
     },
-    });
 });

attachment_preview/static/src/js/models/attachment_card/attachment_card.esm.js

@@ -1,22 +1,16 @@
 /** @odoo-module **/
-import AttachmentPreviewWidget from "../../attachmentPreviewWidget.esm";
+import {onMounted, onWillUnmount} from "@odoo/owl";
-import FormRenderer from "web.FormRenderer";
+import {AttachmentPreviewWidget} from "../../attachmentPreviewWidget.esm";
-import {registerInstancePatchModel} from "@mail/model/model_core";
+import {FormRenderer} from "@web/views/form/form_renderer";
+import {bus} from "web.core";
+import {patch} from "@web/core/utils/patch";
+import {query} from "web.rpc";
+import {registerPatch} from "@mail/model/model_core";
 
-odoo.define("attachment_preview.attachment_card", function (require) {
+patch(FormRenderer.prototype, "attachment_preview.FormRenderer", {
-    var rpc = require("web.rpc");
-
-    var chatterpreviewableAttachments = [];
-    var active_attachment_id = 0;
-    var first_click = true;
-
-    FormRenderer.include({
-        custom_events: _.extend({}, FormRenderer.prototype.custom_events, {
-            onAttachmentPreview: "_onAttachmentPreview",
-        }),
     attachmentPreviewWidget: null,
 
-        init: function () {
+    setup() {
         var res = this._super(...arguments);
         this.attachmentPreviewWidget = new AttachmentPreviewWidget(this);
         this.attachmentPreviewWidget.on(
@@ -24,43 +18,34 @@ odoo.define("attachment_preview.attachment_card", function (require) {
             this,
             this._attachmentPreviewWidgetHidden
         );
+        onMounted(() => {
+            this.attachmentPreviewWidget.insertAfter($(".o_form_view"));
+            bus.on("open_attachment_preview", this, this._onAttachmentPreview);
+        });
+        onWillUnmount(() => {
+            bus.off("open_attachment_preview", this, this._onAttachmentPreview);
+            this.attachmentPreviewWidget.hide();
+            this.attachmentPreviewWidget.destroy();
+        });
         return res;
     },
 
-        start: function () {
+    _attachmentPreviewWidgetHidden() {
-            var self = this;
+        $(".o_form_view").removeClass("attachment_preview");
-            return this._super.apply(this, arguments).then(function () {
-                self.attachmentPreviewWidget.insertAfter(self.$el);
-            });
     },
 
-        _attachmentPreviewWidgetHidden: function () {
+    _onAttachmentPreview(attachment_id, attachment_info_list) {
-            this.$el.removeClass("attachment_preview");
+        $(".o_form_view").addClass("attachment_preview");
-        },
-
-        showAttachmentPreviewWidget: function (first_c) {
-            this.$el.addClass("attachment_preview");
-
         this.attachmentPreviewWidget.setAttachments(
-                chatterpreviewableAttachments,
+            attachment_info_list,
-                active_attachment_id,
+            attachment_id
-                first_c
         );
         this.attachmentPreviewWidget.show();
     },
+});
+// FormRenderer patch
 
-        on_detach_callback: function () {
+export function canPreview(extension) {
-            this.attachmentPreviewWidget.hide();
-            return this._super.apply(this, arguments);
-        },
-
-        _onAttachmentPreview: function () {
-            first_click = true;
-            this.showAttachmentPreviewWidget(first_click);
-        },
-    });
-
-    function canPreview(extension) {
     return (
         $.inArray(extension, [
             "odt",
@@ -75,14 +60,9 @@ odoo.define("attachment_preview.attachment_card", function (require) {
             "ots",
         ]) > -1
     );
-    }
+}
 
-    function getUrl(
+function getUrl(attachment_id, attachment_url, attachment_extension, attachment_title) {
-        attachment_id,
-        attachment_url,
-        attachment_extension,
-        attachment_title
-    ) {
     var url = "";
     if (attachment_url) {
         if (attachment_url.slice(0, 21) === "/web/static/lib/pdfjs") {
@@ -115,25 +95,39 @@ odoo.define("attachment_preview.attachment_card", function (require) {
         "?model%3Dir.attachment";
 
     return url;
+}
+
+export function showPreview(
+    attachment_id,
+    attachment_url,
+    attachment_extension,
+    attachment_title,
+    split_screen,
+    attachment_info_list
+) {
+    if (split_screen && attachment_info_list) {
+        bus.trigger("open_attachment_preview", attachment_id, attachment_info_list);
+    } else {
+        window.open(
+            getUrl(
+                attachment_id,
+                attachment_url,
+                attachment_extension,
+                attachment_title
+            )
+        );
     }
+}
 
-    registerInstancePatchModel(
+registerPatch({
-        "mail.attachment_card",
+    name: "AttachmentList",
-        "attachment_preview/static/src/js/models/attachment_card/attachment_card.js",
+    lifecycleHooks: {
-        {
-            /**
-             * @override
-             */
         _created() {
-                this._super();
-                this._onPreviewAttachment = this._onPreviewAttachment.bind(this);
-
             var attachments = _.object(
-                    this.attachmentList.attachments.map((attachment) => {
+                this.attachments.map((attachment) => {
-                        console.log("attachment", attachment);
                     return attachment.id;
                 }),
-                    this.attachmentList.attachments.map((attachment) => {
+                this.attachments.map((attachment) => {
                     if (
                         attachment.defaultSource &&
                         attachment.defaultSource.length > 38
@@ -152,7 +146,8 @@ odoo.define("attachment_preview.attachment_card", function (require) {
                 })
             );
 
-                rpc.query({
+            var self = this;
+            query({
                 model: "ir.attachment",
                 method: "get_attachment_extension",
                 args: [
@@ -161,7 +156,7 @@ odoo.define("attachment_preview.attachment_card", function (require) {
                     }),
                 ],
             }).then(function (extensions) {
-                    var reviewableAttachments = _.map(
+                self.previewableAttachments = _.map(
                     _.keys(
                         _.pick(extensions, function (extension) {
                             return canPreview(extension);
@@ -182,55 +177,15 @@ odoo.define("attachment_preview.attachment_card", function (require) {
                         };
                     }
                 );
-                    chatterpreviewableAttachments = reviewableAttachments;
             });
         },
-
-            /**
-             * @private
-             * @param {attachment_id} attachment_id of the attachment
-             * @param {attachment_url} attachment_url of the attachment
-             * @param {attachment_extension} attachment_extension of the attachment
-             * @param {attachment_title} attachment_title of the attachment
-             * @param {split_screen} split_screen of the attachment
-             */
-            _showPreview(
-                attachment_id,
-                attachment_url,
-                attachment_extension,
-                attachment_title,
-                split_screen
-            ) {
-                // Let active_attURL = "";
-                // this.attachmentList.attachments.forEach((att) => {
-                //     if (
-                //         parseInt(att.localId.slice(20).slice(0, -1)) === attachment_id
-                //     ) {
-                //         if (att.__values.url === undefined) {
-                //             att.__values.url = attachment_url.slice(
-                //                 window.location.origin.length
-                //             );
-                //             active_attURL = att.__values.url;
-                //         }
-                //     }
-                // });
-                var url = getUrl(
-                    attachment_id,
-                    attachment_url,
-                    attachment_extension,
-                    attachment_title
-                );
-
-                if (split_screen) {
-                    this.component.trigger("onAttachmentPreview", {
-                        url: url,
-                        active_attachment_id: active_attachment_id,
-                    });
-                } else {
-                    window.open(url);
-                }
     },
+});
+// AttachmentList patch
 
+registerPatch({
+    name: "AttachmentCard",
+    recordMethods: {
         /**
          * @private
          * @param {event} event
@@ -241,25 +196,23 @@ odoo.define("attachment_preview.attachment_card", function (require) {
             var self = this,
                 $target = $(event.currentTarget),
                 split_screen = $target.attr("data-target") !== "new",
-                    attachment_id = this.attachment.id,
+                attachment_id = this.attachment.id;
-                    attachment_title = this.attachment.filename,
-                    attachment_url = this.attachment.defaultSource;
-                active_attachment_id = attachment_id;
 
-                rpc.query({
+            query({
                 model: "ir.attachment",
                 method: "get_attachment_extension",
                 args: [attachment_id],
             }).then(function (extension) {
-                    self._showPreview(
+                showPreview(
                     attachment_id,
-                        attachment_url,
+                    self.attachment.defaultSource,
                     extension,
-                        attachment_title,
+                    self.attachment.filename,
-                        split_screen
+                    split_screen,
+                    self.attachmentList.previewableAttachments
                 );
             });
         },
-        }
+    },
-    );
 });
+// AttachmentCard patch

attachment_preview/static/src/scss/attachment_preview.scss

@@ -1,38 +1,16 @@
-.o_attachments_list .o_attachment_wrap {
+/* This style applies to the form as a whole when we display preview widget next to it. */
-    .o_attachment_preview {
-        cursor: pointer;
-        float: right;
-        padding-top: 1px;
-        padding-bottom: 1px;
-
-        &.o_attachment_preview_new_tab {
-            right: 43px;
-        }
-    }
-
-    .open .dropdown-menu > li > a {
-        padding-right: 60px;
-    }
-}
-
-.o_form_uri .fa-search {
-    padding-left: 5px;
-    padding-right: 5px;
-}
-
-/* Preview widget */
-
 .o_form_view.attachment_preview {
     width: 60%;
     float: left;
 }
 
+/* Styles below apply to the preview widget itself. */
 .o_form_view + .attachment_preview_widget {
     width: 40%;
     height: 100%;
     float: right;
     position: relative;
-    z-index: 999;
+    z-index: 100; /* Lower than 200 in web_responsive */
 
     > .attachment_preview_iframe {
         width: 100%;
@@ -55,10 +33,3 @@
         }
     }
 }
-
-.o_group {
-    .mr-2,
-    .mx-2 {
-        margin-left: 0.5rem !important;
-    }
-}

attachment_preview/static/src/xml/attachment_preview.xml

@@ -7,39 +7,36 @@
         owl="1"
     >
         <xpath expr="//div[hasclass('o_AttachmentCard_aside')]" position="before">
-            <div
-                class="o_AttachmentCard_aside position-relative overflow-hidden"
-                t-att-class="{ 'o-has-multiple-action d-flex flex-column': !attachmentCard.attachmentList.composerView and attachmentCard.attachment.isEditable }"
-            >
             <div
                 t-if="attachmentCard.attachment.downloadUrl"
-                    class="o_AttachmentCard_asideItem d-flex justify-content-center align-items-center ml4"
+                class="o_AttachmentCard_aside position-relative rounded-end overflow-hidden"
+                t-att-class="{ 'o-hasMultipleActions d-flex flex-column': attachmentCard.hasMultipleActions }"
+            >
+                <button
+                    class="o_AttachmentCard_asideItem btn d-flex justify-content-center align-items-center w-100 h-100 rounded-0 bg-300"
                     t-att-data-id="attachmentCard.attachment.id"
                     t-att-data-url="attachmentCard.attachment.defaultSource"
                     t-on-click="attachmentCard._onPreviewAttachment"
                     t-att-data-original-title="attachmentCard.attachment.name"
                     t-attf-title="Preview {{attachmentCard.attachment.displayName}} in side panel"
-                    tabindex="0"
-                    role="menuitem"
-                    aria-label="Preview"
                 >
-                    <i class="fa fa-search" />
+                    <i class="fa fa-search" role="img" aria-label="Preview" />
-                </div>
+                </button>
-                <div
+                <button
-                    t-if="attachmentCard.attachment.downloadUrl"
+                    class="o_AttachmentCard_asideItem btn d-flex justify-content-center align-items-center w-100 h-100 rounded-0 bg-300"
-                    class="o_AttachmentCard_asideItem d-flex justify-content-center align-items-center ml4 o_attachment_preview_new_tab"
                     data-target="new"
                     t-att-data-id="attachmentCard.attachment.id"
                     t-att-data-url="attachmentCard.attachment.defaultSource"
                     t-on-click="attachmentCard._onPreviewAttachment"
                     t-att-data-original-title="attachmentCard.attachment.name"
                     t-attf-title="Open preview {{attachmentCard.attachment.name}} in a new tab"
-                    tabindex="0"
-                    role="menuitem"
-                    aria-label="Open in new page"
                 >
-                    <i class="fa fa-external-link" />
+                    <i
-                </div>
+                        class="fa fa-external-link"
+                        role="img"
+                        aria-label="Open in new page"
+                    />
+                </button>
             </div>
         </xpath>
     </t>

setup/attachment_preview/odoo/addons/attachment_preview

@@ -0,0 +1 @@
+../../../../attachment_preview

setup/attachment_preview/setup.py

@@ -0,0 +1,6 @@
+import setuptools
+
+setuptools.setup(
+    setup_requires=['setuptools-odoo'],
+    odoo_addon=True,
+)