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

[FIX] mail: proper hover feedback of message action list buttons

Browse Source 
Follow-up of https://github.com/odoo/odoo/pull/90893

Improvements of message action list introduced a gap of clickable
part of button between button and the container of buttons.

This commit fixes the issue by removing this gap.

Also fixes an issue where the icon buttons were too small in mobile.

Task-2862366

closes odoo/odoo#92196

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Alexandre Kühn
2022-05-24 19:11:10 +02:00
parent f2877f711a
commit 3a844d8132
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/message_action_list/message_action_list.scss
+1 -1
View File
@@ -1,4 +1,4 @@
.o_MessageActionList {
.o_MessageActionList:not(.o-isDeviceSmall) {
font-size: 0.9rem;
}
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 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"/>
<div class="o_MessageActionList d-flex border rounded-sm 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 ? 'pl-3 py-3 pr-2' : 'pl-2 py-2 pr-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 o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'p-2' : 'p-1' }}" 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 ? '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,
}" 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 ? '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"/>
<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" 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" 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" 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 ? 'pl-2 py-3 pr-3' : 'pl-1 py-2 pr-2' }}" title="Delete" t-on-click="messageActionList.onClickDelete"/>
</div>
</t>
</t>