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

feat: improve styling and accessibility of dataset components

Browse Source
This commit is contained in:
twwu 2025-02-08 10:39:28 +08:00
parent 25711ffae2
commit 0756b49a7c
3 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/datasets/hit-testing/components/result-item.tsx
View File

@ -46,10 +46,16 @@ const ResultItem: FC<Props> = ({
{/* Main */} {/* Main */}
<div className='mt-1 px-3'> <div className='mt-1 px-3'>
<div className='line-clamp-2 body-md-regular break-all'>{content}</div> <div className='line-clamp-2 body-md-regular text-text-secondary break-all'>{content}</div>
{isParentChildRetrieval && ( {isParentChildRetrieval && (
<div className='mt-1'> <div className='mt-1'>
<div className={cn('inline-flex items-center h-6 space-x-0.5 text-text-secondary select-none rounded-lg cursor-pointer', isFold && 'pl-1 bg-[linear-gradient(90deg,_rgba(200,_206,_218,_0.20)_0%,_rgba(200,_206,_218,_0.04)_100%)]')} onClick={toggleFold}> <div
className={cn('inline-flex items-center h-6 space-x-0.5 text-text-secondary select-none rounded-lg cursor-pointer', isFold && 'pl-1 bg-workflow-process-bg')}
onClick={(e) => {
e.stopPropagation()
toggleFold()
}}
>
<Icon className={cn('w-4 h-4', isFold && 'opacity-50')} /> <Icon className={cn('w-4 h-4', isFold && 'opacity-50')} />
<div className='text-xs font-semibold uppercase'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div> <div className='text-xs font-semibold uppercase'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
</div> </div>

6
web/app/components/datasets/hit-testing/textarea.tsx
View File

@ -108,7 +108,7 @@ const TextAreaWithButton = ({
return ( return (
<> <>
<div className={cn('relative rounded-xl', promptS.gradientBorder)}> <div className={cn('relative rounded-xl', promptS.gradientBorder)}>
<div className='relative pt-1.5 rounded-tl-xl rounded-tr-xl bg-background-section-burn'> <div className='relative pt-1.5 rounded-t-xl bg-background-section-burn'>
<div className="pl-4 pr-1.5 pb-1 flex justify-between h-8 items-center"> <div className="pl-4 pr-1.5 pb-1 flex justify-between h-8 items-center">
<span className="text-text-secondary font-semibold text-[13px] leading-4 uppercase"> <span className="text-text-secondary font-semibold text-[13px] leading-4 uppercase">
{t('datasetHitTesting.input.title')} {t('datasetHitTesting.input.title')}
@ -145,11 +145,11 @@ const TextAreaWithButton = ({
/> />
) )
} }
<div className='h-2 rounded-tl-xl rounded-tr-xl bg-background-default'></div> <div className='h-2 rounded-t-xl bg-background-default'></div>
</div> </div>
<div className='px-4 pb-11 bg-background-default rounded-b-xl'> <div className='px-4 pb-11 bg-background-default rounded-b-xl'>
<textarea <textarea
className='h-[220px] border-none resize-none font-normal caret-primary-600 text-text-secondary text-sm w-full focus-visible:outline-none placeholder:text-gray-300 placeholder:text-sm placeholder:font-normal' className='h-[220px] border-none resize-none font-normal caret-[#295EFF] text-text-secondary text-sm w-full focus-visible:outline-none placeholder:text-components-input-text-placeholder placeholder:text-sm placeholder:font-normal bg-transparent'
value={text} value={text}
onChange={handleTextChange} onChange={handleTextChange}
placeholder={t('datasetHitTesting.input.placeholder') as string} placeholder={t('datasetHitTesting.input.placeholder') as string}

43
web/app/components/datasets/settings/permission-selector/index.tsx
View File

@ -76,31 +76,40 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
onClick={() => !disabled && setOpen(v => !v)} onClick={() => !disabled && setOpen(v => !v)}
className='block' className='block'
> >
{isOnlyMe && ( <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
<div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200', disabled && 'hover:!bg-gray-100 !cursor-default')}> open && 'bg-state-base-hover-alt',
disabled && '!bg-components-input-bg-disabled hover:!bg-components-input-bg-disabled !cursor-not-allowed',
)}>
{
isOnlyMe && (
<>
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0 mr-2' size={24} /> <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0 mr-2' size={24} />
<div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div> <div className='grow mr-2 text-components-input-text-filled text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
{!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />} </>
</div> )
)} }
{isAllTeamMembers && ( {
<div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}> isAllTeamMembers && (
<>
<div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'> <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
<Users01 className='w-3.5 h-3.5 text-[#444CE7]' /> <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
</div> </div>
<div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsAllMember')}</div> <div className='grow mr-2 text-components-input-text-filled text-sm leading-5'>{t('datasetSettings.form.permissionsAllMember')}</div>
{!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />} </>
</div> )
)} }
{isPartialMembers && ( {
<div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}> isPartialMembers && (
<>
<div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'> <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
<Users01 className='w-3.5 h-3.5 text-[#444CE7]' /> <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
</div> </div>
<div title={selectedMembers} className='grow mr-2 text-gray-900 text-sm leading-5 truncate'>{selectedMembers}</div> <div title={selectedMembers} className='grow mr-2 text-components-input-text-filled text-sm leading-5 truncate'>{selectedMembers}</div>
{!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />} </>
)
}
<RiArrowDownSLine className={cn('shrink-0 w-4 h-4 text-text-secondary', disabled && '!text-components-input-text-placeholder')} />
</div> </div>
)}
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1002]'> <PortalToFollowElemContent className='z-[1002]'>
<div className='relative w-[480px] rounded-lg border-[0.5px] bg-white shadow-lg'> <div className='relative w-[480px] rounded-lg border-[0.5px] bg-white shadow-lg'>