mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 01:20:03 +00:00
fix: hide empty actionbar container and relocate error border to floating actionbar (#9657)
## Summary When the actionbar is floating and has no docked buttons, the container is now hidden (zero-width, transparent border) to avoid showing an empty rounded box. Additionally, the error/destructive border is now applied to the floating actionbar panel itself (via `ComfyActionbar`) instead of the container, so it appears in the correct location when floating. ## Changes - **TopMenuSection**: Added `hasDockedButtons` and `isActionbarContainerEmpty` computed properties to detect when the docked container has no visible buttons; `actionbarContainerClass` computed hides the container by collapsing it when empty and floating, while preserving the legacy drop zone via `:has(.border-dashed)` CSS selector - **TopMenuSection**: Error border (`border-destructive-background-hover`) is now only applied to the docked container when the actionbar is **not** floating - **ComfyActionbar**: Accepts new `hasAnyError` prop and applies the error border to the floating panel's `panelClass` when floating ## Review Focus - The `has-[.border-dashed]` CSS selector restores the container visuals when a legacy drag-target element is present inside it — verify this works as expected - Error border placement: docked mode shows border on container, floating mode shows border on the fixed panel ## Screenshots https://github.com/user-attachments/assets/75caabac-e391-4bfd-b4dc-62d564e55d37
This commit is contained in:
@@ -119,9 +119,14 @@ import { cn } from '@/utils/tailwindUtil'
|
||||
|
||||
import ComfyRunButton from './ComfyRunButton'
|
||||
|
||||
const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
|
||||
const {
|
||||
topMenuContainer,
|
||||
queueOverlayExpanded = false,
|
||||
hasAnyError = false
|
||||
} = defineProps<{
|
||||
topMenuContainer?: HTMLElement | null
|
||||
queueOverlayExpanded?: boolean
|
||||
hasAnyError?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -435,7 +440,12 @@ const panelClass = computed(() =>
|
||||
isDragging.value && 'pointer-events-none select-none',
|
||||
isDocked.value
|
||||
? 'static border-none bg-transparent p-0'
|
||||
: 'fixed shadow-interface'
|
||||
: [
|
||||
'fixed shadow-interface',
|
||||
hasAnyError
|
||||
? 'border-destructive-background-hover'
|
||||
: 'border-interface-stroke'
|
||||
]
|
||||
)
|
||||
)
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user