Merge pull request #12923 from ToolJet/gh-11817-listview-margin

Add padding to listview
2026-05-23 08:58:26 +00:00 · 2025-06-25 12:21:44 +05:30 · 2025-06-25 12:21:44 +05:30 · fa51318dfe
commit fa51318dfe
parent 511797f441 dab8780b3c
12 changed files with 39 additions and 32 deletions
--- a/frontend/src/AppBuilder/AppCanvas/Container.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Container.jsx
@ -149,10 +149,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, gridWidth);
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
@ -39,3 +39,5 @@ export const DROPPABLE_PARENTS = new Set([
 export const TAB_CANVAS_PADDING = 7.5;

 export const MODAL_CANVAS_PADDING = 5;
+
+export const LISTVIEW_CANVAS_PADDING = 7;
--- 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) {
@ -776,7 +777,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;
@ -789,11 +790,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;
 };
--- 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'}]",
      },
    },
--- 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: {
--- 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',
--- 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(
          >
            <div className="subcontainer-container" onMouseDown={(e) => e.stopPropagation()}>
              <SubContainer
-                parentComponent={component}
                canvasWidth={Number(cardWidth) || 300}
                canvasHeight={Number(cardHeight) || 100}
                id={id}
@ -90,11 +89,7 @@ export const Item = React.memo(
                  backgroundColor: 'var(--base)',
                }}
                darkMode={darkMode}
-                // parentName={component.name}
-                // customResolvables={{ cardData: cardDataAsObj[value] }}
-                // {...containerProps}
-                // readOnly={isDragActive || !isFirstItem}
-                // parentRef={parentRef}
+                componentType="Kanban"
              />
            </div>
            <span className="handle-container">
--- a/frontend/src/AppBuilder/Widgets/Listview.jsx
+++ b/frontend/src/AppBuilder/Widgets/Listview.jsx
@ -55,6 +55,8 @@ export const Listview = function Listview({
    display: visibility ? 'flex' : 'none',
    borderRadius: borderRadius ?? 0,
    boxShadow,
+    padding: '7px 2px 7px 7px',
+    scrollbarGutter: 'stable',
  };

  const computeCanvasBackgroundColor = useMemo(() => {
@ -235,7 +237,6 @@ export const Listview = function Listview({
    // Update the customResolvables with the new listItems
    if (listItems.length > 0) updateCustomResolvables(id, listItems, 'listItem', moduleId);
  }
-
  return (
    <div
      data-disabled={disabledState}
@ -243,10 +244,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' : ''}`}
--- 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: 4,
      },
      properties: ['text'],
      accessorKey: 'text',
@ -127,7 +128,7 @@ export const listviewConfig = {
  },
  styles: {
    backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
      displayName: 'Background color',
      validation: {
        schema: { type: 'string' },
@ -135,7 +136,7 @@ export const listviewConfig = {
      },
    },
    borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
      displayName: 'Border color',
      validation: {
        schema: { type: 'string' },
--- 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: {
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@ -4274,7 +4274,6 @@ input[type="text"] {

 .jet-listview::-webkit-scrollbar-track {
  background: transparent;
-
 }

 .jet-listview::-webkit-scrollbar-thumb {
@ -16048,9 +16047,7 @@ textarea.tj-text-input-widget {
 }

 .jet-listview {
-  &:hover {
-    scrollbar-color: #6a727c4d;
-
+  &:hover {      
    &::-webkit-scrollbar-thumb {
      background-color: #6a727c4d !important;
    }
@ -16070,7 +16067,6 @@ textarea.tj-text-input-widget {

  .jet-listview {
    &:hover {
-      scrollbar-color: #6a727c4d;

      &::-webkit-scrollbar-thumb {
        background-color: #6a727c4d !important;
--- 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'}]",
      },
    },