woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-01 07:02:48 +08:00
Code Issues Projects Packages Wiki Activity Actions

Handle block google/apple buttons height

Browse source
This commit is contained in:
Alex P 2023-11-22 17:27:21 +02:00
parent 2492957dba
commit 018ba0de3e
No known key found for this signature in database
GPG key ID: 54487A734A204D71
4 changed files with 17 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
modules/ppcp-applepay/resources/css/styles.scss
View file

@ -32,7 +32,7 @@
.wp-block-woocommerce-checkout {
#applepay-container, .ppcp-button-applepay {
--apple-pay-button-margin: 0;
--apple-pay-button-height: 40px;
--apple-pay-button-height: 48px;
&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
}
@ -42,7 +42,7 @@
.wp-block-woocommerce-cart {
#applepay-container, .ppcp-button-applepay {
--apple-pay-button-margin: 0;
--apple-pay-button-height: 40px;
--apple-pay-button-height: 48px;
}
/* Workaround for blocks grid */
.wc-block-components-express-payment__event-buttons {

19
modules/ppcp-applepay/resources/js/ApplepayButton.js
View file

@ -107,7 +107,7 @@ class ApplepayButton {
let config = {
wrapper: this.buttonConfig.button.wrapper,
ppcpStyle: this.ppcpConfig.button.style,
//buttonStyle: this.buttonConfig.button.style,
buttonStyle: this.buttonConfig.button.style,
ppcpButtonWrapper: this.ppcpConfig.button.wrapper
}
@ -167,14 +167,8 @@ class ApplepayButton {
addButton() {
this.log('addButton', this.context);
const wrapper =
(this.context === 'mini-cart')
? this.buttonConfig.button.mini_cart_wrapper
: this.buttonConfig.button.wrapper;
const shape =
(this.context === 'mini-cart')
? this.ppcpConfig.button.mini_cart_style.shape
: this.ppcpConfig.button.style.shape;
const { wrapper, ppcpStyle } = this.contextConfig();
const appleContainer = document.getElementById(wrapper);
const type = this.buttonConfig.button.type;
const language = this.buttonConfig.button.lang;
@ -185,7 +179,12 @@ class ApplepayButton {
appleContainer.innerHTML = `<apple-pay-button id="${id}" buttonstyle="${color}" type="${type}" locale="${language}">`;
}
jQuery('#' + wrapper).addClass('ppcp-button-' + shape);
jQuery('#' + wrapper).addClass('ppcp-button-' + ppcpStyle.shape);
if (ppcpStyle.height) {
jQuery('#' + wrapper).css('--apple-pay-button-height', `${ppcpStyle.height}px`)
}
jQuery(wrapper).append(appleContainer);
}

4
modules/ppcp-googlepay/resources/css/styles.scss
View file

@ -25,14 +25,14 @@
.wp-block-woocommerce-checkout {
.ppcp-button-googlepay {
margin: 0;
height: 40px;
height: 48px;
}
}
.wp-block-woocommerce-cart {
.ppcp-button-googlepay {
margin: 0;
height: 40px;
height: 48px;
}
/* Workaround for blocks grid */
.wc-block-components-express-payment__event-buttons {

4
modules/ppcp-googlepay/resources/js/GooglepayButton.js
View file

@ -168,6 +168,10 @@ class GooglepayButton {
this.waitForWrapper(wrapper, () => {
jQuery(wrapper).addClass('ppcp-button-' + ppcpStyle.shape);
if (ppcpStyle.height) {
jQuery(wrapper).css('height', `${ppcpStyle.height}px`)
}
const button =
this.paymentsClient.createButton({
onClick: this.onButtonClick.bind(this),