mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 19:21:54 +00:00
fix: anchor floating inline progress summary
This commit is contained in:
@@ -43,6 +43,7 @@
|
|||||||
class="[&:not(:has(*>*:not(:empty)))]:hidden"
|
class="[&:not(:has(*>*:not(:empty)))]:hidden"
|
||||||
></div>
|
></div>
|
||||||
<ComfyActionbar
|
<ComfyActionbar
|
||||||
|
ref="actionbarRef"
|
||||||
:top-menu-container="actionbarContainerRef"
|
:top-menu-container="actionbarContainerRef"
|
||||||
:queue-overlay-expanded="isQueueOverlayExpanded"
|
:queue-overlay-expanded="isQueueOverlayExpanded"
|
||||||
/>
|
/>
|
||||||
@@ -103,10 +104,18 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
<Teleport
|
||||||
|
v-if="inlineProgressSummaryTarget"
|
||||||
|
:to="inlineProgressSummaryTarget"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="pointer-events-none absolute left-0 right-0 top-full mt-1 flex justify-end pr-1"
|
||||||
|
>
|
||||||
|
<QueueInlineProgressSummary :hidden="isQueueOverlayExpanded" />
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
<QueueInlineProgressSummary
|
<QueueInlineProgressSummary
|
||||||
v-if="
|
v-else-if="shouldShowInlineProgressSummary && !isActionbarFloating"
|
||||||
isInlineProgressVisible && isActionbarEnabled && !isActionbarFloating
|
|
||||||
"
|
|
||||||
class="pr-1"
|
class="pr-1"
|
||||||
:hidden="isQueueOverlayExpanded"
|
:hidden="isQueueOverlayExpanded"
|
||||||
/>
|
/>
|
||||||
@@ -195,6 +204,25 @@ const isQueueProgressOverlayVisible = computed(
|
|||||||
() => !isQueuePanelV2Enabled.value
|
() => !isQueuePanelV2Enabled.value
|
||||||
)
|
)
|
||||||
const isInlineProgressVisible = computed(() => isQueuePanelV2Enabled.value)
|
const isInlineProgressVisible = computed(() => isQueuePanelV2Enabled.value)
|
||||||
|
type PanelElementTarget = HTMLElement | { value?: HTMLElement | null } | null
|
||||||
|
const shouldShowInlineProgressSummary = computed(
|
||||||
|
() => isInlineProgressVisible.value && isActionbarEnabled.value
|
||||||
|
)
|
||||||
|
const actionbarRef = ref<{ panelElement: PanelElementTarget } | null>(null)
|
||||||
|
const resolvePanelElement = (target: PanelElementTarget) => {
|
||||||
|
if (!target) return null
|
||||||
|
if (target instanceof HTMLElement) return target
|
||||||
|
if (typeof target === 'object' && 'value' in target) {
|
||||||
|
return target.value ?? null
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
const inlineProgressSummaryTarget = computed(() => {
|
||||||
|
if (!shouldShowInlineProgressSummary.value || !isActionbarFloating.value) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
return resolvePanelElement(actionbarRef.value?.panelElement ?? null)
|
||||||
|
})
|
||||||
const queueHistoryTooltipConfig = computed(() =>
|
const queueHistoryTooltipConfig = computed(() =>
|
||||||
buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
|
buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -282,6 +282,8 @@ const inlineProgressTarget = computed(() => {
|
|||||||
return panelElement.value
|
return panelElement.value
|
||||||
})
|
})
|
||||||
|
|
||||||
|
defineExpose({ panelElement })
|
||||||
|
|
||||||
// Handle drag state changes
|
// Handle drag state changes
|
||||||
watch(isDragging, (dragging) => {
|
watch(isDragging, (dragging) => {
|
||||||
if (dragging) {
|
if (dragging) {
|
||||||
|
|||||||
Reference in New Issue
Block a user