[IMP] mail: remove legacy popover

task-2968421

closes odoo/odoo#99402

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/components/call_action_list/call_action_list.js

@@ -1,13 +1,20 @@
 /** @odoo-module **/
 
+import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-import Popover from "web.Popover";
-
 const { Component } = owl;
 
 export class CallActionList extends Component {
 
+    /**
+     * @override
+     */
+    setup() {
+        super.setup();
+        useRefToModel({ fieldName: 'moreButtonRef', refName: 'moreButton' });
+    }
+
     /**
      * @returns {CallActionListView}
      */
@@ -20,7 +27,6 @@ export class CallActionList extends Component {
 Object.assign(CallActionList, {
     props: { record: Object },
     template: 'mail.CallActionList',
-    components: { Popover },
 });
 
 registerMessagingComponent(CallActionList);

addons/mail/static/src/components/call_action_list/call_action_list.xml

@@ -87,20 +87,17 @@
                             </button>
                         </t>
                         <t t-if="messaging.modelManager.isDebug">
-                            <Popover position="'top'" popoverClass="'o_CallActionList_popover'">
                             <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
                                     aria-label="More"
                                     title="More"
                                     t-att-class="{ 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
+                                    t-on-click="callActionListView.onClickMore"
+                                    t-ref="moreButton"
                             >
                                 <div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
                                     <i class="fa fa-ellipsis-h fa-stack-1x" t-att-class="{ 'fa-lg': !callActionListView.isSmall }"/>
                                 </div>
                             </button>
-                            <t t-set-slot="opened">
-                                <CallOptionMenu record="callActionListView.callOptionMenu"/>
-                            </t>
-                        </Popover>
                         </t>
                     </t>
                     <t t-if="!callActionListView.thread">

addons/mail/static/src/components/call_option_menu/call_option_menu.xml

@@ -3,7 +3,7 @@
 
     <t t-name="mail.CallOptionMenu" owl="1">
         <t t-if="callOptionMenu">
-            <div class="o_CallOptionMenu d-flex flex-column" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_CallOptionMenu d-flex flex-column p-3" t-attf-class="{{ className }}" t-ref="root">
                 <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 fw-normal" t-on-click="callOptionMenu.onClickDownloadLogs">
                     <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-file-text-o m-1 p-1"/>
                     <span class="o_CallOptionMenu_buttonText text-truncate">Download logs</span>

addons/mail/static/src/models/call_action_list_view.js

@@ -38,6 +38,12 @@ registerModel({
                 this.messaging.rtc.mute();
             }
         },
+        /**
+         * @param {MouseEvent} ev
+         */
+        onClickMore(ev) {
+            this.update({ moreMenuPopoverView: this.moreMenuPopoverView ? clear() : {} });
+        },
         /**
          * @param {MouseEvent} ev
          */
@@ -170,9 +176,9 @@ registerModel({
         microphoneButtonTitle: attr({
             compute: '_computeMicrophoneButtonTitle',
         }),
-        callOptionMenu: one('CallOptionMenu', {
-            default: {},
-            inverse: 'callActionListView',
+        moreButtonRef: attr(),
+        moreMenuPopoverView: one('PopoverView', {
+            inverse: 'callActionListViewOwnerAsMoreMenu',
             isCausal: true,
         }),
         screenSharingButtonTitle: attr({

addons/mail/static/src/models/call_option_menu.js

@@ -24,7 +24,6 @@ registerModel({
             a.download = `RtcLogs_Channel${channel.id}_Session${channel.rtc.currentRtcSession.id}_${window.moment().format('YYYY-MM-DD_HH-mm')}.json`;
             a.click();
             window.URL.revokeObjectURL(url);
-            this.component.trigger('o-popover-close');
         },
     },
     fields: {
@@ -33,12 +32,15 @@ registerModel({
          */
         component: attr(),
         callActionListView: one('CallActionListView', {
-            identifying: true,
-            inverse: 'callOptionMenu',
+            related: 'popoverViewOwner.callActionListViewOwnerAsMoreMenu',
         }),
         callView: one('CallView', {
             related: 'callActionListView.callView',
             required: true,
         }),
+        popoverViewOwner: one('PopoverView', {
+            identifying: true,
+            inverse: 'callOptionMenuView',
+        }),
     },
 });

addons/mail/static/src/models/popover_view.js

@@ -44,6 +44,9 @@ registerModel({
             if (this.activityViewOwnerAsMarkDone) {
                 return this.activityViewOwnerAsMarkDone.markDoneButtonRef;
             }
+            if (this.callActionListViewOwnerAsMoreMenu) {
+                return this.callActionListViewOwnerAsMoreMenu.moreButtonRef;
+            }
             if (this.callParticipantCardOwner) {
                 return this.callParticipantCardOwner.volumeMenuAnchorRef;
             }
@@ -61,6 +64,12 @@ registerModel({
             }
             return clear();
         },
+        _computeCallOptionMenuView() {
+            if (this.callActionListViewOwnerAsMoreMenu) {
+                return {};
+            }
+            return clear();
+        },
         _computeCallParticipantCardPopoverContentView() {
             if (this.callParticipantCardOwner) {
                 return {};
@@ -85,6 +94,9 @@ registerModel({
             if (this.activityMarkDonePopoverContentView) {
                 return this.activityMarkDonePopoverContentView;
             }
+            if (this.callOptionMenuView) {
+                return this.callOptionMenuView;
+            }
             if (this.callParticipantCardPopoverContentView) {
                 return this.callParticipantCardPopoverContentView;
             }
@@ -120,6 +132,9 @@ registerModel({
             if (this.activityMarkDonePopoverContentView) {
                 return 'ActivityMarkDonePopoverContent';
             }
+            if (this.callOptionMenuView) {
+                return 'CallOptionMenu';
+            }
             if (this.callParticipantCardPopoverContentView) {
                 return 'CallParticipantCardPopoverContentView';
             }
@@ -175,6 +190,9 @@ registerModel({
             if (this.activityViewOwnerAsMarkDone) {
                 return 'right';
             }
+            if (this.callActionListViewOwnerAsMoreMenu) {
+                return 'top';
+            }
             if (this.callParticipantCardOwner) {
                 return 'bottom';
             }
@@ -225,6 +243,15 @@ registerModel({
             compute: '_computeAnchorRef',
             required: true,
         }),
+        callActionListViewOwnerAsMoreMenu: one('CallActionListView', {
+            identifying: true,
+            inverse: 'moreMenuPopoverView',
+        }),
+        callOptionMenuView: one('CallOptionMenu', {
+            compute: '_computeCallOptionMenuView',
+            inverse: 'popoverViewOwner',
+            isCausal: true,
+        }),
         callParticipantCardOwner: one('CallParticipantCard', {
             identifying: true,
             inverse: 'callParticipantCardPopoverView',