mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 02:34:10 +00:00
66509b81c4
Backport of #6793 to `cloud/1.32` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6855-backport-cloud-1-32-Use-shared-button-components-in-queue-overlay-2b46d73d365081d69a6edd5e08e19edd) by [Unito](https://www.unito.io) Co-authored-by: Benjamin Lu <benceruleanlu@proton.me>
107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<template>
|
|
<IconButton
|
|
type="secondary"
|
|
size="fit-content"
|
|
class="group w-full justify-between gap-3 rounded-lg p-1 text-left font-normal hover:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
|
|
:aria-label="props.ariaLabel"
|
|
@click="emit('click', $event)"
|
|
>
|
|
<span class="inline-flex items-center gap-2">
|
|
<span v-if="props.mode === 'allFailed'" class="inline-flex items-center">
|
|
<i
|
|
class="ml-1 icon-[lucide--circle-alert] block size-4 leading-none"
|
|
:class="'text-destructive-background'"
|
|
/>
|
|
</span>
|
|
|
|
<span class="inline-flex items-center gap-2">
|
|
<span
|
|
v-if="props.mode !== 'allFailed'"
|
|
class="relative inline-flex h-6 items-center"
|
|
>
|
|
<span
|
|
v-for="(url, idx) in props.thumbnailUrls"
|
|
:key="url + idx"
|
|
class="inline-block h-6 w-6 overflow-hidden rounded-[6px] border-0 bg-secondary-background"
|
|
:style="{ marginLeft: idx === 0 ? '0' : '-12px' }"
|
|
>
|
|
<img :src="url" alt="preview" class="h-full w-full object-cover" />
|
|
</span>
|
|
</span>
|
|
|
|
<span class="text-[14px] font-normal text-text-primary">
|
|
<template v-if="props.mode === 'allSuccess'">
|
|
<i18n-t
|
|
keypath="sideToolbar.queueProgressOverlay.jobsCompleted"
|
|
:plural="props.completedCount"
|
|
>
|
|
<template #count>
|
|
<span class="font-bold">{{ props.completedCount }}</span>
|
|
</template>
|
|
</i18n-t>
|
|
</template>
|
|
<template v-else-if="props.mode === 'mixed'">
|
|
<i18n-t
|
|
keypath="sideToolbar.queueProgressOverlay.jobsCompleted"
|
|
:plural="props.completedCount"
|
|
>
|
|
<template #count>
|
|
<span class="font-bold">{{ props.completedCount }}</span>
|
|
</template>
|
|
</i18n-t>
|
|
<span>, </span>
|
|
<i18n-t
|
|
keypath="sideToolbar.queueProgressOverlay.jobsFailed"
|
|
:plural="props.failedCount"
|
|
>
|
|
<template #count>
|
|
<span class="font-bold">{{ props.failedCount }}</span>
|
|
</template>
|
|
</i18n-t>
|
|
</template>
|
|
<template v-else>
|
|
<i18n-t
|
|
keypath="sideToolbar.queueProgressOverlay.jobsFailed"
|
|
:plural="props.failedCount"
|
|
>
|
|
<template #count>
|
|
<span class="font-bold">{{ props.failedCount }}</span>
|
|
</template>
|
|
</i18n-t>
|
|
</template>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
|
|
<span
|
|
class="flex items-center justify-center rounded p-1 text-text-secondary transition-colors duration-200 ease-in-out"
|
|
>
|
|
<i class="icon-[lucide--chevron-down] block size-4 leading-none" />
|
|
</span>
|
|
</IconButton>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import IconButton from '@/components/button/IconButton.vue'
|
|
import type {
|
|
CompletionSummary,
|
|
CompletionSummaryMode
|
|
} from '@/composables/queue/useCompletionSummary'
|
|
|
|
type Props = {
|
|
mode: CompletionSummaryMode
|
|
completedCount: CompletionSummary['completedCount']
|
|
failedCount: CompletionSummary['failedCount']
|
|
thumbnailUrls?: CompletionSummary['thumbnailUrls']
|
|
ariaLabel?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
thumbnailUrls: () => []
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'click', event: MouseEvent): void
|
|
}>()
|
|
</script>
|