From 9b995e5b7d7e9e4bccf8af2b5d4a36e45a99719f Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Tue, 26 Jul 2022 14:32:09 +0000 Subject: [PATCH] [IMP] mail: `Message`, redesign This commit redesigns the `Message` component for the ChatWindow, Discuss and the Chatter. The purpose is to make the chats more user-friendly. task-2823627 Part-of: odoo/odoo#92872 --- .../src/components/activity/activity.xml | 2 +- .../attachment_card/attachment_card.xml | 6 +- .../attachment_image/attachment_image.xml | 2 +- .../attachment_list/attachment_list.xml | 10 +- .../src/components/composer/composer.scss | 6 +- .../src/components/composer/composer.xml | 14 +- .../composer_text_input.xml | 2 +- .../src/components/message/message.scss | 36 ++-- .../static/src/components/message/message.xml | 188 ++++++++++++------ .../message_action_list.scss | 4 - .../message_action_list.xml | 2 +- .../message_reaction_group.scss | 2 +- .../components/thread_view/thread_view.xml | 2 +- .../mail/static/src/models/attachment_list.js | 98 ++++++++- .../mail/static/src/models/composer_view.js | 48 +++++ addons/mail/static/src/models/message_view.js | 112 +++++++++++ .../src/scss/variables/primary_variables.scss | 2 +- 17 files changed, 423 insertions(+), 113 deletions(-) diff --git a/addons/mail/static/src/components/activity/activity.xml b/addons/mail/static/src/components/activity/activity.xml index 89e667b391c..1d987648c26 100644 --- a/addons/mail/static/src/components/activity/activity.xml +++ b/addons/mail/static/src/components/activity/activity.xml @@ -3,7 +3,7 @@ -
+
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 6d11d32eee7..528d51272d1 100644 --- a/addons/mail/static/src/components/attachment_card/attachment_card.xml +++ b/addons/mail/static/src/components/attachment_card/attachment_card.xml @@ -3,7 +3,7 @@
-
- - diff --git a/addons/mail/static/src/components/attachment_image/attachment_image.xml b/addons/mail/static/src/components/attachment_image/attachment_image.xml index 1ba14695319..b2a1f4bc4e0 100644 --- a/addons/mail/static/src/components/attachment_image/attachment_image.xml +++ b/addons/mail/static/src/components/attachment_image/attachment_image.xml @@ -3,7 +3,7 @@
-
-
-
+
+
- +
-
+
- +
diff --git a/addons/mail/static/src/components/composer/composer.scss b/addons/mail/static/src/components/composer/composer.scss index 749123735d7..2747c4a3b55 100644 --- a/addons/mail/static/src/components/composer/composer.scss +++ b/addons/mail/static/src/components/composer/composer.scss @@ -13,7 +13,7 @@ grid-template-rows: auto 1fr auto; &.o-has-current-partner-avatar { - grid-template-columns: 50px 1fr; + grid-template-columns: $o-mail-message-sidebar-width 1fr; } } @@ -68,7 +68,3 @@ .o_Composer_buttonDiscard { border: $border-width solid lighten($gray-400, 5%); } - -.o_Composer_toolButtons:last-child:not(.o-composer-has-current-partner-avatar) { - border-right: $border-width solid lighten($gray-400, 5%); -} diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml index dedd36bd49c..69284050c46 100644 --- a/addons/mail/static/src/components/composer/composer.xml +++ b/addons/mail/static/src/components/composer/composer.xml @@ -28,7 +28,7 @@ /> -
+
Replying to @@ -87,22 +87,20 @@ record="composerView" t-key="composerView.localId" /> -
+
- -
- -
- -
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml index aa64c910627..3ecdaa0e271 100644 --- a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml +++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml @@ -3,7 +3,7 @@ -
+
diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss index 38af3664ccd..7b12055b440 100644 --- a/addons/mail/static/src/components/message/message.scss +++ b/addons/mail/static/src/components/message/message.scss @@ -33,14 +33,12 @@ min-width: 0; // allows this flex child to shrink more than its content } -.o_Message_highlightIndicator { - width: $o-mail-discuss-message-highlight-indicator-width; - transition: background-color .5s ease-out; -} - -.o_Message_prettyBody > p { - margin-bottom: 0; -} +.o_Message_prettyBody { + p:last-child, + > p { + margin-bottom: 0; + } +} .o_Message_sidebar { flex-basis: $o-mail-message-sidebar-width; @@ -57,16 +55,26 @@ &.o-not-discussion.o-selected { border-bottom: 1px solid darken(map-get($grays, '400'), 5%); } +} - &.o-highlighted { - background-color: rgba($o-brand-primary, .1); - - &.o_Message_active { - background-color: rgba($o-brand-primary, .2); - } +.o_Message_background { + &.o-isAuthorNotCurrentUserOrGuest { + opacity: .15; } } +.o_Message_prettyBody { + a.o_mail_redirect { + padding: map-get($spacers, 1); + border-radius: $border-radius; + background: rgba($primary, .2); + } +} + +.o_Message_background { + transition: opacity .5s ease-out; +} + // Used to hide buttons on rating emails in chatter // FIXME: should use a better approach for not having such buttons // in chatter of such messages, but keep having them in emails. diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml index 3622f66c3a3..c2d312523ce 100644 --- a/addons/mail/static/src/components/message/message.xml +++ b/addons/mail/static/src/components/message/message.xml @@ -3,7 +3,7 @@ -
-
-
-
+
+
-
+
- + - +
+ +
-
+
-
+
- + @@ -76,29 +76,29 @@ - + - + - + Anonymous - - - + + - - + @@ -111,54 +111,110 @@ - - - - - - - - - +
+ + + - - - - - + + + + + + + + + + + +
- - Subject: - -
- -
- - - +
+
- - -

- - -

    - -
  • - -
    • + + Subject: + +
    + +
    -
- + + + + +

+ + +

    + +
  • + +
    • +     +
+ +
+
+
+ +
- -
+ +
- +
diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.scss b/addons/mail/static/src/components/message_action_list/message_action_list.scss index ca1301b5aab..59c9d3df8e4 100644 --- a/addons/mail/static/src/components/message_action_list/message_action_list.scss +++ b/addons/mail/static/src/components/message_action_list/message_action_list.scss @@ -2,10 +2,6 @@ font-size: 0.9rem; } -.o_MessageActionList:hover { - box-shadow: 0 4px .5rem -.5rem $black; -} - .o_MessageActionList_action:hover { background-color: mix($border-color, $white); } diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.xml b/addons/mail/static/src/components/message_action_list/message_action_list.xml index b3612fb4751..a97780c5d3a 100644 --- a/addons/mail/static/src/components/message_action_list/message_action_list.xml +++ b/addons/mail/static/src/components/message_action_list/message_action_list.xml @@ -2,7 +2,7 @@ -
+
-
+
diff --git a/addons/mail/static/src/models/attachment_list.js b/addons/mail/static/src/models/attachment_list.js index b76cc35df32..fafd2bb1d48 100644 --- a/addons/mail/static/src/models/attachment_list.js +++ b/addons/mail/static/src/models/attachment_list.js @@ -1,7 +1,7 @@ /** @odoo-module **/ import { registerModel } from '@mail/model/model_core'; -import { many, one } from '@mail/model/model_field'; +import { attr, many, one } from '@mail/model/model_field'; import { clear, insertAndReplace, replace } from '@mail/model/model_field_command'; registerModel({ @@ -71,6 +71,66 @@ registerModel({ _computeViewableAttachments() { return replace(this.attachments.filter(attachment => attachment.isViewable)); }, + /** + * @private + * @returns {boolean} + */ + _computeIsInDiscuss() { + return Boolean( + (this.messageViewOwner && this.messageViewOwner.isInDiscuss) || + (this.composerViewOwner && this.composerViewOwner.isInDiscuss) + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatWindow() { + return Boolean( + (this.messageViewOwner && this.messageViewOwner.isInChatWindow) || + (this.composerViewOwner && this.composerViewOwner.isInChatWindow) + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatter() { + return Boolean( + (this.messageViewOwner && this.messageViewOwner.isInChatter) || + (this.composerViewOwner && this.composerViewOwner.isInChatter) + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsCurrentUserOrGuestAuthor() { + return Boolean( + this.composerViewOwner || + (this.messageViewOwner && this.messageViewOwner.message.isCurrentUserOrGuestAuthor) + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatWindowAndIsAlignedRight() { + return Boolean( + this.isInChatWindow && + this.isCurrentUserOrGuestAuthor + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatWindowAndIsAlignedLeft() { + return Boolean( + this.isInChatWindow && + !this.isCurrentUserOrGuestAuthor + ); + }, }, fields: { /** @@ -120,6 +180,42 @@ registerModel({ imageAttachments: many('Attachment', { compute: '_computeImageAttachments', }), + /** + * Determines if we are in the Discuss view. + */ + isInDiscuss: attr({ + compute: '_computeIsInDiscuss', + }), + /** + * Determines if we are in the ChatWindow view. + */ + isInChatWindow: attr({ + compute: '_computeIsInChatWindow', + }), + /** + * Determines if we are in the Chatter view. + */ + isInChatter: attr({ + compute: '_computeIsInChatter', + }), + /** + * Determines if it comes from the current user. + */ + isCurrentUserOrGuestAuthor: attr({ + compute: '_computeIsCurrentUserOrGuestAuthor', + }), + /** + * Determines if we are in the ChatWindow view AND if the message is right aligned + */ + isInChatWindowAndIsAlignedRight: attr({ + compute: '_computeIsInChatWindowAndIsAlignedRight', + }), + /** + * Determines if we are in the ChatWindow view AND if the message is left aligned + */ + isInChatWindowAndIsAlignedLeft: attr({ + compute: '_computeIsInChatWindowAndIsAlignedLeft', + }), /** * Link with a message view to handle attachments. */ diff --git a/addons/mail/static/src/models/composer_view.js b/addons/mail/static/src/models/composer_view.js index 2f1966c24d5..63819215a72 100644 --- a/addons/mail/static/src/models/composer_view.js +++ b/addons/mail/static/src/models/composer_view.js @@ -907,6 +907,36 @@ registerModel({ } return clear(); }, + /** + * @private + * @returns {boolean} + */ + _computeIsInDiscuss() { + return Boolean( + (this.threadView && (this.threadView.threadViewer.discuss || this.threadView.threadViewer.discussPublicView)) || + (this.messageViewInEditing && (this.messageViewInEditing.discuss || this.messageViewInEditing.discussPublicView)) + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatWindow() { + return Boolean( + (this.threadView && this.threadView.threadViewer.chatWindow) || + (this.messageViewInEditing && this.messageViewInEditing.chatWindow) + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatter() { + return Boolean( + (this.threadView && this.threadView.threadViewer.chatter) || + (this.messageViewInEditing && this.messageViewInEditing.isInChatter) + ); + }, /** * @private * @returns {boolean|FieldCommand} @@ -1480,6 +1510,24 @@ registerModel({ isFocused: attr({ default: false, }), + /** + * Determines if we are in the Discuss view. + */ + isInDiscuss: attr({ + compute: '_computeIsInDiscuss', + }), + /** + * Determines if we are in the ChatWindow view. + */ + isInChatWindow: attr({ + compute: '_computeIsInChatWindow', + }), + /** + * Determines if we are in the Chatter view. + */ + isInChatter: attr({ + compute: '_computeIsInChatter', + }), /** * Last content of textarea from input event. Useful to determine * whether the current partner is typing something. diff --git a/addons/mail/static/src/models/message_view.js b/addons/mail/static/src/models/message_view.js index cbac731567a..55cd29f7442 100644 --- a/addons/mail/static/src/models/message_view.js +++ b/addons/mail/static/src/models/message_view.js @@ -267,6 +267,82 @@ registerModel({ ) ); }, + /** + * @private + * @returns {boolean} + */ + _computeIsInDiscuss() { + return Boolean( + this.messageListViewMessageViewItemOwner && + ( + this.messageListViewMessageViewItemOwner.messageListViewOwner.threadViewOwner.threadViewer.discuss || + this.messageListViewMessageViewItemOwner.messageListViewOwner.threadViewOwner.threadViewer.discussPublicView + ) + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatWindow() { + return Boolean( + this.messageListViewMessageViewItemOwner && + this.messageListViewMessageViewItemOwner.messageListViewOwner.threadViewOwner.threadViewer.chatWindow + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatter() { + return Boolean( + this.messageListViewMessageViewItemOwner && + this.messageListViewMessageViewItemOwner.messageListViewOwner.threadViewOwner.threadViewer.chatter + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatWindowAndIsAlignedRight() { + return Boolean( + this.isInChatWindow && + this.message && + this.message.isCurrentUserOrGuestAuthor + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsInChatWindowAndIsAlignedLeft() { + return Boolean( + this.isInChatWindow && + this.message && + !this.message.isCurrentUserOrGuestAuthor + ); + }, + /** + * @private + * @returns {boolean} + */ + _computeIsShowingAuthorName() { + return Boolean( + !( + this.isInChatWindow && + ( + ( + this.message && + this.message.isCurrentUserOrGuestAuthor + ) || + ( + this.messageListViewMessageViewItemOwner && + this.messageListViewMessageViewItemOwner.messageListViewOwner.thread.channel_type === 'chat' + ) + ) + ) + ); + }, /** * @private * @returns {boolean} @@ -438,6 +514,42 @@ registerModel({ isHovered: attr({ default: false, }), + /** + * Determines if we are in the Discuss view. + */ + isInDiscuss: attr({ + compute: '_computeIsInDiscuss', + }), + /** + * Determines if we are in the ChatWindow view. + */ + isInChatWindow: attr({ + compute: '_computeIsInChatWindow', + }), + /** + * Determines if we are in the Chatter view. + */ + isInChatter: attr({ + compute: '_computeIsInChatter', + }), + /** + * Determines if we are in the ChatWindow view AND if the message is right aligned + */ + isInChatWindowAndIsAlignedRight: attr({ + compute: '_computeIsInChatWindowAndIsAlignedRight', + }), + /** + * Determines if we are in the ChatWindow view AND if the message is left aligned + */ + isInChatWindowAndIsAlignedLeft: attr({ + compute: '_computeIsInChatWindowAndIsAlignedLeft', + }), + /** + * Determines if the author name is displayed. + */ + isShowingAuthorName: attr({ + compute: '_computeIsShowingAuthorName', + }), /** * Tells whether the message is selected in the current thread viewer. */ diff --git a/addons/mail/static/src/scss/variables/primary_variables.scss b/addons/mail/static/src/scss/variables/primary_variables.scss index c2dba53d172..5d7c5f986b4 100644 --- a/addons/mail/static/src/scss/variables/primary_variables.scss +++ b/addons/mail/static/src/scss/variables/primary_variables.scss @@ -28,5 +28,5 @@ $o-mail-discuss-sidebar-category-item-avatar-left-margin: $o-mail-discuss-sideba $o-mail-discuss-sidebar-category-item-avatar-size: 30px !default; $o-mail-discuss-sidebar-scrollbar-width: 15px !default; -$o-mail-message-sidebar-width: 50px; +$o-mail-message-sidebar-width: 48px !default; $o-mail-composer-text-input-height: 40px !default;