From 9137712196f4c07dc9b2ac7b8279d0c135fbc76b Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 21 Nov 2024 13:08:38 +0100 Subject: [PATCH] Settings UI: Migrate to two column design --- .../_settings-wrapper.scss | 24 ++- .../components/screens/_settings-global.scss | 7 + .../css/components/screens/_settings.scss | 8 + .../ppcp-settings/resources/css/style.scss | 4 +- .../ReusableComponents/Navigation.js | 184 ++++++++++-------- .../ReusableComponents/SettingsCard.js | 1 - .../Screens/Overview/TabOverview.js | 2 - .../js/Components/Screens/Settings.js | 7 +- .../Components/Screens/SettingsNavigation.js | 37 ++++ .../js/Components/Screens/SettingsScreen.js | 19 ++ 10 files changed, 202 insertions(+), 91 deletions(-) create mode 100644 modules/ppcp-settings/resources/css/components/screens/_settings-global.scss create mode 100644 modules/ppcp-settings/resources/css/components/screens/_settings.scss create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss index 7eba20d20..dd83011c0 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss @@ -17,21 +17,35 @@ } &-settings-card { - background-color: $color-white; - padding: 48px; - border-radius: 8px; - box-shadow: 0 2px 4px 0 #0000001A; + @media screen and (min-width: 960px) { + display: flex; + gap: 48px; + } + @media screen and (max-width: 480px) { padding: 24px; } &__header { display: flex; - align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 2px solid $color-gray-700; margin-bottom: 32px; + + @media screen and (min-width: 960px) { + width: 280px; + flex-shrink: 0; + border-bottom: none; + margin-bottom: 0; + padding-bottom: 0; + } + } + + &__content { + @media screen and (min-width: 960px) { + flex: 1; + } } &__title { diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings-global.scss b/modules/ppcp-settings/resources/css/components/screens/_settings-global.scss new file mode 100644 index 000000000..629d89d76 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/screens/_settings-global.scss @@ -0,0 +1,7 @@ +body:has(.ppcp-r-container--settings) { + background-color: #fff !important; + + .notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce form > h2, #screen-meta-links { + display: none !important; + } +} diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss new file mode 100644 index 000000000..c3879a3db --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss @@ -0,0 +1,8 @@ +.ppcp-r-tabs.settings, +.ppcp-r-container--settings { + --max-container-width: var(--max-width-settings); + + .ppcp-r-inner-container { + max-width: var(--max-container-width); + } +} diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss index c890803c1..72a913fdf 100644 --- a/modules/ppcp-settings/resources/css/style.scss +++ b/modules/ppcp-settings/resources/css/style.scss @@ -20,10 +20,12 @@ @import './components/reusable-components/spinner-overlay'; @import './components/reusable-components/welcome-docs'; @import './components/screens/onboarding'; + @import './components/screens/settings'; @import './components/screens/overview/tab-overview'; @import './components/screens/overview/tab-payment-methods'; - @import 'components/screens/overview/tab-settings'; + @import './components/screens/overview/tab-settings'; } @import './components/reusable-components/payment-method-modal'; @import './components/screens/onboarding-global'; +@import './components/screens/settings-global'; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js index 032d9c5c5..18b13e976 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js @@ -1,16 +1,14 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import {useOnboardingStepBusiness, useOnboardingStepProducts} from "../../data"; -import data from "../../utils/data"; +import { + useOnboardingStepBusiness, + useOnboardingStepProducts, +} from '../../data'; +import data from '../../utils/data'; -const Navigation = ( { - setStep, - setCompleted, - currentStep, - stepperOrder -} ) => { - const isLastStep = () => currentStep + 1 === stepperOrder.length; - const isFistStep = () => currentStep === 0; +const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => { + const isLastStep = () => currentStep + 1 === stepperOrder.length; + const isFistStep = () => currentStep === 0; const navigateBy = ( stepDirection ) => { let newStep = currentStep + stepDirection; @@ -26,77 +24,109 @@ const Navigation = ( { } }; - const { products, toggleProduct } = useOnboardingStepProducts(); - const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness(); + const { products, toggleProduct } = useOnboardingStepProducts(); + const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness(); - let navigationTitle = ''; - let disabled = false; + let navigationTitle = ''; + let disabled = false; - switch ( currentStep ) { - case 1: - navigationTitle = __( 'Set up store type', 'woocommerce-paypal-payments' ); - disabled = isCasualSeller === null - break; - case 2: - navigationTitle = __( 'Select product types', 'woocommerce-paypal-payments' ); - disabled = products.length < 1 - break; - case 3: - navigationTitle = __( 'Choose checkout options', 'woocommerce-paypal-payments' ); - case 4: - navigationTitle = __( 'Connect your PayPal account', 'woocommerce-paypal-payments' ); - break; - default: - navigationTitle = __( 'PayPal Payments', 'woocommerce-paypal-payments' ); - } + switch ( currentStep ) { + case 1: + navigationTitle = __( + 'Set up store type', + 'woocommerce-paypal-payments' + ); + disabled = isCasualSeller === null; + break; + case 2: + navigationTitle = __( + 'Select product types', + 'woocommerce-paypal-payments' + ); + disabled = products.length < 1; + break; + case 3: + navigationTitle = __( + 'Choose checkout options', + 'woocommerce-paypal-payments' + ); + case 4: + navigationTitle = __( + 'Connect your PayPal account', + 'woocommerce-paypal-payments' + ); + break; + default: + navigationTitle = __( + 'PayPal Payments', + 'woocommerce-paypal-payments' + ); + } return ( -
-
-
- {data().getImage('icon-arrow-left.svg')} - {!isFistStep() ? ( - - ) : ( - - {navigationTitle} - - )} -
- {!isFistStep() && ( -
- - { __( 'Save and exit', 'woocommerce-paypal-payments' ) } - - {!isLastStep() && ( - - )} -
- )} -
-
-
- ); +
+
+
+ { data().getImage( 'icon-arrow-left.svg' ) } + { ! isFistStep() ? ( + + ) : ( + + { navigationTitle } + + ) } +
+ { ! isFistStep() && ( +
+ + { __( + 'Save and exit', + 'woocommerce-paypal-payments' + ) } + + { ! isLastStep() && ( + + ) } +
+ ) } +
+
+
+ ); }; export default Navigation; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js index bd0a76449..11693d172 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js @@ -9,7 +9,6 @@ const SettingsCard = ( props ) => { return (
- { data().getImage( props.icon ) }
{ props.title } diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js index 63e2d105f..6e913642f 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js @@ -24,7 +24,6 @@ const TabOverview = () => { { todosData.length > 0 && ( { ) } { const onboardingProgress = useOnboardingStep(); @@ -15,9 +14,7 @@ const Settings = () => { return ; } - const tabs = getSettingsTabs( onboardingProgress ); - - return ; + return ; }; export default Settings; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js b/modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js new file mode 100644 index 000000000..5552dd177 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js @@ -0,0 +1,37 @@ +import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import data from '../../utils/data'; + +const SettingsNavigation = ( {} ) => { + return ( +
+
+
+ { data().getImage( 'icon-arrow-left.svg' ) } + + { __( + 'PayPal Payments', + 'woocommerce-paypal-payments' + ) } + +
+ { +
+ +
+ } +
+
+ ); +}; + +export default SettingsNavigation; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js b/modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js new file mode 100644 index 000000000..88fa12924 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js @@ -0,0 +1,19 @@ +import { getSettingsTabs } from './tabs'; +import SettingsNavigation from './SettingsNavigation'; +import Container from '../ReusableComponents/Container'; +import TabNavigation from '../ReusableComponents/TabNavigation'; + +const SettingsScreen = () => { + const tabs = getSettingsTabs(); + + return ( + <> + + + + + + ); +}; + +export default SettingsScreen;