jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Stop hover transfer working between rows of Properties panel dropdown menus

This commit is contained in:
Keavon Chambers 2025-12-19 23:44:55 -08:00
parent 2d6d054359
commit e99f30e633
4 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/layout/FloatingMenu.svelte
View File

@ -372,6 +372,9 @@
// Start with the parent of the spawner for this floating menu and keep widening the search for any other valid spawners that are hover-transferrable // Start with the parent of the spawner for this floating menu and keep widening the search for any other valid spawners that are hover-transferrable
let currentAncestor = (targetSpawner && ownSpawner?.parentElement) || undefined; let currentAncestor = (targetSpawner && ownSpawner?.parentElement) || undefined;
while (currentAncestor) { while (currentAncestor) {
// If the current ancestor blocks hover transfer, stop searching
if (currentAncestor.hasAttribute("data-block-hover-transfer")) break;
const ownSpawnerDepthFromCurrentAncestor = ownSpawner && getDepthFromAncestor(ownSpawner, currentAncestor); const ownSpawnerDepthFromCurrentAncestor = ownSpawner && getDepthFromAncestor(ownSpawner, currentAncestor);
const currentAncestor2 = currentAncestor; // This duplicate variable avoids an ESLint warning const currentAncestor2 = currentAncestor; // This duplicate variable avoids an ESLint warning
@ -382,8 +385,8 @@
const notOurself = !ownDescendantMenuSpawners.includes(item); const notOurself = !ownDescendantMenuSpawners.includes(item);
// And filter away unequal depths from the current ancestor // And filter away unequal depths from the current ancestor
const notUnequalDepths = notOurself && getDepthFromAncestor(item, currentAncestor2) === ownSpawnerDepthFromCurrentAncestor; const notUnequalDepths = notOurself && getDepthFromAncestor(item, currentAncestor2) === ownSpawnerDepthFromCurrentAncestor;
// And filter away elements that explicitly disable hover transfer // And filter away descendants that explicitly disable hover transfer
return notUnequalDepths && !(item as HTMLElement).getAttribute?.("data-floating-menu-spawner")?.includes("no-hover-transfer"); return notUnequalDepths && !(item instanceof HTMLElement && item.hasAttribute("data-block-hover-transfer"));
}); });
// If none were found, widen the search by a level and keep trying (or stop looping if the root was reached) // If none were found, widen the search by a level and keep trying (or stop looping if the root was reached)

2
frontend/src/components/widgets/WidgetSection.svelte
View File

@ -59,7 +59,7 @@
/> />
</button> </button>
{#if expanded} {#if expanded}
<LayoutCol class="body"> <LayoutCol class="body" data-block-hover-transfer>
{#each widgetData.layout as layoutGroup} {#each widgetData.layout as layoutGroup}
{#if isWidgetSpanRow(layoutGroup)} {#if isWidgetSpanRow(layoutGroup)}
<WidgetSpan widgetData={layoutGroup} {layoutTarget} /> <WidgetSpan widgetData={layoutGroup} {layoutTarget} />

3
frontend/src/components/widgets/buttons/TextButton.svelte
View File

@ -72,7 +72,8 @@
data-disabled={disabled || undefined} data-disabled={disabled || undefined}
data-text-button data-text-button
tabindex={disabled ? -1 : 0} tabindex={disabled ? -1 : 0}
data-floating-menu-spawner={menuListChildrenExists ? "" : "no-hover-transfer"} data-floating-menu-spawner
data-block-hover-transfer={menuListChildrenExists ? undefined : ""}
on:click={onClick} on:click={onClick}
> >
{#if icon} {#if icon}

4
frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
View File

@ -37,7 +37,7 @@
<LayoutCol class="working-colors-button"> <LayoutCol class="working-colors-button">
<LayoutRow class="primary swatch"> <LayoutRow class="primary swatch">
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button> <button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<ColorPicker <ColorPicker
open={primaryOpen} open={primaryOpen}
on:open={({ detail }) => (primaryOpen = detail)} on:open={({ detail }) => (primaryOpen = detail)}
@ -47,7 +47,7 @@
/> />
</LayoutRow> </LayoutRow>
<LayoutRow class="secondary swatch"> <LayoutRow class="secondary swatch">
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button> <button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<ColorPicker <ColorPicker
open={secondaryOpen} open={secondaryOpen}
on:open={({ detail }) => (secondaryOpen = detail)} on:open={({ detail }) => (secondaryOpen = detail)}