Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-22 15:29:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance MediaAssetCard selection UI and interaction (#6729)

Browse Source
This commit is contained in:
Jin Yi
2025-11-18 10:54:56 +09:00
committed by GitHub
parent a4d979e4c9
commit 7a0302ba7a
6 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/platform/assets/components/Media3DTop.vue
View File

@@ -1,10 +1,12 @@
<template>
<div class="relative size-full overflow-hidden rounded">
<div
class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background text-base-foreground"
class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
>
<i class="icon-[lucide--box] text-3xl" />
<span>{{ $t('assetBrowser.media.threeDModelPlaceholder') }}</span>
<i class="icon-[lucide--box] text-3xl text-base-foreground" />
<span class="text-base-foreground">{{
$t('assetBrowser.media.threeDModelPlaceholder')
}}</span>
</div>
</div>
</template>

8
src/platform/assets/components/MediaAssetCard.vue
View File

@@ -15,6 +15,8 @@
variant="ghost"
rounded="lg"
:class="containerClasses"
:data-selected="selected"
@click.stop
>
<template #top>
<CardTop
@@ -247,10 +249,10 @@ provide(MediaAssetKey, {
const containerClasses = computed(() =>
cn(
'gap-1 select-none',
'gap-1 select-none group',
selected
? 'border-3 border-base-foreground bg-modal-card-background'
: 'hover:bg-modal-card-background/70'
? 'ring-3 ring-inset ring-base-foreground bg-modal-card-background'
: 'hover:bg-modal-card-background'
)
)

8
src/platform/assets/components/MediaAudioTop.vue
View File

@@ -1,10 +1,12 @@
<template>
<div class="relative size-full overflow-hidden rounded">
<div
class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background text-base-foreground"
class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
>
<i class="icon-[lucide--music] text-3xl" />
<span>{{ $t('assetBrowser.media.audioPlaceholder') }}</span>
<i class="icon-[lucide--music] text-3xl text-base-foreground" />
<span class="text-base-foreground">{{
$t('assetBrowser.media.audioPlaceholder')
}}</span>
</div>
<audio
controls

4
src/platform/assets/components/MediaImageTop.vue
View File

@@ -6,13 +6,13 @@
v-if="!error"
:src="asset.src"
:alt="asset.name"
class="size-full object-contain"
class="size-full object-contain transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
/>
<div
v-else
class="flex size-full items-center justify-center bg-modal-card-placeholder-background"
>
<i class="pi pi-image text-3xl text-smoke-400" />
<i class="pi pi-image text-3xl text-muted-foreground" />
</div>
</div>
</template>

2
src/platform/assets/components/MediaVideoTop.vue
View File

@@ -13,7 +13,7 @@
loop
playsinline
:poster="asset.preview_url"
class="relative size-full object-contain"
class="relative size-full object-contain transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
@click.stop
@play="onVideoPlay"
@pause="onVideoPause"