mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-31 06:52:50 +08:00
💄 Improve the (broken) UI in the Styling-tab
This commit is contained in:
Philipp Stracker
parent
55d1fd3699
commit
85794e77ce
7 changed files with 198 additions and 135 deletions
|
|
@ -4,6 +4,7 @@
|
|||
@import './reusable-components/busy-state';
|
||||
@import './reusable-components/button';
|
||||
@import './reusable-components/fields';
|
||||
@import './reusable-components/hstack';
|
||||
@import './reusable-components/navigation';
|
||||
@import './reusable-components/onboarding-header';
|
||||
@import './reusable-components/payment-method-icons';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
.components-flex {
|
||||
display: flex;
|
||||
-webkit-box-align: stretch;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
|
||||
.components-h-stack {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
// Fix layout for checkboxes inside a flex-stack.
|
||||
.components-checkbox-control >.components-base-control__field > .components-flex {
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,6 +27,16 @@ $width-settings-panel: 422px;
|
|||
padding-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
border-bottom: 1px solid var(--color-separators);
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.components-radio-control__option {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,46 +75,7 @@ $width-settings-panel: 422px;
|
|||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.components-flex {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__payment-method-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r {
|
||||
&__horizontal-control {
|
||||
.components-flex {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
|
||||
.components-radio-control {
|
||||
&__option {
|
||||
gap: 12px;
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// */
|
||||
//*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +1,136 @@
|
|||
import { CheckboxControl } from '@wordpress/components';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const PayPalCheckbox = ( props ) => {
|
||||
let isChecked = null;
|
||||
export const PayPalCheckbox = ( {
|
||||
currentValue,
|
||||
label,
|
||||
value,
|
||||
checked = null,
|
||||
disabled = null,
|
||||
changeCallback,
|
||||
} ) => {
|
||||
let isChecked = checked;
|
||||
|
||||
if ( Array.isArray( props.currentValue ) ) {
|
||||
isChecked = props.currentValue.includes( props.value );
|
||||
} else {
|
||||
isChecked = props.currentValue;
|
||||
if ( null === isChecked ) {
|
||||
if ( Array.isArray( currentValue ) ) {
|
||||
isChecked = currentValue.includes( value );
|
||||
} else {
|
||||
isChecked = currentValue;
|
||||
}
|
||||
}
|
||||
|
||||
const onChange = ( newState ) => {
|
||||
let newValue;
|
||||
|
||||
if ( ! Array.isArray( currentValue ) ) {
|
||||
newValue = newState;
|
||||
} else if ( newState ) {
|
||||
newValue = [ ...currentValue, value ];
|
||||
} else {
|
||||
newValue = currentValue.filter(
|
||||
( optionValue ) => optionValue !== value
|
||||
);
|
||||
}
|
||||
|
||||
changeCallback( newValue );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r__checkbox">
|
||||
{ /* todo: Can we remove the wrapper div? */ }
|
||||
<CheckboxControl
|
||||
label={ props?.label ? props.label : '' }
|
||||
value={ props.value }
|
||||
label={ label ?? '' }
|
||||
value={ value }
|
||||
checked={ isChecked }
|
||||
onChange={ ( checked ) =>
|
||||
handleCheckboxState( checked, props )
|
||||
}
|
||||
disabled={ disabled }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PayPalCheckboxGroup = ( props ) => {
|
||||
const renderCheckboxGroup = () => {
|
||||
return props.value.map( ( checkbox ) => {
|
||||
return (
|
||||
<PayPalCheckbox
|
||||
label={ checkbox.label }
|
||||
value={ checkbox.value }
|
||||
key={ checkbox.value }
|
||||
currentValue={ props.currentValue }
|
||||
changeCallback={ props.changeCallback }
|
||||
/>
|
||||
);
|
||||
} );
|
||||
};
|
||||
export const CheckboxGroup = ( { options, value, onChange } ) => (
|
||||
<>
|
||||
{ options.map( ( checkbox ) => (
|
||||
<PayPalCheckbox
|
||||
key={ checkbox.value }
|
||||
label={ checkbox.label }
|
||||
value={ checkbox.value }
|
||||
checked={ checkbox.checked }
|
||||
disabled={ checkbox.disabled }
|
||||
currentValue={ value }
|
||||
changeCallback={ onChange }
|
||||
/>
|
||||
) ) }
|
||||
</>
|
||||
);
|
||||
|
||||
return <>{ renderCheckboxGroup() }</>;
|
||||
};
|
||||
|
||||
export const PayPalRdb = ( props ) => {
|
||||
export const PayPalRdb = ( {
|
||||
id,
|
||||
name,
|
||||
value,
|
||||
currentValue,
|
||||
handleRdbState,
|
||||
} ) => {
|
||||
return (
|
||||
<div className="ppcp-r__radio">
|
||||
{ /* todo: Can we remove the wrapper div? */ }
|
||||
<input
|
||||
id={ props?.id }
|
||||
className="ppcp-r__radio-value"
|
||||
type="radio"
|
||||
checked={ props.value === props.currentValue }
|
||||
name={ props.name }
|
||||
value={ props.value }
|
||||
onChange={ () => props.handleRdbState( props.value ) }
|
||||
id={ id }
|
||||
checked={ value === currentValue }
|
||||
name={ name }
|
||||
value={ value }
|
||||
onChange={ () => handleRdbState( value ) }
|
||||
/>
|
||||
<span className="ppcp-r__radio-presentation"></span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PayPalRdbWithContent = ( props ) => {
|
||||
const className = [ 'ppcp-r__radio-wrapper' ];
|
||||
|
||||
if ( props?.className ) {
|
||||
className.push( props.className );
|
||||
}
|
||||
export const PayPalRdbWithContent = ( {
|
||||
className,
|
||||
id,
|
||||
name,
|
||||
label,
|
||||
description,
|
||||
value,
|
||||
currentValue,
|
||||
handleRdbState,
|
||||
toggleAdditionalContent,
|
||||
children,
|
||||
} ) => {
|
||||
const wrapperClasses = classNames( 'ppcp-r__radio-wrapper', className );
|
||||
|
||||
return (
|
||||
<div className="ppcp-r__radio-outer-wrapper">
|
||||
<div className={ className }>
|
||||
<PayPalRdb { ...props } />
|
||||
<div className={ wrapperClasses }>
|
||||
<PayPalRdb
|
||||
id={ id }
|
||||
name={ name }
|
||||
value={ value }
|
||||
currentValue={ currentValue }
|
||||
handleRdbState={ handleRdbState }
|
||||
/>
|
||||
|
||||
<div className="ppcp-r__radio-content">
|
||||
<label htmlFor={ props?.id }>{ props.label }</label>
|
||||
{ props.description && (
|
||||
<label htmlFor={ id }>{ label }</label>
|
||||
{ description && (
|
||||
<p
|
||||
className="ppcp-r__radio-description"
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: props.description,
|
||||
__html: description,
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
{ props?.toggleAdditionalContent &&
|
||||
props.children &&
|
||||
props.value === props.currentValue && (
|
||||
<div className="ppcp-r__radio-content-additional">
|
||||
{ props.children }
|
||||
</div>
|
||||
) }
|
||||
{ toggleAdditionalContent && children && value === currentValue && (
|
||||
<div className="ppcp-r__radio-content-additional">
|
||||
{ children }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const handleCheckboxState = ( checked, props ) => {
|
||||
let newValue = null;
|
||||
if ( ! Array.isArray( props.currentValue ) ) {
|
||||
newValue = checked;
|
||||
} else if ( checked ) {
|
||||
newValue = [ ...props.currentValue, props.value ];
|
||||
} else {
|
||||
newValue = props.currentValue.filter(
|
||||
( value ) => value !== props.value
|
||||
);
|
||||
}
|
||||
props.changeCallback( newValue );
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* Temporary component, until the experimental HStack block editor component is stable.
|
||||
*
|
||||
* @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-hstack--docs
|
||||
* @file
|
||||
*/
|
||||
import classNames from 'classnames';
|
||||
|
||||
const HStack = ( { className, spacing = 3, children } ) => {
|
||||
const wrapperClass = classNames(
|
||||
'components-flex components-h-stack',
|
||||
className
|
||||
);
|
||||
|
||||
const styles = {
|
||||
gap: `calc(${ 4 * spacing }px)`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ wrapperClass } style={ styles }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HStack;
|
||||
|
|
@ -4,7 +4,8 @@ import { RadioControl, SelectControl } from '@wordpress/components';
|
|||
// Dummy hook.
|
||||
import { useStylingLocation, useStylingProps } from '../../Tabs/TabStyling';
|
||||
|
||||
import { PayPalCheckboxGroup } from '../../../../ReusableComponents/Fields';
|
||||
import { CheckboxGroup } from '../../../../ReusableComponents/Fields';
|
||||
import HStack from '../../../../ReusableComponents/HStack';
|
||||
import LocationSelector from './LocationSelector';
|
||||
import StylingSection from './StylingSection';
|
||||
|
||||
|
|
@ -30,6 +31,7 @@ const SettingsPanel = () => {
|
|||
export default SettingsPanel;
|
||||
|
||||
// -----
|
||||
|
||||
const SectionPaymentMethods = ( { location } ) => {
|
||||
const { paymentMethods, setPaymentMethods, paymentMethodChoices } =
|
||||
useStylingProps( location );
|
||||
|
|
@ -39,11 +41,13 @@ const SectionPaymentMethods = ( { location } ) => {
|
|||
title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
|
||||
className="payment-methods"
|
||||
>
|
||||
<PayPalCheckboxGroup
|
||||
value={ paymentMethodChoices }
|
||||
currentValue={ paymentMethods }
|
||||
changeCallback={ setPaymentMethods }
|
||||
/>
|
||||
<HStack spacing={ 6 }>
|
||||
<CheckboxGroup
|
||||
options={ paymentMethodChoices }
|
||||
value={ paymentMethods }
|
||||
onChange={ setPaymentMethods }
|
||||
/>
|
||||
</HStack>
|
||||
</StylingSection>
|
||||
);
|
||||
};
|
||||
|
|
@ -61,12 +65,13 @@ const SectionButtonLayout = ( { location } ) => {
|
|||
className="button-layout"
|
||||
title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
|
||||
>
|
||||
<RadioControl
|
||||
className="ppcp-r__horizontal-control"
|
||||
options={ layoutChoices }
|
||||
selected={ layout }
|
||||
onChange={ setLayout }
|
||||
/>
|
||||
<HStack>
|
||||
<RadioControl
|
||||
options={ layoutChoices }
|
||||
selected={ layout }
|
||||
onChange={ setLayout }
|
||||
/>
|
||||
</HStack>
|
||||
</StylingSection>
|
||||
);
|
||||
};
|
||||
|
|
@ -79,12 +84,13 @@ const SectionButtonShape = ( { location } ) => {
|
|||
title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
|
||||
className="button-shape"
|
||||
>
|
||||
<RadioControl
|
||||
className="ppcp-r__horizontal-control"
|
||||
options={ shapeChoices }
|
||||
selected={ shape }
|
||||
onChange={ setShape }
|
||||
/>
|
||||
<HStack>
|
||||
<RadioControl
|
||||
options={ shapeChoices }
|
||||
selected={ shape }
|
||||
onChange={ setShape }
|
||||
/>
|
||||
</HStack>
|
||||
</StylingSection>
|
||||
);
|
||||
};
|
||||
|
|
@ -93,10 +99,11 @@ const SectionButtonLabel = ( { location } ) => {
|
|||
const { label, setLabel, labelChoices } = useStylingProps( location );
|
||||
|
||||
return (
|
||||
<StylingSection>
|
||||
<StylingSection
|
||||
title={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
|
||||
className="button-label"
|
||||
>
|
||||
<SelectControl
|
||||
label={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
|
||||
className="ppcp-r-styling__select"
|
||||
options={ labelChoices }
|
||||
value={ label }
|
||||
onChange={ setLabel }
|
||||
|
|
@ -109,10 +116,11 @@ const SectionButtonColor = ( { location } ) => {
|
|||
const { color, setColor, colorChoices } = useStylingProps( location );
|
||||
|
||||
return (
|
||||
<StylingSection>
|
||||
<StylingSection
|
||||
title={ __( 'Button Color', 'woocommerce-paypal-payments' ) }
|
||||
className="button-color"
|
||||
>
|
||||
<SelectControl
|
||||
label={ __( 'Button Color', 'woocommerce-paypal-payments' ) }
|
||||
className=" ppcp-r-styling__select"
|
||||
options={ colorChoices }
|
||||
value={ color }
|
||||
onChange={ setColor }
|
||||
|
|
@ -134,11 +142,13 @@ const SectionButtonTagline = ( { location } ) => {
|
|||
title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
|
||||
className="tagline"
|
||||
>
|
||||
<PayPalCheckboxGroup
|
||||
value={ taglineChoices }
|
||||
currentValue={ tagline }
|
||||
changeCallback={ setTagline }
|
||||
/>
|
||||
<HStack>
|
||||
<CheckboxGroup
|
||||
options={ taglineChoices }
|
||||
value={ tagline }
|
||||
onChange={ setTagline }
|
||||
/>
|
||||
</HStack>
|
||||
</StylingSection>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -147,6 +147,12 @@ export const STYLING_SHAPES = {
|
|||
};
|
||||
|
||||
export const STYLING_PAYMENT_METHODS = {
|
||||
paypal: {
|
||||
value: '',
|
||||
label: __( 'PayPal', 'woocommerce-paypal-payments' ),
|
||||
checked: true,
|
||||
disabled: true,
|
||||
},
|
||||
venmo: {
|
||||
value: 'venmo',
|
||||
label: __( 'Venmo', 'woocommerce-paypal-payments' ),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
