mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-09 09:30:06 +00:00
55f842f4cb
Backport of #6793 to `core/1.32` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6854-backport-core-1-32-Use-shared-button-components-in-queue-overlay-2b46d73d365081f488aed067909200bc) by [Unito](https://www.unito.io) Co-authored-by: Benjamin Lu <benceruleanlu@proton.me>
126 lines
4.2 KiB
Vue
126 lines
4.2 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-3 p-2">
|
|
<div class="flex flex-col gap-1">
|
|
<div
|
|
class="relative h-2 w-full overflow-hidden rounded-full border border-interface-stroke bg-interface-panel-surface"
|
|
>
|
|
<div
|
|
class="absolute inset-0 h-full rounded-full transition-[width]"
|
|
:style="totalProgressStyle"
|
|
/>
|
|
<div
|
|
class="absolute inset-0 h-full rounded-full transition-[width]"
|
|
:style="currentNodeProgressStyle"
|
|
/>
|
|
</div>
|
|
<div class="flex items-start justify-end gap-4 text-[12px] leading-none">
|
|
<div class="flex items-center gap-1 text-text-primary opacity-90">
|
|
<i18n-t keypath="sideToolbar.queueProgressOverlay.total">
|
|
<template #percent>
|
|
<span class="font-bold">{{ totalPercentFormatted }}</span>
|
|
</template>
|
|
</i18n-t>
|
|
</div>
|
|
<div class="flex items-center gap-1 text-text-secondary">
|
|
<span>{{ t('sideToolbar.queueProgressOverlay.currentNode') }}</span>
|
|
<span class="inline-block max-w-[10rem] truncate">{{
|
|
currentNodeName
|
|
}}</span>
|
|
<span class="flex items-center gap-1">
|
|
<span>{{ currentNodePercentFormatted }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div :class="bottomRowClass">
|
|
<div class="flex items-center gap-4 text-[12px] text-text-primary">
|
|
<div class="flex items-center gap-2">
|
|
<span class="opacity-90">
|
|
<span class="font-bold">{{ runningCount }}</span>
|
|
<span class="ml-1">{{
|
|
t('sideToolbar.queueProgressOverlay.running')
|
|
}}</span>
|
|
</span>
|
|
<IconButton
|
|
v-if="runningCount > 0"
|
|
v-tooltip.top="cancelJobTooltip"
|
|
type="secondary"
|
|
size="sm"
|
|
class="size-6 bg-secondary-background hover:bg-destructive-background"
|
|
:aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
|
|
@click="$emit('interruptAll')"
|
|
>
|
|
<i
|
|
class="icon-[lucide--x] block size-4 leading-none text-text-primary"
|
|
/>
|
|
</IconButton>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<span class="opacity-90">
|
|
<span class="font-bold">{{ queuedCount }}</span>
|
|
<span class="ml-1">{{
|
|
t('sideToolbar.queueProgressOverlay.queuedSuffix')
|
|
}}</span>
|
|
</span>
|
|
<IconButton
|
|
v-if="queuedCount > 0"
|
|
v-tooltip.top="clearQueueTooltip"
|
|
type="secondary"
|
|
size="sm"
|
|
class="size-6 bg-secondary-background hover:bg-destructive-background"
|
|
:aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
|
|
@click="$emit('clearQueued')"
|
|
>
|
|
<i
|
|
class="icon-[lucide--list-x] block size-4 leading-none text-text-primary"
|
|
/>
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
|
|
<TextButton
|
|
class="h-6 min-w-[120px] flex-1 px-2 py-0 text-[12px]"
|
|
type="secondary"
|
|
:label="t('sideToolbar.queueProgressOverlay.viewAllJobs')"
|
|
@click="$emit('viewAllJobs')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import IconButton from '@/components/button/IconButton.vue'
|
|
import TextButton from '@/components/button/TextButton.vue'
|
|
import { buildTooltipConfig } from '@/composables/useTooltipConfig'
|
|
|
|
defineProps<{
|
|
totalProgressStyle: Record<string, string>
|
|
currentNodeProgressStyle: Record<string, string>
|
|
totalPercentFormatted: string
|
|
currentNodePercentFormatted: string
|
|
currentNodeName: string
|
|
runningCount: number
|
|
queuedCount: number
|
|
bottomRowClass: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'interruptAll'): void
|
|
(e: 'clearQueued'): void
|
|
(e: 'viewAllJobs'): void
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
const cancelJobTooltip = computed(() =>
|
|
buildTooltipConfig(t('sideToolbar.queueProgressOverlay.cancelJobTooltip'))
|
|
)
|
|
const clearQueueTooltip = computed(() =>
|
|
buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearQueueTooltip'))
|
|
)
|
|
</script>
|