always show subflow expand button (#7033)

* fix unwanted tab change

* expand subflow is always visible

* nit

* nit
This commit is contained in:
Guilhem
2025-11-03 12:23:01 +00:00
committed by GitHub
parent 667bbed308
commit 139fbee0ec
4 changed files with 48 additions and 45 deletions
@@ -489,14 +489,16 @@
</div>
{#if deletable && !action}
<div
class="absolute -translate-y-[100%] top-2 -right-2 flex flex-row gap-1 p-1 min-w-[52px] h-7 group justify-end"
>
{#if id !== 'preprocessor'}
{#if maximizeSubflow !== undefined}
{@render buttonMaximizeSubflow?.()}
{/if}
{#if id !== 'preprocessor'}
<div class={twMerge('absolute -translate-y-[100%] top-2 right-4 h-7 p-1 min-w-7')}>
<button
class={twMerge(
'trash center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-accent-hover hover:text-white',
hover ? 'block' : '!hidden',
'trash center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary',
hover || selected ? 'block' : '!hidden',
'shadow-md rounded-md',
'group-hover:block'
)}
@@ -505,12 +507,10 @@
>
<Move size={12} />
</button>
{/if}
{#if maximizeSubflow !== undefined && (hover || selected)}
{@render buttonMaximizeSubflow?.()}
{/if}
</div>
{/if}
<div class="absolute -translate-y-[100%] top-2 -right-2 h-7 p-1 min-w-7">
<button
class={twMerge(
'trash center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-red-400 hover:text-white p-1',
@@ -557,11 +557,7 @@
</Popover>
{/if}
{:else if maximizeSubflow !== undefined}
<div
class="absolute -translate-y-[100%] top-2 right-10 flex flex-row gap-1 p-1 min-w-[52px] h-7 justify-end"
>
{@render buttonMaximizeSubflow?.()}
</div>
{@render buttonMaximizeSubflow?.()}
{/if}
</div>
@@ -624,22 +620,27 @@
</div>
{#snippet buttonMaximizeSubflow()}
<button
title="Expand subflow"
class={twMerge(
'center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-accent-hover hover:text-white p-1',
selected || hover ? 'block' : '!hidden',
'group-hover:block',
'shadow-md rounded-md'
)}
onclick={(e) => {
e.stopPropagation()
e.preventDefault()
maximizeSubflow?.()
}}
>
<Maximize2 size={12} />
</button>
<div class="absolute -translate-y-[100%] top-2 right-10 h-7 p-1">
<button
title="Expand subflow"
class={twMerge(
'center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary p-1',
'shadow-md rounded-md',
hover || selected ? 'opacity-100' : 'opacity-50'
)}
onclick={(e) => {
e.stopPropagation()
e.preventDefault()
maximizeSubflow?.()
}}
onpointerdown={(e) => {
e.stopPropagation()
e.preventDefault()
}}
>
<Maximize2 size={12} />
</button>
</div>
{/snippet}
<style>
@@ -118,7 +118,7 @@
<div
class={twMerge(
'absolute z-10 right-0 -top-4 center-center text-primary text-2xs',
editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2 right-10' : ''
editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2 right-16' : ''
)}
>
{msToSec(duration_ms)}s
@@ -636,7 +636,7 @@
nodesDraggable={false}
--background-color={false}
>
<div class="absolute inset-0 !bg-surface-secondary h-full"></div>
<div class="absolute inset-0 !bg-surface-secondary h-full" id="flow-graph-v2"></div>
{#if leftHeader}
<div class="absolute top-2 left-2 z-10">
{@render leftHeader()}
@@ -24,16 +24,18 @@
setTimeout(() => data.eventHandlers?.select(data.id))
}}
/>
<button
title="Unexpand subflow"
class="z-50 absolute -top-[10px] right-[25px] rounded-md h-[20px] w-[20px] center-center text-primary bg-surface duration-0 hover:bg-surface-accent-hover hover:text-white"
onclick={stopPropagation(
preventDefault(() => {
data.eventHandlers.minimizeSubflow(data.subflowId)
})
)}
>
<Minimize2 size={12} />
</button>
<div class="z-50 absolute -top-4 right-11 rounded-md text-primary bg-surface">
<button
title="Unexpand subflow"
class="rounded-md center-center text-primary hover:bg-surface-tertiary shadow-md p-1 duration-0"
onclick={stopPropagation(
preventDefault(() => {
data.eventHandlers.minimizeSubflow(data.subflowId)
})
)}
>
<Minimize2 size={12} />
</button>
</div>
{/snippet}
</NodeWrapper>