From 5b5120ea8f108da50616905fbf0bdc2b58b509d7 Mon Sep 17 00:00:00 2001 From: Eryk Mika <eryk.mika@wpdesk.eu> Date: Thu, 13 Mar 2025 12:54:06 +0100 Subject: [PATCH 1/6] feature: added units for fields --- src/DuoInput/DuoInput.jsx | 9 ++++++++- src/NumberWithUnit/NumberWithUnit.jsx | 25 ++++++++++++++----------- src/QuatroInput/QuatroInput.jsx | 17 ++++++++++++++++- 3 files changed, 38 insertions(+), 13 deletions(-) diff --git a/src/DuoInput/DuoInput.jsx b/src/DuoInput/DuoInput.jsx index 81b6e0e..932aecb 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/NumberWithUnit/NumberWithUnit.jsx b/src/NumberWithUnit/NumberWithUnit.jsx index b4853af..981ac5b 100644 --- a/src/NumberWithUnit/NumberWithUnit.jsx +++ b/src/NumberWithUnit/NumberWithUnit.jsx @@ -1,11 +1,19 @@ 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 ) { + if (!fontSize) { return {size: "0", unit: "px"}; } @@ -24,7 +32,6 @@ export default function NumberWithUnit({label, onChange, value, className}) { const [size, setSize] = useState(splitValues(value).size); - const handleChange = (newSize, newUnit) => { if (onChange) { onChange(newSize + newUnit); @@ -37,7 +44,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 +57,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 15e2795..724481d 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> -- GitLab From 9f0a81a317ca9dbf19bafc2fbce4ae0ab3da6dfc Mon Sep 17 00:00:00 2001 From: Eryk Mika <eryk.mika@wpdesk.eu> Date: Thu, 13 Mar 2025 12:54:33 +0100 Subject: [PATCH 2/6] fix: color selector use legacy field cuz of compatibility issues --- src/ColorSelector/ColorSelector.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ColorSelector/ColorSelector.jsx b/src/ColorSelector/ColorSelector.jsx index 18452f0..03744e0 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} -- GitLab From 240f871429721f908014a1b4b7f80bc22837cb03 Mon Sep 17 00:00:00 2001 From: Eryk Mika <eryk.mika@wpdesk.eu> Date: Thu, 13 Mar 2025 14:38:14 +0100 Subject: [PATCH 3/6] fix: preset units, changed label --- src/FlexibleTable/FlexibleTable.jsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx index c9ad429..84ee3da 100644 --- a/src/FlexibleTable/FlexibleTable.jsx +++ b/src/FlexibleTable/FlexibleTable.jsx @@ -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})} /> @@ -317,6 +317,11 @@ export default function FlexibleTable({ 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> -- GitLab From 6747c4aa7083dab8893a71404debd13531d7ca58 Mon Sep 17 00:00:00 2001 From: Eryk Mika <eryk.mika@wpdesk.eu> Date: Fri, 14 Mar 2025 15:29:01 +0100 Subject: [PATCH 4/6] fix: support for floats --- src/NumberWithUnit/NumberWithUnit.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/NumberWithUnit/NumberWithUnit.jsx b/src/NumberWithUnit/NumberWithUnit.jsx index 981ac5b..9ab0fda 100644 --- a/src/NumberWithUnit/NumberWithUnit.jsx +++ b/src/NumberWithUnit/NumberWithUnit.jsx @@ -14,19 +14,21 @@ export default function NumberWithUnit({ const splitValues = function (fontSize) { if (!fontSize) { - return {size: "0", unit: "px"}; + 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); -- GitLab From d086b12bdea298a04c1e0da477e04062fa3f2d3a Mon Sep 17 00:00:00 2001 From: Eryk Mika <eryk.mika@wpdesk.eu> Date: Fri, 14 Mar 2025 15:29:25 +0100 Subject: [PATCH 5/6] fix: remove right/left width for rows border --- src/FlexibleTable/TableBody.jsx | 2 ++ src/FlexibleTable/TableHead.jsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/FlexibleTable/TableBody.jsx b/src/FlexibleTable/TableBody.jsx index 24f0a66..0415768 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 1b07ee2..2f66c33 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, -- GitLab From 311d8d54bd16f6223661264312c6f6c43b98d411 Mon Sep 17 00:00:00 2001 From: Eryk Mika <eryk.mika@wpdesk.eu> Date: Tue, 18 Mar 2025 13:01:40 +0100 Subject: [PATCH 6/6] chore: border width labels changed --- src/FlexibleTable/FlexibleTable.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx index 84ee3da..f3da2a4 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, @@ -303,14 +303,14 @@ 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, -- GitLab