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

[IMP] mail: improve o_MessageActionList design

Browse Source 
Task-2793394

closes odoo/odoo#90893

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Nemael
2022-05-18 22:56:33 +02:00
parent 546e0b823d
commit 3303afec66
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/message/message.scss
-4
View File
@@ -8,10 +8,6 @@
.o_Message_actionListContainer {
@include o-position-absolute($top: - map-get($spacers, 3), $right: 0);
z-index: 10; // Place the element in front of the Composer when they overlap
&.o-squashed {
@include o-position-absolute($top: - map-get($spacers, 4), $right: 0);
}
}
.o_Message_authorAvatar {
addons/mail/static/src/components/message/message.xml
+1 -1
View File
@@ -26,7 +26,7 @@
t-ref="root"
>
<MessageInReplyToView t-if="messageView.messageInReplyToView" record="messageView.messageInReplyToView"/>
<div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute pl-5 pr-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
<div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute px-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
<MessageActionList record="messageView.messageActionList"/>
</div>
<div class="d-flex flex-shrink-0">
addons/mail/static/src/components/message_action_list/message_action_list.scss
+4
View File
@@ -1,3 +1,7 @@
.o_MessageActionList {
font-size: 0.9rem;
}
.o_MessageActionList:hover {
box-shadow: 0 4px .5rem -.5rem $black;
}
addons/mail/static/src/components/message_action_list/message_action_list.xml
+7 -7
View File
@@ -2,18 +2,18 @@
<templates>
<t t-name="mail.MessageActionList" owl="1">
<t t-if="messageActionList">
<div class="o_MessageActionList d-flex border rounded-sm bg-white" 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 p-2 o_cursor_pointer" t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
<div class="o_MessageActionList d-flex border rounded-sm bg-white py-1 px-2" 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 ? 'p-2' : 'p-1' }}" t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
<PopoverView t-if="messageActionList.reactionPopoverView" record="messageActionList.reactionPopoverView"/>
<span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar p-2 o_cursor_pointer" t-att-class="{
<span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'p-2' : 'p-1' }}" 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,
}" 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 p-2 o_cursor_pointer" title="Reply" t-on-click="messageActionList.onClickReplyTo"/>
<span t-if="messageActionList.hasMarkAsReadIcon" class="o_MessageActionList_action o_MessageActionList_actionMarkRead fa fa-lg fa-check p-2 o_cursor_pointer" title="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 p-2 o_cursor_pointer" title="Edit" t-on-click="messageActionList.onClickEdit"/>
<span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionDelete fa fa-lg fa-trash p-2 o_cursor_pointer" title="Delete" t-on-click="messageActionList.onClickDelete"/>
<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 ? 'p-2' : 'p-1' }}" title="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 ? 'p-2' : 'p-1' }}" title="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 ? 'p-2' : 'p-1' }}" title="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 ? 'p-2' : 'p-1' }}" title="Delete" t-on-click="messageActionList.onClickDelete"/>
</div>
</t>
</t>