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

fixed showing control after opening the modal

Browse source
This commit is contained in:
Kavin Venkatachalam 2024-01-10 18:27:05 +05:30
parent 9c094f023b
commit 9d7fa4f582
3 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/Editor/Components/Modal.jsx
View file

@ -18,6 +18,7 @@ export const Modal = function Modal({
fireEvent,
dataCy,
height,
mode,
}) {
const [showModal, setShowModal] = useState(false);
@ -42,10 +43,20 @@ export const Modal = function Modal({
boxShadow,
} = styles;
const parentRef = useRef(null);
const controlBoxRef = useRef(null);
const title = properties.title ?? '';
const size = properties.size ?? 'lg';
/**** Start - Logic to reset the zIndex of modal control box ****/
useEffect(() => {
if (!showModal && mode === 'edit') {
controlBoxRef.current?.classList?.remove('modal-moveable');
controlBoxRef.current = null;
}
}, [showModal]);
/**** End - Logic to reset the zIndex of modal control box ****/
useEffect(() => {
const exposedVariables = {
open: async function () {
@ -181,6 +192,13 @@ export const Modal = function Modal({
className="jet-button btn btn-primary p-1 overflow-hidden"
style={customStyles.buttonStyles}
onClick={(event) => {
/**** Start - Logic to reduce the zIndex of modal control box ****/
controlBoxRef.current = document.querySelector(`.selected-component.sc-${id}`)?.parentElement;
if (mode === 'edit' && controlBoxRef.current) {
controlBoxRef.current.classList.add('modal-moveable');
}
/**** End - Logic to reduce the zIndex of modal control box ****/
event.stopPropagation();
setShowModal(true);
setExposedVariable('show', true);

3
frontend/src/Editor/DragContainer.css
View file

@ -23,6 +23,9 @@
.moveable-control-box>.moveable-control-box:hover, .moveable-control-box>.moveable-dragging{
visibility: visible !important;
}
.moveable-control-box.modal-moveable{
z-index: 1000 !important;
}
.moveable-control-box {
background: red;

8
frontend/src/Editor/DragContainer.jsx
View file

@ -156,18 +156,16 @@ export default function DragContainer({
const selectedComponentsId = new Set(
selectedComponents.map((component) => {
console.log('here--- ', component.id, childMoveableRefs.current, childMoveableRefs.current[component.id]);
return component.id;
})
);
const parentId = selectedComponents.find((comp) => comp.component.parent)?.component?.parent;
console.log('parentId--', parentId, selectedComponents);
// Get all elements with the old class name
var elements = document.getElementsByClassName('selected-component');
// Iterate through the elements and replace the old class with the new one
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('selected-component');
elements[i].className = 'moveable-control-box modal-moveable rCS1w3zcxh';
}
if (parentId) {
@ -177,7 +175,7 @@ export default function DragContainer({
if (controlBoxes) {
for (const element of controlBoxes) {
if (selectedComponentsId.has(element?.props?.target?.id)) {
element?.controlBox?.classList.add('selected-component');
element?.controlBox?.classList.add('selected-component', `sc-${element?.props?.target?.id}`);
}
}
}
@ -186,7 +184,7 @@ export default function DragContainer({
if (controlBoxes) {
for (const element of controlBoxes) {
if (selectedComponentsId.has(element?.props?.target?.id)) {
element?.controlBox?.classList.add('selected-component');
element?.controlBox?.classList.add('selected-component', `sc-${element?.props?.target?.id}`);
}
}
// }