From ed8b50d7305d3099d84930e236918d57676b8e3c Mon Sep 17 00:00:00 2001 From: Nakul Nagargade Date: Tue, 25 Mar 2025 15:56:04 +0530 Subject: [PATCH] Add padding for Tab and Modal --- .../src/AppBuilder/AppCanvas/Container.jsx | 14 ++++---- .../AppCanvas/appCanvasConstants.js | 4 +++ .../AppBuilder/AppCanvas/appCanvasUtils.js | 33 ++++++++++++++++++- .../Widgets/ModalV2/Components/Footer.jsx | 1 + .../Widgets/ModalV2/Components/Header.jsx | 1 + .../Widgets/ModalV2/Components/Modal.jsx | 3 +- .../Widgets/ModalV2/helpers/stylesFactory.js | 7 ++-- frontend/src/AppBuilder/Widgets/Tabs.jsx | 10 ++++-- 8 files changed, 60 insertions(+), 13 deletions(-) diff --git a/frontend/src/AppBuilder/AppCanvas/Container.jsx b/frontend/src/AppBuilder/AppCanvas/Container.jsx index e622e1a2cd..55fd0abaac 100644 --- a/frontend/src/AppBuilder/AppCanvas/Container.jsx +++ b/frontend/src/AppBuilder/AppCanvas/Container.jsx @@ -5,7 +5,12 @@ import WidgetWrapper from './WidgetWrapper'; import useStore from '@/AppBuilder/_stores/store'; import { shallow } from 'zustand/shallow'; import { useDrop } from 'react-dnd'; -import { addChildrenWidgetsToParent, addNewWidgetToTheEditor, computeViewerBackgroundColor } from './appCanvasUtils'; +import { + addChildrenWidgetsToParent, + addNewWidgetToTheEditor, + computeViewerBackgroundColor, + getSubContainerWidthAfterPadding, +} from './appCanvasUtils'; import { CANVAS_WIDTHS, NO_OF_GRIDS, @@ -103,12 +108,7 @@ export const Container = React.memo( if (canvasWidth !== undefined) { if (componentType === 'Listview' && listViewMode == 'grid') return canvasWidth / columns - 2; if (id === 'canvas') return canvasWidth; - if (componentType === 'Container' || componentType === 'Form') { - return ( - canvasWidth - (2 * CONTAINER_FORM_CANVAS_PADDING + 2 * SUBCONTAINER_CANVAS_BORDER_WIDTH + 2 * BOX_PADDING) - ); - } - return canvasWidth - 2; // Need to update this 2 to correct value for other subcontainers + return getSubContainerWidthAfterPadding(canvasWidth, componentType, id); } return realCanvasRef?.current?.offsetWidth; } diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js index e6a789fba0..5725baf7ed 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js +++ b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js @@ -23,3 +23,7 @@ export const CONTAINER_FORM_CANVAS_PADDING = 7; export const SUBCONTAINER_CANVAS_BORDER_WIDTH = 1; export const BOX_PADDING = 2; + +export const TAB_CANVAS_PADDING = 7.5; + +export const MODAL_CANVAS_PADDING = 5; diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js index 8dae9e001c..a0253499ff 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js +++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js @@ -6,7 +6,16 @@ import { toast } from 'react-hot-toast'; import _, { debounce } from 'lodash'; import { useGridStore } from '@/_stores/gridStore'; import { findHighestLevelofSelection } from './Grid/gridUtils'; -import { CANVAS_WIDTHS, NO_OF_GRIDS, WIDGETS_WITH_DEFAULT_CHILDREN } from './appCanvasConstants'; +import { + CANVAS_WIDTHS, + NO_OF_GRIDS, + WIDGETS_WITH_DEFAULT_CHILDREN, + CONTAINER_FORM_CANVAS_PADDING, + SUBCONTAINER_CANVAS_BORDER_WIDTH, + BOX_PADDING, + TAB_CANVAS_PADDING, + MODAL_CANVAS_PADDING, +} from './appCanvasConstants'; export function snapToGrid(canvasWidth, x, y) { const gridX = canvasWidth / 43; @@ -706,3 +715,25 @@ export const getSubContainerIdWithSlots = (parentId) => { } return cleanParentId; }; + +export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, componentId) => { + 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; + } + if (componentType === 'Tabs') { + padding = 2 * TAB_CANVAS_PADDING + 2 * SUBCONTAINER_CANVAS_BORDER_WIDTH + 2 * BOX_PADDING; + } + if (componentType === 'ModalV2') { + const isModalHeader = componentId?.includes('header'); + 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; + } + } + return canvasWidth - padding; +}; diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx index e25027ce33..8ff4c0cbb1 100644 --- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx +++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx @@ -19,6 +19,7 @@ export const ModalFooter = React.memo(({ id, isDisabled, customStyles, darkMode, overflowX: 'hidden', overflowY: isDisabled ? 'hidden' : 'auto', }} + componentType="ModalV2" /> {isDisabled && (
{isDisabled && ( diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx index 25796a9951..2615ca3d5c 100644 --- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx +++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx @@ -105,9 +105,10 @@ export const ModalWidget = ({ ...restProps }) => { ) : ( diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js index ee536dcfe1..9c6d4eb0c8 100644 --- a/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js +++ b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js @@ -1,4 +1,5 @@ -var tinycolor = require('tinycolor2'); +const tinycolor = require('tinycolor2'); +import { MODAL_CANVAS_PADDING } from '@/AppBuilder/AppCanvas/appCanvasConstants'; export function createModalStyles({ height, @@ -17,25 +18,27 @@ export function createModalStyles({ boxShadow, }) { const backwardCompatibilityCheck = height == '34' || modalHeight != undefined ? true : false; - return { modalBody: { height: backwardCompatibilityCheck ? computedCanvasHeight : height, backgroundColor: ['#fff', '#ffffffff'].includes(bodyBackgroundColor) && darkMode ? '#1F2837' : bodyBackgroundColor, overflowY: isDisabledModal ? 'hidden' : 'auto', + padding: `${MODAL_CANVAS_PADDING}px`, }, modalHeader: { backgroundColor: ['#fff', '#ffffffff'].includes(headerBackgroundColor) && darkMode ? '#1F2837' : headerBackgroundColor, height: headerHeightPx, overflowY: isDisabledModal ? 'hidden' : 'auto', + padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`, }, modalFooter: { backgroundColor: ['#fff', '#ffffffff'].includes(footerBackgroundColor) && darkMode ? '#1F2837' : footerBackgroundColor, height: footerHeightPx, overflowY: isDisabledModal ? 'hidden' : 'auto', + padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`, }, buttonStyles: { backgroundColor: triggerButtonBackgroundColor, diff --git a/frontend/src/AppBuilder/Widgets/Tabs.jsx b/frontend/src/AppBuilder/Widgets/Tabs.jsx index 7f4fb527e4..dc3a55dcd2 100644 --- a/frontend/src/AppBuilder/Widgets/Tabs.jsx +++ b/frontend/src/AppBuilder/Widgets/Tabs.jsx @@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from 'react'; import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container'; import { resolveWidgetFieldValue, isExpectedDataType } from '@/_helpers/utils'; import useStore from '@/AppBuilder/_stores/store'; - +import { TAB_CANVAS_PADDING } from '@/AppBuilder/AppCanvas/appCanvasConstants'; export const Tabs = function Tabs({ id, component, @@ -117,6 +117,7 @@ export const Tabs = function Tabs({ position: 'absolute', top: parsedHideTabs ? '0px' : '41px', width: '100%', + padding: TAB_CANVAS_PADDING, }} >