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 with stages
in 5 seconds
Hide whitespace changes
Inline Side-by-side
src/ColorSelector/ColorSelector.jsx
+ 1
− 0
View file @ c47c124a
......@@ -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}
......
src/DuoInput/DuoInput.jsx
+ 8
− 1
View file @ c47c124a
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>
......
src/FlexibleTable/FlexibleTable.jsx
+ 15
− 5
View file @ c47c124a
......@@ -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>
......
src/FlexibleTable/TableBody.jsx
+ 2
− 0
View file @ c47c124a
......@@ -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,
......
src/FlexibleTable/TableHead.jsx
+ 2
− 0
View file @ c47c124a
......@@ -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,
......
src/NumberWithUnit/NumberWithUnit.jsx
+ 20
− 15
View file @ c47c124a
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);
......
src/QuatroInput/QuatroInput.jsx
+ 16
− 1
View file @ c47c124a
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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment