MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change how z-index is applied to the dragged element

This commit is contained in:
Andrew Kingston 2024-08-12 16:13:47 +01:00
parent 2f3a7018ae
commit d6f33b2191
No known key found for this signature in database
2 changed files with 5 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/client/src/components/app/container/GridContainer.svelte
View File

@ -150,7 +150,7 @@
display: grid; display: grid;
gap: 0; gap: 0;
grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px)); grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px));
grid-template-columns: repeat(var(--cols), 1fr); grid-template-columns: repeat(var(--cols), calc(var(--col-size) * 1px));
position: relative; position: relative;
} }
.underlay { .underlay {
@ -185,6 +185,9 @@
outline: 2px solid var(--spectrum-global-color-static-blue-200); outline: 2px solid var(--spectrum-global-color-static-blue-200);
pointer-events: none !important; pointer-events: none !important;
} }
:global(.grid.highlight > .component.dragging) {
z-index: 999 !important;
}
/* Ensure all top level children have grid styles applied */ /* Ensure all top level children have grid styles applied */
.grid :global(> .component) { .grid :global(> .component) {

11
packages/client/src/components/preview/GridDNDHandler.svelte
View File

@ -29,20 +29,11 @@
// Set ephemeral styles // Set ephemeral styles
$: instance = componentStore.actions.getComponentInstance(id) $: instance = componentStore.actions.getComponentInstance(id)
$: $instance?.setEphemeralStyles(enrichComponentStyles($styles)) $: $instance?.setEphemeralStyles($styles)
// Sugar for a combination of both min and max // Sugar for a combination of both min and max
const minMax = (value, min, max) => Math.min(max, Math.max(min, value)) const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
const enrichComponentStyles = styles => {
let clone = { ...styles }
if (styles) {
clone["z-index"] = 999
clone["pointer-events"] = "none"
}
return clone
}
const processEvent = Utils.domDebounce((mouseX, mouseY) => { const processEvent = Utils.domDebounce((mouseX, mouseY) => {
if (!dragInfo?.grid) { if (!dragInfo?.grid) {
return return