From 417db131297b2ce613469bd306c16cdb63d94f46 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Fri, 19 May 2023 15:18:09 +0000
Subject: [PATCH] [FIX] website_payment: adjust size of donation's custom
amount button
With some fonts (e.g. Roboto), the placeholder inside the "Custom
Amount" button of the Donation snippet does not fit within the button.
This commit adjusts the maximum width of the button to make it fit
according to the used font and the placeholder text.
The width has to be set from JavaScript because the same issue
arises with different length of translations of the placeholder.
Steps to reproduce:
- Drop a Donation snippet.
- Increase the button text size (change button font, change large
button font size...)
=> Text is not fully drawn inside custom button.
opw-3283549
closes odoo/odoo#123079
X-original-commit: 320970de5b8d6bd7b2e9c28dd0906ff4d4ca2436
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
.../static/src/snippets/s_donation/000.js | 14 ++++++++++++++
1 file changed, 14 insertions(+)
diff --git a/addons/website_payment/static/src/snippets/s_donation/000.js b/addons/website_payment/static/src/snippets/s_donation/000.js
index 5a704a359977..cf50bebad4d7 100644
--- a/addons/website_payment/static/src/snippets/s_donation/000.js
+++ b/addons/website_payment/static/src/snippets/s_donation/000.js
@@ -3,6 +3,8 @@
import {_t} from 'web.core';
import publicWidget from 'web.public.widget';
+const CUSTOM_BUTTON_EXTRA_WIDTH = 10;
+
publicWidget.registry.DonationSnippet = publicWidget.Widget.extend({
selector: '.s_donation',
disabledInEditableMode: false,
@@ -24,11 +26,23 @@ publicWidget.registry.DonationSnippet = publicWidget.Widget.extend({
this._setBubble(this.$rangeSlider);
}
await this._displayCurrencies();
+ const customButtonEl = this.el.querySelector("#s_donation_amount_input");
+ if (customButtonEl) {
+ const canvasEl = document.createElement("canvas");
+ const context = canvasEl.getContext("2d");
+ context.font = window.getComputedStyle(customButtonEl).font;
+ const width = context.measureText(customButtonEl.placeholder).width;
+ customButtonEl.style.maxWidth = `${Math.ceil(width) + CUSTOM_BUTTON_EXTRA_WIDTH}px`;
+ }
},
/**
* @override
*/
destroy() {
+ const customButtonEl = this.el.querySelector("#s_donation_amount_input");
+ if (customButtonEl) {
+ customButtonEl.style.maxWidth = "";
+ }
this.$target.find('.s_donation_currency').remove();
this._deselectPrefilledButtons();
this.$('.alert-danger').remove();
--
GitLab