mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 10:42:44 +00:00
fix(AssetCard): use tooltip instead of title for overflow text (#6556)
## Summary The default `title` attribute was too small and too slow to show for users. We were getting complaints about not being able to see the full name of the model. Using [Prime Vue's tooltip](https://primevue.org/tooltip) instead. ## Screenshots (if applicable) Before: <img width="480" height="246" alt="image" src="https://github.com/user-attachments/assets/db4d1cc7-9e9a-40b3-bf16-57f2def93726" /> After: <img width="518" height="720" alt="image" src="https://github.com/user-attachments/assets/500389e5-c781-4d3b-b62e-1e72d2b7e2c6" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6556-fix-AssetCard-use-tooltip-instead-of-title-for-overflow-text-2a06d73d365081939dc0d863b05f1e90) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -24,18 +24,19 @@
|
|||||||
<div>
|
<div>
|
||||||
<h3
|
<h3
|
||||||
:id="titleId"
|
:id="titleId"
|
||||||
|
v-tooltip.top="{ value: asset.name, showDelay: tooltipDelay }"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
|
'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
|
||||||
'text-base-foreground'
|
'text-base-foreground'
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
:title="asset.name"
|
|
||||||
>
|
>
|
||||||
{{ asset.name }}
|
{{ asset.name }}
|
||||||
</h3>
|
</h3>
|
||||||
<p
|
<p
|
||||||
:id="descId"
|
:id="descId"
|
||||||
|
v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
|
'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
|
||||||
@@ -43,7 +44,6 @@
|
|||||||
'dark-theme:text-slate-100'
|
'dark-theme:text-slate-100'
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
:title="asset.description"
|
|
||||||
>
|
>
|
||||||
{{ asset.description }}
|
{{ asset.description }}
|
||||||
</p>
|
</p>
|
||||||
@@ -76,6 +76,7 @@ import { computed, useId } from 'vue'
|
|||||||
|
|
||||||
import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
|
import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
|
||||||
import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
|
import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
|
||||||
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||||
import { cn } from '@/utils/tailwindUtil'
|
import { cn } from '@/utils/tailwindUtil'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
@@ -83,9 +84,15 @@ const props = defineProps<{
|
|||||||
interactive?: boolean
|
interactive?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const settingStore = useSettingStore()
|
||||||
|
|
||||||
const titleId = useId()
|
const titleId = useId()
|
||||||
const descId = useId()
|
const descId = useId()
|
||||||
|
|
||||||
|
const tooltipDelay = computed<number>(() =>
|
||||||
|
settingStore.get('LiteGraph.Node.TooltipDelay')
|
||||||
|
)
|
||||||
|
|
||||||
const { error } = useImage({
|
const { error } = useImage({
|
||||||
src: props.asset.preview_url ?? '',
|
src: props.asset.preview_url ?? '',
|
||||||
alt: props.asset.name
|
alt: props.asset.name
|
||||||
|
|||||||
Reference in New Issue
Block a user