estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add select-none class to tag filter components to prevent text selection (#23774)

Browse Source
This commit is contained in:
lyzno1
2025-08-12 09:23:59 +08:00
committed by GitHub
parent bc1cfd4373
commit e298eee822
4 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/base/tag-management/filter.tsx
View File

@@ -79,7 +79,7 @@ const TagFilter: FC<TagFilterProps> = ({
className='block' className='block'
> >
<div className={cn( <div className={cn(
'flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2', 'flex h-8 cursor-pointer select-none items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2',
!open && !!value.length && 'shadow-xs', !open && !!value.length && 'shadow-xs',
open && !!value.length && 'shadow-xs', open && !!value.length && 'shadow-xs',
)}> )}>
@@ -123,7 +123,7 @@ const TagFilter: FC<TagFilterProps> = ({
{filteredTagList.map(tag => ( {filteredTagList.map(tag => (
<div <div
key={tag.id} key={tag.id}
className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' className='flex cursor-pointer select-none items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover'
onClick={() => selectTag(tag)} onClick={() => selectTag(tag)}
> >
<div title={tag.name} className='grow truncate text-sm leading-5 text-text-tertiary'>{tag.name}</div> <div title={tag.name} className='grow truncate text-sm leading-5 text-text-tertiary'>{tag.name}</div>
@@ -139,7 +139,7 @@ const TagFilter: FC<TagFilterProps> = ({
</div> </div>
<div className='border-t-[0.5px] border-divider-regular' /> <div className='border-t-[0.5px] border-divider-regular' />
<div className='p-1'> <div className='p-1'>
<div className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => { <div className='flex cursor-pointer select-none items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
setShowTagManagementModal(true) setShowTagManagementModal(true)
setOpen(false) setOpen(false)
}}> }}>

4
web/app/components/plugins/marketplace/search-box/tags-filter.tsx
View File

@@ -54,7 +54,7 @@ const TagsFilter = ({
onClick={() => setOpen(v => !v)} onClick={() => setOpen(v => !v)}
> >
<div className={cn( <div className={cn(
'ml-0.5 mr-1.5 flex items-center text-text-tertiary ', 'ml-0.5 mr-1.5 flex select-none items-center text-text-tertiary',
size === 'large' && 'h-8 py-1', size === 'large' && 'h-8 py-1',
size === 'small' && 'h-7 py-0.5 ', size === 'small' && 'h-7 py-0.5 ',
// selectedTagsLength && 'text-text-secondary', // selectedTagsLength && 'text-text-secondary',
@@ -80,7 +80,7 @@ const TagsFilter = ({
filteredOptions.map(option => ( filteredOptions.map(option => (
<div <div
key={option.name} key={option.name}
className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover' className='flex h-7 cursor-pointer select-none items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
onClick={() => handleCheck(option.name)} onClick={() => handleCheck(option.name)}
> >
<Checkbox <Checkbox

4
web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
View File

@@ -48,7 +48,7 @@ const TagsFilter = ({
> >
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}> <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div className={cn( <div className={cn(
'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt', 'flex h-8 cursor-pointer select-none items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
selectedTagsLength && 'text-text-secondary', selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover', open && 'bg-state-base-hover',
)}> )}>
@@ -99,7 +99,7 @@ const TagsFilter = ({
filteredOptions.map(option => ( filteredOptions.map(option => (
<div <div
key={option.name} key={option.name}
className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover' className='flex h-7 cursor-pointer select-none items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
onClick={() => handleCheck(option.name)} onClick={() => handleCheck(option.name)}
> >
<Checkbox <Checkbox

4
web/app/components/tools/labels/filter.tsx
View File

@@ -67,7 +67,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
className='block' className='block'
> >
<div className={cn( <div className={cn(
'flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 hover:bg-components-input-bg-hover', 'flex h-8 cursor-pointer select-none items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 hover:bg-components-input-bg-hover',
!open && !!value.length && 'shadow-xs', !open && !!value.length && 'shadow-xs',
open && !!value.length && 'shadow-xs', open && !!value.length && 'shadow-xs',
)}> )}>
@@ -111,7 +111,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
{filteredLabelList.map(label => ( {filteredLabelList.map(label => (
<div <div
key={label.name} key={label.name}
className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' className='flex cursor-pointer select-none items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover'
onClick={() => selectLabel(label)} onClick={() => selectLabel(label)}
> >
<div title={label.label} className='grow truncate text-sm leading-5 text-text-secondary'>{label.label}</div> <div title={label.label} className='grow truncate text-sm leading-5 text-text-secondary'>{label.label}</div>