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

fix: prevent text selection on interactive Asset Browser elements

Browse Source 
Add select-none to cards, nav items, badges, headers, and labels

Improves touch/mobile UX by preventing accidental selection

Amp-Thread-ID: https://ampcode.com/threads/T-019be83a-cf2b-7079-8ca9-45fcda1d5fff
Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
Alexander Brown
2026-01-22 17:22:24 -08:00
parent 4b1a30e330
commit f37bfb80d2
8 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/widget/layout/BaseModalLayout.vue
View File

@@ -69,7 +69,7 @@
<slot name="contentFilter" />
<h2
v-if="!hasLeftPanel"
class="text-xxl m-0 px-6 pt-2 pb-6 capitalize"
class="text-xxl m-0 select-none px-6 pt-2 pb-6 capitalize"
>
{{ contentTitle }}
</h2>
@@ -94,7 +94,10 @@
data-component-id="RightPanelHeader"
class="flex h-18 shrink-0 items-center gap-2 px-6"
>
<h2 v-if="rightPanelTitle" class="flex-1 text-base font-semibold">
<h2
v-if="rightPanelTitle"
class="flex-1 select-none text-base font-semibold"
>
{{ rightPanelTitle }}
</h2>
<div v-else class="flex-1">

2
src/components/widget/nav/NavItem.vue
View File

@@ -5,7 +5,7 @@
disabled: !isOverflowing,
pt: { text: { class: 'whitespace-nowrap' } }
}"
class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
class="flex cursor-pointer select-none items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
:class="
active
? 'bg-interface-menu-component-surface-selected'

2
src/components/widget/panel/PanelHeader.vue
View File

@@ -1,5 +1,5 @@
<template>
<header class="flex h-16 items-center justify-between px-6">
<header class="flex h-16 items-center justify-between px-6 select-none">
<div class="flex items-center gap-2 pl-1">
<slot name="icon">
<i class="text-neutral icon-[lucide--puzzle] text-base" />

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

@@ -1,5 +1,7 @@
<template>
<div class="absolute left-2 bottom-2 flex flex-wrap justify-start gap-1">
<div
class="absolute left-2 bottom-2 flex flex-wrap justify-start gap-1 select-none"
>
<span
v-for="badge in badges"
:key="badge.label"

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

@@ -7,7 +7,7 @@
:tabindex="interactive ? 0 : -1"
:class="
cn(
'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
'select-none rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
interactive &&
'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4',
focused && 'bg-secondary-background outline-solid'

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

@@ -15,7 +15,7 @@
</div>
<div
v-else-if="assets.length === 0"
class="flex h-full flex-col items-center justify-center py-16 text-muted-foreground"
class="flex h-full select-none flex-col items-center justify-center py-16 text-muted-foreground"
>
<i class="mb-4 icon-[lucide--search] size-10" />
<h3 class="mb-2 text-lg font-medium">

2
src/platform/assets/components/modelInfo/ModelInfoField.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col gap-2 px-4 py-2 text-sm text-base-foreground">
<div class="flex items-center justify-between relative">
<span>{{ label }}</span>
<span class="select-none">{{ label }}</span>
<slot name="label-action" />
</div>
<slot />

6
src/platform/assets/components/modelInfo/ModelInfoPanel.vue
View File

@@ -5,7 +5,7 @@
>
<PropertiesAccordionItem :class="accordionClass">
<template #label>
<span class="text-xs uppercase font-inter">
<span class="text-xs uppercase font-inter select-none">
{{ t('assetBrowser.modelInfo.basicInfo') }}
</span>
</template>
@@ -58,7 +58,7 @@
<PropertiesAccordionItem :class="accordionClass">
<template #label>
<span class="text-xs uppercase font-inter">
<span class="text-xs uppercase font-inter select-none">
{{ t('assetBrowser.modelInfo.modelTagging') }}
</span>
</template>
@@ -134,7 +134,7 @@
<PropertiesAccordionItem :class="accordionClass">
<template #label>
<span class="text-xs uppercase font-inter">
<span class="text-xs uppercase font-inter select-none">
{{ t('assetBrowser.modelInfo.modelDescription') }}
</span>
</template>