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

[REF] mail: NotificationListItem, review and simplify mixins

Browse Source 
Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2838625

Part-of: odoo/odoo#90476
This commit is contained in:
Brieuc-brd
2022-05-25 18:00:58 +02:00
parent eaefb789e0
commit b0081b0233
10 changed files with 80 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/notification_group/notification_group.scss
+4 -80
View File
@@ -2,84 +2,8 @@
// Layout
// ------------------------------------------------------------------
.o_NotificationGroup {
@include o-mail-notification-list-item-layout();
&:hover .o_NotificationGroup_markAsRead {
// TODO also mixin this
// task-2258605
opacity: 1;
}
}
.o_NotificationGroup_content {
@include o-mail-notification-list-item-content-layout();
}
.o_NotificationGroup_coreItem {
@include o-mail-notification-list-item-core-item-layout();
}
.o_NotificationGroup_counter {
@include o-mail-notification-list-item-counter-layout();
}
.o_NotificationGroup_date {
@include o-mail-notification-list-item-date-layout();
}
.o_NotificationGroup_header {
@include o-mail-notification-list-item-header-layout();
}
.o_NotificationGroup_image {
@include o-mail-notification-list-item-image-layout();
}
.o_NotificationGroup_imageContainer {
@include o-mail-notification-list-item-image-container-layout();
}
.o_NotificationGroup_inlineText {
@include o-mail-notification-list-item-inline-text-layout();
}
.o_NotificationGroup_markAsRead {
@include o-mail-notification-list-item-mark-as-read-layout();
}
.o_NotificationGroup_name {
@include o-mail-notification-list-item-name-layout();
}
.o_NotificationGroup_sidebar {
@include o-mail-notification-list-item-sidebar-layout();
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_NotificationGroup {
@include o-mail-notification-list-item-style();
}
.o_NotificationGroup_counter {
@include o-mail-notification-list-item-bold-style();
}
.o_NotificationGroup_date {
@include o-mail-notification-list-item-date-style();
}
.o_NotificationGroup_image {
@include o-mail-notification-list-item-image-style();
}
.o_NotificationGroup_markAsRead {
@include o-mail-notification-list-item-mark-as-read-style();
}
.o_NotificationGroup_name {
@include o-mail-notification-list-item-bold-style();
.o_NotificationGroup:hover .o_NotificationGroup_markAsRead {
// TODO also mixin this
// task-2258605
opacity: 1;
}
addons/mail/static/src/components/notification_group/notification_group.xml
+12 -12
View File
@@ -3,37 +3,37 @@
<t t-name="mail.NotificationGroup" owl="1">
<t t-if="notificationGroupView">
<div class="o_NotificationGroup" t-attf-class="{{ className }}" t-on-click="notificationGroupView.onClick" t-ref="root">
<div class="o_NotificationGroup_sidebar">
<div class="o_NotificationGroup_imageContainer o_NotificationGroup_sidebarItem">
<img class="o_NotificationGroup_image rounded-circle" t-att-src="notificationGroupView.imageSrc" alt="Message delivery failure image"/>
<div class="o_NotificationListItem o_NotificationGroup d-flex flex-shrink-0 align-items-center p-1 o_cursor_pointer" t-attf-class="{{ className }}" t-on-click="notificationGroupView.onClick" t-ref="root">
<div class="o_NotificationListItem_sidebar o_NotificationGroup_sidebar m-1">
<div class="o_NotificationListItem_imageContainer o_NotificationGroup_imageContainer o_NotificationGroup_sidebarItem position-relative">
<img class="o_NotificationListItem_image o_NotificationGroup_image w-100 h-100 rounded-circle" t-att-src="notificationGroupView.imageSrc" alt="Message delivery failure image"/>
</div>
</div>
<div class="o_NotificationGroup_content">
<div class="o_NotificationGroup_header">
<span class="o_NotificationGroup_name text-truncate">
<div class="o_NotificationListItem_content o_NotificationGroup_content d-flex flex-column flex-grow-1 align-self-start m-2">
<div class="o_NotificationGroup_header o_NotificationListItem_header d-flex">
<span class="o_NotificationListItem_name o_NotificationGroup_name text-truncate font-weight-bold">
<t t-esc="notificationGroupView.notificationGroup.res_model_name"/>
</span>
<t t-if="notificationGroupView.notificationGroup.notifications.length > 1">
<span class="o_NotificationGroup_counter">
<span class="o_NotificationListItem_counter o_NotificationGroup_counter mx-1 font-weight-bold">
(<t t-esc="notificationGroupView.notificationGroup.notifications.length"/>)
</span>
</t>
<span class="o-autogrow"/>
<t t-if="notificationGroupView.notificationGroup.date">
<span class="o_NotificationGroup_date">
<small class="o_NotificationListItem_date o_NotificationGroup_date flex-shrink-0 text-500">
<t t-esc="notificationGroupView.notificationGroup.date.fromNow()"/>
</span>
</small>
</t>
</div>
<div class="o_NotificationGroup_core d-flex align-items-baseline">
<span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText text-truncate">
<span class="o_NotificationListItem_coreItem o_NotificationListItem_inlineText o_NotificationGroup_coreItem o_NotificationGroup_inlineText me-2 text-truncate">
<t t-if="notificationGroupView.notificationGroup.notification_type === 'email'">
An error occurred when sending an email.
</t>
</span>
<span class="o-autogrow"/>
<span class="o_NotificationGroup_coreItem o_NotificationGroup_markAsRead fa fa-check" title="Discard message delivery failures" t-on-click="notificationGroupView.onClickMarkAsRead" t-ref="markAsRead"/>
<span class="o_NotificationListItem_coreItem o_NotificationListItem_markAsRead o_NotificationGroup_coreItem o_NotificationGroup_markAsRead fa fa-check d-flex flex-shrink-0 ms-2 text-600 opacity-50 opacity-100-hover" title="Discard message delivery failures" t-on-click="notificationGroupView.onClickMarkAsRead" t-ref="markAsRead"/>
</div>
</div>
</div>
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-isDeviceSmall': messaging.device.isSmall }"
classNameObj="{ 'o-isDeviceSmall p-2': messaging.device.isSmall }"
record="notificationView"
/>
</t>
<t t-if="notificationView.constructor.name === 'ThreadNeedactionPreviewView'">
<ThreadNeedactionPreview
className="'o_NotificationList_preview'"
classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
classNameObj="{ 'o-isDeviceSmall p-2': messaging.device.isSmall }"
record="notificationView"
/>
</t>
@@ -34,7 +34,7 @@
<t t-if="notificationView.constructor.name === 'NotificationRequestView'">
<NotificationRequest
className="'o_NotificationList_notificationRequest'"
classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
classNameObj="{ 'o-isDeviceSmall p-2': messaging.device.isSmall }"
record="notificationView"
/>
</t>
addons/mail/static/src/components/notification_list/notification_list_item.scss
+21 -123
View File
@@ -1,109 +1,21 @@
// -----------------------------------------------------------------------------
// Layout
// -----------------------------------------------------------------------------
@mixin o-mail-notification-list-item-layout {
display: flex;
flex: 0 0 auto; // Without this, Safari shrinks parent regardless of child content
align-items: center;
padding: map-get($spacers, 1);
&.o-isDeviceSmall {
padding: map-get($spacers, 2);
}
}
@mixin o-mail-notification-list-item-content-layout {
display: flex;
flex-flow: column;
flex: 1 1 auto;
align-self: flex-start;
min-width: 0; // needed for flex to work correctly
margin: map-get($spacers, 2);
}
@mixin o-mail-notification-list-item-core-item-layout {
margin: map-get($spacers, 0) map-get($spacers, 2);
&:first-child {
margin-inline-start: map-get($spacers, 0);
}
&:last-child {
margin-inline-end: map-get($spacers, 0);
}
}
@mixin o-mail-notification-list-item-counter-layout() {
margin: map-get($spacers, 0) map-get($spacers, 1);
}
@mixin o-mail-notification-list-item-date-layout() {
flex: 0 0 auto;
}
@mixin o-mail-notification-list-item-header-layout {
display: flex;
}
@mixin o-mail-notification-list-item-image-layout {
width: map-get($sizes, 100);
height: map-get($sizes, 100);
}
@mixin o-mail-notification-list-item-image-container-layout {
position: relative;
width: 40px;
height: 40px;
}
@mixin o-mail-notification-list-item-inline-text-layout {
&.o-empty::before {
content: '\00a0'; // keep line-height as if it had content
}
}
@mixin o-mail-notification-list-item-mark-as-read-layout() {
display: flex;
flex: 0 0 auto;
}
@mixin o-mail-notification-list-item-name-layout {
&.o-isDeviceSmall {
font-size: 1.1em;
}
}
@mixin o-mail-notification-list-item-partner-im-status-icon-layout {
@include o-position-absolute($bottom: 0, $right: 0);
display: flex;
align-items: center;
justify-content: center;
}
@mixin o-mail-notification-list-item-sidebar-layout {
margin: map-get($spacers, 1);
}
// -----------------------------------------------------------------------------
// Style
// -----------------------------------------------------------------------------
$o-mail-notification-list-item-background-color: $white !default;
$o-mail-notification-list-item-hover-background-color:
darken($o-mail-notification-list-item-background-color, 7%) !default;
$o-mail-notification-list-item-muted-background-color: gray('100') !default;
$o-mail-notification-list-item-muted-background-color: $gray-100 !default;
$o-mail-notification-list-item-muted-hover-background-color:
darken($o-mail-notification-list-item-muted-background-color, 7%) !default;
@mixin o-mail-notification-list-item-style {
cursor: pointer;
.o_NotificationListItem {
user-select: none;
background-color: $o-mail-notification-list-item-background-color;
&:hover {
background-color: $o-mail-notification-list-item-hover-background-color;
.o_NotificationListItem_partnerImStatusIcon {
color: $o-mail-notification-list-item-hover-background-color;
}
}
&.o-muted {
@@ -111,50 +23,36 @@ $o-mail-notification-list-item-muted-hover-background-color:
&:hover {
background-color: $o-mail-notification-list-item-muted-hover-background-color;
.o_NotificationListItem_partnerImStatusIcon {
color: $o-mail-notification-list-item-muted-hover-background-color;
}
}
}
}
@mixin o-mail-notification-list-item-bold-style {
font-weight: $font-weight-bold;
&.o-muted {
color: gray('600');
}
.o_NotificationListItem_content {
min-width: 0; // needed for flex to work correctly
}
@mixin o-mail-notification-list-item-date-style() {
font-size: $font-size-sm;
color: gray('500');
}
@mixin o-mail-notification-list-item-image-style {
.o_NotificationListItem_image {
object-fit: cover;
}
@mixin o-mail-notification-list-item-mark-as-read-style() {
color: gray('300');
.o_NotificationListItem_imageContainer {
width: 40px;
height: 40px;
}
&:hover {
color: gray('600');
.o_NotificationListItem_inlineText {
&.o-empty::before {
content: '\00a0'; // keep line-height as if it had content
}
}
@mixin o-mail-notification-list-item-hover-partner-im-status-icon-style {
color: $o-mail-notification-list-item-hover-background-color;
}
@mixin o-mail-notification-list-item-muted-hover-partner-im-status-icon-style {
color: $o-mail-notification-list-item-muted-hover-background-color;
}
@mixin o-mail-notification-list-item-partner-im-status-icon-style {
.o_NotificationListItem_partnerImStatusIcon {
color: $o-mail-notification-list-item-background-color;
&:not(.o-isDeviceSmall) {
font-size: x-small;
}
&.o-muted {
color: $o-mail-notification-list-item-muted-background-color;
}
addons/mail/static/src/components/notification_request/notification_request.scss
-69
View File
@@ -1,69 +0,0 @@
// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------
.o_NotificationRequest {
@include o-mail-notification-list-item-layout();
}
.o_NotificationRequest_content {
@include o-mail-notification-list-item-content-layout();
}
.o_NotificationRequest_coreItem {
@include o-mail-notification-list-item-core-item-layout();
}
.o_NotificationRequest_header {
@include o-mail-notification-list-item-header-layout();
}
.o_NotificationRequest_image {
@include o-mail-notification-list-item-image-layout();
}
.o_NotificationRequest_imageContainer {
@include o-mail-notification-list-item-image-container-layout();
}
.o_NotificationRequest_inlineText {
@include o-mail-notification-list-item-inline-text-layout();
}
.o_NotificationRequest_name {
@include o-mail-notification-list-item-name-layout();
}
.o_NotificationRequest_partnerImStatusIcon {
@include o-mail-notification-list-item-partner-im-status-icon-layout();
}
.o_NotificationRequest_sidebar {
@include o-mail-notification-list-item-sidebar-layout();
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_NotificationRequest {
@include o-mail-notification-list-item-style();
&:hover {
.o_NotificationRequest_partnerImStatusIcon {
@include o-mail-notification-list-item-hover-partner-im-status-icon-style();
}
}
}
.o_NotificationRequest_image {
@include o-mail-notification-list-item-image-style();
}
.o_NotificationRequest_name {
@include o-mail-notification-list-item-bold-style();
}
.o_NotificationRequest_partnerImStatusIcon {
@include o-mail-notification-list-item-partner-im-status-icon-style();
}
addons/mail/static/src/components/notification_request/notification_request.xml
+10 -10
View File
@@ -3,25 +3,25 @@
<t t-name="mail.NotificationRequest" owl="1">
<t t-if="notificationRequestView">
<div class="o_NotificationRequest" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
<div class="o_NotificationRequest_sidebar">
<div class="o_NotificationRequest_imageContainer o_NotificationRequest_sidebarItem">
<img class="o_NotificationRequest_image rounded-circle" t-att-src="messaging.partnerRoot.avatarUrl" alt="Avatar of OdooBot"/>
<div class="o_NotificationListItem o_NotificationRequest d-flex flex-shrink-0 align-items-center p-1 o_cursor_pointer" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
<div class="o_NotificationListItem_sidebar o_NotificationRequest_sidebar m-1">
<div class="o_NotificationListItem_imageContainer o_NotificationRequest_imageContainer o_NotificationRequest_sidebarItem position-relative">
<img class="o_NotificationListItem_image o_NotificationRequest_image w-100 h-100 rounded-circle" t-att-src="messaging.partnerRoot.avatarUrl" alt="Avatar of OdooBot"/>
<PartnerImStatusIcon
className="'o_NotificationRequest_partnerImStatusIcon'"
classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
className="'o_NotificationListItem_partnerImStatusIcon o_NotificationRequest_partnerImStatusIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center'"
classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall, 'small': !messaging.device.isSmall }"
partner="messaging.partnerRoot"
/>
</div>
</div>
<div class="o_NotificationRequest_content">
<div class="o_NotificationRequest_header">
<span class="o_NotificationRequest_name text-truncate" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }">
<div class="o_NotificationListItem_content o_NotificationRequest_content d-flex flex-column flex-grow-1 align-self-start m-2">
<div class="o_NotificationListItem_header o_NotificationRequest_header d-flex">
<span class="o_NotificationListItem_name o_NotificationRequest_name text-truncate font-weight-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall }">
<t t-esc="notificationRequestView.headerText"/>
</span>
</div>
<div class="o_NotificationRequest_core">
<span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText text-truncate">
<span class="o_NotificationListItem_coreItem o_NotificationListItem_inlineText o_NotificationRequest_coreItem o_NotificationRequest_inlineText text-truncate">
Enable desktop notifications to chat.
</span>
</div>
addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss
-93
View File
@@ -1,93 +0,0 @@
// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------
.o_ThreadNeedactionPreview {
@include o-mail-notification-list-item-layout();
}
.o_ThreadNeedactionPreview_content {
@include o-mail-notification-list-item-content-layout();
}
.o_ThreadNeedactionPreview_coreItem {
@include o-mail-notification-list-item-core-item-layout();
}
.o_ThreadNeedactionPreview_counter {
@include o-mail-notification-list-item-counter-layout();
}
.o_ThreadNeedactionPreview_date {
@include o-mail-notification-list-item-date-layout();
}
.o_ThreadNeedactionPreview_header {
@include o-mail-notification-list-item-header-layout();
}
.o_ThreadNeedactionPreview_image {
@include o-mail-notification-list-item-image-layout();
}
.o_ThreadNeedactionPreview_imageContainer {
@include o-mail-notification-list-item-image-container-layout();
}
.o_ThreadNeedactionPreview_inlineText {
@include o-mail-notification-list-item-inline-text-layout();
}
.o_ThreadNeedactionPreview_markAsRead {
@include o-mail-notification-list-item-mark-as-read-layout();
}
.o_ThreadNeedactionPreview_name {
@include o-mail-notification-list-item-name-layout();
}
.o_ThreadNeedactionPreview_partnerImStatusIcon {
@include o-mail-notification-list-item-partner-im-status-icon-layout();
}
.o_ThreadNeedactionPreview_sidebar {
@include o-mail-notification-list-item-sidebar-layout();
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_ThreadNeedactionPreview {
@include o-mail-notification-list-item-style();
&:hover {
.o_ThreadNeedactionPreview_partnerImStatusIcon {
@include o-mail-notification-list-item-hover-partner-im-status-icon-style();
}
}
}
.o_ThreadNeedactionPreview_counter {
@include o-mail-notification-list-item-bold-style();
}
.o_ThreadNeedactionPreview_date {
@include o-mail-notification-list-item-date-style();
}
.o_ThreadNeedactionPreview_image {
@include o-mail-notification-list-item-image-style();
}
.o_ThreadNeedactionPreview_markAsRead {
@include o-mail-notification-list-item-mark-as-read-style();
}
.o_ThreadNeedactionPreview_name {
@include o-mail-notification-list-item-bold-style();
}
.o_ThreadNeedactionPreview_partnerImStatusIcon {
@include o-mail-notification-list-item-partner-im-status-icon-style();
}
addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+14 -13
View File
@@ -7,47 +7,48 @@
The preview template is used by the discuss in mobile, and by the systray
menu in order to show preview of threads.
-->
<div class="o_ThreadNeedactionPreview" t-attf-class="{{ className }}" t-on-click="threadNeedactionPreviewView.onClick" t-att-data-thread-local-id="threadNeedactionPreviewView.thread.localId" t-ref="root">
<div class="o_ThreadNeedactionPreview_sidebar">
<div class="o_ThreadNeedactionPreview_imageContainer o_ThreadNeedactionPreview_sidebarItem">
<img class="o_ThreadNeedactionPreview_image" t-att-src="image()" alt="Thread Image"/>
<div class="o_NotificationListItem o_ThreadNeedactionPreview d-flex flex-shrink-0 align-items-center p-1 o_cursor_pointer" t-attf-class="{{ className }}" t-on-click="threadNeedactionPreviewView.onClick" t-att-data-thread-local-id="threadNeedactionPreviewView.thread.localId" t-ref="root">
<div class="o_NotificationListItem_sidebar o_ThreadNeedactionPreview_sidebar m-1">
<div class="o_NotificationListItem_imageContainer o_ThreadNeedactionPreview_imageContainer o_ThreadNeedactionPreview_sidebarItem position-relative">
<img class="o_NotificationListItem_image o_ThreadNeedactionPreview_image w-100 h-100" t-att-src="image()" alt="Thread Image"/>
<t t-if="threadNeedactionPreviewView.thread.correspondent and threadNeedactionPreviewView.thread.correspondent.im_status">
<PartnerImStatusIcon
className="'o_ThreadNeedactionPreview_partnerImStatusIcon'"
className="'o_NotificationListItem_partnerImStatusIcon o_ThreadNeedactionPreview_partnerImStatusIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center'"
classNameObj="{
'o-isDeviceSmall': messaging.device.isSmall,
'small': !messaging.device.isSmall,
}"
partner="threadNeedactionPreviewView.thread.correspondent"
/>
</t>
</div>
</div>
<div class="o_ThreadNeedactionPreview_content">
<div class="o_ThreadNeedactionPreview_header">
<span class="o_ThreadNeedactionPreview_name text-truncate" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }">
<div class="o_NotificationListItem_content o_ThreadNeedactionPreview_content d-flex flex-column flex-grow-1 align-self-start m-2">
<div class="o_NotificationListItem_header o_ThreadNeedactionPreview_header d-flex">
<span class="o_NotificationListItem_name o_ThreadNeedactionPreview_name text-truncate font-weight-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall }">
<t t-esc="threadNeedactionPreviewView.thread.displayName"/>
</span>
<t t-if="threadNeedactionPreviewView.thread.needactionMessagesAsOriginThread.length > 1">
<span class="o_ThreadNeedactionPreview_counter">
<span class="o_NotificationListItem_counter o_ThreadNeedactionPreview_counter mx-1 font-weight-bold">
(<t t-esc="threadNeedactionPreviewView.thread.needactionMessagesAsOriginThread.length"/>)
</span>
</t>
<span class="o-autogrow"/>
<t t-if="threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread and threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread.date">
<span class="o_ThreadNeedactionPreview_date">
<small class="o_NotificationListItem_date o_ThreadNeedactionPreview_date flex-shrink-0 text-500">
<t t-esc="threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread.date.fromNow()"/>
</span>
</small>
</t>
</div>
<div class="o_ThreadNeedactionPreview_core d-flex align-items-baseline">
<span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
<span class="o_NotificationListItem_coreItem o_NotificationListItem_inlineText o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText me-2 text-truncate" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
<t t-if="threadNeedactionPreviewView.messageAuthorPrefixView">
<MessageAuthorPrefix record="threadNeedactionPreviewView.messageAuthorPrefixView"/>
</t>
<t t-esc="inlineLastNeedactionMessageAsOriginThreadBody"/>
</span>
<span class="o-autogrow"/>
<span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="threadNeedactionPreviewView.onClickMarkAsRead" t-ref="markAsRead"/>
<span class="o_NotificationListItem_coreItem o_NotificationListItem_markAsRead o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_markAsRead fa fa-check d-flex flex-shrink-0 ms-2 text-600 opacity-50 opacity-100-hover" title="Mark as Read" t-on-click="threadNeedactionPreviewView.onClickMarkAsRead" t-ref="markAsRead"/>
</div>
</div>
</div>
addons/mail/static/src/components/thread_preview/thread_preview.scss
+2 -96
View File
@@ -2,108 +2,14 @@
// Layout
// ------------------------------------------------------------------
.o_ThreadPreview {
@include o-mail-notification-list-item-layout();
&:hover .o_ThreadPreview_markAsRead {
opacity: 1;
}
}
.o_ThreadPreview_content {
@include o-mail-notification-list-item-content-layout();
}
.o_ThreadPreview_coreItem {
@include o-mail-notification-list-item-core-item-layout();
}
.o_ThreadPreview_counter {
@include o-mail-notification-list-item-counter-layout();
}
.o_ThreadPreview_date {
@include o-mail-notification-list-item-date-layout();
}
.o_ThreadPreview_header {
@include o-mail-notification-list-item-header-layout();
}
.o_ThreadPreview_image {
@include o-mail-notification-list-item-image-layout();
}
.o_ThreadPreview_imageContainer {
@include o-mail-notification-list-item-image-container-layout();
}
.o_ThreadPreview_inlineText {
@include o-mail-notification-list-item-inline-text-layout();
}
.o_ThreadPreview_markAsRead {
@include o-mail-notification-list-item-mark-as-read-layout();
}
.o_ThreadPreview_name {
@include o-mail-notification-list-item-name-layout();
}
.o_ThreadPreview_partnerImStatusIcon {
@include o-mail-notification-list-item-partner-im-status-icon-layout();
}
.o_ThreadPreview_sidebar {
@include o-mail-notification-list-item-sidebar-layout();
.o_ThreadPreview:hover .o_ThreadPreview_markAsRead {
opacity: 1;
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_ThreadPreview {
@include o-mail-notification-list-item-style();
&:hover {
.o_ThreadPreview_partnerImStatusIcon {
@include o-mail-notification-list-item-hover-partner-im-status-icon-style();
}
}
&.o-muted {
&:hover {
.o_ThreadPreview_partnerImStatusIcon {
@include o-mail-notification-list-item-muted-hover-partner-im-status-icon-style();
}
}
}
}
.o_ThreadPreview_callIndicator.o-isCalling {
color: red;
}
.o_ThreadPreview_counter {
@include o-mail-notification-list-item-bold-style();
}
.o_ThreadPreview_date {
@include o-mail-notification-list-item-date-style();
}
.o_ThreadPreview_image {
@include o-mail-notification-list-item-image-style();
}
.o_ThreadPreview_markAsRead {
@include o-mail-notification-list-item-mark-as-read-style();
}
.o_ThreadPreview_name {
@include o-mail-notification-list-item-bold-style();
}
.o_ThreadPreview_partnerImStatusIcon {
@include o-mail-notification-list-item-partner-im-status-icon-style();
}
addons/mail/static/src/components/thread_preview/thread_preview.xml
+14 -13
View File
@@ -7,15 +7,16 @@
The preview template is used by the discuss in mobile, and by the systray
menu in order to show preview of threads.
-->
<div class="o_ThreadPreview" t-att-class="{ 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }" t-attf-class="{{ className }}" t-on-click="threadPreviewView.onClick" t-att-data-thread-local-id="threadPreviewView.thread.localId" t-ref="root">
<div class="o_ThreadPreview_sidebar">
<div class="o_ThreadPreview_imageContainer o_ThreadPreview_sidebarItem">
<img class="o_ThreadPreview_image rounded-circle" t-att-src="image()" alt="Thread Image"/>
<div class="o_NotificationListItem o_ThreadPreview d-flex flex-shrink-0 align-items-center p-1 o_cursor_pointer" t-att-class="{ 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }" t-attf-class="{{ className }}" t-on-click="threadPreviewView.onClick" t-att-data-thread-local-id="threadPreviewView.thread.localId" t-ref="root">
<div class="o_NotificationListItem_sidebar o_ThreadPreview_sidebar m-1">
<div class="o_NotificationListItem_imageContainer o_ThreadPreview_imageContainer o_ThreadPreview_sidebarItem position-relative">
<img class="o_NotificationListItem_image o_ThreadPreview_image w-100 h-100 rounded-circle" t-att-src="image()" alt="Thread Image"/>
<t t-if="threadPreviewView.thread.correspondent and threadPreviewView.thread.correspondent.im_status">
<PartnerImStatusIcon
className="'o_ThreadPreview_partnerImStatusIcon'"
className="'o_NotificationListItem_partnerImStatusIcon o_ThreadPreview_partnerImStatusIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center'"
classNameObj="{
'o-isDeviceSmall': messaging.device.isSmall,
'small': !messaging.device.isSmall,
'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0,
}"
partner="threadPreviewView.thread.correspondent"
@@ -23,13 +24,13 @@
</t>
</div>
</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-isDeviceSmall': messaging.device.isSmall, 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
<div class="o_NotificationListItem_content o_ThreadPreview_content d-flex flex-column flex-grow-1 align-self-start m-2">
<div class="o_NotificationListItem_header o_ThreadPreview_header d-flex align-items-baseline">
<span class="o_NotificationListItem_name o_ThreadPreview_name text-truncate font-weight-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall, 'o-muted text-600': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
<t t-esc="threadPreviewView.thread.displayName"/>
</span>
<t t-if="threadPreviewView.thread.localMessageUnreadCounter > 1">
<span class="o_ThreadPreview_counter">
<span class="o_NotificationListItem_counter o_ThreadPreview_counter mx-1 font-weight-bold">
(<t t-esc="threadPreviewView.thread.localMessageUnreadCounter"/>)
</span>
</t>
@@ -38,13 +39,13 @@
</t>
<span class="o-autogrow"/>
<t t-if="threadPreviewView.thread.lastMessage and threadPreviewView.thread.lastMessage.date">
<span class="o_ThreadPreview_date" t-att-class="{ 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
<small class="o_NotificationListItem_date o_ThreadPreview_date flex-shrink-0 text-500" t-att-class="{ 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
<t t-esc="threadPreviewView.thread.lastMessage.date.fromNow()"/>
</span>
</small>
</t>
</div>
<div class="o_ThreadPreview_core d-flex align-items-baseline">
<span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
<span class="o_NotificationListItem_coreItem o_NotificationListItem_inlineText o_ThreadPreview_coreItem o_ThreadPreview_inlineText me-2 text-truncate" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
<t t-if="threadPreviewView.messageAuthorPrefixView">
<MessageAuthorPrefix record="threadPreviewView.messageAuthorPrefixView"/>
</t>
@@ -52,7 +53,7 @@
</span>
<span class="o-autogrow"/>
<t t-if="threadPreviewView.thread.localMessageUnreadCounter > 0">
<span class="o_ThreadPreview_coreItem o_ThreadPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="threadPreviewView.onClickMarkAsRead" t-ref="markAsRead"/>
<span class="o_NotificationListItem_coreItem o_NotificationListItem_markAsRead o_ThreadPreview_coreItem o_ThreadPreview_markAsRead fa fa-check d-flex flex-shrink-0 ms-2 text-600 opacity-50 opacity-100-hover" title="Mark as Read" t-on-click="threadPreviewView.onClickMarkAsRead" t-ref="markAsRead"/>
</t>
</div>
</div>