[FIX] web: ActionMenu position on mobile

This commit fixes the ActionMenu's position on smaller screens by
pushing it to the bottom-right part of the ControlPanel (instead of the
bottom-left one on regular sizes).

It also adjusts its vertical alignment.

X-original-commit: 42966bc89f873032fa6bad41c2cfa7a001537f9b
Part-of: odoo/odoo#100759
This commit is contained in:
Pierre Paridans
2022-09-23 01:39:34 +02:00
parent 491385842d
commit 0573d9d6c2
4 changed files with 17 additions and 13 deletions
@@ -5,7 +5,7 @@
<div class="o_cp_action_menus">
<Dropdown t-if="printItems.length" class="'d-inline-block'" togglerClass="'btn btn-secondary'" tooltip="'Printing options'" hotkey="'shift+u'">
<t t-set-slot="toggler">
<i class="small me-1 fa fa-print"/>
<i class="me-md-1 fa fa-print"/>
<span class="o_dropdown_title">Print</span>
</t>
<t t-foreach="printItems" t-as="item" t-key="item.key">
@@ -17,7 +17,7 @@
<Dropdown t-if="actionItems.length" class="'d-inline-block'" togglerClass="'btn btn-secondary'" tooltip="'Additional actions'" hotkey="'u'">
<t t-set-slot="toggler">
<i class="small me-1 fa fa-cog"/>
<i class="me-md-1 fa fa-cog"/>
<span class="o_dropdown_title">Action</span>
</t>
<t t-foreach="actionItems" t-as="item" t-key="item.key">
@@ -164,6 +164,7 @@
</Dropdown>
</nav>
</t>
<t t-slot="control-panel-bottom-right"/>
</div>
</div>
</t>
@@ -13,7 +13,20 @@
</t>
</t>
<t t-set-slot="control-panel-bottom-left">
<t t-if="props.info.actionMenus and !model.root.isVirtual">
<t t-if="!env.isSmall and props.info.actionMenus and !model.root.isVirtual">
<ActionMenus
activeIds="[model.root.resId]"
context="props.context"
items="getActionMenuItems()"
isDomainSelected="model.root.isDomainSelected"
resModel="model.root.resModel"
domain="props.domain"
onActionExecuted="() => model.load()"
/>
</t>
</t>
<t t-set-slot="control-panel-bottom-right">
<t t-if="env.isSmall and props.info.actionMenus and !model.root.isVirtual">
<ActionMenus
activeIds="[model.root.resId]"
context="props.context"
@@ -25,7 +38,6 @@
/>
</t>
</t>
<t t-set-slot="control-panel-bottom-right"> </t>
<t t-component="props.Renderer" record="model.root" Compiler="props.Compiler" archInfo="archInfo" translateAlert="translateAlert"/>
</Layout>
</div>
@@ -163,15 +163,6 @@ kbd {
padding: 2px 10px;
}
}
.o_cp_action_menus .btn {
font-size: $font-size-lg;
padding: 13px 14px!important;
> .fa {
margin: 0!important;
}
}
}
//------------------------------------------------------------------------------