pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] mail: small CSS classes improvements

Browse Source 
+ 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>
This commit is contained in:
Louis Wicket (wil)
2022-05-06 13:30:08 +02:00
parent 5d323574ec
commit c8ef8fd737
21 changed files with 71 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/attachment_card/attachment_card.scss
+2 -2
View File
@@ -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;
}
}
addons/mail/static/src/components/attachment_card/attachment_card.xml
+5 -6
View File
@@ -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">
addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+2 -2
View File
@@ -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>
addons/mail/static/src/components/channel_member/channel_member.xml
+1 -1
View File
@@ -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"
addons/mail/static/src/components/chat_window/chat_window.scss
+2 -2
View File
@@ -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);
}
addons/mail/static/src/components/chat_window/chat_window.xml
+1 -1
View File
@@ -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"
addons/mail/static/src/components/chat_window_header/chat_window_header.scss
+2 -2
View File
@@ -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;
}
addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+10 -10
View File
@@ -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>
addons/mail/static/src/components/composer/composer.xml
+4 -4
View File
@@ -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>
addons/mail/static/src/components/discuss/discuss.scss
+3 -3
View File
@@ -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;
}
addons/mail/static/src/components/discuss/discuss.xml
+2 -2
View File
@@ -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>
addons/mail/static/src/components/message/message.xml
+1 -1
View File
@@ -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,
addons/mail/static/src/components/messaging_menu/messaging_menu.scss
+7 -7
View File
@@ -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;
}
addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+5 -5
View File
@@ -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
addons/mail/static/src/components/notification_list/notification_list.xml
+3 -3
View File
@@ -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>
addons/mail/static/src/components/notification_list/notification_list_item.scss
+3 -3
View File
@@ -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;
}
addons/mail/static/src/components/notification_request/notification_request.xml
+2 -2
View File
@@ -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>
addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+2 -2
View File
@@ -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">
addons/mail/static/src/components/thread_preview/thread_preview.xml
+2 -2
View File
@@ -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">
addons/mail/static/src/models/attachment_card.js
+11 -1
View File
@@ -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',
}),
},
});
addons/mail/static/tests/qunit_mobile_suite_tests/components/discuss_mobile_mailbox_selection_tests.js
+1 -1
View File
@@ -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(