mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-20 06:44:32 +00:00
fix: add pulsing active-jobs indicator on queue button (#8915)
## Summary Add a small pulsing blue indicator dot to the top-right of the `N active` queue button when there are active jobs. ## Changes - **What**: Reused `StatusBadge` (`variant="dot"`) in `TopMenuSection` as a top-right indicator on the queue toggle button, shown only when `activeJobsCount > 0` and animated with `animate-pulse`. - **What**: Added tests to verify the indicator appears for nonzero active jobs and is hidden when there are no active jobs. ## Review Focus - Dot positioning on the queue button (`-top-0.5 -right-0.5`) across top menu layouts. - Indicator visibility behavior tied to `activeJobsCount > 0`. ## Screenshots (if applicable) https://github.com/user-attachments/assets/9bdb7675-3e58-485b-abdd-446a76b2dafc won't be shown on 0 active, I was just testing locally ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8915-fix-add-pulsing-active-jobs-indicator-on-queue-button-3096d73d36508181abf5c27662e0d9ae) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
@@ -60,7 +60,7 @@
|
||||
? isQueueOverlayExpanded
|
||||
: undefined
|
||||
"
|
||||
class="px-3"
|
||||
class="relative px-3"
|
||||
data-testid="queue-overlay-toggle"
|
||||
@click="toggleQueueOverlay"
|
||||
@contextmenu.stop.prevent="showQueueContextMenu"
|
||||
@@ -68,6 +68,12 @@
|
||||
<span class="text-sm font-normal tabular-nums">
|
||||
{{ activeJobsLabel }}
|
||||
</span>
|
||||
<StatusBadge
|
||||
v-if="activeJobsCount > 0"
|
||||
data-testid="active-jobs-indicator"
|
||||
variant="dot"
|
||||
class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
|
||||
/>
|
||||
<span class="sr-only">
|
||||
{{
|
||||
isQueuePanelV2Enabled
|
||||
@@ -139,6 +145,7 @@ import { useI18n } from 'vue-i18n'
|
||||
|
||||
import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
|
||||
import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
|
||||
import StatusBadge from '@/components/common/StatusBadge.vue'
|
||||
import QueueInlineProgressSummary from '@/components/queue/QueueInlineProgressSummary.vue'
|
||||
import QueueNotificationBannerHost from '@/components/queue/QueueNotificationBannerHost.vue'
|
||||
import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
|
||||
|
||||
Reference in New Issue
Block a user