[REF] mail, *: refactor messaging with OWL

This commit is a significant rewriting of client-side discuss, chatter,
chat window, and messaging menu using OWL. The behavior should be broadly
the same, with some slight functional changes here and there.

From a technical standpoint, the code of messaging is mainly organized in 2
main groups of modules:

- models, which are logical entities that depict the client-side state of
  messaging as a whole.
- components, which are in charge of displaying information from models.

This refactoring also introduces new JS guidelines regarding folder structure
(/static) and naming rules for JS modules.

Community PR: https://github.com/odoo/odoo/pull/39023
Enterprise PR: https://github.com/odoo/enterprise/pull/6249

Task-1914207

This PR is a collaborative work by Alexandre, Julien, Sébastien and Xavier,
with the precious help of Lucas to speed it up towards the end.

closes odoo/odoo#39023

Related: odoo/enterprise#6249
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
Co-authored-by: Alexandre Kühn <aku@odoo.com>
Co-authored-by: Julien Giannone <jgi@odoo.com>
Co-authored-by: Lucas Perais <lpe@odoo.com>
Co-authored-by: Sébastien Theys <seb@odoo.com>
Co-authored-by: Xavier Dubuc <xdu@odoo.com>

1 files changed, 109 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/attachment/attachment.xml b/addons/mail/static/src/components/attachment/attachment.xml
new file mode 100644
index 00000000000..8af00288b8b
--- /dev/null
+++ b/addons/mail/static/src/components/attachment/attachment.xml
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Attachment" owl="1">
+        <div class="o_Attachment"
+            t-att-class="{
+                'o-downloadable': props.isDownloadable,
+                'o-editable': props.isEditable,
+                'o-has-card-details': detailsMode === 'card',
+                'o-temporary': attachment and attachment.isTemporary,
+                'o-viewable': attachment and attachment.isViewable,
+            }" t-att-title="attachment ? attachment.displayName : undefined" t-att-data-attachment-local-id="attachment ? attachment.localId : undefined"
+        >
+            <t t-if="attachment">
+                <!-- Image style-->
+                <!-- o_image from mimetype.scss -->
+                <div class="o_Attachment_image o_image" t-on-click="_onClickImage"
+                    t-att-class="{
+                        'o-attachment-viewable': attachment.isViewable,
+                        'o-details-overlay': detailsMode !== 'card',
+                        'o-large': props.imageSize === 'large',
+                        'o-medium': props.imageSize === 'medium',
+                        'o-small': props.imageSize === 'small',
+                    }" t-att-href="attachmentUrl" t-att-style="imageStyle" t-att-data-mimetype="attachment.mimetype"
+                >
+                    <t t-if="(props.showFilename or props.showExtension) and detailsMode === 'hover'">
+                        <div class="o_Attachment_imageOverlay">
+                            <div class="o_Attachment_details o_Attachment_imageOverlayDetails">
+                                <t t-if="props.showFilename">
+                                    <div class="o_Attachment_filename">
+                                        <t t-esc="attachment.displayName"/>
+                                    </div>
+                                </t>
+                                <t t-if="props.showExtension">
+                                    <div class="o_Attachment_extension">
+                                        <t t-esc="attachment.extension"/>
+                                    </div>
+                                </t>
+                            </div>
+                            <div class="o_Attachment_actions">
+                                <!-- Remove button -->
+                                <t t-if="props.isEditable and !attachment.isTemporary" t-key="'unlink'">
+                                    <div class="o_Attachment_action o_Attachment_actionUnlink"
+                                        t-att-class="{
+                                            'o-pretty': attachment.isLinkedToComposer,
+                                        }" t-on-click="_onClickUnlink" title="Remove"
+                                    >
+                                        <i class="fa fa-times"/>
+                                    </div>
+                                </t>
+                                <!-- Download button -->
+                                <t t-if="props.isDownloadable and !attachment.isTemporary" t-key="'download'">
+                                    <div class="o_Attachment_action o_Attachment_actionDownload" t-on-click="_onClickDownload" title="Download">
+                                        <i class="fa fa-download"/>
+                                    </div>
+                                </t>
+                            </div>
+                        </div>
+                    </t>
+                </div>
+                <!-- Attachment details -->
+                <t t-if="(props.showFilename or props.showExtension) and detailsMode === 'card'">
+                    <div class="o_Attachment_details">
+                        <t t-if="props.showFilename">
+                            <div class="o_Attachment_filename">
+                                <t t-esc="attachment.displayName"/>
+                            </div>
+                        </t>
+                        <t t-if="props.showExtension">
+                            <div class="o_Attachment_extension">
+                                <t t-esc="attachment.extension"/>
+                            </div>
+                        </t>
+                    </div>
+                </t>
+                <!-- Attachment aside -->
+                <t t-if="detailsMode !== 'hover' and (props.isDownloadable or props.isEditable)">
+                    <div class="o_Attachment_aside" t-att-class="{ 'o-has-multiple-action': !attachment.isTemporary and props.isDownloadable and props.isEditable }">
+                        <!-- Uploading icon -->
+                        <t t-if="attachment.isTemporary and attachment.isLinkedToComposer">
+                            <div class="o_Attachment_asideItem o_Attachment_asideItemUploading" title="Uploading">
+                                <i class="fa fa-spin fa-spinner"/>
+                            </div>
+                        </t>
+                        <!-- Uploaded icon -->
+                        <t t-if="!attachment.isTemporary and attachment.isLinkedToComposer">
+                            <div class="o_Attachment_asideItem o_Attachment_asideItemUploaded" title="Uploaded">
+                                <i class="fa fa-check"/>
+                            </div>
+                        </t>
+                        <!-- Remove button -->
+                        <t t-if="props.isEditable and !attachment.isTemporary">
+                            <div class="o_Attachment_asideItem o_Attachment_asideItemUnlink" t-att-class="{ 'o-pretty': attachment.isLinkedToComposer }" t-on-click="_onClickUnlink" title="Remove">
+                                <i class="fa fa-times"/>
+                            </div>
+                        </t>
+                        <!-- Download button -->
+                        <t t-if="props.isDownloadable and !attachment.isTemporary">
+                            <div class="o_Attachment_asideItem o_Attachment_asideItemDownload" t-on-click="_onClickDownload" title="Download">
+                                <i class="fa fa-download"/>
+                            </div>
+                        </t>
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>