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

[ADD] mail: compact message action list

Browse Source 
task-2869932

Part-of: odoo/odoo#92872
This commit is contained in:
Zelong Lin
2022-07-29 15:53:05 +02:00
committed by Brieuc-brd
parent 0dd267a270
commit 1c1bcced26
2 changed files with 65 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/message_action_list/message_action_list.xml
+18 -9
View File
@@ -4,15 +4,24 @@
<t t-if="messageActionList">
<div class="o_MessageActionList d-flex border rounded-1 bg-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="messageActionList.onClick" t-ref="root">
<i t-if="messageActionList.message.hasReactionIcon" class="o_MessageActionList_action o_MessageActionList_actionReaction fa fa-lg fa-smile-o o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'ps-3 py-3 pe-2' : 'ps-2 py-2 pe-1' }}" t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
<span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" t-att-class="{
'o_MessageActionList_actionStar_active': messageActionList.message.isStarred,
'fa fa-lg fa-star': messageActionList.message.isStarred,
'fa fa-lg fa-star-o': !messageActionList.message.isStarred,
}" role="button" tabindex="0" aria-label="Mark as Todo" t-att-aria-pressed="messageActionList.message.isStarred ? 'true' : 'false'" title="Mark as Todo" t-on-click="messageActionList.onClickToggleStar"/>
<span t-if="messageActionList.hasReplyIcon" class="o_MessageActionList_action o_MessageActionList_actionReply fa fa-lg fa-reply o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Reply" role="button" tabindex="0" aria-label="Reply" t-on-click="messageActionList.onClickReplyTo"/>
<span t-if="messageActionList.hasMarkAsReadIcon" class="o_MessageActionList_action o_MessageActionList_actionMarkRead fa fa-lg fa-check o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Mark as Read" role="button" tabindex="0" aria-label="Mark as Read" t-on-click="messageActionList.onClickMarkAsRead"/>
<span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionEdit fa fa-lg fa-pencil o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Edit" role="button" tabindex="0" aria-label="Edit" t-on-click="messageActionList.onClickEdit"/>
<span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionDelete fa fa-lg fa-trash o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'ps-2 py-3 pe-3' : 'ps-1 py-2 pe-2' }}" title="Delete" role="button" tabindex="0" aria-label="Delete" t-on-click="messageActionList.onClickDelete"/>
<t t-if="!messageActionList.isCompact || !messageActionList.hasCompactIcon">
<span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" t-att-class="{
'o_MessageActionList_actionStar_active': messageActionList.message.isStarred,
'fa fa-lg fa-star': messageActionList.message.isStarred,
'fa fa-lg fa-star-o': !messageActionList.message.isStarred,
}" role="button" tabindex="0" aria-label="Mark as Todo" t-att-aria-pressed="messageActionList.message.isStarred ? 'true' : 'false'" title="Mark as Todo" t-on-click="messageActionList.onClickToggleStar"/>
<span t-if="messageActionList.hasReplyIcon" class="o_MessageActionList_action o_MessageActionList_actionReply fa fa-lg fa-reply o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Reply" role="button" tabindex="0" aria-label="Reply" t-on-click="messageActionList.onClickReplyTo"/>
<span t-if="messageActionList.hasMarkAsReadIcon" class="o_MessageActionList_action o_MessageActionList_actionMarkRead fa fa-lg fa-check o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Mark as Read" role="button" tabindex="0" aria-label="Mark as Read" t-on-click="messageActionList.onClickMarkAsRead"/>
<span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionEdit fa fa-lg fa-pencil o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Edit" role="button" tabindex="0" aria-label="Edit" t-on-click="messageActionList.onClickEdit"/>
<!-- If there is no compact icon, delete will be the last button of the action list, a different styling will be applied. -->
<span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionDelete fa fa-lg fa-trash o_cursor_pointer" t-att-class="{
'px-2 py-3': messageActionList.hasCompactIcon and messaging.device.isSmall,
'px-1 py-2': messageActionList.hasCompactIcon and !messaging.device.isSmall,
'ps-2 py-3 pe-3': !messageActionList.hasCompactIcon and messaging.device.isSmall,
'ps-1 py-2 pe-2': !messageActionList.hasCompactIcon and !messaging.device.isSmall,
}" title="Delete" role="button" tabindex="0" aria-label="Delete" t-on-click="messageActionList.onClickDelete"/>
</t>
<span t-if="messageActionList.hasCompactIcon" class="o_MessageActionList_action o_MessageActionList_actionToggleCompact fa fa-lg fa-ellipsis-h o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'ps-2 py-3 pe-3' : 'ps-1 py-2 pe-2' }}" t-att-title="messageActionList.isCompact ? 'Expend' : 'Compact'" role="button" tabindex="0" t-att-aria-label="messageActionList.isCompact ? 'Expend' : 'Compact'" t-on-click="messageActionList.onClickToggleCompact"/>
</div>
</t>
</t>
addons/mail/static/src/models/message_action_list.js
+47
View File
@@ -65,6 +65,13 @@ registerModel({
markEventHandled(ev, 'MessageActionList.replyTo');
this.messageView.replyTo();
},
/**
* @private
* @param {MouseEvent} ev
*/
onClickToggleCompact(ev) {
this.update({ isCompact: !this.isCompact });
},
/**
* @private
* @param {MouseEvent} ev
@@ -72,6 +79,24 @@ registerModel({
onClickToggleStar(ev) {
this.message.toggleStar();
},
/**
* @private
* @returns {integer|FieldCommand}
*/
_computeActionsCount() {
if (this.message){
const actions = [
this.hasMarkAsReadIcon,
this.hasReplyIcon,
this.message.canBeDeleted,
this.message.canBeDeleted,
this.message.canStarBeToggled,
this.message.hasReactionIcon,
]
return actions.filter(Boolean).length;
}
return clear();
},
/**
* @private
* @returns {string}
@@ -79,6 +104,17 @@ registerModel({
_computeAddReactionText() {
return this.env._t("Add a Reaction");
},
/**
* @private
* @returns {boolean}
*/
_computeHasCompactIcon() {
const COMPACT_THRESHOLD = 2;
const viewer = this.messageView && this.messageView.messageListViewMessageViewItemOwner && this.messageView.messageListViewMessageViewItemOwner.messageListViewOwner.threadViewOwner.threadViewer;
if (viewer && viewer.chatWindow) {
return this.actionsCount > COMPACT_THRESHOLD;
}
},
/**
* @private
* @returns {boolean}
@@ -110,6 +146,10 @@ registerModel({
* States the reference to the reaction action in the component.
*/
actionReactionRef: attr(),
actionsCount: attr({
compute: '_computeActionsCount',
readonly: true,
}),
addReactionText: attr({
compute: '_computeAddReactionText',
}),
@@ -117,6 +157,10 @@ registerModel({
inverse: 'messageActionListOwnerAsDeleteConfirm',
isCausal: true,
}),
hasCompactIcon: attr({
compute: '_computeHasCompactIcon',
readonly: true,
}),
/**
* Determines whether this message action list has mark as read icon.
*/
@@ -129,6 +173,9 @@ registerModel({
hasReplyIcon: attr({
compute: '_computeHasReplyIcon',
}),
isCompact: attr({
default: true,
}),
/**
* States the message on which this action message list operates.
*/