Main

src/FlexibleTable/FlexibleTable.jsx

@@ -43,7 +43,8 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 
 		bodyBackground,
 		multipleBodyBackground,
-		bodyBackgroundOdd,
+		bodyBackgroundEven,
+		bodyTextColorEven,
 		bodyTextColor,
 		bodyTextAlign,
 		bodyFontWeight,
@@ -204,10 +205,10 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						label={__("Border row width", 'flexible-invoices-core')}
 						values={
 							{
-								headerBorderRowWidthTop: headerBorderRowWidthTop,
-								headerBorderRowWidthLeft: headerBorderRowWidthLeft,
-								headerBorderRowWidthRight: headerBorderRowWidthRight,
-								headerBorderRowWidthBottom: headerBorderRowWidthBottom,
+								headerBorderRowWidthTop,
+								headerBorderRowWidthLeft,
+								headerBorderRowWidthRight,
+								headerBorderRowWidthBottom,
 							}
 						}
 						onChange={handleMultipleAttributesChange}
@@ -223,10 +224,10 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						label={__("Border cell width", 'flexible-invoices-core')}
 						values={
 							{
-								headerBorderCellWidthTop: headerBorderCellWidthTop,
-								headerBorderCellWidthLeft: headerBorderCellWidthLeft,
-								headerBorderCellWidthRight: headerBorderCellWidthRight,
-								headerBorderCellWidthBottom: headerBorderCellWidthBottom,
+								headerBorderCellWidthTop,
+								headerBorderCellWidthLeft,
+								headerBorderCellWidthRight,
+								headerBorderCellWidthBottom,
 							}
 						}
 						onChange={handleMultipleAttributesChange}
@@ -235,13 +236,13 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 				</PanelBody>
 				<PanelBody title={__('Body appearance', 'flexible-invoices-core')}>
 					<ColorSelector
-						label={__('Text Color', 'flexible-invoices-core')}
+						label={__('Text color', 'flexible-invoices-core')}
 						value={bodyTextColor}
 						enableAlpha={false}
 						onChange={(value) => setAttributes({bodyTextColor: value})}
 					/>
 					<ColorSelector
-						label={__('Background Color', 'flexible-invoices-core')}
+						label={__('Background color', 'flexible-invoices-core')}
 						value={bodyBackground}
 						enableAlpha={false}
 						onChange={(value) => setAttributes({bodyBackground: value})}
@@ -253,11 +254,23 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						onChange={(newValue) => setAttributes({multipleBodyBackground: newValue})}
 					/>
 
-					{multipleBodyBackground ? <ColorSelector
-						label={__('Background color (odd rows)', 'flexible-invoices-core')}
-						value={bodyBackgroundOdd}
-						onChange={(value) => setAttributes({bodyBackgroundOdd: value})}
-					/> : ''}
+					{multipleBodyBackground ?
+						<>
+							<ColorSelector
+						label={__('Background color (even rows)', 'flexible-invoices-core')}
+						value={bodyBackgroundEven}
+						onChange={(value) => setAttributes({bodyBackgroundEven: value})}
+					/>
+						<ColorSelector
+							label={__('Text color (even rows)', 'flexible-invoices-core')}
+							value={bodyTextColorEven}
+							enableAlpha={false}
+							onChange={(value) => setAttributes({bodyTextColorEven: value})}
+						/>
+						</>
+						: ''
+
+					}
 
 					<NumberWithUnit
 						label={__('Font size', 'flexible-invoices-core')}
@@ -288,16 +301,17 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						label={__('Border row color', 'flexible-invoices-core')}
 						value={bodyBorderRowColor}
 						enableAlpha={false}
+						returnFormat={'hex'}
 						onChange={(value) => setAttributes({bodyBorderRowColor: value})}
 					/>
 					<QuatroInput
 						label={__("Border row width", 'flexible-invoices-core')}
 						values={
 							{
-								bodyBorderRowWidthTop: bodyBorderRowWidthTop,
-								bodyBorderRowWidthLeft: bodyBorderRowWidthLeft,
-								bodyBorderRowWidthRight: bodyBorderRowWidthRight,
-								bodyBorderRowWidthBottom: bodyBorderRowWidthBottom,
+								bodyBorderRowWidthTop,
+								bodyBorderRowWidthLeft,
+								bodyBorderRowWidthRight,
+								bodyBorderRowWidthBottom,
 							}
 						}
 						onChange={handleMultipleAttributesChange}
@@ -306,16 +320,17 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						label={__('Border cell color', 'flexible-invoices-core')}
 						value={bodyBorderCellColor}
 						enableAlpha={false}
+						returnFormat={'hex'}
 						onChange={(value) => setAttributes({bodyBorderCellColor: value})}
 					/>
 					<QuatroInput
 						label={__("Border cell width", 'flexible-invoices-core')}
 						values={
 							{
-								bodyBorderCellWidthTop: bodyBorderCellWidthTop,
-								bodyBorderCellWidthLeft: bodyBorderCellWidthLeft,
-								bodyBorderCellWidthRight: bodyBorderCellWidthRight,
-								bodyBorderCellWidthBottom: bodyBorderCellWidthBottom,
+								bodyBorderCellWidthTop,
+								bodyBorderCellWidthLeft,
+								bodyBorderCellWidthRight,
+								bodyBorderCellWidthBottom,
 							}
 						}
 						onChange={handleMultipleAttributesChange}
@@ -372,9 +387,9 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 					</thead>
 					<tbody className={"fitb-item-table-body"}>
 
-					{Array.from({length: 2}).map((_, index) => (
+					{Array.from({length: 2}).map((_, trIndex) => (
 						<tr className={"fitb-item-table-row"} style={{
-							background: (multipleBodyBackground && index === 1) ? bodyBackgroundOdd : bodyBackground,
+							background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
 							borderStyle: "solid",
 							borderColor: bodyBorderRowColor,
 							borderTopWidth: bodyBorderRowWidthTop,
@@ -398,7 +413,7 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 											key={index}
 											value={row}
 											style={{
-												color: bodyTextColor,
+												color: (multipleBodyBackground && trIndex === 1) ? bodyTextColorEven : bodyTextColor,
 												textAlign: bodyTextAlign,
 												fontStyle: bodyFontStyle,
 												fontSize: bodyFontSize,