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

Merge branch 'devel' into 'main'

Devel

See merge request !2
parents 76b25497 311d8d54
No related branches found
No related tags found
1 merge request!2Devel
Pipeline #488788 failed
...@@ -48,6 +48,7 @@ export default function ColorSelector({label, onChange, value, enableAlpha = tru ...@@ -48,6 +48,7 @@ export default function ColorSelector({label, onChange, value, enableAlpha = tru
{isPopupActive && {isPopupActive &&
<div className='fi-field-buttons-wrapper fi-colorpicker-wrapper'> <div className='fi-field-buttons-wrapper fi-colorpicker-wrapper'>
<ColorPicker <ColorPicker
disableAlpha = {!enableAlpha}
enableAlpha={enableAlpha} enableAlpha={enableAlpha}
color={value} color={value}
onChangeComplete={handleColorChange} onChangeComplete={handleColorChange}
......
import NumberWithUnit from "../NumberWithUnit/NumberWithUnit"; 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 keys = Object.keys(values);
const valuesArray = Object.values(values); const valuesArray = Object.values(values);
...@@ -22,6 +27,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) { ...@@ -22,6 +27,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
<NumberWithUnit <NumberWithUnit
className='fi-duo-field fi-duo-field-input' className='fi-duo-field fi-duo-field-input'
value={valuesArray[0]} value={valuesArray[0]}
units={units}
onChange={(e) => { onChange={(e) => {
handleChange(0, e) handleChange(0, e)
}} }}
...@@ -29,6 +35,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) { ...@@ -29,6 +35,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
<NumberWithUnit <NumberWithUnit
className='fi-duo-field fi-duo-field-input' className='fi-duo-field fi-duo-field-input'
value={valuesArray[1]} value={valuesArray[1]}
units={units}
onChange={(e) => handleChange(1, e)} onChange={(e) => handleChange(1, e)}
/> />
</div> </div>
......
...@@ -210,7 +210,7 @@ export default function FlexibleTable({ ...@@ -210,7 +210,7 @@ export default function FlexibleTable({
/> />
<DuoInput <DuoInput
label={__("Border row width", 'flexible-invoices-core')} label={__("Row top/bottom border width", 'flexible-invoices-core')}
values={ values={
{ {
headerBorderRowWidthTop, headerBorderRowWidthTop,
...@@ -227,7 +227,7 @@ export default function FlexibleTable({ ...@@ -227,7 +227,7 @@ export default function FlexibleTable({
onChange={(value) => setAttributes({headerBorderColumnColor: value})} onChange={(value) => setAttributes({headerBorderColumnColor: value})}
/> />
<DuoInput <DuoInput
label={__("Border cell width", 'flexible-invoices-core')} label={__("Column left/right border width", 'flexible-invoices-core')}
values={ values={
{ {
headerBorderColumnWidthLeft, headerBorderColumnWidthLeft,
...@@ -254,7 +254,7 @@ export default function FlexibleTable({ ...@@ -254,7 +254,7 @@ export default function FlexibleTable({
/> />
<ToggleControl <ToggleControl
label={__('Duo color table', 'flexible-invoices-core')} label={__('Alternating row colors', 'flexible-invoices-core')}
checked={multipleBodyBackground} checked={multipleBodyBackground}
onChange={(newValue) => setAttributes({multipleBodyBackground: newValue})} onChange={(newValue) => setAttributes({multipleBodyBackground: newValue})}
/> />
...@@ -303,20 +303,25 @@ export default function FlexibleTable({ ...@@ -303,20 +303,25 @@ export default function FlexibleTable({
} }
/> />
<ColorSelector <ColorSelector
label={__('Border row color', 'flexible-invoices-core')} label={__('Row top/bottom border width', 'flexible-invoices-core')}
value={bodyBorderRowColor} value={bodyBorderRowColor}
enableAlpha={false} enableAlpha={false}
returnFormat={'hex'} returnFormat={'hex'}
onChange={(value) => setAttributes({bodyBorderRowColor: value})} onChange={(value) => setAttributes({bodyBorderRowColor: value})}
/> />
<DuoInput <DuoInput
label={__("Border row width", 'flexible-invoices-core')} label={__("Column left/right border width", 'flexible-invoices-core')}
values={ values={
{ {
bodyBorderRowWidthTop, bodyBorderRowWidthTop,
bodyBorderRowWidthBottom, bodyBorderRowWidthBottom,
} }
} }
units={ [
{ label: 'px', value: 'px' },
{ label: 'em', value: 'em' },
{ label: 'pt', value: 'pt' }
] }
onChange={handleMultipleAttributesChange} onChange={handleMultipleAttributesChange}
/> />
<ColorSelector <ColorSelector
...@@ -335,6 +340,11 @@ export default function FlexibleTable({ ...@@ -335,6 +340,11 @@ export default function FlexibleTable({
} }
} }
layout={'row'} layout={'row'}
units={ [
{ label: 'px', value: 'px' },
{ label: 'em', value: 'em' },
{ label: 'pt', value: 'pt' }
] }
onChange={handleMultipleAttributesChange} onChange={handleMultipleAttributesChange}
/> />
</PanelBody> </PanelBody>
......
...@@ -30,6 +30,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) { ...@@ -30,6 +30,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) {
{Array.from({length: 2}).map((_, trIndex) => ( {Array.from({length: 2}).map((_, trIndex) => (
<tr className={"fitb-item-table-row"} style={{ <tr className={"fitb-item-table-row"} style={{
background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground, background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
borderWidth: "0px",
borderStyle: "solid", borderStyle: "solid",
borderColor: bodyBorderRowColor, borderColor: bodyBorderRowColor,
borderTopWidth: bodyBorderRowWidthTop, borderTopWidth: bodyBorderRowWidthTop,
...@@ -39,6 +40,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) { ...@@ -39,6 +40,7 @@ export default function TableBody({tableStyles, updateCell, rows, states}) {
states[index] ? states[index] ?
<td className={"fitb-item-table-cell"} key={index} <td className={"fitb-item-table-cell"} key={index}
style={{ style={{
borderWidth: "0px",
borderStyle: "solid", borderStyle: "solid",
borderColor: bodyBorderColumnColor, borderColor: bodyBorderColumnColor,
borderLeftWidth: bodyBorderColumnWidthLeft, borderLeftWidth: bodyBorderColumnWidthLeft,
......
...@@ -21,6 +21,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states} ...@@ -21,6 +21,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states}
return ( return (
<thead className={"fitb-item-table-header"} style={{ <thead className={"fitb-item-table-header"} style={{
borderStyle: "solid", borderStyle: "solid",
borderWidth: "0px",
borderColor: headerBorderRowColor, borderColor: headerBorderRowColor,
borderTopWidth: headerBorderRowWidthTop, borderTopWidth: headerBorderRowWidthTop,
borderBottomWidth: headerBorderRowWidthBottom, borderBottomWidth: headerBorderRowWidthBottom,
...@@ -33,6 +34,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states} ...@@ -33,6 +34,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states}
<th className={"fitb-item-table-header-cell"} key={index} <th className={"fitb-item-table-header-cell"} key={index}
style={{ style={{
borderStyle: "solid", borderStyle: "solid",
borderWidth: "0px",
borderColor: headerBorderColumnColor, borderColor: headerBorderColumnColor,
borderLeftWidth: headerBorderColumnWidthLeft, borderLeftWidth: headerBorderColumnWidthLeft,
borderRightWidth: headerBorderColumnWidthRight, borderRightWidth: headerBorderColumnWidthRight,
......
import {SelectControl, TextControl} from "@wordpress/components"; import {SelectControl, TextControl} from "@wordpress/components";
import {useState} from "react"; 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) { const splitValues = function (fontSize) {
...@@ -9,22 +17,23 @@ export default function NumberWithUnit({label, onChange, value, className}) { ...@@ -9,22 +17,23 @@ export default function NumberWithUnit({label, onChange, value, className}) {
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) { if (!match) {
return { size: "16", unit: "px" }; return { size: "16", unit: "px" };
} }
return { return {
size: match[1], size: match[1],
unit: match[2] unit: match[2]
}; };
} };
const [unit, setUnit] = useState(splitValues(value).unit); const [unit, setUnit] = useState(splitValues(value).unit);
const [size, setSize] = useState(splitValues(value).size); const [size, setSize] = useState(splitValues(value).size);
const handleChange = (newSize, newUnit) => { const handleChange = (newSize, newUnit) => {
if (onChange) { if (onChange) {
onChange(newSize + newUnit); onChange(newSize + newUnit);
...@@ -37,7 +46,8 @@ export default function NumberWithUnit({label, onChange, value, className}) { ...@@ -37,7 +46,8 @@ export default function NumberWithUnit({label, onChange, value, className}) {
<div className='fi-field-label-wrapper'> <div className='fi-field-label-wrapper'>
<span className='fi-field-label'>{label}</span> <span className='fi-field-label'>{label}</span>
</div> </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 <TextControl
style={{flex: 3}} style={{flex: 3}}
type={'number'} type={'number'}
...@@ -49,12 +59,7 @@ export default function NumberWithUnit({label, onChange, value, className}) { ...@@ -49,12 +59,7 @@ export default function NumberWithUnit({label, onChange, value, className}) {
}} }}
/> />
<SelectControl <SelectControl
options={[ options={units}
{label: 'px', value: 'px'},
{label: '%', value: '%'},
{label: 'em', value: 'em'},
{label: 'pt', value: 'pt'},
]}
style={{minWidth: '56px'}} style={{minWidth: '56px'}}
value={unit} value={unit}
onChange={(value) => { onChange={(value) => {
......
import NumberWithUnit from "../NumberWithUnit/NumberWithUnit"; 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 keys = Object.keys(values);
const valuesArray = Object.values(values); const valuesArray = Object.values(values);
...@@ -23,6 +30,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -23,6 +30,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[0]} value={valuesArray[0]}
units={units}
onChange={(e) => { onChange={(e) => {
handleChange(0, e) handleChange(0, e)
}} }}
...@@ -32,11 +40,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -32,11 +40,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[1]} value={valuesArray[1]}
units={units}
onChange={(e) => handleChange(1, e)} onChange={(e) => handleChange(1, e)}
/> />
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[2]} value={valuesArray[2]}
units={units}
onChange={(e) => handleChange(2, e)} onChange={(e) => handleChange(2, e)}
/> />
</div> </div>
...@@ -44,6 +54,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -44,6 +54,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[3]} value={valuesArray[3]}
units={units}
onChange={(e) => handleChange(3, e)} onChange={(e) => handleChange(3, e)}
/> />
</div> </div>
...@@ -54,6 +65,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -54,6 +65,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[0]} value={valuesArray[0]}
units={units}
onChange={(e) => { onChange={(e) => {
handleChange(0, e) handleChange(0, e)
}} }}
...@@ -61,6 +73,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -61,6 +73,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[1]} value={valuesArray[1]}
units={units}
onChange={(e) => handleChange(1, e)} onChange={(e) => handleChange(1, e)}
/> />
</div> </div>
...@@ -68,11 +81,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'}) ...@@ -68,11 +81,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[2]} value={valuesArray[2]}
units={units}
onChange={(e) => handleChange(2, e)} onChange={(e) => handleChange(2, e)}
/> />
<NumberWithUnit <NumberWithUnit
className='fi-quatro-field fi-quatro-field-input' className='fi-quatro-field fi-quatro-field-input'
value={valuesArray[3]} value={valuesArray[3]}
units={units}
onChange={(e) => handleChange(3, e)} onChange={(e) => handleChange(3, e)}
/> />
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment