[FIX] mail: make only composer as fixed in chatter

task-2282325

closes odoo/odoo#60524

Related: odoo/enterprise#14481
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

8 files changed, 81 insertions, 42 deletions

diff --git a/addons/mail/static/src/components/chatter/chatter.js b/addons/mail/static/src/components/chatter/chatter.js
index cd1f8f8720b..d4314108b87 100644
--- a/addons/mail/static/src/components/chatter/chatter.js
+++ b/addons/mail/static/src/components/chatter/chatter.js
@@ -41,6 +41,10 @@ class Chatter extends Component {
          * Reference of the composer. Useful to focus it.
          */
         this._composerRef = useRef('composer');
+        /**
+         * Reference of the message list. Useful to trigger the scroll event on it.
+         */
+        this._threadRef = useRef('thread');
     }
 
     mounted() {
@@ -103,6 +107,17 @@ class Chatter extends Component {
         this.chatter.update({ isComposerVisible: false });
     }
 
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onScrollPanelScroll(ev) {
+        if (!this._threadRef.comp) {
+            return;
+        }
+        this._threadRef.comp.onScroll(ev);
+    }
+
 }
 
 Object.assign(Chatter, {
diff --git a/addons/mail/static/src/components/chatter/chatter.scss b/addons/mail/static/src/components/chatter/chatter.scss
index 1fc95e8f69c..72cd50c700d 100644
--- a/addons/mail/static/src/components/chatter/chatter.scss
+++ b/addons/mail/static/src/components/chatter/chatter.scss
@@ -17,6 +17,10 @@
     }
 }
 
+.o_Chatter_scrollPanel {
+    overflow-y: auto;
+}
+
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index be712198963..ffb27244471 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -4,46 +4,50 @@
     <t t-name="mail.Chatter" owl="1">
         <div class="o_Chatter">
             <t t-if="chatter">
-                <ChatterTopbar
-                    class="o_Chatter_topbar"
-                    chatterLocalId="chatter.localId"
-                />
-                <t t-if="chatter.threadView and chatter.isComposerVisible">
-                    <Composer
-                        class="o_Chatter_composer"
-                        t-att-class="{ 'o-bordered': chatter.hasExternalBorder }"
-                        composerLocalId="chatter.thread.composer.localId"
-                        hasFollowers="true"
-                        hasMentionSuggestionsBelowPosition="true"
-                        isCompact="false"
-                        isExpandable="true"
-                        textInputSendShortcuts="['ctrl-enter', 'meta-enter']"
-                        t-on-o-message-posted="_onComposerMessagePosted"
-                        t-ref="composer"
-                    />
-                </t>
-                <t t-if="chatter.isAttachmentBoxVisible">
-                    <AttachmentBox
-                        class="o_Chatter_attachmentBox"
-                        threadLocalId="chatter.thread.localId"
-                    />
-                </t>
-                <t t-if="chatter.thread and chatter.hasActivities and chatter.thread.activities.length > 0">
-                    <ActivityBox
-                        class="o_Chatter_activityBox"
+                <div class="o_Chatter_fixedPanel">
+                    <ChatterTopbar
+                        class="o_Chatter_topbar"
                         chatterLocalId="chatter.localId"
                     />
-                </t>
-                <t t-if="chatter.threadView">
-                    <ThreadView
-                        class="o_Chatter_thread"
-                        hasComposer="false"
-                        hasScrollAdjust="chatter.hasMessageListScrollAdjust"
-                        order="'desc'"
-                        threadViewLocalId="chatter.threadView.localId"
-                        t-ref="thread"
-                    />
-                </t>
+                    <t t-if="chatter.threadView and chatter.isComposerVisible">
+                        <Composer
+                            class="o_Chatter_composer"
+                            t-att-class="{ 'o-bordered': chatter.hasExternalBorder }"
+                            composerLocalId="chatter.thread.composer.localId"
+                            hasFollowers="true"
+                            hasMentionSuggestionsBelowPosition="true"
+                            isCompact="false"
+                            isExpandable="true"
+                            textInputSendShortcuts="['ctrl-enter', 'meta-enter']"
+                            t-on-o-message-posted="_onComposerMessagePosted"
+                            t-ref="composer"
+                        />
+                    </t>
+                </div>
+                <div class="o_Chatter_scrollPanel" t-on-scroll="_onScrollPanelScroll">
+                    <t t-if="chatter.isAttachmentBoxVisible">
+                        <AttachmentBox
+                            class="o_Chatter_attachmentBox"
+                            threadLocalId="chatter.thread.localId"
+                        />
+                    </t>
+                    <t t-if="chatter.thread and chatter.hasActivities and chatter.thread.activities.length > 0">
+                        <ActivityBox
+                            class="o_Chatter_activityBox"
+                            chatterLocalId="chatter.localId"
+                        />
+                    </t>
+                    <t t-if="chatter.threadView">
+                        <ThreadView
+                            class="o_Chatter_thread"
+                            hasComposer="false"
+                            hasScrollAdjust="chatter.hasMessageListScrollAdjust"
+                            order="'desc'"
+                            threadViewLocalId="chatter.threadView.localId"
+                            t-ref="thread"
+                        />
+                    </t>
+                </div>
             </t>
         </div>
     </t>
diff --git a/addons/mail/static/src/components/composer/composer.scss b/addons/mail/static/src/components/composer/composer.scss
index 37250a2ffd7..df695cce426 100644
--- a/addons/mail/static/src/components/composer/composer.scss
+++ b/addons/mail/static/src/components/composer/composer.scss
@@ -40,6 +40,11 @@
     &.o-composer-is-compact {
         max-height: 100px;
     }
+
+    &:not(.o-composer-is-compact) {
+        overflow-y: auto;
+        max-height: 300px;
+    }
 }
 
 .o_Composer_buttons {
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
index 37663303544..540fca6bc3e 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
@@ -27,6 +27,6 @@
     &:not(.o-composer-is-compact) {
         // Don't allow the input to take the whole height when it's not compact
         // (like in chatter for example) but allow it to take some more place
-        max-height: 200px;
+        max-height: 150px;
     }
 }
diff --git a/addons/mail/static/src/components/message_list/message_list.js b/addons/mail/static/src/components/message_list/message_list.js
index d24e1ccf6fc..c2e8368eda7 100644
--- a/addons/mail/static/src/components/message_list/message_list.js
+++ b/addons/mail/static/src/components/message_list/message_list.js
@@ -55,7 +55,7 @@ class MessageList extends Component {
          * Snapshot computed during willPatch, which is used by patched.
          */
         this._willPatchSnapshot = undefined;
-        this._onScroll = _.throttle(this._onScroll.bind(this), 100);
+        this.onScroll = _.throttle(this.onScroll.bind(this), 100);
     }
 
     mounted() {
@@ -560,7 +560,7 @@ class MessageList extends Component {
      * @private
      * @param {ScrollEvent} ev
      */
-    _onScroll(ev) {
+    onScroll(ev) {
         if (!this.el) {
             // could be unmounted in the meantime (due to throttled behavior)
             return;
diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
index 78b72ba2050..fbd44eb5aba 100644
--- a/addons/mail/static/src/components/message_list/message_list.xml
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessageList" owl="1">
-        <div class="o_MessageList" t-att-class="{ 'o-empty': threadView and threadView.messages.length === 0, 'o-has-message-selection': props.selectedMessageLocalId }" t-on-scroll="_onScroll">
+        <div class="o_MessageList" t-att-class="{ 'o-empty': threadView and threadView.messages.length === 0, 'o-has-message-selection': props.selectedMessageLocalId }" t-on-scroll="onScroll">
             <t t-if="threadView">
                 <!-- No result messages -->
                 <t t-if="threadView.nonEmptyMessages.length === 0">
diff --git a/addons/mail/static/src/components/thread_view/thread_view.js b/addons/mail/static/src/components/thread_view/thread_view.js
index 42e513be888..ceff30d1077 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.js
+++ b/addons/mail/static/src/components/thread_view/thread_view.js
@@ -86,6 +86,17 @@ class ThreadView extends Component {
     }
 
     /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    onScroll(ev) {
+        if (!this._messageListRef.comp) {
+            return;
+        }
+        this._messageListRef.comp.onScroll(ev);
+    }
+
+    /**
      * @returns {mail.thread_view}
      */
     get threadView() {