mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 02:32:18 +00:00
feat: show App/Node Graph type indicator on template cards (#9695)
Show a type label (App or Node Graph) below the description on each template card in the workflow templates modal. Templates with `.app.json` suffix display an app icon with "App", all others show a workflow icon with "Node Graph". Card size changed from compact to tall to fit the extra row. https://github.com/user-attachments/assets/dc14d7f5-2994-4764-aa96-c5fc5b634e7e ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9695-feat-show-App-Node-Graph-type-indicator-on-template-cards-31f6d73d3650813f8310c850f6107cf6) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 119 KiB |
@@ -178,7 +178,7 @@
|
|||||||
v-show="isTemplateVisibleOnDistribution(template)"
|
v-show="isTemplateVisibleOnDistribution(template)"
|
||||||
:key="template.name"
|
:key="template.name"
|
||||||
ref="cardRefs"
|
ref="cardRefs"
|
||||||
size="compact"
|
size="tall"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
rounded="lg"
|
rounded="lg"
|
||||||
:data-testid="`template-workflow-${template.name}`"
|
:data-testid="`template-workflow-${template.name}`"
|
||||||
@@ -318,6 +318,20 @@
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<span
|
||||||
|
class="text-neutral flex items-center gap-1.5 text-xs font-bold"
|
||||||
|
>
|
||||||
|
<template v-if="isAppTemplate(template)">
|
||||||
|
<i class="icon-[lucide--panels-top-left]" />
|
||||||
|
{{ $t('builderToolbar.app', 'App') }}
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<i class="icon-[lucide--workflow]" />
|
||||||
|
{{ $t('builderToolbar.nodeGraph', 'Node Graph') }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardBottom>
|
</CardBottom>
|
||||||
</template>
|
</template>
|
||||||
@@ -483,6 +497,8 @@ const {
|
|||||||
const getEffectiveSourceModule = (template: TemplateInfo) =>
|
const getEffectiveSourceModule = (template: TemplateInfo) =>
|
||||||
template.sourceModule || 'default'
|
template.sourceModule || 'default'
|
||||||
|
|
||||||
|
const isAppTemplate = (template: TemplateInfo) => template.name.endsWith('.app')
|
||||||
|
|
||||||
const getBaseThumbnailSrc = (template: TemplateInfo) => {
|
const getBaseThumbnailSrc = (template: TemplateInfo) => {
|
||||||
const sm = getEffectiveSourceModule(template)
|
const sm = getEffectiveSourceModule(template)
|
||||||
return getTemplateThumbnailUrl(template, sm, sm === 'default' ? '1' : '')
|
return getTemplateThumbnailUrl(template, sm, sm === 'default' ? '1' : '')
|
||||||
|
|||||||
Reference in New Issue
Block a user