mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 07:00:23 +00:00
[backport rh-test] fix(AssetCard): use tooltip instead of title for overflow text (#6558)
Backport of #6556 to `rh-test` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6558-backport-rh-test-fix-AssetCard-use-tooltip-instead-of-title-for-overflow-text-2a06d73d365081bd8e12dea668538935) by [Unito](https://www.unito.io) Co-authored-by: Arjan Singh <1598641+arjansingh@users.noreply.github.com>
This commit is contained in:
@@ -24,6 +24,7 @@
|
||||
<div>
|
||||
<h3
|
||||
:id="titleId"
|
||||
v-tooltip.top="{ value: asset.name, showDelay: tooltipDelay }"
|
||||
:class="
|
||||
cn(
|
||||
'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
|
||||
@@ -31,12 +32,12 @@
|
||||
'dark-theme:text-white'
|
||||
)
|
||||
"
|
||||
:title="asset.name"
|
||||
>
|
||||
{{ asset.name }}
|
||||
</h3>
|
||||
<p
|
||||
:id="descId"
|
||||
v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
|
||||
:class="
|
||||
cn(
|
||||
'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
|
||||
@@ -44,7 +45,6 @@
|
||||
'dark-theme:text-slate-100'
|
||||
)
|
||||
"
|
||||
:title="asset.description"
|
||||
>
|
||||
{{ asset.description }}
|
||||
</p>
|
||||
@@ -81,6 +81,7 @@ import { computed, useId } from 'vue'
|
||||
|
||||
import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
|
||||
import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { cn } from '@/utils/tailwindUtil'
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -88,9 +89,15 @@ const props = defineProps<{
|
||||
interactive?: boolean
|
||||
}>()
|
||||
|
||||
const settingStore = useSettingStore()
|
||||
|
||||
const titleId = useId()
|
||||
const descId = useId()
|
||||
|
||||
const tooltipDelay = computed<number>(() =>
|
||||
settingStore.get('LiteGraph.Node.TooltipDelay')
|
||||
)
|
||||
|
||||
const { error } = useImage({
|
||||
src: props.asset.preview_url ?? '',
|
||||
alt: props.asset.name
|
||||
|
||||
Reference in New Issue
Block a user