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

Merge branch 'feat/grid-revamp' of https://github.com/ToolJet/ToolJet into feat/grid-revamp

Browse source
This commit is contained in:
Johnson Cherian 2024-01-10 23:04:45 +05:30
commit 63df214b5c
3 changed files with 24 additions and 3 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;

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

@ -192,7 +192,7 @@ export default function DragContainer({
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) {
// eslint-disable-next-line no-undef
@ -201,7 +201,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}`);
}
}
}
@ -210,7 +210,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}`);
}
}
// }