From c8ef8fd7370ed9b3cc30a52f36049e38ce7a0373 Mon Sep 17 00:00:00 2001
From: "Louis Wicket (wil)" <wil@odoo.com>
Date: Thu, 5 May 2022 14:13:34 +0000
Subject: [PATCH] [IMP] mail: small CSS classes improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

+ Rename the CSS class `o-mobile` to `isDeviceSmall` in order to match the name
of the field tested to conditionnaly add or remove the class.
+ Remove unused classes (o-downloadable and o-isMobile).
+ Rename CSS class `o-has-multiple-action` to `o-hasMultipleActions` and
introduce a new field on AttachmentCard to express more declaratively the
condition used to add or remove the class

closes odoo/odoo#90643

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../attachment_card/attachment_card.scss      |  4 ++--
 .../attachment_card/attachment_card.xml       | 11 +++++-----
 .../attachment_viewer/attachment_viewer.xml   |  4 ++--
 .../channel_member/channel_member.xml         |  2 +-
 .../components/chat_window/chat_window.scss   |  4 ++--
 .../components/chat_window/chat_window.xml    |  2 +-
 .../chat_window_header.scss                   |  4 ++--
 .../chat_window_header/chat_window_header.xml | 20 +++++++++----------
 .../src/components/composer/composer.xml      |  8 ++++----
 .../src/components/discuss/discuss.scss       |  6 +++---
 .../static/src/components/discuss/discuss.xml |  4 ++--
 .../static/src/components/message/message.xml |  2 +-
 .../messaging_menu/messaging_menu.scss        | 14 ++++++-------
 .../messaging_menu/messaging_menu.xml         | 10 +++++-----
 .../notification_list/notification_list.xml   |  6 +++---
 .../notification_list_item.scss               |  6 +++---
 .../notification_request.xml                  |  4 ++--
 .../thread_needaction_preview.xml             |  4 ++--
 .../thread_preview/thread_preview.xml         |  4 ++--
 .../mail/static/src/models/attachment_card.js | 12 ++++++++++-
 .../discuss_mobile_mailbox_selection_tests.js |  2 +-
 21 files changed, 71 insertions(+), 62 deletions(-)

diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.scss b/addons/mail/static/src/components/attachment_card/attachment_card.scss
index d5909f621e6..18c3e1ee709 100644
--- a/addons/mail/static/src/components/attachment_card/attachment_card.scss
+++ b/addons/mail/static/src/components/attachment_card/attachment_card.scss
@@ -11,11 +11,11 @@
 }
 
 .o_AttachmentCard_aside {
-    &:not(.o-has-multiple-action) {
+    &:not(.o-hasMultipleActions) {
         min-width: 50px;
     }
 
-    &.o-has-multiple-action {
+    &.o-hasMultipleActions {
         min-width: 30px;
     }
 }
diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.xml b/addons/mail/static/src/components/attachment_card/attachment_card.xml
index 665405195a1..2fe5267abfb 100644
--- a/addons/mail/static/src/components/attachment_card/attachment_card.xml
+++ b/addons/mail/static/src/components/attachment_card/attachment_card.xml
@@ -4,11 +4,10 @@
         <t t-if="attachmentCard">
             <div t-attf-class="{{ className }}" t-ref="root">
                 <div class="o_AttachmentCard o-has-card-details d-flex rounded bg-300"
-                     t-att-class="{
-                            'o-downloadable': !attachmentCard.attachmentList.composerViewOwner,
-                            'o-isUploading': attachmentCard.attachment.isUploading,
-                            'o-viewable': attachmentCard.attachment.isViewable,
-                            }" t-att-title="attachmentCard.attachment.displayName ? attachmentCard.attachment.displayName : undefined" t-att-data-id="attachmentCard.attachment.localId"
+                    t-att-class="{
+                        'o-isUploading': attachmentCard.attachment.isUploading,
+                        'o-viewable': attachmentCard.attachment.isViewable,
+                    }" t-att-title="attachmentCard.attachment.displayName ? attachmentCard.attachment.displayName : undefined" t-att-data-id="attachmentCard.attachment.localId"
                 >
                     <!-- Image style-->
                     <!-- o_image from mimetype.scss -->
@@ -28,7 +27,7 @@
                         </t>
                     </div>
                     <!-- Attachment aside -->
-                    <div class="o_AttachmentCard_aside position-relative rounded-right overflow-hidden" t-att-class="{ 'o-has-multiple-action d-flex flex-column': !attachmentCard.attachmentList.composerViewOwner and attachmentCard.attachment.isDeletable }">
+                    <div class="o_AttachmentCard_aside position-relative rounded-right overflow-hidden" t-att-class="{ 'o-hasMultipleActions d-flex flex-column': attachmentCard.hasMultipleActions }">
                         <!-- Uploading icon -->
                         <t t-if="attachmentCard.attachment.isUploading and attachmentCard.attachmentList.composerViewOwner">
                             <div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploading d-flex justify-content-center align-items-center w-100 h-100" title="Uploading">
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
index b5ad6552d59..b6f017fa428 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
@@ -47,7 +47,7 @@
                         </div>
                     </t>
                     <t t-if="attachmentViewer.attachment.isPdf">
-                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf w-75 h-100 bg-black border-0" t-ref="iframeViewerPdf" t-att-class="{ 'o-isMobile w-100': messaging.device.isSmall }" t-att-src="attachmentViewer.attachment.defaultSource"/>
+                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf w-75 h-100 bg-black border-0" t-ref="iframeViewerPdf" t-att-class="{ 'w-100': messaging.device.isSmall }" t-att-src="attachmentViewer.attachment.defaultSource"/>
                     </t>
                     <t t-if="attachmentViewer.attachment.isText">
                         <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text w-75 h-100 bg-white border-0" t-att-src="attachmentViewer.attachment.defaultSource"/>
@@ -56,7 +56,7 @@
                         <iframe allow="autoplay; encrypted-media" class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_youtube w-75 h-100 bg-black border-0" t-att-src="attachmentViewer.attachment.defaultSource" height="315" width="560"/>
                     </t>
                     <t t-if="attachmentViewer.attachment.isVideo">
-                        <video class="o_AttachmentViewer_view o_AttachmentViewer_viewVideo w-75 h-75 bg-black" t-att-class="{ 'o-isMobile w-100 h-100': messaging.device.isSmall }" t-on-click="attachmentViewer.onClickVideo" controls="controls">
+                        <video class="o_AttachmentViewer_view o_AttachmentViewer_viewVideo w-75 h-75 bg-black" t-att-class="{ 'w-100 h-100': messaging.device.isSmall }" t-on-click="attachmentViewer.onClickVideo" controls="controls">
                             <source t-att-data-type="attachmentViewer.attachment.mimetype" t-att-src="attachmentViewer.attachment.defaultSource"/>
                         </video>
                     </t>
diff --git a/addons/mail/static/src/components/channel_member/channel_member.xml b/addons/mail/static/src/components/channel_member/channel_member.xml
index 3848cb4202c..3e50dea2c58 100644
--- a/addons/mail/static/src/components/channel_member/channel_member.xml
+++ b/addons/mail/static/src/components/channel_member/channel_member.xml
@@ -10,7 +10,7 @@
                     <PartnerImStatusIcon
                         className="'o_ChannelMember_partnerImStatusIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center text-light'"
                         classNameObj="{
-                            'o-mobile': messaging.device.isSmall,
+                            'o-isDeviceSmall': messaging.device.isSmall,
                             'small': !messaging.device.isSmall,
                         }"
                         partnerLocalId="member.localId"
diff --git a/addons/mail/static/src/components/chat_window/chat_window.scss b/addons/mail/static/src/components/chat_window/chat_window.scss
index 242772531c8..8f0479147cc 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.scss
+++ b/addons/mail/static/src/components/chat_window/chat_window.scss
@@ -5,7 +5,7 @@
 .o_ChatWindow {
     overflow: auto;
 
-    &:not(.o-mobile) {
+    &:not(.o-isDeviceSmall) {
         width: 325px;
 
         &.o-folded {
@@ -32,7 +32,7 @@
     box-shadow: -5px -5px 10px rgba($black, 0.09);
     outline: none;
 
-    &.o-focused:not(.o-mobile) {
+    &.o-focused:not(.o-isDeviceSmall) {
         box-shadow: -5px -5px 10px rgba($black, 0.18);
     }
 
diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml
index 94c299dea55..20fa6270c34 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.xml
+++ b/addons/mail/static/src/components/chat_window/chat_window.xml
@@ -8,7 +8,7 @@
                     'o-focused': chatWindow.isFocused,
                     'o-folded': chatWindow.isFolded,
                     'o-fullscreen w-100 h-100': chatWindow.isFullscreen,
-                    'o-mobile position-fixed': messaging.device.isSmall,
+                    'o-isDeviceSmall position-fixed': messaging.device.isSmall,
                     'mw-100 mh-100': !messaging.device.isSmall,
                     'o-new-message': !chatWindow.thread,
                 }" t-att-style="chatWindow.componentStyle" t-on-keydown="chatWindow.onKeydown" t-on-focusout="chatWindow.onFocusout" t-att-data-chat-window-local-id="chatWindow.localId" t-att-data-thread-local-id="chatWindow.thread ? chatWindow.thread.localId : ''" t-ref="root"
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
index 43d4fbadc29..6d80eb5fa40 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
@@ -5,7 +5,7 @@
 .o_ChatWindowHeader {
     height: $o-mail-chat-window-header-height;
 
-    &.o-mobile {
+    &.o-isDeviceSmall {
         height: $o-mail-chat-window-header-height-mobile;
     }
 }
@@ -24,7 +24,7 @@
     background-color: $o-brand-odoo;
 }
 
-.o_ChatWindowHeader_command.o-mobile {
+.o_ChatWindowHeader_command.o-isDeviceSmall {
     font-size: 1.3rem;
 }
 
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
index baa1d9d759e..a2e0a9cd2f8 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -3,9 +3,9 @@
 
     <t t-name="mail.ChatWindowHeader" owl="1">
         <t t-if="chatWindowHeaderView and chatWindow">
-            <div class="o_ChatWindowHeader d-flex align-items-center text-white" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'o_cursor_pointer': !messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
+            <div class="o_ChatWindowHeader d-flex align-items-center text-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'o_cursor_pointer': !messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
                 <t t-if="chatWindow.hasCloseAsBackButton">
-                    <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 mr-2" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close conversation">
+                    <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 mr-2" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close conversation">
                         <i class="fa fa-arrow-left"/>
                     </div>
                 </t>
@@ -26,10 +26,10 @@
                 <div class="o-autogrow"/>
                 <div class="o_ChatWindowHeader_item o_ChatWindowHeader_rightArea d-flex align-items-center h-100 ms-1 me-0 my-0" t-att-class="{'opacity-75 opacity-100-hover': !messaging.device.isSmall }">
                     <t t-if="chatWindow.hasCallButtons">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandCamera o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickCamera" title="Start a Video Call">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandCamera o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickCamera" title="Start a Video Call">
                             <i class="fa fa-video-camera"/>
                         </div>
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandPhone o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickPhone" title="Start a Call">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandPhone o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickPhone" title="Start a Call">
                             <i class="fa fa-phone"/>
                         </div>
                     </t>
@@ -46,34 +46,34 @@
                         </t>
                     </t>
                     <t t-if="chatWindow.thread and chatWindow.thread.hasMemberListFeature and !chatWindow.isMemberListOpened">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShowMemberList o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall}"  title="Show Member List" t-on-click="chatWindow.onClickShowMemberList">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShowMemberList o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall}"  title="Show Member List" t-on-click="chatWindow.onClickShowMemberList">
                             <i class="fa fa-users"/>
                         </div>
                     </t>
                     <t t-if="chatWindow.thread and chatWindow.thread.hasMemberListFeature and chatWindow.isMemberListOpened">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandHideMemberList o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" title="Hide Member List" t-on-click="chatWindow.onClickHideMemberList">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandHideMemberList o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" title="Hide Member List" t-on-click="chatWindow.onClickHideMemberList">
                             <i class="fa fa-users"/>
                         </div>
                     </t>
                     <t t-if="chatWindow.hasShiftPrev">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftPrev o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickShiftPrev" t-att-title="chatWindow.shiftPrevText">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftPrev o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickShiftPrev" t-att-title="chatWindow.shiftPrevText">
                             <!-- this is reversed automatically when language is rtl -->
                             <i class="fa fa-angle-left"/>
                         </div>
                     </t>
                     <t t-if="chatWindow.hasShiftNext">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftNext o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall}" t-on-click="chatWindow.onClickShiftNext" t-att-title="chatWindow.shiftNextText">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftNext o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall}" t-on-click="chatWindow.onClickShiftNext" t-att-title="chatWindow.shiftNextText">
                             <!-- this is reversed automatically when language is rtl -->
                             <i class="fa fa-angle-right"/>
                         </div>
                     </t>
                     <t t-if="chatWindow.isExpandable">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandExpand o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickExpand" title="Open in Discuss">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandExpand o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickExpand" title="Open in Discuss">
                             <i class="fa fa-expand"/>
                         </div>
                     </t>
                     <t t-if="!chatWindow.hasCloseAsBackButton">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close chat window">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close chat window">
                             <i class="fa fa-close"/>
                         </div>
                     </t>
diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
index da1e2815c09..e8e6acf7791 100644
--- a/addons/mail/static/src/components/composer/composer.xml
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -78,7 +78,7 @@
                         localId="composerView.localId"
                         t-key="composerView.localId"
                     />
-                    <div class="o_Composer_buttons" t-att-class="{ 'o-composer-is-compact': composerView.isCompact, 'o-mobile': messaging.device.isSmall, 'o-messaging-in-editing': composerView and composerView.messageViewInEditing }">
+                    <div class="o_Composer_buttons" t-att-class="{ 'o-composer-is-compact': composerView.isCompact, 'o-isDeviceSmall': messaging.device.isSmall, 'o-messaging-in-editing': composerView and composerView.messageViewInEditing }">
                         <div class="o_Composer_toolButtons"
                             t-att-class="{
                                 'o-composer-has-current-partner-avatar': composerView.hasCurrentPartnerAvatar,
@@ -91,7 +91,7 @@
                                 <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light"
                                     t-att-class="{
                                         'o-open': composerView.emojisPopoverView,
-                                        'o-mobile': messaging.device.isSmall,
+                                        'o-isDeviceSmall': messaging.device.isSmall,
                                     }"
                                     t-on-keydown="composerView.onKeydownButtonEmojis"
                                     t-on-click="composerView.onClickButtonEmojis"
@@ -100,11 +100,11 @@
                                     <i class="fa fa-smile-o"/>
                                 </button>
                                 <PopoverView t-if="composerView.emojisPopoverView" localId="composerView.emojisPopoverView.localId"/>
-                                <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-light fa fa-paperclip" t-att-class="{ 'o-mobile': messaging.device.isSmall }" title="Add attachment" type="button" t-on-click="composerView.onClickAddAttachment"/>
+                                <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-light fa fa-paperclip" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" title="Add attachment" type="button" t-on-click="composerView.onClickAddAttachment"/>
                             </div>
                             <t t-if="composerView.isExpandable">
                                 <div class="o_Composer_secondaryToolButtons">
-                                    <button class="btn btn-light fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-mobile': messaging.device.isSmall }" title="Full composer" type="button" t-on-click="composerView.onClickFullComposer"/>
+                                    <button class="btn btn-light fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" title="Full composer" type="button" t-on-click="composerView.onClickFullComposer"/>
                                 </div>
                             </t>
                         </div>
diff --git a/addons/mail/static/src/components/discuss/discuss.scss b/addons/mail/static/src/components/discuss/discuss.scss
index a8d1e9bfb40..52773466336 100644
--- a/addons/mail/static/src/components/discuss/discuss.scss
+++ b/addons/mail/static/src/components/discuss/discuss.scss
@@ -11,7 +11,7 @@
     height: map-get($sizes, 100);
     min-height: 0;
 
-    &.o-mobile {
+    &.o-isDeviceSmall {
         flex-flow: column;
         align-items: center;
     }
@@ -70,7 +70,7 @@
     flex: 1 1 0;
     min-width: 0;
 
-    &.o-mobile {
+    &.o-isDeviceSmall {
         width: map-get($sizes, 100);
     }
 }
@@ -84,7 +84,7 @@
 // Style
 // ------------------------------------------------------------------
 
-.o_Discuss.o-mobile {
+.o_Discuss.o-isDeviceSmall {
     background-color: $white;
 }
 
diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml
index a126b622994..61f31678a67 100644
--- a/addons/mail/static/src/components/discuss/discuss.xml
+++ b/addons/mail/static/src/components/discuss/discuss.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.Discuss" owl="1">
         <t t-if="discussView">
             <div class="o_Discuss" t-attf-class="{{ className }}"
-                t-att-class="{ 'o-mobile': messaging.device.isSmall }"
+                t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }"
                 t-ref="root"
             >
                 <t t-if="!messaging.device.isSmall">
@@ -39,7 +39,7 @@
             <t name="beforeThread"/>
             <ThreadView
                 className="'o_Discuss_thread'"
-                classNameObj="{ 'o-mobile': messaging.device.isSmall }"
+                classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
                 localId="discussView.discuss.threadView.localId"
             />
         </t>
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index 4daeffc8ecb..2ad52b5850c 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -10,7 +10,7 @@
                     'o-discussion': messageView.message.isDiscussionOrNotification,
                     'o-has-message-selection': messageView.threadView and messageView.threadView.replyingToMessageView,
                     'o-highlighted': messageView.message.isHighlighted or messageView.isHighlighted,
-                    'o-mobile': messaging.device.isSmall,
+                    'o-isDeviceSmall': messaging.device.isSmall,
                     'o-not-discussion': !messageView.message.isDiscussionOrNotification,
                     'o-notification': messageView.message.message_type === 'notification',
                     'o-selected': messageView.isSelected,
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
index 1f0b93725d7..8d32f0fdede 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
@@ -19,7 +19,7 @@
         justify-content: center;
     }
 
-    &:not(.o-mobile) {
+    &:not(.o-isDeviceSmall) {
         flex: 0 1 auto;
         width: 450px;
         min-height: 50px;
@@ -34,7 +34,7 @@
         z-index: 1050; // on top of chat windows
     }
 
-    &.o-mobile {
+    &.o-isDeviceSmall {
         flex: 1 1 auto;
         position: fixed;
         top: $o-mail-chat-window-header-height-mobile;
@@ -49,12 +49,12 @@
 
 .o_MessagingMenu_dropdownMenuHeader {
 
-    &:not(.o-mobile) {
+    &:not(.o-isDeviceSmall) {
         display: flex;
         flex-shrink: 0; // Forces Safari to not shrink below fit content
     }
 
-    &.o-mobile {
+    &.o-isDeviceSmall {
         display: grid;
         grid-template-areas:
             "top"
@@ -75,7 +75,7 @@
     right: 0;
 }
 
-.o_MessagingMenu_newMessageButton.o-mobile {
+.o_MessagingMenu_newMessageButton.o-isDeviceSmall {
     grid-area: top;
     justify-self: start;
 }
@@ -86,7 +86,7 @@
     margin-top: map-get($spacers, 2);
 }
 
-.o_MessagingMenu_notificationList.o-mobile {
+.o_MessagingMenu_notificationList.o-isDeviceSmall {
     flex: 1 1 auto;
     overflow-y: auto;
 }
@@ -101,7 +101,7 @@
     background-color: rgba($black, 0.1);
 }
 
-.o_MessagingMenu_dropdownMenu.o-mobile {
+.o_MessagingMenu_dropdownMenu.o-isDeviceSmall {
     border: 0;
 }
 
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index 698754e015c..b521aadb48e 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.MessagingMenu" owl="1">
         <t t-if="messagingMenu">
-            <div class="o_MessagingMenu dropdown" t-att-class="{ 'show': messagingMenu.isOpen, 'o-mobile': messaging.device.isSmall }" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_MessagingMenu dropdown" t-att-class="{ 'show': messagingMenu.isOpen, 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ className }}" t-ref="root">
                 <a class="o_MessagingMenu_toggler dropdown-toggle o-no-caret o-dropdown--narrow" t-att-class="{ 'o-no-notification': !messagingMenu.counter }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="messagingMenu.onClickToggler">
                     <i class="o_MessagingMenu_icon fa fa-lg fa-comments" role="img" aria-label="Messages"/>
                     <t t-if="!messaging.isInitialized">
@@ -16,12 +16,12 @@
                     </t>
                 </a>
                 <t t-if="messagingMenu.isOpen">
-                    <div class="o_MessagingMenu_dropdownMenu dropdown-menu dropdown-menu-right border" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'o-messaging-not-initialized': !messaging.isInitialized }" role="menu">
+                    <div class="o_MessagingMenu_dropdownMenu dropdown-menu dropdown-menu-right border" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'o-messaging-not-initialized': !messaging.isInitialized }" role="menu">
                         <t t-if="!messaging.isInitialized">
                             <span><i class="o_MessagingMenu_dropdownLoadingIcon fa fa-circle-o-notch fa-spin"/>Please wait...</span>
                         </t>
                         <t t-else="">
-                            <div class="o_MessagingMenu_dropdownMenuHeader border-bottom" t-att-class="{ 'o-mobile': messaging.device.isSmall }">
+                            <div class="o_MessagingMenu_dropdownMenuHeader border-bottom" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }">
                                 <t t-if="!messaging.device.isSmall">
                                     <MessagingMenuTab messagingMenuLocalId="messagingMenu.localId" tabId="'all'"/>
                                     <MessagingMenuTab messagingMenuLocalId="messagingMenu.localId" tabId="'chat'"/>
@@ -45,7 +45,7 @@
                                 </t>
                             </div>
                             <t t-if="messagingMenu.notificationListView">
-                                <NotificationList className="'o_MessagingMenu_notificationList'" classNameObj="{ 'o-mobile': messaging.device.isSmall }" localId="messagingMenu.notificationListView.localId"/>
+                                <NotificationList className="'o_MessagingMenu_notificationList'" classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }" localId="messagingMenu.notificationListView.localId"/>
                             </t>
                             <t t-if="messagingMenu.mobileMessagingNavbarView">
                                 <MobileMessagingNavbar
@@ -65,7 +65,7 @@
             t-att-class="{
                 'btn-link': !messaging.device.isSmall,
                 'btn-secondary': messaging.device.isSmall,
-                'o-mobile': messaging.device.isSmall,
+                'o-isDeviceSmall': messaging.device.isSmall,
             }" t-on-click="messagingMenu.onClickNewMessage" type="button"
         >
             New message
diff --git a/addons/mail/static/src/components/notification_list/notification_list.xml b/addons/mail/static/src/components/notification_list/notification_list.xml
index 5bf384d5e1b..100a8dedd3a 100644
--- a/addons/mail/static/src/components/notification_list/notification_list.xml
+++ b/addons/mail/static/src/components/notification_list/notification_list.xml
@@ -14,14 +14,14 @@
                         <t t-if="notificationView.constructor.name === 'ThreadPreviewView'">
                             <ThreadPreview
                                 className="'o_NotificationList_preview'"
-                                classNameObj="{ 'o-mobile': messaging.device.isSmall }"
+                                classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
                                 localId="notificationView.localId"
                             />
                         </t>
                         <t t-if="notificationView.constructor.name === 'ThreadNeedactionPreviewView'">
                             <ThreadNeedactionPreview
                                 className="'o_NotificationList_preview'"
-                                classNameObj="{ 'o-mobile': messaging.device.isSmall }"
+                                classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
                                 localId="notificationView.localId"
                             />
                         </t>
@@ -34,7 +34,7 @@
                         <t t-if="notificationView.constructor.name === 'NotificationRequestView'">
                             <NotificationRequest
                                 className="'o_NotificationList_notificationRequest'"
-                                classNameObj="{ 'o-mobile': messaging.device.isSmall }"
+                                classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
                                 localId="notificationView.localId"
                             />
                         </t>
diff --git a/addons/mail/static/src/components/notification_list/notification_list_item.scss b/addons/mail/static/src/components/notification_list/notification_list_item.scss
index def8ec8f33b..2d73de9770d 100644
--- a/addons/mail/static/src/components/notification_list/notification_list_item.scss
+++ b/addons/mail/static/src/components/notification_list/notification_list_item.scss
@@ -8,7 +8,7 @@
     align-items: center;
     padding: map-get($spacers, 1);
 
-    &.o-mobile {
+    &.o-isDeviceSmall {
         padding: map-get($spacers, 2);
     }
 }
@@ -69,7 +69,7 @@
 }
 
 @mixin o-mail-notification-list-item-name-layout {
-    &.o-mobile {
+    &.o-isDeviceSmall {
         font-size: 1.1em;
     }
 }
@@ -151,7 +151,7 @@ $o-mail-notification-list-item-muted-hover-background-color:
 @mixin o-mail-notification-list-item-partner-im-status-icon-style {
     color: $o-mail-notification-list-item-background-color;
 
-    &:not(.o-mobile) {
+    &:not(.o-isDeviceSmall) {
         font-size: x-small;
     }
 
diff --git a/addons/mail/static/src/components/notification_request/notification_request.xml b/addons/mail/static/src/components/notification_request/notification_request.xml
index 212055788bc..7326eb3c8d3 100644
--- a/addons/mail/static/src/components/notification_request/notification_request.xml
+++ b/addons/mail/static/src/components/notification_request/notification_request.xml
@@ -9,14 +9,14 @@
                         <img class="o_NotificationRequest_image rounded-circle" t-att-src="messaging.partnerRoot.avatarUrl" alt="Avatar of OdooBot"/>
                         <PartnerImStatusIcon
                             className="'o_NotificationRequest_partnerImStatusIcon'"
-                            classNameObj="{ 'o-mobile': messaging.device.isSmall }"
+                            classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
                             partnerLocalId="messaging.partnerRoot.localId"
                         />
                     </div>
                 </div>
                 <div class="o_NotificationRequest_content">
                     <div class="o_NotificationRequest_header">
-                        <span class="o_NotificationRequest_name text-truncate" t-att-class="{ 'o-mobile': messaging.device.isSmall }">
+                        <span class="o_NotificationRequest_name text-truncate" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }">
                             <t t-esc="getHeaderText()"/>
                         </span>
                     </div>
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
index 58c44664bcf..511fed5871d 100644
--- a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
@@ -15,7 +15,7 @@
                             <PartnerImStatusIcon
                                 className="'o_ThreadNeedactionPreview_partnerImStatusIcon'"
                                 classNameObj="{
-                                    'o-mobile': messaging.device.isSmall,
+                                    'o-isDeviceSmall': messaging.device.isSmall,
                                 }"
                                 partnerLocalId="threadNeedactionPreviewView.thread.correspondent.localId"
                             />
@@ -24,7 +24,7 @@
                 </div>
                 <div class="o_ThreadNeedactionPreview_content">
                     <div class="o_ThreadNeedactionPreview_header">
-                        <span class="o_ThreadNeedactionPreview_name text-truncate" t-att-class="{ 'o-mobile': messaging.device.isSmall }">
+                        <span class="o_ThreadNeedactionPreview_name text-truncate" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }">
                             <t t-esc="threadNeedactionPreviewView.thread.displayName"/>
                         </span>
                         <t t-if="threadNeedactionPreviewView.thread.needactionMessagesAsOriginThread.length > 1">
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml
index 7ac79a9f616..ed51938e0f8 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.xml
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml
@@ -15,7 +15,7 @@
                             <PartnerImStatusIcon
                                 className="'o_ThreadPreview_partnerImStatusIcon'"
                                 classNameObj="{
-                                    'o-mobile': messaging.device.isSmall,
+                                    'o-isDeviceSmall': messaging.device.isSmall,
                                     'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0,
                                 }"
                                 partnerLocalId="threadPreviewView.thread.correspondent.localId"
@@ -25,7 +25,7 @@
                 </div>
                 <div class="o_ThreadPreview_content">
                     <div class="o_ThreadPreview_header align-items-baseline">
-                        <span class="o_ThreadPreview_name text-truncate" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
+                        <span class="o_ThreadPreview_name text-truncate" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
                             <t t-esc="threadPreviewView.thread.displayName"/>
                         </span>
                         <t t-if="threadPreviewView.thread.localMessageUnreadCounter > 1">
diff --git a/addons/mail/static/src/models/attachment_card.js b/addons/mail/static/src/models/attachment_card.js
index 6365316ec13..0df52e2dd05 100644
--- a/addons/mail/static/src/models/attachment_card.js
+++ b/addons/mail/static/src/models/attachment_card.js
@@ -1,7 +1,7 @@
 /** @odoo-module **/
 
 import { registerModel } from '@mail/model/model_core';
-import { one } from '@mail/model/model_field';
+import { attr, one } from '@mail/model/model_field';
 import { insertAndReplace, replace } from '@mail/model/model_field_command';
 
 registerModel({
@@ -36,6 +36,13 @@ registerModel({
                 this.update({ attachmentDeleteConfirmDialog: insertAndReplace() });
             }
         },
+        /**
+         * @private
+         * @returns {boolean}
+         */
+        _computeHasMultipleActions() {
+            return this.attachment.isDeletable && !this.attachmentList.composerViewOwner;
+        },
     },
     fields: {
         /**
@@ -57,5 +64,8 @@ registerModel({
             readonly: true,
             required: true,
         }),
+        hasMultipleActions: attr({
+            compute: '_computeHasMultipleActions',
+        }),
     },
 });
diff --git a/addons/mail/static/tests/qunit_mobile_suite_tests/components/discuss_mobile_mailbox_selection_tests.js b/addons/mail/static/tests/qunit_mobile_suite_tests/components/discuss_mobile_mailbox_selection_tests.js
index d4e8e460b42..f093a76286e 100644
--- a/addons/mail/static/tests/qunit_mobile_suite_tests/components/discuss_mobile_mailbox_selection_tests.js
+++ b/addons/mail/static/tests/qunit_mobile_suite_tests/components/discuss_mobile_mailbox_selection_tests.js
@@ -32,7 +32,7 @@ QUnit.test('select another mailbox', async function (assert) {
     );
     assert.hasClass(
         document.querySelector('.o_Discuss'),
-        'o-mobile',
+        'o-isDeviceSmall',
         "discuss should be opened in mobile mode"
     );
     assert.containsOnce(