Skip to content
Snippets Groups Projects
Commit e6ecb8d7 authored by Eryk Mika's avatar Eryk Mika
Browse files

feature: text color selector for odd rows

parent 1c6aed01
Branches
Tags
1 merge request!1Main
Pipeline #479210 failed
...@@ -44,6 +44,7 @@ export default function FlexibleTable({attributes, setAttributes, placeholders, ...@@ -44,6 +44,7 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
bodyBackground, bodyBackground,
multipleBodyBackground, multipleBodyBackground,
bodyBackgroundOdd, bodyBackgroundOdd,
bodyTextColorOdd,
bodyTextColor, bodyTextColor,
bodyTextAlign, bodyTextAlign,
bodyFontWeight, bodyFontWeight,
...@@ -235,13 +236,13 @@ export default function FlexibleTable({attributes, setAttributes, placeholders, ...@@ -235,13 +236,13 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
</PanelBody> </PanelBody>
<PanelBody title={__('Body appearance', 'flexible-invoices-core')}> <PanelBody title={__('Body appearance', 'flexible-invoices-core')}>
<ColorSelector <ColorSelector
label={__('Text Color', 'flexible-invoices-core')} label={__('Text color', 'flexible-invoices-core')}
value={bodyTextColor} value={bodyTextColor}
enableAlpha={false} enableAlpha={false}
onChange={(value) => setAttributes({bodyTextColor: value})} onChange={(value) => setAttributes({bodyTextColor: value})}
/> />
<ColorSelector <ColorSelector
label={__('Background Color', 'flexible-invoices-core')} label={__('Background color', 'flexible-invoices-core')}
value={bodyBackground} value={bodyBackground}
enableAlpha={false} enableAlpha={false}
onChange={(value) => setAttributes({bodyBackground: value})} onChange={(value) => setAttributes({bodyBackground: value})}
...@@ -253,11 +254,23 @@ export default function FlexibleTable({attributes, setAttributes, placeholders, ...@@ -253,11 +254,23 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
onChange={(newValue) => setAttributes({multipleBodyBackground: newValue})} onChange={(newValue) => setAttributes({multipleBodyBackground: newValue})}
/> />
{multipleBodyBackground ? <ColorSelector {multipleBodyBackground ?
<>
<ColorSelector
label={__('Background color (odd rows)', 'flexible-invoices-core')} label={__('Background color (odd rows)', 'flexible-invoices-core')}
value={bodyBackgroundOdd} value={bodyBackgroundOdd}
onChange={(value) => setAttributes({bodyBackgroundOdd: value})} onChange={(value) => setAttributes({bodyBackgroundOdd: value})}
/> : ''} />
<ColorSelector
label={__('Text color (odd rows)', 'flexible-invoices-core')}
value={bodyTextColorOdd}
enableAlpha={false}
onChange={(value) => setAttributes({bodyTextColorOdd: value})}
/>
</>
: ''
}
<NumberWithUnit <NumberWithUnit
label={__('Font size', 'flexible-invoices-core')} label={__('Font size', 'flexible-invoices-core')}
...@@ -398,7 +411,7 @@ export default function FlexibleTable({attributes, setAttributes, placeholders, ...@@ -398,7 +411,7 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
key={index} key={index}
value={row} value={row}
style={{ style={{
color: bodyTextColor, color: (multipleBodyBackground && index === 1) ? bodyTextColorOdd : bodyTextColor,
textAlign: bodyTextAlign, textAlign: bodyTextAlign,
fontStyle: bodyFontStyle, fontStyle: bodyFontStyle,
fontSize: bodyFontSize, fontSize: bodyFontSize,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment