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

fix: FlexibleTable borders fixed

parent 5581b9dd
No related branches found
No related tags found
1 merge request!1Main
Show whitespace changes
Inline Side-by-side
src/FlexibleTable/FlexibleTable.jsx
+ 56
− 69
View file @ 7b845178
import {__} from '@wordpress/i18n';
import {
RichText,
InspectorControls,
useBlockProps,
} from '@wordpress/block-editor';
import {
PanelBody,
ToggleControl,
} from '@wordpress/components';
import {RichText, InspectorControls, useBlockProps,} from '@wordpress/block-editor';
import {PanelBody, ToggleControl} from '@wordpress/components';
import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
import ColorSelector from "../ColorSelector/ColorSelector";
import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
import AlignButtons from "../AlignButtons/AlignButtons";
import FontStyles from "../FontStyles/FontStyles";
import QuatroInput from "../QuatroInput/QuatroInput";
import BlockPlaceholders from "../BlockPlaceholders/BlockPlaceholders";
import {DuoInput, NumberWithUnit, ColorSelector, FontStyles, AlignButtons, BlockPlaceholders} from "../../index";
export default function FlexibleTable({attributes, setAttributes, placeholders, footer, additionalOptions }) {
const {
......@@ -30,16 +18,22 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
headerTextDecoration,
headerFontSize,
tableBorderColor,
tableBorderWidth,
bodyBorderColumnColor,
bodyBorderColumnWidthLeft,
bodyBorderColumnWidthRight,
bodyBorderRowColor,
bodyBorderRowWidthTop,
bodyBorderRowWidthBottom,
headerBorderColumnColor,
headerBorderColumnWidthLeft,
headerBorderColumnWidthRight,
headerBorderRowColor,
headerBorderRowWidthTop,
headerBorderRowWidthLeft,
headerBorderRowWidthRight,
headerBorderRowWidthBottom,
headerBorderRowColor,
headerBorderCellWidthTop,
headerBorderCellWidthLeft,
headerBorderCellWidthRight,
headerBorderCellWidthBottom,
headerBorderCellColor,
bodyBackground,
multipleBodyBackground,
......@@ -51,18 +45,6 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
bodyFontStyle,
bodyTextDecoration,
bodyFontSize,
bodyBorderRowWidthTop,
bodyBorderRowWidthLeft,
bodyBorderRowWidthRight,
bodyBorderRowWidthBottom,
bodyBorderRowColor,
bodyBorderCellWidthTop,
bodyBorderCellWidthLeft,
bodyBorderCellWidthRight,
bodyBorderCellWidthBottom,
bodyBorderCellColor,
} = attributes;
const blockProps = useBlockProps();
......@@ -194,6 +176,21 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
}
}
/>
<ColorSelector
label={__('Table border color', 'flexible-invoices-core')}
value={tableBorderColor}
enableAlpha={false}
returnFormat={'hex'}
onChange={(value) => setAttributes({tableBorderColor: value})}
/>
<NumberWithUnit
label={__('Table border width', 'flexible-invoices-core')}
value={tableBorderWidth}
onChange={(value) => setAttributes({tableBorderWidth: value})}
/>
<ColorSelector
label={__('Border row color', 'flexible-invoices-core')}
value={headerBorderRowColor}
......@@ -201,13 +198,12 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
returnFormat={'hex'}
onChange={(value) => setAttributes({headerBorderRowColor: value})}
/>
<QuatroInput
<DuoInput
label={__("Border row width", 'flexible-invoices-core')}
values={
{
headerBorderRowWidthTop,
headerBorderRowWidthLeft,
headerBorderRowWidthRight,
headerBorderRowWidthBottom,
}
}
......@@ -215,21 +211,20 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
/>
<ColorSelector
label={__('Border cell color', 'flexible-invoices-core')}
value={headerBorderCellColor}
value={headerBorderColumnColor}
enableAlpha={false}
returnFormat={'hex'}
onChange={(value) => setAttributes({headerBorderCellColor: value})}
onChange={(value) => setAttributes({headerBorderColumnColor: value})}
/>
<QuatroInput
<DuoInput
label={__("Border cell width", 'flexible-invoices-core')}
values={
{
headerBorderCellWidthTop,
headerBorderCellWidthLeft,
headerBorderCellWidthRight,
headerBorderCellWidthBottom,
headerBorderColumnWidthLeft,
headerBorderColumnWidthRight,
}
}
layout={'row'}
onChange={handleMultipleAttributesChange}
/>
......@@ -304,13 +299,11 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
returnFormat={'hex'}
onChange={(value) => setAttributes({bodyBorderRowColor: value})}
/>
<QuatroInput
<DuoInput
label={__("Border row width", 'flexible-invoices-core')}
values={
{
bodyBorderRowWidthTop,
bodyBorderRowWidthLeft,
bodyBorderRowWidthRight,
bodyBorderRowWidthBottom,
}
}
......@@ -318,21 +311,20 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
/>
<ColorSelector
label={__('Border cell color', 'flexible-invoices-core')}
value={bodyBorderCellColor}
value={bodyBorderColumnColor}
enableAlpha={false}
returnFormat={'hex'}
onChange={(value) => setAttributes({bodyBorderCellColor: value})}
onChange={(value) => setAttributes({bodyBorderColumnColor: value})}
/>
<QuatroInput
<DuoInput
label={__("Border cell width", 'flexible-invoices-core')}
values={
{
bodyBorderCellWidthTop,
bodyBorderCellWidthLeft,
bodyBorderCellWidthRight,
bodyBorderCellWidthBottom,
bodyBorderColumnWidthRight,
bodyBorderColumnWidthLeft,
}
}
layout={'row'}
onChange={handleMultipleAttributesChange}
/>
</PanelBody>
......@@ -343,14 +335,15 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
</InspectorControls>
<div {...blockProps}>
<table className="fitb-item-table has-background" style={{
borderStyle: "solid",
borderColor: tableBorderColor,
borderWidth: tableBorderWidth,
borderCollapse: 'collapse'
}}>
<thead className={"fitb-item-table-header"} style={{
borderStyle: "solid",
borderColor: headerBorderRowColor,
borderTopWidth: headerBorderRowWidthTop,
borderLeftWidth: headerBorderRowWidthLeft,
borderRightWidth: headerBorderRowWidthRight,
borderBottomWidth: headerBorderRowWidthBottom,
}}>
<tr className={"fitb-item-table-header-row"} style={{
......@@ -361,11 +354,9 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
<th className={"fitb-item-table-header-cell"} key={index}
style={{
borderStyle: "solid",
borderColor: headerBorderCellColor,
borderTopWidth: headerBorderCellWidthTop,
borderLeftWidth: headerBorderCellWidthLeft,
borderRightWidth: headerBorderCellWidthRight,
borderBottomWidth: headerBorderCellWidthBottom,
borderColor: headerBorderColumnColor,
borderLeftWidth: headerBorderColumnWidthLeft,
borderRightWidth: headerBorderColumnWidthRight,
}}>
<RichText
tagName="div"
......@@ -393,8 +384,6 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
borderStyle: "solid",
borderColor: bodyBorderRowColor,
borderTopWidth: bodyBorderRowWidthTop,
borderLeftWidth: bodyBorderRowWidthLeft,
borderRightWidth: bodyBorderRowWidthRight,
borderBottomWidth: bodyBorderRowWidthBottom,
}}>
{rows.map((row, index) => (
......@@ -402,11 +391,9 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
<td className={"fitb-item-table-cell"} key={index}
style={{
borderStyle: "solid",
borderColor: bodyBorderCellColor,
borderTopWidth: bodyBorderCellWidthTop,
borderLeftWidth: bodyBorderCellWidthLeft,
borderRightWidth: bodyBorderCellWidthRight,
borderBottomWidth: bodyBorderCellWidthBottom,
borderColor: bodyBorderColumnColor,
borderLeftWidth: bodyBorderColumnWidthLeft,
borderRightWidth: bodyBorderColumnWidthRight,
}}>
<RichText
tagName="div"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment