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