Skip to content

Commit

Permalink
General improvements to the table
Browse files Browse the repository at this point in the history
  • Loading branch information
@oakesjosh
oakesjosh committed Nov 13, 2024
1 parent d5bcafd commit 4f37958
Show file tree
Hide file tree
Showing 9 changed files with 349 additions and 149 deletions.
14 changes: 12 additions & 2 deletions includes/blocks/class-kadence-blocks-table-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {

$css->set_selector( '.kb-table-container' . esc_attr( $unique_id ) );
$css->render_typography( $attributes, 'dataTypography' );
$css->render_measure_output( $attributes, 'padding', 'padding' );
$css->render_measure_output( $attributes, 'margin', 'margin' );

$max_width_unit = !empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px';
$css->render_responsive_range( $attributes, 'maxWidth', 'max-width', $max_width_unit );
Expand All @@ -86,11 +88,11 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$css->add_property('overflow-x', 'auto');
}

if ( ! empty( $attributes['useFixedWidths'] ) && ! empty( $attributes['columnSettings'] ) && is_array( $attributes['columnSettings'] ) ) {
if ( ! empty( $attributes['columnSettings'] ) && is_array( $attributes['columnSettings'] ) ) {
$has_fixed_columns = false;

foreach ( $attributes['columnSettings'] as $index => $settings ) {
if ( ! empty( $settings['useFixed'] ) && isset( $settings['width'] ) && '' !== $settings['width'] ) {
if ( ( empty( $settings['useAuto'] ) || !$settings['useAuto'] ) && isset( $settings['width'] ) && '' !== $settings['width'] ) {
$has_fixed_columns = true;
$width_unit = ! empty( $settings['unit'] ) ? $settings['unit'] : '%';

Expand All @@ -108,6 +110,14 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
}
}

$css->set_selector( '.kb-table' . esc_attr( $unique_id ) . ' tr' );
$css->render_responsive_size( $attributes, [ 'rowMinHeight', 'tabletRowMinHeight', 'mobileRowMinHeight' ], 'height' );

if( !empty( $attributes['overflowXScroll'] ) ){
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ));
$css->add_property( 'overflow-x', 'scroll');
}

if( !empty( $attributes['stickyFirstRow']) ) {
$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:first-child');
$css->add_property( 'position', 'sticky');
Expand Down
6 changes: 4 additions & 2 deletions includes/blocks/class-kadence-blocks-table-row-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,12 +77,14 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {

$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );

$css->set_selector( '.kb-table .kb-table-row' . $unique_id );
$css->set_selector( '.kb-table-container .kb-table tr.kb-table-row' . $unique_id );
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundColor'] ) );
$css->render_responsive_size( $attributes, [ 'minHeight', 'tabletMinHeight', 'mobileMinHeight' ], 'height' );

$css->set_selector( '.kb-table .kb-table-row' . $unique_id . ':hover' );
$css->set_selector( '.kb-table-container .kb-table tr.kb-table-row' . $unique_id . ':hover' );
$css->add_property( 'background-color', $css->render_color( $attributes['backgroundHoverColor'] ) );


return $css->css_output();
}

Expand Down
80 changes: 79 additions & 1 deletion src/blocks/table/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,9 +228,87 @@
"type": "array",
"default": []
},
"useFixedWidths": {
"overflowXScroll": {
"type": "boolean",
"default": false
},
"rowMinHeight": {
"type": "number",
"default": ""
},
"tabletRowMinHeight": {
"type": "number",
"default": ""
},
"mobileRowMinHeight": {
"type": "number",
"default": ""
},
"rowMinHeightType": {
"type": "string",
"default": "px"
},
"padding": {
"type": "array",
"default": [
"",
"",
"",
""
]
},
"tabletPadding": {
"type": "array",
"default": [
"",
"",
"",
""
]
},
"mobilePadding": {
"type": "array",
"default": [
"",
"",
"",
""
]
},
"paddingType": {
"type": "string",
"default": "px"
},
"margin": {
"type": "array",
"default": [
"",
"",
"",
""
]
},
"tabletMargin": {
"type": "array",
"default": [
"",
"",
"",
""
]
},
"mobileMargin": {
"type": "array",
"default": [
"",
"",
"",
""
]
},
"marginType": {
"type": "string",
"default": "px"
}
},
"providesContext": {
Expand Down
14 changes: 2 additions & 12 deletions src/blocks/table/children/data/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,22 +237,12 @@ export function Edit(props) {
/>
<InspectorControlTabs
panelName={'table-data'}
allowedTabs={['general']}
setActiveTab={(value) => setActiveTab(value)}
activeTab={activeTab}
/>

{activeTab === 'general' && (
<KadencePanelBody title={__('General', 'kadence-blocks')} initialOpen={true}>
General settings
</KadencePanelBody>
)}
{activeTab === 'advanced' && (
<KadenceBlockDefaults
blockSlug={'kadence/table-data'}
attributes={attributes}
setAttributes={setAttributes}
/>
)}
{activeTab === 'general' && <KadencePanelBody initialOpen={true}>&nbsp;</KadencePanelBody>}
</KadenceInspectorControls>
<InnerBlocks template={DEFAULT_BLOCK} renderAppender={false} templateLock={false} />
</Tag>
Expand Down
6 changes: 3 additions & 3 deletions src/blocks/table/children/row/backend-styles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@ import {
export default function BackendStyles(props) {
const { attributes, previewDevice } = props;

const { uniqueID, backgroundColor, minHeight, tabletMinHeight, mobileMinHeight, minHeightUnit } = attributes;
const { uniqueID, backgroundColor, minHeight, tabletMinHeight, mobileMinHeight, minHeightType } = attributes;

const previewMinHeight = getPreviewSize(previewDevice, minHeight, tabletMinHeight, mobileMinHeight);

const css = new KadenceBlocksCSS();

css.set_selector(`.kb-table .kb-table-row${uniqueID}`);
css.set_selector(`.kb-table-container .kb-table tr.kb-table-row${uniqueID}`);
if (backgroundColor !== '') {
css.add_property('background-color', KadenceColorOutput(backgroundColor));
}

if (previewMinHeight) {
css.add_property('height', previewMinHeight + minHeightUnit);
css.add_property('height', previewMinHeight + minHeightType);
}

const cssOutput = css.css_output();
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/table/children/row/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"type": "number",
"default": ""
},
"minHeightUnit": {
"minHeightType": {
"type": "string",
"default": "px"
}
Expand Down
16 changes: 8 additions & 8 deletions src/blocks/table/children/row/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function Edit(props) {
minHeight,
tabletMinHeight,
mobileMinHeight,
minHeightUnit,
minHeightType,
row,
} = attributes;

Expand Down Expand Up @@ -174,14 +174,16 @@ export function Edit(props) {
),
});

const { children, ...innerBlocksProps } = useInnerBlocksProps(
const { children, innerBlocksProps } = useInnerBlocksProps(
{
className: '',
},
{
allowedBlocks: ['kadence/table-data'],
renderAppender: false,
templateInsertUpdatesSelection: true,
templateLock: 'insert',
orientation: 'horizontal',
}
);

Expand Down Expand Up @@ -217,7 +219,7 @@ export function Edit(props) {
/>
<InspectorControlTabs
panelName={'table-row'}
allowedTabs={['general', 'advanced']}
allowedTabs={['general']}
setActiveTab={setActiveTab}
activeTab={activeTab}
/>
Expand Down Expand Up @@ -258,11 +260,11 @@ export function Edit(props) {
mobileValue={mobileMinHeight}
onChangeMobile={(value) => setAttributes({ mobileMinHeight: value })}
min={0}
max={minHeightUnit === 'px' ? 600 : 100}
max={minHeightType === 'px' ? 600 : 100}
step={1}
unit={minHeightUnit}
unit={minHeightType}
onUnit={(value) => {
setAttributes({ minHeightUnit: value });
setAttributes({ minHeightType: value });
}}
units={['px', 'em', 'vh']}
reset={() =>
Expand All @@ -277,8 +279,6 @@ export function Edit(props) {
</KadencePanelBody>
</>
)}

{activeTab === 'advanced' && <>KadenceBlockDefaults</>}
</KadenceInspectorControls>
<BlockContextProvider value={thisRowIsHeader}>{children}</BlockContextProvider>
<BackendStyles attributes={attributes} previewDevice={previewDevice} />
Expand Down
31 changes: 28 additions & 3 deletions src/blocks/table/components/backend-styles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,20 @@ export default function BackendStyles(props) {
headerAlign,
headerAlignTablet,
headerAlignMobile,
useFixedWidths,
columnSettings,
overflowXScroll,
rowMinHeight,
tabletRowMinHeight,
mobileRowMinHeight,
rowMinHeightType,
padding,
tabletPadding,
mobilePadding,
paddingType,
margin,
tabletMargin,
mobileMargin,
marginType,
} = attributes;
const css = new KadenceBlocksCSS();

Expand All @@ -53,11 +65,14 @@ export default function BackendStyles(props) {
const previewTextAlign = getPreviewSize(previewDevice, textAlign, textAlignTablet, textAlignMobile);
const previewMaxHeight = getPreviewSize(previewDevice, maxHeight?.[0], maxHeight?.[1], maxHeight?.[2]);
const previewMaxWidth = getPreviewSize(previewDevice, maxWidth?.[0], maxWidth?.[1], maxWidth?.[2]);
const previewRowMinHeight = getPreviewSize(previewDevice, rowMinHeight, tabletRowMinHeight, mobileRowMinHeight);

css.set_selector(`.kb-table${uniqueID}`);
css.render_font(dataTypography ? dataTypography : [], previewDevice);

css.set_selector(`.kb-table-container${uniqueID}`);
css.render_measure_output(padding, tabletPadding, mobilePadding, previewDevice, 'padding', paddingType);
css.render_measure_output(margin, tabletMargin, mobileMargin, previewDevice, 'margin', marginType);
if (maxHeight) {
css.add_property('max-height', getSpacingOptionOutput(previewMaxHeight, maxHeightUnit) + ' !important');
css.add_property('overflow-y', 'auto');
Expand All @@ -69,11 +84,11 @@ export default function BackendStyles(props) {
}

// Add column width styles
if (useFixedWidths && Array.isArray(columnSettings)) {
if (Array.isArray(columnSettings)) {
let hasFixedColumns = false;

columnSettings.forEach((settings, index) => {
if (settings?.useFixed && settings?.width) {
if (!settings?.useAuto && settings?.width) {
hasFixedColumns = true;
css.set_selector(
`.kb-table${uniqueID} td:nth-child(${index + 1}), .kb-table${uniqueID} th:nth-child(${index + 1})`
Expand All @@ -90,6 +105,11 @@ export default function BackendStyles(props) {
}
}

if (overflowXScroll) {
css.set_selector(`.kb-table${uniqueID}`);
css.add_property('overflow-x', 'auto');
}

css.set_selector(`.kb-table${uniqueID} th`);
css.render_font(headerTypography ? headerTypography : [], previewDevice);
css.add_property('text-align', previewHeaderAlign);
Expand Down Expand Up @@ -151,6 +171,11 @@ export default function BackendStyles(props) {
});
}

if (previewRowMinHeight) {
css.set_selector(`.kb-table${uniqueID} tr`);
css.add_property('height', getSpacingOptionOutput(previewRowMinHeight, rowMinHeightType));
}

if (borderOnRowOnly) {
css.set_selector(`.kb-table${uniqueID} tr`);
} else {
Expand Down
Loading

0 comments on commit 4f37958

Please sign in to comment.