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

Improve App Icon Picker: Stable Modal Height & Collapsible Emoji Style Section (#21399)

Browse Source
This commit is contained in:
Kerwin Bryant
2025-06-24 11:13:28 +08:00
committed by GitHub
parent 27baf383dd
commit 2467bd738a
2 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/base/app-icon-picker/index.tsx
View File

@@ -112,7 +112,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
isShow
closable={false}
wrapperClassName={className}
className={cn(s.container, '!w-[362px] !p-0')}
className={cn(s.container, '!h-[462px] !w-[362px] !p-0')}
>
{!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="w-full p-2 pb-0">
<div className='flex items-center justify-center gap-2 rounded-xl bg-background-body p-1 text-text-primary'>
@@ -131,8 +131,8 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
</div>
</div>}
<EmojiPickerInner className={cn(activeTab === 'emoji' ? 'block' : 'hidden', 'pt-2')} onSelect={handleSelectEmoji} />
<ImageInput className={activeTab === 'image' ? 'block' : 'hidden'} onImageInput={handleImageInput} />
{activeTab === 'emoji' && <EmojiPickerInner className={cn('flex-1 overflow-hidden pt-2')} onSelect={handleSelectEmoji} />}
{activeTab === 'image' && <ImageInput className={cn('flex-1 overflow-hidden')} onImageInput={handleImageInput} />}
<Divider className='m-0' />
<div className='flex w-full items-center justify-center gap-2 p-3'>

65
web/app/components/base/emoji-picker/Inner.tsx
View File

@@ -5,6 +5,8 @@ import data from '@emoji-mart/data'
import type { EmojiMartData } from '@emoji-mart/data'
import { init } from 'emoji-mart'
import {
ChevronDownIcon,
ChevronUpIcon,
MagnifyingGlassIcon,
} from '@heroicons/react/24/outline'
import Input from '@/app/components/base/input'
@@ -60,16 +62,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
const { categories } = data as EmojiMartData
const [selectedEmoji, setSelectedEmoji] = useState('')
const [selectedBackground, setSelectedBackground] = useState(backgroundColors[0])
const [showStyleColors, setShowStyleColors] = useState(false)
const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
const [isSearching, setIsSearching] = useState(false)
React.useEffect(() => {
if (selectedEmoji && selectedBackground)
onSelect?.(selectedEmoji, selectedBackground)
if (selectedEmoji) {
setShowStyleColors(true)
if (selectedBackground)
onSelect?.(selectedEmoji, selectedBackground)
}
}, [onSelect, selectedEmoji, selectedBackground])
return <div className={cn(className)}>
return <div className={cn(className, 'flex flex-col')}>
<div className='flex w-full flex-col items-center px-3 pb-2'>
<div className="relative w-full">
<div className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3">
@@ -95,7 +101,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
</div>
<Divider className='my-3' />
<div className="max-h-[200px] w-full overflow-y-auto overflow-x-hidden px-3">
<div className="w-full flex-1 overflow-y-auto overflow-x-hidden px-3">
{isSearching && <>
<div key={'category-search'} className='flex flex-col'>
<p className='system-xs-medium-uppercase mb-1 text-text-primary'>Search</p>
@@ -141,33 +147,34 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
</div>
{/* Color Select */}
<div className={cn('p-3 pb-0', selectedEmoji === '' ? 'opacity-25' : '')}>
<div className={cn('flex items-center justify-between p-3 pb-0')}>
<p className='system-xs-medium-uppercase mb-2 text-text-primary'>Choose Style</p>
<div className='grid h-full w-full grid-cols-8 gap-1'>
{backgroundColors.map((color) => {
return <div
key={color}
className={
cn(
'cursor-pointer',
'ring-offset-1 hover:ring-1',
'inline-flex h-10 w-10 items-center justify-center rounded-lg',
color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
)}
onClick={() => {
setSelectedBackground(color)
}}
>
<div className={cn(
'flex h-8 w-8 items-center justify-center rounded-lg p-1',
)
} style={{ background: color }}>
{selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
</div>
</div>
})}
</div>
{showStyleColors ? <ChevronDownIcon className='h-4 w-4' onClick={() => setShowStyleColors(!showStyleColors)} /> : <ChevronUpIcon className='h-4 w-4' onClick={() => setShowStyleColors(!showStyleColors)} />}
</div>
{showStyleColors && <div className='grid w-full grid-cols-8 gap-1 px-3'>
{backgroundColors.map((color) => {
return <div
key={color}
className={
cn(
'cursor-pointer',
'ring-offset-1 hover:ring-1',
'inline-flex h-10 w-10 items-center justify-center rounded-lg',
color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
)}
onClick={() => {
setSelectedBackground(color)
}}
>
<div className={cn(
'flex h-8 w-8 items-center justify-center rounded-lg p-1',
)
} style={{ background: color }}>
{selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
</div>
</div>
})}
</div>}
</div>
}
export default EmojiPickerInner