Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add padding to listview

Browse source
This commit is contained in:
Nakul Nagargade 2025-05-22 16:47:15 +05:30
parent c4661745de
commit fe8792f2ef
6 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/AppBuilder/AppCanvas/Container.jsx
View file

@ -109,10 +109,11 @@ export const Container = React.memo(
if (canvasWidth !== undefined) {
if (componentType === 'Listview' && listViewMode == 'grid') return canvasWidth / columns - 2;
if (id === 'canvas') return canvasWidth;
return getSubContainerWidthAfterPadding(canvasWidth, componentType, id);
return getSubContainerWidthAfterPadding(canvasWidth, componentType, id, realCanvasRef);
}
return realCanvasRef?.current?.offsetWidth;
}
const gridWidth = getContainerCanvasWidth() / NO_OF_GRIDS;
useEffect(() => {
useGridStore.getState().actions.setSubContainerWidths(id, getContainerCanvasWidth() / NO_OF_GRIDS);

2
frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
View file

@ -27,3 +27,5 @@ export const BOX_PADDING = 2;
export const TAB_CANVAS_PADDING = 7.5;
export const MODAL_CANVAS_PADDING = 5;
export const LISTVIEW_CANVAS_PADDING = 7;

7
frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
View file

@ -15,6 +15,7 @@ import {
BOX_PADDING,
TAB_CANVAS_PADDING,
MODAL_CANVAS_PADDING,
LISTVIEW_CANVAS_PADDING,
} from './appCanvasConstants';
export function snapToGrid(canvasWidth, x, y) {
@ -746,7 +747,7 @@ export const getSubContainerIdWithSlots = (parentId) => {
return cleanParentId;
};
export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, componentId) => {
export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, componentId, realCanvasRef) => {
let padding = 2; //Need to update this 2 to correct value for other subcontainers
if (componentType === 'Container' || componentType === 'Form') {
padding = 2 * CONTAINER_FORM_CANVAS_PADDING + 2 * SUBCONTAINER_CANVAS_BORDER_WIDTH + 2 * BOX_PADDING;
@ -759,11 +760,13 @@ export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, com
if (isModalHeader) {
const isModalHeaderCloseBtnEnabled = !useStore.getState().getResolvedComponent(componentId)?.properties
?.hideCloseButton;
console.log('isModalHeaderCloseBtnEnabled', isModalHeaderCloseBtnEnabled);
padding = 2 * (MODAL_CANVAS_PADDING + (isModalHeaderCloseBtnEnabled ? 56 : 0));
} else {
padding = 2 * MODAL_CANVAS_PADDING;
}
}
if (componentType === 'Listview') {
padding = 2 * LISTVIEW_CANVAS_PADDING + 5; // 5 is accounting for scrollbar
}
return canvasWidth - padding;
};

1
frontend/src/AppBuilder/Widgets/Container/Container.jsx
View file

@ -67,7 +67,6 @@ export const Container = ({
padding: `${CONTAINER_FORM_CANVAS_PADDING}px ${CONTAINER_FORM_CANVAS_PADDING}px 3px ${CONTAINER_FORM_CANVAS_PADDING}px`,
...headerBgColor,
};
const containerContentStyles = {
overflow: 'hidden auto',
display: 'flex',

6
frontend/src/AppBuilder/Widgets/Listview.jsx
View file

@ -53,6 +53,8 @@ export const Listview = function Listview({
display: visibility ? 'flex' : 'none',
borderRadius: borderRadius ?? 0,
boxShadow,
padding: '7px 2px 7px 7px',
scrollbarGutter: 'stable',
};
const computeCanvasBackgroundColor = useMemo(() => {
@ -233,7 +235,6 @@ export const Listview = function Listview({
// Update the customResolvables with the new listItems
if (listItems.length > 0) updateCustomResolvables(id, listItems, 'listItem');
}
return (
<div
data-disabled={disabledState}
@ -241,10 +242,9 @@ export const Listview = function Listview({
id={id}
ref={parentRef}
style={computedStyles}
// onClick={() => containerProps.onComponentClick(id, component)}
data-cy={dataCy}
>
<div className={`row w-100 m-0 ${enablePagination && 'pagination-margin-bottom-last-child'}`}>
<div className={`w-100 m-0 ${enablePagination && 'pagination-margin-bottom-last-child'}`}>
{filteredData.map((listItem, index) => (
<div
className={`list-item ${mode == 'list' && 'w-100'} ${showBorder && mode == 'list' ? 'border-bottom' : ''}`}

6
frontend/src/_styles/theme.scss
View file

@ -4242,7 +4242,6 @@ input[type="text"] {
.jet-listview::-webkit-scrollbar-track {
background: transparent;
}
.jet-listview::-webkit-scrollbar-thumb {
@ -15995,9 +15994,7 @@ textarea.tj-text-input-widget{
}
.jet-listview {
&:hover {
scrollbar-color: #6a727c4d;
&:hover {
&::-webkit-scrollbar-thumb {
background-color: #6a727c4d !important;
}
@ -16017,7 +16014,6 @@ textarea.tj-text-input-widget{
.jet-listview {
&:hover {
scrollbar-color: #6a727c4d;
&::-webkit-scrollbar-thumb {
background-color: #6a727c4d !important;