Ensure transitions work properly when showing and hiding DND candidate positions
This commit is contained in:
parent
46867b8a19
commit
601a4935a9
|
@ -25,9 +25,7 @@
|
||||||
|
|
||||||
// Highlight being dragged by setting opacity
|
// Highlight being dragged by setting opacity
|
||||||
const child = getDOMNodeForComponent(e.target)
|
const child = getDOMNodeForComponent(e.target)
|
||||||
console.log(child)
|
|
||||||
if (child) {
|
if (child) {
|
||||||
console.log("set opacity")
|
|
||||||
child.style.opacity = "0.5"
|
child.style.opacity = "0.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -163,7 +161,8 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<DNDPositionIndicator
|
<DNDPositionIndicator
|
||||||
dropInfo={dropMode !== "inside" ? dropInfo : null}
|
componentId={dropTarget}
|
||||||
|
{dropInfo}
|
||||||
mode={dropMode}
|
mode={dropMode}
|
||||||
color="var(--spectrum-global-color-static-green-500)"
|
color="var(--spectrum-global-color-static-green-500)"
|
||||||
zIndex="940"
|
zIndex="940"
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import Indicator from "./Indicator.svelte"
|
import Indicator from "./Indicator.svelte"
|
||||||
|
|
||||||
|
export let componentId
|
||||||
export let dropInfo
|
export let dropInfo
|
||||||
export let mode
|
export let mode
|
||||||
export let zIndex
|
export let zIndex
|
||||||
|
@ -24,8 +25,8 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#key mode}
|
{#key `${componentId}-${mode}`}
|
||||||
{#if dimensions}
|
{#if dimensions && mode !== "inside"}
|
||||||
<Indicator
|
<Indicator
|
||||||
left={dimensions.left}
|
left={dimensions.left}
|
||||||
top={dimensions.top}
|
top={dimensions.top}
|
||||||
|
|
Loading…
Reference in New Issue