From b7260aa18507f200ca2aa394fd6a87e24e053853 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 16 Aug 2022 10:20:47 +0300 Subject: [PATCH 1/5] Add header on settings page --- .../ppcp-onboarding/assets/css/onboarding.css | 23 ++++++ modules/ppcp-wc-gateway/services.php | 7 ++ .../src/Settings/HeaderRenderer.php | 82 +++++++++++++++++++ .../ppcp-wc-gateway/src/WCGatewayModule.php | 6 +- 4 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css index dc6932749..6dd4a7a93 100644 --- a/modules/ppcp-onboarding/assets/css/onboarding.css +++ b/modules/ppcp-onboarding/assets/css/onboarding.css @@ -168,3 +168,26 @@ ul.ppcp-onboarding-options-sublist { height: 23px; } } + +.ppcp-settings-page-header { + display: flex; + align-items: center; + max-width: 1200px; + margin-top: 10px; +} + +.ppcp-settings-page-header img { + height: 40px; +} + +.ppcp-settings-page-header h4 { + margin: 0 15px 0 5px; +} + +.ppcp-settings-page-header .button, .ppcp-settings-page-header a { + margin: 0 5px; +} + +.ppcp-right-align { + margin-left: auto; +} diff --git a/modules/ppcp-wc-gateway/services.php b/modules/ppcp-wc-gateway/services.php index 63948c96f..1b442e1de 100644 --- a/modules/ppcp-wc-gateway/services.php +++ b/modules/ppcp-wc-gateway/services.php @@ -53,6 +53,7 @@ use WooCommerce\PayPalCommerce\WcGateway\Notice\GatewayWithoutPayPalAdminNotice; use WooCommerce\PayPalCommerce\WcGateway\Processor\AuthorizedPaymentsProcessor; use WooCommerce\PayPalCommerce\WcGateway\Processor\OrderProcessor; use WooCommerce\PayPalCommerce\WcGateway\Processor\RefundProcessor; +use WooCommerce\PayPalCommerce\WcGateway\Settings\HeaderRenderer; use WooCommerce\PayPalCommerce\WcGateway\Settings\SectionsRenderer; use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings; use WooCommerce\PayPalCommerce\WcGateway\Settings\SettingsListener; @@ -214,6 +215,12 @@ return array( $container->get( 'wcgateway.settings.sections' ) ); }, + 'wcgateway.settings.header-renderer' => static function ( ContainerInterface $container ): HeaderRenderer { + return new HeaderRenderer( + $container->get( 'wcgateway.current-ppcp-settings-page-id' ), + $container->get( 'wcgateway.url' ) + ); + }, 'wcgateway.settings.sections' => static function ( ContainerInterface $container ): array { $sections = array( PayPalGateway::ID => __( 'PayPal Checkout', 'woocommerce-paypal-payments' ), diff --git a/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php b/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php new file mode 100644 index 000000000..8089f8075 --- /dev/null +++ b/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php @@ -0,0 +1,82 @@ +page_id = $page_id; + $this->module_url = $module_url; + } + + /** + * Whether the sections tab should be rendered. + * + * @return bool + */ + public function should_render() : bool { + return ! empty( $this->page_id ); + } + + /** + * Renders the Sections tab. + */ + public function render(): string { + if ( ! $this->should_render() ) { + return ''; + } + + return ' +
+ PayPal +

- The all-in-one checkout solution for WooCommerce

+ ' + . __( 'Documentation', 'woocommerce-paypal-payments' ) . + ' + ' + . __( 'Get Help', 'woocommerce-paypal-payments' ) . + ' + + ' + . __( 'Request a feature', 'woocommerce-paypal-payments' ) . + ' + ' + . __( 'Submit a bug', 'woocommerce-paypal-payments' ) . + ' + +
+ '; + } +} diff --git a/modules/ppcp-wc-gateway/src/WCGatewayModule.php b/modules/ppcp-wc-gateway/src/WCGatewayModule.php index b6a30b4d1..51f33760b 100644 --- a/modules/ppcp-wc-gateway/src/WCGatewayModule.php +++ b/modules/ppcp-wc-gateway/src/WCGatewayModule.php @@ -31,6 +31,7 @@ use WooCommerce\PayPalCommerce\WcGateway\Gateway\PayPalGateway; use WooCommerce\PayPalCommerce\WcGateway\Notice\ConnectAdminNotice; use WooCommerce\PayPalCommerce\WcGateway\Notice\GatewayWithoutPayPalAdminNotice; use WooCommerce\PayPalCommerce\WcGateway\Processor\AuthorizedPaymentsProcessor; +use WooCommerce\PayPalCommerce\WcGateway\Settings\HeaderRenderer; use WooCommerce\PayPalCommerce\WcGateway\Settings\SectionsRenderer; use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings; use WooCommerce\PayPalCommerce\WcGateway\Settings\SettingsListener; @@ -65,11 +66,14 @@ class WCGatewayModule implements ModuleInterface { add_action( 'woocommerce_sections_checkout', function() use ( $c ) { + $header_renderer = $c->get( 'wcgateway.settings.header-renderer' ); + assert( $header_renderer instanceof HeaderRenderer ); + $section_renderer = $c->get( 'wcgateway.settings.sections-renderer' ); assert( $section_renderer instanceof SectionsRenderer ); // phpcs:ignore WordPress.Security.EscapeOutput - echo $section_renderer->render(); + echo $header_renderer->render() . $section_renderer->render(); }, 20 ); From 7302e30e37368fd8d165d698397f131c58481643 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 16 Aug 2022 17:18:03 +0300 Subject: [PATCH 2/5] Decrease header logo --- modules/ppcp-onboarding/assets/css/onboarding.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css index 6dd4a7a93..3280f4f84 100644 --- a/modules/ppcp-onboarding/assets/css/onboarding.css +++ b/modules/ppcp-onboarding/assets/css/onboarding.css @@ -177,7 +177,7 @@ ul.ppcp-onboarding-options-sublist { } .ppcp-settings-page-header img { - height: 40px; + height: 30px; } .ppcp-settings-page-header h4 { From d9ab46475c54a4c72be740f9075c1af952f80eb4 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 16 Aug 2022 17:18:35 +0300 Subject: [PATCH 3/5] Fix header logo on mobile --- .../ppcp-onboarding/assets/css/onboarding.css | 19 +++++++++++++++++++ .../src/Settings/HeaderRenderer.php | 2 +- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css index 3280f4f84..cda81e5d6 100644 --- a/modules/ppcp-onboarding/assets/css/onboarding.css +++ b/modules/ppcp-onboarding/assets/css/onboarding.css @@ -191,3 +191,22 @@ ul.ppcp-onboarding-options-sublist { .ppcp-right-align { margin-left: auto; } + +@media (max-width: 1200px) { + .ppcp-settings-page-header { + display: block; + } + + .ppcp-settings-page-header .ppcp-right-align { + display: block; + margin-left: 0; + } + + .ppcp-settings-page-header .button, .ppcp-settings-page-header a { + margin: 5px 10px 5px 0; + } + + .ppcp-settings-page-header .ppcp-inline-only { + display: none; + } +} diff --git a/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php b/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php index 8089f8075..29327e304 100644 --- a/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php +++ b/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php @@ -61,7 +61,7 @@ class HeaderRenderer { return '
PayPal -

- The all-in-one checkout solution for WooCommerce

+

- ' . __( 'The all-in-one checkout solution for WooCommerce', 'woocommerce-paypal-payments' ) . '

' . __( 'Documentation', 'woocommerce-paypal-payments' ) . ' From f9375eab44e16cbe331e556b9cefc58284f80ba3 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 16 Aug 2022 17:22:57 +0300 Subject: [PATCH 4/5] Remove underline in header --- modules/ppcp-onboarding/assets/css/onboarding.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css index cda81e5d6..bed254835 100644 --- a/modules/ppcp-onboarding/assets/css/onboarding.css +++ b/modules/ppcp-onboarding/assets/css/onboarding.css @@ -192,6 +192,10 @@ ul.ppcp-onboarding-options-sublist { margin-left: auto; } +.ppcp-settings-page-header a { + text-decoration: none; +} + @media (max-width: 1200px) { .ppcp-settings-page-header { display: block; From af6ad876e32739f157cd527f4c4d171acdc56874 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 16 Aug 2022 17:29:45 +0300 Subject: [PATCH 5/5] Fix margin --- modules/ppcp-onboarding/assets/css/onboarding.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css index bed254835..eafbe718a 100644 --- a/modules/ppcp-onboarding/assets/css/onboarding.css +++ b/modules/ppcp-onboarding/assets/css/onboarding.css @@ -213,4 +213,8 @@ ul.ppcp-onboarding-options-sublist { .ppcp-settings-page-header .ppcp-inline-only { display: none; } + + .ppcp-settings-page-header h4 { + margin-left: 0; + } }