diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx index 5ece3710de..872fcbcf4d 100644 --- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx +++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx @@ -588,11 +588,11 @@ export default function Grid({ gridWidth, currentLayout }) { keepRatio={false} individualGroupableProps={individualGroupableProps} onResize={(e) => { - if(resizingComponentId !== e.target.id) { + if (resizingComponentId !== e.target.id) { useGridStore.getState().actions.setResizingComponentId(e.target.id); showGridLines(); } - + const currentWidget = boxList.find(({ id }) => id === e.target.id); let _gridWidth = useGridStore.getState().subContainerWidths[currentWidget.component?.parent] || gridWidth; if (currentWidget.component?.parent) { diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js index 913d3a22df..af092b20e4 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js +++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js @@ -757,7 +757,6 @@ 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; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/container.js b/frontend/src/AppBuilder/WidgetManager/widgets/container.js index 6dc9a679a4..406e4fa8bb 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/container.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/container.js @@ -47,11 +47,6 @@ export const containerConfig = { defaultValue: true, }, }, - headerHeight: { - type: 'numberInput', - displayName: 'Header height', - validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 }, - }, }, defaultChildren: [ { @@ -64,7 +59,6 @@ export const containerConfig = { }, displayName: 'ContainerText', properties: ['text'], - slotName: 'header', accessorKey: 'text', styles: ['fontWeight', 'textSize', 'textColor'], defaultValue: { diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js index a3c89acf93..2318a986f8 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js @@ -92,18 +92,6 @@ export const modalV2Config = { accordian: 'Data', validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 400 }, }, - headerHeight: { - type: 'numberInput', - displayName: 'Header height', - accordian: 'Data', - validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 }, - }, - footerHeight: { - type: 'numberInput', - displayName: 'Footer height', - accordian: 'Data', - validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 }, - }, hideOnEsc: { type: 'toggle', displayName: 'Close on escape key', section: 'additionalActions' }, closeOnClickingOutside: { type: 'toggle', displayName: 'Close on clicking outside', section: 'additionalActions' }, hideCloseButton: { type: 'toggle', displayName: 'Hide close button', section: 'additionalActions' }, diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx index a706d29069..61317263a0 100644 --- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx +++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx @@ -9,6 +9,8 @@ import { } from '@/AppBuilder/AppCanvas/appCanvasConstants'; import useStore from '@/AppBuilder/_stores/store'; import './container.scss'; +import { useActiveSlot } from '@/AppBuilder/_hooks/useActiveSlot'; +import { HorizontalSlot } from '@/AppBuilder/Widgets/Form/Components/HorizontalSlot'; export const Container = ({ id, @@ -33,8 +35,13 @@ export const Container = ({ shallow ); + const isEditing = useStore((state) => state.currentMode === 'edit'); + const setComponentProperty = useStore((state) => state.setComponentProperty, shallow); + + const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget const { borderRadius, borderColor, boxShadow } = styles; const { headerHeight = 80 } = properties; + const headerMaxHeight = parseInt(height, 10) - 100 - 10; const contentBgColor = useMemo(() => { return { backgroundColor: @@ -65,6 +72,7 @@ export const Container = ({ const containerHeaderStyles = { flexShrink: 0, padding: `${CONTAINER_FORM_CANVAS_PADDING}px ${CONTAINER_FORM_CANVAS_PADDING}px 3px ${CONTAINER_FORM_CANVAS_PADDING}px`, + maxHeight: `${headerMaxHeight}px`, ...headerBgColor, }; @@ -75,6 +83,11 @@ export const Container = ({ padding: `${CONTAINER_FORM_CANVAS_PADDING}px`, }; + const updateHeaderSizeInStore = ({ newHeight }) => { + const _height = parseInt(newHeight, 10); + setComponentProperty(id, `headerHeight`, _height, 'properties', 'value', false); + }; + return (
{properties.showHeader && ( -
- -
+ )}
{ const parsedHeight = parseInt(height, 10); - - const { getRootProps, getHandleProps, getResizeState } = useResizable({ + const { getRootProps, getHandleProps, getResizeState } = useSubContainerResizable({ initialHeight: parsedHeight, initialWidth: '100%', // Now respects parent's width minHeight: 10, @@ -34,12 +34,11 @@ export const HorizontalSlot = React.memo( }); const { height: resizedHeight, isDragging } = getResizeState(); - useEffect(() => { if (isDragging) { - showGridLinesOnSlot(id); + showGridLines(); } else { - hideGridLinesOnSlot(id); + hideGridLines(); } }, [isDragging, id]); @@ -50,7 +49,10 @@ export const HorizontalSlot = React.memo( }; return ( -
+
{isEditing &&
}
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx index 02b2573484..f0a1156a45 100644 --- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx +++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx @@ -340,6 +340,7 @@ export const Form = function Form(props) { isDisabled={isDisabled} isActive={activeSlot === `${id}-header`} onResize={updateHeaderSizeInStore} + componentType="Form" /> )} @@ -415,6 +416,7 @@ export const Form = function Form(props) { isDisabled={isDisabled} onResize={updateFooterSizeInStore} isActive={activeSlot === `${id}-footer`} + componentType="Form" /> )} diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx index 8ff4c0cbb1..9be6a8a42c 100644 --- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx +++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx @@ -1,35 +1,54 @@ import React from 'react'; import { default as BootstrapModal } from 'react-bootstrap/Modal'; -import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container'; import { getCanvasHeight } from '@/AppBuilder/Widgets/ModalV2/helpers/utils'; +import { HorizontalSlot } from '@/AppBuilder/Widgets/Form/Components/HorizontalSlot'; +import { MODAL_CANVAS_PADDING } from '@/AppBuilder/AppCanvas/appCanvasConstants'; -export const ModalFooter = React.memo(({ id, isDisabled, customStyles, darkMode, width, footerHeight, onClick }) => { - const canvasFooterHeight = getCanvasHeight(footerHeight); - return ( - - - {isDisabled && ( -