diff --git a/src/ColorSelector/ColorSelector.jsx b/src/ColorSelector/ColorSelector.jsx
index 18452f03e603ca83420eee64e54dc788868f8822..03744e0d4847a18c051ba38df74d4a41375465ab 100644
--- a/src/ColorSelector/ColorSelector.jsx
+++ b/src/ColorSelector/ColorSelector.jsx
@@ -48,6 +48,7 @@ export default function ColorSelector({label, onChange, value, enableAlpha = tru
{isPopupActive &&
<div className='fi-field-buttons-wrapper fi-colorpicker-wrapper'>
<ColorPicker
+ disableAlpha = {!enableAlpha}
enableAlpha={enableAlpha}
color={value}
onChangeComplete={handleColorChange}
diff --git a/src/DuoInput/DuoInput.jsx b/src/DuoInput/DuoInput.jsx
index 81b6e0eb7ba66aa39e7632633516a2d6b85c34a3..932aecba360a582b7285a236803e7174da4a3b65 100644
--- a/src/DuoInput/DuoInput.jsx
+++ b/src/DuoInput/DuoInput.jsx
@@ -1,6 +1,11 @@
import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
-export default function DuoInput({label, onChange, values, layout = 'column'}) {
+export default function DuoInput({label, onChange, values, layout = 'column', units = [
+ {label: 'px', value: 'px'},
+ {label: '%', value: '%'},
+ {label: 'em', value: 'em'},
+ {label: 'pt', value: 'pt'},
+]}) {
const keys = Object.keys(values);
const valuesArray = Object.values(values);
@@ -22,6 +27,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
<NumberWithUnit
className='fi-duo-field fi-duo-field-input'
value={valuesArray[0]}
+ units={units}
onChange={(e) => {
handleChange(0, e)
}}
@@ -29,6 +35,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
<NumberWithUnit
className='fi-duo-field fi-duo-field-input'
value={valuesArray[1]}
+ units={units}
onChange={(e) => handleChange(1, e)}
/>
</div>
diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx
index c9ad42965bb17fdcb58c4b3d3cff1089229f837f..f3da2a4e3983f2c45c09cbb846f1d619774be4a1 100644
--- a/src/FlexibleTable/FlexibleTable.jsx
+++ b/src/FlexibleTable/FlexibleTable.jsx
@@ -210,7 +210,7 @@ export default function FlexibleTable({
/>
<DuoInput
- label={__("Border row width", 'flexible-invoices-core')}
+ label={__("Row top/bottom border width", 'flexible-invoices-core')}
values={
{
headerBorderRowWidthTop,
@@ -227,7 +227,7 @@ export default function FlexibleTable({
onChange={(value) => setAttributes({headerBorderColumnColor: value})}
/>
<DuoInput
- label={__("Border cell width", 'flexible-invoices-core')}
+ label={__("Column left/right border width", 'flexible-invoices-core')}
values={
{
headerBorderColumnWidthLeft,
@@ -254,7 +254,7 @@ export default function FlexibleTable({
/>
<ToggleControl
- label={__('Duo color table', 'flexible-invoices-core')}
+ label={__('Alternating row colors', 'flexible-invoices-core')}
checked={multipleBodyBackground}
onChange={(newValue) => setAttributes({multipleBodyBackground: newValue})}
/>
@@ -303,20 +303,25 @@ export default function FlexibleTable({
}
/>
<ColorSelector
- label={__('Border row color', 'flexible-invoices-core')}
+ label={__('Row top/bottom border width', 'flexible-invoices-core')}
value={bodyBorderRowColor}
enableAlpha={false}
returnFormat={'hex'}
onChange={(value) => setAttributes({bodyBorderRowColor: value})}
/>
<DuoInput
- label={__("Border row width", 'flexible-invoices-core')}
+ label={__("Column left/right border width", 'flexible-invoices-core')}
values={
{
bodyBorderRowWidthTop,
bodyBorderRowWidthBottom,
}
}
+ units={ [
+ { label: 'px', value: 'px' },
+ { label: 'em', value: 'em' },
+ { label: 'pt', value: 'pt' }
+ ] }
onChange={handleMultipleAttributesChange}
/>
<ColorSelector
@@ -335,6 +340,11 @@ export default function FlexibleTable({
}
}
layout={'row'}
+ units={ [
+ { label: 'px', value: 'px' },
+ { label: 'em', value: 'em' },
+ { label: 'pt', value: 'pt' }
+ ] }
onChange={handleMultipleAttributesChange}
/>
</PanelBody>
diff --git a/src/FlexibleTable/TableBody.jsx b/src/FlexibleTable/TableBody.jsx
index 24f0a66405472f3f84b9c5eba62dc813e584f172..0415768a2f92c52c5f0110476fd7f28b29689510 100644
--- a/src/FlexibleTable/TableBody.jsx
+++ b/src/FlexibleTable/TableBody.jsx
@@ -30,6 +30,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) {
{Array.from({length: 2}).map((_, trIndex) => (
<tr className={"fitb-item-table-row"} style={{
background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
+ borderWidth: "0px",
borderStyle: "solid",
borderColor: bodyBorderRowColor,
borderTopWidth: bodyBorderRowWidthTop,
@@ -39,6 +40,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) {
states[index] ?
<td className={"fitb-item-table-cell"} key={index}
style={{
+ borderWidth: "0px",
borderStyle: "solid",
borderColor: bodyBorderColumnColor,
borderLeftWidth: bodyBorderColumnWidthLeft,
diff --git a/src/FlexibleTable/TableHead.jsx b/src/FlexibleTable/TableHead.jsx
index 1b07ee2bb81a1295270960230c3d981bac835e39..2f66c338d963f130b84c3bb4a61b1ad9f9a9dc07 100644
--- a/src/FlexibleTable/TableHead.jsx
+++ b/src/FlexibleTable/TableHead.jsx
@@ -21,6 +21,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states}
return (
<thead className={"fitb-item-table-header"} style={{
borderStyle: "solid",
+ borderWidth: "0px",
borderColor: headerBorderRowColor,
borderTopWidth: headerBorderRowWidthTop,
borderBottomWidth: headerBorderRowWidthBottom,
@@ -33,6 +34,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states}
<th className={"fitb-item-table-header-cell"} key={index}
style={{
borderStyle: "solid",
+ borderWidth: "0px",
borderColor: headerBorderColumnColor,
borderLeftWidth: headerBorderColumnWidthLeft,
borderRightWidth: headerBorderColumnWidthRight,
diff --git a/src/NumberWithUnit/NumberWithUnit.jsx b/src/NumberWithUnit/NumberWithUnit.jsx
index b4853afdd19f431804f6c3d4f863756b50d292a4..9ab0fda00f6260279a561fc02f8ce1362ab660fe 100644
--- a/src/NumberWithUnit/NumberWithUnit.jsx
+++ b/src/NumberWithUnit/NumberWithUnit.jsx
@@ -1,30 +1,39 @@
import {SelectControl, TextControl} from "@wordpress/components";
import {useState} from "react";
-export default function NumberWithUnit({label, onChange, value, className}) {
+export default function NumberWithUnit({
+ label, onChange, value, className,
+ units = [
+ {label: 'px', value: 'px'},
+ {label: '%', value: '%'},
+ {label: 'em', value: 'em'},
+ {label: 'pt', value: 'pt'},
+ ]
+ }) {
const splitValues = function (fontSize) {
- if( !fontSize ) {
- return {size: "0", unit: "px"};
+ if (!fontSize) {
+ return { size: "0", unit: "px" };
}
- const match = fontSize.match(/^(\d+)([a-z%]+)$/i);
+ const match = fontSize.match(/^(\d*\.?\d+)([a-z%]+)$/i);
if (!match) {
- return {size: "16", unit: "px"};
+ return { size: "16", unit: "px" };
}
+
return {
size: match[1],
unit: match[2]
};
- }
+ };
+
const [unit, setUnit] = useState(splitValues(value).unit);
const [size, setSize] = useState(splitValues(value).size);
-
const handleChange = (newSize, newUnit) => {
if (onChange) {
onChange(newSize + newUnit);
@@ -37,7 +46,8 @@ export default function NumberWithUnit({label, onChange, value, className}) {
<div className='fi-field-label-wrapper'>
<span className='fi-field-label'>{label}</span>
</div>
- <div className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}>
+ <div
+ className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}>
<TextControl
style={{flex: 3}}
type={'number'}
@@ -49,13 +59,8 @@ export default function NumberWithUnit({label, onChange, value, className}) {
}}
/>
<SelectControl
- options={[
- {label: 'px', value: 'px'},
- {label: '%', value: '%'},
- {label: 'em', value: 'em'},
- {label: 'pt', value: 'pt'},
- ]}
- style={{minWidth:'56px'}}
+ options={units}
+ style={{minWidth: '56px'}}
value={unit}
onChange={(value) => {
setUnit(value);
diff --git a/src/QuatroInput/QuatroInput.jsx b/src/QuatroInput/QuatroInput.jsx
index 15e2795acd6b66bcb41b48a8bef817f6b842cb0e..724481d44618cc5b814585a7937373e1dbbaa43d 100644
--- a/src/QuatroInput/QuatroInput.jsx
+++ b/src/QuatroInput/QuatroInput.jsx
@@ -1,6 +1,13 @@
import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
-export default function QuatroInput({label, onChange, values, layout = 'cross'}) {
+export default function QuatroInput({
+ label, onChange, values, layout = 'cross', units = [
+ {label: 'px', value: 'px'},
+ {label: '%', value: '%'},
+ {label: 'em', value: 'em'},
+ {label: 'pt', value: 'pt'}
+ ]
+ }) {
const keys = Object.keys(values);
const valuesArray = Object.values(values);
@@ -23,6 +30,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[0]}
+ units={units}
onChange={(e) => {
handleChange(0, e)
}}
@@ -32,11 +40,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[1]}
+ units={units}
onChange={(e) => handleChange(1, e)}
/>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[2]}
+ units={units}
onChange={(e) => handleChange(2, e)}
/>
</div>
@@ -44,6 +54,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[3]}
+ units={units}
onChange={(e) => handleChange(3, e)}
/>
</div>
@@ -54,6 +65,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[0]}
+ units={units}
onChange={(e) => {
handleChange(0, e)
}}
@@ -61,6 +73,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[1]}
+ units={units}
onChange={(e) => handleChange(1, e)}
/>
</div>
@@ -68,11 +81,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[2]}
+ units={units}
onChange={(e) => handleChange(2, e)}
/>
<NumberWithUnit
className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[3]}
+ units={units}
onChange={(e) => handleChange(3, e)}
/>
</div>