[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, 154 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
new file mode 100644
index 00000000000..055c3837ccf
--- /dev/null
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Composer" owl="1">
+        <div class="o_Composer"
+            t-att-class="{
+                'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                'o-has-footer': hasFooter,
+                'o-has-header': hasHeader,
+                'o-is-compact': props.isCompact,
+            }"
+        >
+            <t t-if="composer">
+                <t t-if="isDropZoneVisible.value">
+                    <DropZone
+                        class="o_Composer_dropZone"
+                        t-on-o-dropzone-files-dropped="_onDropZoneFilesDropped"
+                        t-ref="dropzone"
+                    />
+                </t>
+                <FileUploader
+                    attachmentLocalIds="composer.attachments.map(attachment => attachment.localId)"
+                    newAttachmentExtraData="newAttachmentExtraData"
+                    t-ref="fileUploader"
+                />
+                <t t-if="hasHeader">
+                    <div class="o_Composer_coreHeader">
+                        <t t-if="props.hasThreadName and composer.thread">
+                            <span class="o_Composer_threadName">
+                                on: <b><t t-esc="composer.thread.displayName"/></b>
+                            </span>
+                        </t>
+                        <t t-if="props.hasFollowers and !props.isLog">
+                            <!-- Text for followers -->
+                            <small class="o_Composer_followers">
+                                <b class="text-muted">To: </b>
+                                <em class="text-muted">Followers of </em>
+                                <b>
+                                    <t t-if="composer.thread">
+                                        &#32;&quot;<t t-esc="composer.thread.name"/>&quot;
+                                    </t>
+                                    <t t-else="">
+                                        this document
+                                    </t>
+                                </b>
+                            </small>
+                        </t>
+                    </div>
+                </t>
+                <t t-if="props.hasCurrentPartnerAvatar">
+                    <div class="o_Composer_sidebarMain">
+                        <img class="o_Composer_currentPartnerAvatar rounded-circle" t-att-src="currentPartnerAvatar" alt=""/>
+                    </div>
+                </t>
+                <div class="o_Composer_coreMain" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+                    <TextInput
+                        class="o_Composer_textInput"
+                        t-att-class="{
+                            'o-composer-is-compact': props.isCompact,
+                            'o_Composer_textInput-mobile': env.messaging.device.isMobile,
+                        }"
+                        composerLocalId="composer.localId"
+                        hasMentionSuggestionsBelowPosition="props.hasMentionSuggestionsBelowPosition"
+                        hasSendOnEnterEnabled="props.hasTextInputSendOnEnterEnabled"
+                        t-on-o-keydown-enter="_onTextInputKeydownEnter"
+                        t-on-paste="_onPasteTextInput"
+                        t-ref="textInput"
+                    />
+                    <div class="o_Composer_buttons" t-att-class="{ 'o-composer-is-compact': props.isCompact, 'o-mobile': env.messaging.device.isMobile }">
+                        <div class="o_Composer_toolButtons"
+                            t-att-class="{
+                                'o-composer-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                                'o-composer-is-compact': props.isCompact,
+                            }">
+                            <t t-if="props.isCompact">
+                                <div class="o_Composer_toolButtonSeparator"/>
+                            </t>
+                            <div class="o_Composer_primaryToolButtons">
+                                <Popover position="'top'" t-on-o-emoji-selection="_onEmojiSelection" t-ref="emojisPopover">
+                                    <!-- TODO FIXME o-open not possible to code due to https://github.com/odoo/owl/issues/693 -->
+                                    <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-secondary"
+                                        t-att-class="{
+                                            'o-open': false and state.displayed,
+                                            'o-mobile': env.messaging.device.isMobile,
+                                        }"
+                                    >
+                                        <i class="fa fa-smile-o"/>
+                                    </button>
+                                    <t t-set="opened">
+                                        <EmojisPopover/>
+                                    </t>
+                                </Popover>
+                                <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-secondary fa fa-paperclip" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Add attachment" type="button" t-on-click="_onClickAddAttachment"/>
+                            </div>
+                            <t t-if="props.isExpandable">
+                                <div class="o_Composer_secondaryToolButtons">
+                                    <button class="btn btn-secondary fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Full composer" type="button" t-on-click="_onClickFullComposer"/>
+                                </div>
+                            </t>
+                        </div>
+                        <t t-if="props.isCompact">
+                            <t t-call="mail.Composer.actionButtons"/>
+                        </t>
+                    </div>
+                </div>
+                <t t-if="hasFooter">
+                    <div class="o_Composer_coreFooter" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+                        <t t-if="props.hasThreadTyping">
+                            <ThreadTextualTypingStatus class="o_Composer_threadTextualTypingStatus" threadLocalId="composer.thread.localId"/>
+                        </t>
+                        <t t-if="composer.attachments.length > 0">
+                            <AttachmentList
+                                class="o_Composer_attachmentList"
+                                areAttachmentsEditable="true"
+                                attachmentsDetailsMode="props.attachmentsDetailsMode"
+                                attachmentLocalIds="composer.attachments.map(attachment => attachment.localId)"
+                                showAttachmentsExtensions="props.showAttachmentsExtensions"
+                                showAttachmentsFilenames="props.showAttachmentsFilenames"
+                            />
+                        </t>
+                        <t t-if="!props.isCompact">
+                            <t t-call="mail.Composer.actionButtons"/>
+                        </t>
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="mail.Composer.actionButtons" owl="1">
+        <div class="o_Composer_actionButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+            <t t-if="props.hasSendButton">
+                <button class="o_Composer_actionButton o_Composer_button o_Composer_buttonSend btn btn-primary"
+                    t-att-class="{
+                        'fa': env.messaging.device.isMobile,
+                        'fa-paper-plane-o': env.messaging.device.isMobile,
+                        'o-composer-is-compact': props.isCompact,
+                    }"
+                    t-att-disabled="(!composer.textInputContent and composer.attachments.length === 0) ? 'disabled' : ''"
+                    type="button"
+                    t-on-click="_onClickSend"
+                >
+                    <t t-if="!env.messaging.device.isMobile"><t t-if="props.isLog">Log</t><t t-else="">Send</t></t>
+                </button>
+            </t>
+            <t t-if="!env.messaging.device.isMobile and props.hasDiscardButton">
+                <button class="o_Composer_actionButton o_Composer_button o_Composer_buttonDiscard btn btn-secondary" t-att-class="{ 'o-composer-is-compact': props.isCompact }" type="button" t-on-click="_onClickDiscard">
+                    Discard
+                </button>
+            </t>
+        </div>
+    </t>
+
+</templates>