mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-22 23:39:45 +00:00
f79a5dc6a8
* [fix] Resolve HoverDissolveThumbnail layering issue preventing dissolve effect - Fix layer stacking problem where LazyImage containers blocked overlay visibility - Restructure template with separate positioning containers for base and overlay images - Use z-index to ensure proper layering of overlay image above base image - Update CSS classes from absolute positioning on images to container-based positioning - Update test assertions to match new class structure - Ensure hover dissolve transition works correctly from opacity-0 to opacity-100 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Address code review feedback - Use size-full instead of w-full h-full for cleaner Tailwind classes - Update tests to use classList approach instead of string contains - Maintain same functionality while improving code quality 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: bymyself <cbyrne@comfy.org>
56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<template>
|
|
<BaseThumbnail :is-hovered="isHovered">
|
|
<div class="relative w-full h-full">
|
|
<div class="absolute inset-0">
|
|
<LazyImage
|
|
:src="baseImageSrc"
|
|
:alt="alt"
|
|
:image-class="baseImageClass"
|
|
/>
|
|
</div>
|
|
<div class="absolute inset-0 z-10">
|
|
<LazyImage
|
|
:src="overlayImageSrc"
|
|
:alt="alt"
|
|
:image-class="overlayImageClass"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</BaseThumbnail>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import LazyImage from '@/components/common/LazyImage.vue'
|
|
import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
|
|
|
|
const { baseImageSrc, overlayImageSrc, isVideo, isHovered } = defineProps<{
|
|
baseImageSrc: string
|
|
overlayImageSrc: string
|
|
alt: string
|
|
isHovered: boolean
|
|
isVideo?: boolean
|
|
}>()
|
|
|
|
const isVideoType =
|
|
isVideo ||
|
|
baseImageSrc?.toLowerCase().endsWith('.webp') ||
|
|
overlayImageSrc?.toLowerCase().endsWith('.webp') ||
|
|
false
|
|
|
|
const baseImageClass = computed(() => {
|
|
const sizeClasses = isVideoType
|
|
? 'size-full object-cover'
|
|
: 'size-full object-contain'
|
|
return sizeClasses
|
|
})
|
|
|
|
const overlayImageClass = computed(() => {
|
|
const baseClasses = 'size-full transition-opacity duration-300'
|
|
const sizeClasses = isVideoType ? 'object-cover' : 'object-contain'
|
|
const opacityClasses = isHovered ? 'opacity-100' : 'opacity-0'
|
|
return `${baseClasses} ${sizeClasses} ${opacityClasses}`
|
|
})
|
|
</script>
|