mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
85bec5ee47
## Summary - replace raw button elements in queue progress overlay UI with shared IconButton/TextButton/IconTextButton components - remove forced justify-start from IconTextButton base and add explicit alignment where needed - keep queue overlay actions consistent with button styling patterns ## Testing - pnpm typecheck - pnpm lint:fix ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6793-Use-shared-button-components-in-queue-overlay-2b26d73d3650814d9ebfebba74226036) by [Unito](https://www.unito.io)
91 lines
2.6 KiB
Vue
91 lines
2.6 KiB
Vue
<template>
|
|
<section
|
|
class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface text-text-primary shadow-interface font-inter"
|
|
>
|
|
<header
|
|
class="flex items-center justify-between border-b border-interface-stroke px-4 py-4"
|
|
>
|
|
<p class="m-0 text-[14px] font-normal leading-none">
|
|
{{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
|
|
</p>
|
|
<IconButton
|
|
type="transparent"
|
|
size="sm"
|
|
class="size-6 bg-transparent text-text-secondary hover:bg-secondary-background hover:opacity-100"
|
|
:aria-label="t('g.close')"
|
|
@click="onCancel"
|
|
>
|
|
<i class="icon-[lucide--x] block size-4 leading-none" />
|
|
</IconButton>
|
|
</header>
|
|
|
|
<div class="flex flex-col gap-4 px-4 py-4 text-[14px] text-text-secondary">
|
|
<p class="m-0">
|
|
{{
|
|
t('sideToolbar.queueProgressOverlay.clearHistoryDialogDescription')
|
|
}}
|
|
</p>
|
|
<p class="m-0">
|
|
{{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogAssetsNote') }}
|
|
</p>
|
|
</div>
|
|
|
|
<footer class="flex items-center justify-end px-4 py-4">
|
|
<div class="flex items-center gap-4 text-[14px] leading-none">
|
|
<TextButton
|
|
class="min-h-[24px] px-1 py-1 text-[14px] leading-[1] text-text-secondary hover:text-text-primary"
|
|
type="transparent"
|
|
:label="t('g.cancel')"
|
|
@click="onCancel"
|
|
/>
|
|
<TextButton
|
|
class="min-h-[32px] px-4 py-2 text-[12px] font-normal leading-[1]"
|
|
type="secondary"
|
|
:label="t('g.clear')"
|
|
:disabled="isClearing"
|
|
@click="onConfirm"
|
|
/>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import IconButton from '@/components/button/IconButton.vue'
|
|
import TextButton from '@/components/button/TextButton.vue'
|
|
import { useErrorHandling } from '@/composables/useErrorHandling'
|
|
import { useDialogStore } from '@/stores/dialogStore'
|
|
import { useQueueStore } from '@/stores/queueStore'
|
|
|
|
const dialogStore = useDialogStore()
|
|
const queueStore = useQueueStore()
|
|
const { t } = useI18n()
|
|
const { wrapWithErrorHandlingAsync } = useErrorHandling()
|
|
|
|
const isClearing = ref(false)
|
|
|
|
const clearHistory = wrapWithErrorHandlingAsync(
|
|
async () => {
|
|
await queueStore.clear(['history'])
|
|
dialogStore.closeDialog()
|
|
},
|
|
undefined,
|
|
() => {
|
|
isClearing.value = false
|
|
}
|
|
)
|
|
|
|
const onConfirm = async () => {
|
|
if (isClearing.value) return
|
|
isClearing.value = true
|
|
await clearHistory()
|
|
}
|
|
|
|
const onCancel = () => {
|
|
dialogStore.closeDialog()
|
|
}
|
|
</script>
|