From 693f77c1249d3d79a649b72e78f2d3acee441ee2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Tue, 15 Mar 2022 15:48:53 +0000
Subject: [PATCH] [IMP] mail: turn 'ComposerView/isCompact' into field

Task-2793280

closes odoo/odoo#86467

Signed-off-by: Ooming <wil@odoo.com>
---
 .../static/src/components/chatter/chatter.xml |  1 -
 .../src/components/composer/composer.js       |  7 +----
 .../src/components/composer/composer.xml      | 29 +++++++++----------
 .../composer_text_input.js                    |  1 -
 .../composer_text_input.xml                   |  4 +--
 .../static/src/components/message/message.xml |  1 -
 .../src/models/composer_view/composer_view.js | 17 +++++++++++
 7 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index 7ddb0a95f24..0a88f510846 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -15,7 +15,6 @@
                             classNameObj="{ 'o-bordered': chatter.hasExternalBorder }"
                             localId="chatter.composerView.localId"
                             hasMentionSuggestionsBelowPosition="true"
-                            isCompact="false"
                             isExpandable="true"
                         />
                     </t>
diff --git a/addons/mail/static/src/components/composer/composer.js b/addons/mail/static/src/components/composer/composer.js
index 844ab8ee5ea..5c0e44e719f 100644
--- a/addons/mail/static/src/components/composer/composer.js
+++ b/addons/mail/static/src/components/composer/composer.js
@@ -47,7 +47,7 @@ export class Composer extends Component {
             this.props.hasThreadTyping ||
             this.composerView.composer.attachments.length > 0 ||
             this.composerView.messageViewInEditing ||
-            !this.props.isCompact
+            !this.composerView.isCompact
         );
     }
 
@@ -197,7 +197,6 @@ Object.assign(Composer, {
         hasSendButton: true,
         hasThreadName: false,
         hasThreadTyping: false,
-        isCompact: true,
         isExpandable: false,
     },
     props: {
@@ -234,10 +233,6 @@ Object.assign(Composer, {
             type: Boolean,
             optional: true,
         },
-        isCompact: {
-            type: Boolean,
-            optional: true,
-        },
         isExpandable: {
             type: Boolean,
             optional: true,
diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
index a22feb149ca..0a0b8018011 100644
--- a/addons/mail/static/src/components/composer/composer.xml
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -9,7 +9,7 @@
                 'o-has-footer': hasFooter,
                 'o-has-header': hasHeader,
                 'o-is-in-thread-view': composerView and composerView.threadView,
-                'o-is-compact': props.isCompact,
+                'o-is-compact': composerView and composerView.isCompact,
                 'o-messaging-in-editing': composerView and composerView.messageViewInEditing,
             }"
             t-attf-class="{{ className }}"
@@ -65,33 +65,32 @@
                 <div
                     class="o_Composer_coreMain"
                     t-att-class="{
-                        'o-composer-is-compact': props.isCompact,
+                        'o-composer-is-compact': composerView.isCompact,
                     }"
                 >
                     <ComposerTextInput
                         className="'o_Composer_textInput'"
                         classNameObj="{
-                            'o-composer-is-compact': props.isCompact,
+                            'o-composer-is-compact': composerView.isCompact,
                             'o_Composer_textInput-mobile': messaging.device.isMobile,
                             'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
                         }"
                         localId="composerView.localId"
                         hasMentionSuggestionsBelowPosition="props.hasMentionSuggestionsBelowPosition"
-                        isCompact="props.isCompact"
                         onComposerTextInputSendShortcut="_onComposerTextInputSendShortcut"
                         onPaste="_onPasteTextInput"
                         t-key="composerView.localId"
                     />
-                    <div class="o_Composer_buttons" t-att-class="{ 'o-composer-is-compact': props.isCompact, 'o-mobile': messaging.device.isMobile, 'o-messaging-in-editing': composerView and composerView.messageViewInEditing }">
+                    <div class="o_Composer_buttons" t-att-class="{ 'o-composer-is-compact': composerView.isCompact, 'o-mobile': messaging.device.isMobile, 'o-messaging-in-editing': composerView and composerView.messageViewInEditing }">
                         <div class="o_Composer_toolButtons"
                             t-att-class="{
                                 'o-composer-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
-                                'o-composer-is-compact': props.isCompact,
+                                'o-composer-is-compact': composerView.isCompact,
                             }">
-                            <t t-if="props.isCompact">
+                            <t t-if="composerView.isCompact">
                                 <div class="o_Composer_toolButtonSeparator"/>
                             </t>
-                            <div class="o_Composer_primaryToolButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+                            <div class="o_Composer_primaryToolButtons" t-att-class="{ 'o-composer-is-compact': composerView.isCompact }">
                                 <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light"
                                     t-att-class="{
                                         'o-open': composerView.emojisPopoverView,
@@ -112,23 +111,23 @@
                                 </div>
                             </t>
                         </div>
-                        <t t-if="props.isCompact">
+                        <t t-if="composerView.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 }">
+                    <div class="o_Composer_coreFooter" t-att-class="{ 'o-composer-is-compact': composerView.isCompact }">
                         <t t-if="props.hasThreadTyping">
                             <ThreadTextualTypingStatus className="'o_Composer_threadTextualTypingStatus'" threadLocalId="composerView.composer.activeThread.localId"/>
                         </t>
                         <AttachmentList
                             t-if="composerView.attachmentList"
                             className="'o_Composer_attachmentList'"
-                            classNameObj="{ 'o-composer-is-compact': props.isCompact }"
+                            classNameObj="{ 'o-composer-is-compact': composerView.isCompact }"
                             localId="composerView.attachmentList.localId"
                         />
-                        <t t-if="!props.isCompact">
+                        <t t-if="!composerView.isCompact">
                             <t t-call="mail.Composer.actionButtons"/>
                         </t>
                         <t t-if="composerView.messageViewInEditing">
@@ -141,12 +140,12 @@
     </t>
 
     <t t-name="mail.Composer.actionButtons" owl="1">
-        <div class="o_Composer_actionButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+        <div class="o_Composer_actionButtons" t-att-class="{ 'o-composer-is-compact': composerView.isCompact }">
             <t t-if="props.hasSendButton">
                 <button class="o_Composer_actionButton o_Composer_button o_Composer_buttonSend btn btn-primary"
                     t-att-class="{
                         'o-last': messaging.device.isMobile or !props.hasDiscardButton,
-                        'o-composer-is-compact': props.isCompact,
+                        'o-composer-is-compact': composerView.isCompact,
                         'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
                     }"
                     t-att-disabled="!composerView.composer.canPostMessage ? 'disabled' : ''"
@@ -158,7 +157,7 @@
                 </button>
             </t>
             <t t-if="!messaging.device.isMobile and props.hasDiscardButton">
-                <button class="o_Composer_actionButton o-last o_Composer_button o_Composer_buttonDiscard btn btn-secondary" t-att-class="{ 'o-composer-is-compact': props.isCompact, 'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar }" type="button" t-on-click="_onClickDiscard">
+                <button class="o_Composer_actionButton o-last o_Composer_button o_Composer_buttonDiscard btn btn-secondary" t-att-class="{ 'o-composer-is-compact': composerView.isCompact, 'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar }" type="button" t-on-click="_onClickDiscard">
                     Discard
                 </button>
             </t>
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.js b/addons/mail/static/src/components/composer_text_input/composer_text_input.js
index b9abc199fd7..54b11e02343 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.js
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.js
@@ -386,7 +386,6 @@ Object.assign(ComposerTextInput, {
             type: Boolean,
             optional: true,
         },
-        isCompact: Boolean,
         onComposerTextInputSendShortcut: {
             type: Function,
             optional: true,
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
index a70210d65dc..99bb1510e15 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
@@ -10,13 +10,13 @@
                         isBelow="props.hasMentionSuggestionsBelowPosition"
                     />
                 </t>
-                <textarea class="o_ComposerTextInput_textarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composerView.composer.textInputContent" t-att-placeholder="composerView.composer.placeholder" t-on-click="_onClickTextarea" t-on-focusin="_onFocusinTextarea" t-on-focusout="_onFocusoutTextarea" t-on-keydown="_onKeydownTextarea" t-on-keyup="_onKeyupTextarea" t-on-input="_onInputTextarea" t-ref="textarea"/>
+                <textarea class="o_ComposerTextInput_textarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': composerView.isCompact }" t-esc="composerView.composer.textInputContent" t-att-placeholder="composerView.composer.placeholder" t-on-click="_onClickTextarea" t-on-focusin="_onFocusinTextarea" t-on-focusout="_onFocusoutTextarea" t-on-keydown="_onKeydownTextarea" t-on-keyup="_onKeyupTextarea" t-on-input="_onInputTextarea" t-ref="textarea"/>
                 <!--
                      This is an invisible textarea used to compute the composer
                      height based on the text content. We need it to downsize
                      the textarea properly without flicker.
                 -->
-                <textarea class="o_ComposerTextInput_mirroredTextarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composerView.composer.textInputContent" t-ref="mirroredTextarea" disabled="1"/>
+                <textarea class="o_ComposerTextInput_mirroredTextarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': composerView.isCompact }" t-esc="composerView.composer.textInputContent" t-ref="mirroredTextarea" disabled="1"/>
             </t>
         </div>
     </t>
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index a0b6eeebe34..9e70143628a 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -136,7 +136,6 @@
                                     hasDiscardButton="false"
                                     hasMentionSuggestionsBelowPosition="false"
                                     hasSendButton="false"
-                                    isCompact="true"
                                 />
                             </t>
                             <t t-if="messageView.message.subtype_description and !messageView.message.isBodyEqualSubtypeDescription">
diff --git a/addons/mail/static/src/models/composer_view/composer_view.js b/addons/mail/static/src/models/composer_view/composer_view.js
index 7ad5318a501..b9cac894668 100644
--- a/addons/mail/static/src/models/composer_view/composer_view.js
+++ b/addons/mail/static/src/models/composer_view/composer_view.js
@@ -584,6 +584,19 @@ registerModel({
         _computeHasSuggestions() {
             return this.mainSuggestedRecords.length > 0 || this.extraSuggestedRecords.length > 0;
         },
+        /**
+         * @private
+         * @returns {boolean|FieldCommand}
+         */
+        _computeIsCompact() {
+            if (this.chatter) {
+                return false;
+            }
+            if (this.messageViewInEditing) {
+                return true;
+            }
+            return clear();
+        },
         /**
          * Clears the main suggested record on closing mentions.
          *
@@ -1027,6 +1040,10 @@ registerModel({
         hasToScrollToActiveSuggestion: attr({
             default: false,
         }),
+        isCompact: attr({
+            compute: '_computeIsCompact',
+            default: true,
+        }),
         isFocused: attr({
             default: false,
         }),