Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-09 09:30:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Manager] Make node pack card dynamically sized (#3112)

Browse Source
This commit is contained in:
Christian Byrne
2025-03-17 14:51:05 -07:00
committed by GitHub
parent 65cf157958
commit 384b3f3218
2 changed files with 12 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/dialog/content/manager/ManagerDialogContent.vue
View File

@@ -57,29 +57,22 @@
<div v-else class="h-full" @click="handleGridContainerClick">
<VirtualGrid
:items="resultsWithKeys"
:defaultItemSize="DEFAULT_CARD_SIZE"
class="p-0 m-0 max-w-full"
:buffer-rows="2"
:buffer-rows="5"
:gridStyle="{
display: 'grid',
gridTemplateColumns: `repeat(auto-fill, minmax(${DEFAULT_CARD_SIZE}px, 1fr))`,
gridTemplateColumns: 'repeat(auto-fill, minmax(22rem, 1fr))',
padding: '0.5rem',
gap: '1.125rem 1.25rem',
justifyContent: 'stretch'
gap: '1.5rem'
}"
>
<template #item="{ item }">
<div
class="relative w-full aspect-square cursor-pointer"
<PackCard
@click.stop="(event) => selectNodePack(item, event)"
>
<PackCard
:node-pack="item"
:is-selected="
selectedNodePacks.some((pack) => pack.id === item.id)
"
/>
</div>
:node-pack="item"
:is-selected="
selectedNodePacks.some((pack) => pack.id === item.id)
"
/>
</template>
</VirtualGrid>
</div>
@@ -124,8 +117,6 @@ import { useComfyManagerStore } from '@/stores/comfyManagerStore'
import type { TabItem } from '@/types/comfyManagerTypes'
import { components } from '@/types/comfyRegistryTypes'
const DEFAULT_CARD_SIZE = 349
const { t } = useI18n()
const comfyManagerStore = useComfyManagerStore()

6
src/components/dialog/content/manager/packCard/PackCard.vue
View File

@@ -1,15 +1,15 @@
<template>
<Card
class="absolute inset-0 flex flex-col overflow-hidden rounded-2xl shadow-elevation-4 dark-theme:bg-dark-elevation-1 transition-all duration-200"
class="w-full h-full inline-flex flex-col justify-between items-start overflow-hidden rounded-2xl shadow-elevation-4 dark-theme:bg-dark-elevation-1 transition-all duration-200"
:class="{
'outline outline-[6px] outline-[var(--p-primary-color)]': isSelected
}"
:pt="{
body: { class: 'p-0 flex flex-col h-full rounded-2xl gap-0' },
body: { class: 'p-0 flex flex-col w-full h-full rounded-2xl gap-0' },
content: { class: 'flex-1 flex flex-col rounded-2xl' },
title: {
class:
'self-stretch px-4 py-3 inline-flex justify-start items-center gap-6'
'self-stretch w-full px-4 py-3 inline-flex justify-start items-center gap-6'
},
footer: { class: 'p-0 m-0' }
}"