[FIX] point_of_sale: action pad and customer button width

This commit fixes two issues that occur when a customer has a very long
name within the `point_of_sale` module.

1. If you create a customer with a very long name, this will cause the
left panel to extend, pushing the numpad to the right, making it out of
use.

To fix this issue, we add a `mw-50` class to the container, so that we
limit its growth, and we validate the `text-truncate` class applied to
the customer name.

2. If you use the `point_of_sale` module on a mobile device, the buttons
related to main actions such as refund, customer note, billing etc are
wrapped into a `more` button. When you open that interface, if the name
of the customer is too long, it will overflow the parent container and
so generates an overflow.

To fix that issue, we simply add a `text-truncate` class to the customer
name to be sure it doesn't generate any overflow.

task-3631878

closes odoo/odoo#145531

Signed-off-by: Vlad Stroia (vlst) <vlst@odoo.com>
This commit is contained in:
Chrysanthe (chgo)
2023-12-08 17:19:11 +00:00
parent 5cdd63c457
commit 9f5609fd70
2 changed files with 2 additions and 2 deletions
@@ -2,7 +2,7 @@
<templates id="template" xml:space="preserve">
<t t-name="point_of_sale.ActionpadWidget">
<div class="actionpad d-flex flex-column flex-grow-1 p-0 border-end">
<div class="actionpad d-flex flex-column flex-grow-1 mw-50 p-0 border-end">
<button class="button mobile-more-button btn btn-secondary flex-fill border-bottom" t-if="ui.isSmall and props.onClickMore" t-on-click="props.onClickMore">
<span>More...</span>
</button>
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="point_of_sale.CustomerButton">
<div class="control-button customer-button btn rounded-0 fw-bolder" t-attf-class="{{this.partner ? 'btn-primary' : 'btn-light'}}"
<div class="control-button customer-button btn rounded-0 fw-bolder text-truncate" t-attf-class="{{this.partner ? 'btn-primary' : 'btn-light'}}"
t-on-click="() => this.pos.selectPartner()">
<i class="fa fa-user me-1" role="img" aria-label="Customer" title="Customer" />
<t t-esc="this.partner.name" t-if="this.partner" />