From fe8792f2ef781107ef6760d8c8f810591d22312d Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Thu, 22 May 2025 16:47:15 +0530 Subject: [PATCH 1/5] Add padding to listview --- frontend/src/AppBuilder/AppCanvas/Container.jsx | 3 ++- frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js | 2 ++ frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js | 7 +++++-- frontend/src/AppBuilder/Widgets/Container/Container.jsx | 1 - frontend/src/AppBuilder/Widgets/Listview.jsx | 6 +++--- frontend/src/_styles/theme.scss | 6 +----- 6 files changed, 13 insertions(+), 12 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/Container.jsx b/frontend/src/AppBuilder/AppCanvas/Container.jsx index c320c3f0cb..56129afcd9 100644 --- a/frontend/src/AppBuilder/AppCanvas/Container.jsx +++ b/frontend/src/AppBuilder/AppCanvas/Container.jsx @@ -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); diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js index 5725baf7ed..a93eb76e71 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js +++ b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js @@ -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; diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js index 5f362ba0b3..04dcef7378 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js +++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js @@ -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; }; diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx index a706d29069..a15a525651 100644 --- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx +++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx @@ -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', diff --git a/frontend/src/AppBuilder/Widgets/Listview.jsx b/frontend/src/AppBuilder/Widgets/Listview.jsx index 285f9e5bf9..807e62ecb2 100644 --- a/frontend/src/AppBuilder/Widgets/Listview.jsx +++ b/frontend/src/AppBuilder/Widgets/Listview.jsx @@ -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 (
containerProps.onComponentClick(id, component)} data-cy={dataCy} > -
+
{filteredData.map((listItem, index) => (
Date: Thu, 22 May 2025 18:48:26 +0530 Subject: [PATCH 2/5] Fix listview default isze --- .../WidgetManager/widgets/listview.js | 21 +++++++++++-------- .../AppBuilder/WidgetManager/widgets/table.js | 2 +- .../Widgets/Kanban/Components/Item.jsx | 7 +------ .../Editor/WidgetManager/configs/listview.js | 3 ++- .../src/Editor/WidgetManager/configs/table.js | 2 +- 5 files changed, 17 insertions(+), 18 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js index 6c599bc2fc..0986efaea8 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js @@ -13,7 +13,7 @@ export const listviewConfig = { top: 15, left: 3, height: 100, - width: 7, + width: 4, }, properties: ['source'], accessorKey: 'imageURL', @@ -24,6 +24,7 @@ export const listviewConfig = { top: 50, left: 11, height: 30, + width: 4, }, properties: ['text'], accessorKey: 'text', @@ -49,12 +50,14 @@ export const listviewConfig = { data: { type: 'code', displayName: 'List data', - schema: { - type: 'union', - schemas: [ - { type: 'array', element: { type: 'object' } }, - { type: 'array', element: { type: 'string' } }, - ], + validation: { + schema: { + type: 'union', + schemas: [ + { type: 'array', element: { type: 'object' } }, + { type: 'array', element: { type: 'string' } }, + ], + }, defaultValue: "[{text: 'Sample text 1'}]", }, }, @@ -125,7 +128,7 @@ export const listviewConfig = { }, styles: { backgroundColor: { - type: 'colorSwatches', + type: 'color', displayName: 'Background color', validation: { schema: { type: 'string' }, @@ -133,7 +136,7 @@ export const listviewConfig = { }, }, borderColor: { - type: 'colorSwatches', + type: 'color', displayName: 'Border color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/table.js b/frontend/src/AppBuilder/WidgetManager/widgets/table.js index 9f0c4fd723..facb62f7d4 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/table.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/table.js @@ -275,7 +275,7 @@ export const tableConfig = { showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, }, defaultSize: { - width: 35, + width: 25, height: 456, }, events: { diff --git a/frontend/src/AppBuilder/Widgets/Kanban/Components/Item.jsx b/frontend/src/AppBuilder/Widgets/Kanban/Components/Item.jsx index 7b4b2a56cf..d147c1b135 100644 --- a/frontend/src/AppBuilder/Widgets/Kanban/Components/Item.jsx +++ b/frontend/src/AppBuilder/Widgets/Kanban/Components/Item.jsx @@ -81,7 +81,6 @@ export const Item = React.memo( >
e.stopPropagation()}>
diff --git a/frontend/src/Editor/WidgetManager/configs/listview.js b/frontend/src/Editor/WidgetManager/configs/listview.js index 86825142eb..cd5c249414 100644 --- a/frontend/src/Editor/WidgetManager/configs/listview.js +++ b/frontend/src/Editor/WidgetManager/configs/listview.js @@ -13,7 +13,7 @@ export const listviewConfig = { top: 15, left: 3, height: 100, - width: 7, + width: 4, }, properties: ['source'], accessorKey: 'imageURL', @@ -24,6 +24,7 @@ export const listviewConfig = { top: 50, left: 11, height: 30, + width: 3, }, properties: ['text'], accessorKey: 'text', diff --git a/frontend/src/Editor/WidgetManager/configs/table.js b/frontend/src/Editor/WidgetManager/configs/table.js index def217a352..8273c2475c 100644 --- a/frontend/src/Editor/WidgetManager/configs/table.js +++ b/frontend/src/Editor/WidgetManager/configs/table.js @@ -275,7 +275,7 @@ export const tableConfig = { showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, }, defaultSize: { - width: 35, + width: 25, height: 456, }, events: { From 75a9a177a1ea5e7680043488248d32b852437e50 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Mon, 2 Jun 2025 16:06:24 +0530 Subject: [PATCH 3/5] fix --- .../src/AppBuilder/WidgetManager/widgets/listview.js | 4 ++-- frontend/src/Editor/WidgetManager/configs/listview.js | 6 +++--- .../modules/apps/services/widget-config/listview.js | 11 +++++++++-- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js index 0986efaea8..c3ebdcfa19 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js @@ -128,7 +128,7 @@ export const listviewConfig = { }, styles: { backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background color', validation: { schema: { type: 'string' }, @@ -136,7 +136,7 @@ export const listviewConfig = { }, }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border color', validation: { schema: { type: 'string' }, diff --git a/frontend/src/Editor/WidgetManager/configs/listview.js b/frontend/src/Editor/WidgetManager/configs/listview.js index cd5c249414..c3ebdcfa19 100644 --- a/frontend/src/Editor/WidgetManager/configs/listview.js +++ b/frontend/src/Editor/WidgetManager/configs/listview.js @@ -24,7 +24,7 @@ export const listviewConfig = { top: 50, left: 11, height: 30, - width: 3, + width: 4, }, properties: ['text'], accessorKey: 'text', @@ -128,7 +128,7 @@ export const listviewConfig = { }, styles: { backgroundColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Background color', validation: { schema: { type: 'string' }, @@ -136,7 +136,7 @@ export const listviewConfig = { }, }, borderColor: { - type: 'color', + type: 'colorSwatches', displayName: 'Border color', validation: { schema: { type: 'string' }, diff --git a/server/src/modules/apps/services/widget-config/listview.js b/server/src/modules/apps/services/widget-config/listview.js index 9cef676a85..c3ebdcfa19 100644 --- a/server/src/modules/apps/services/widget-config/listview.js +++ b/server/src/modules/apps/services/widget-config/listview.js @@ -13,7 +13,7 @@ export const listviewConfig = { top: 15, left: 3, height: 100, - width: 7, + width: 4, }, properties: ['source'], accessorKey: 'imageURL', @@ -24,6 +24,7 @@ export const listviewConfig = { top: 50, left: 11, height: 30, + width: 4, }, properties: ['text'], accessorKey: 'text', @@ -50,7 +51,13 @@ export const listviewConfig = { type: 'code', displayName: 'List data', validation: { - schema: { type: 'union', schemas: [{ type: 'array', element: { type: 'object' } },{ type: 'array', element: { type: 'string' } }] }, + schema: { + type: 'union', + schemas: [ + { type: 'array', element: { type: 'object' } }, + { type: 'array', element: { type: 'string' } }, + ], + }, defaultValue: "[{text: 'Sample text 1'}]", }, }, From 23bd791d110328fb26fffd85f84a3461473919a8 Mon Sep 17 00:00:00 2001 From: johnsoncherian Date: Tue, 3 Jun 2025 14:37:16 +0530 Subject: [PATCH 4/5] chore: update submodule references --- frontend/ee | 2 +- server/ee | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/ee b/frontend/ee index 4ca98b6bb6..777446d71e 160000 --- a/frontend/ee +++ b/frontend/ee @@ -1 +1 @@ -Subproject commit 4ca98b6bb66d1d9845f8b326100945a969488f94 +Subproject commit 777446d71e78e5941d34353606a12d982820438f diff --git a/server/ee b/server/ee index 2f8843cb03..30dbfa7545 160000 --- a/server/ee +++ b/server/ee @@ -1 +1 @@ -Subproject commit 2f8843cb03eef3ea8ef87878a050280b89637345 +Subproject commit 30dbfa754562d00f8d64181d5006e113798bd668 From d67bd875c33a4bf23ab690379377a17159abdf9e Mon Sep 17 00:00:00 2001 From: johnsoncherian Date: Tue, 3 Jun 2025 14:38:07 +0530 Subject: [PATCH 5/5] chore: update submodule references --- frontend/ee | 2 +- server/ee | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/ee b/frontend/ee index 777446d71e..aa3c4f603f 160000 --- a/frontend/ee +++ b/frontend/ee @@ -1 +1 @@ -Subproject commit 777446d71e78e5941d34353606a12d982820438f +Subproject commit aa3c4f603f549337fc88a772a6a31e18eaf38701 diff --git a/server/ee b/server/ee index 30dbfa7545..f70ac83c38 160000 --- a/server/ee +++ b/server/ee @@ -1 +1 @@ -Subproject commit 30dbfa754562d00f8d64181d5006e113798bd668 +Subproject commit f70ac83c38e0a8b44aeb2a0fb2059690eb5e2f46