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

fix: add responsive layout for file uploader in datasets (#14159)

Browse Source
This commit is contained in:
Wu Tianwei 2025-02-23 19:35:10 +08:00 committed by GitHub
parent 5ac0ef6253
commit 2ace9ae4e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/datasets/create/file-uploader/index.tsx
View File

@ -243,7 +243,7 @@ const FileUploader = ({
}, [handleDrop]) }, [handleDrop])
return ( return (
<div className="mb-5 w-[640px]"> <div className="mb-5 max-w-[640px]">
{!hideUpload && ( {!hideUpload && (
<input <input
ref={fileUploader} ref={fileUploader}

4
web/app/components/datasets/create/step-one/index.module.css
View File

@ -14,7 +14,7 @@
} }
.dataSourceItem { .dataSourceItem {
@apply box-border relative grow shrink-0 flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer; @apply w-full box-border relative flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
border: 0.5px solid #EAECF0; border: 0.5px solid #EAECF0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
font-weight: 500; font-weight: 500;
@ -64,7 +64,7 @@
} }
.datasetIcon { .datasetIcon {
@apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat; @apply flex shrink-0 mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
background-color: #F5FAFF; background-color: #F5FAFF;
background-image: url(../assets/file.svg); background-image: url(../assets/file.svg);
background-size: 16px; background-size: 16px;

17
web/app/components/datasets/create/step-one/index.tsx
View File

@ -137,7 +137,7 @@ const StepOne = ({
} }
{ {
shouldShowDataSourceTypeList && ( shouldShowDataSourceTypeList && (
<div className='flex items-center mb-8 flex-wrap gap-4'> <div className='grid grid-cols-3 mb-8 gap-4'>
<div <div
className={cn( className={cn(
s.dataSourceItem, s.dataSourceItem,
@ -153,7 +153,12 @@ const StepOne = ({
}} }}
> >
<span className={cn(s.datasetIcon)} /> <span className={cn(s.datasetIcon)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.file')}
className='truncate'
>
{t('datasetCreation.stepOne.dataSourceType.file')} {t('datasetCreation.stepOne.dataSourceType.file')}
</span>
</div> </div>
<div <div
className={cn( className={cn(
@ -170,7 +175,12 @@ const StepOne = ({
}} }}
> >
<span className={cn(s.datasetIcon, s.notion)} /> <span className={cn(s.datasetIcon, s.notion)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.notion')}
className='truncate'
>
{t('datasetCreation.stepOne.dataSourceType.notion')} {t('datasetCreation.stepOne.dataSourceType.notion')}
</span>
</div> </div>
<div <div
className={cn( className={cn(
@ -181,7 +191,12 @@ const StepOne = ({
onClick={() => changeType(DataSourceType.WEB)} onClick={() => changeType(DataSourceType.WEB)}
> >
<span className={cn(s.datasetIcon, s.web)} /> <span className={cn(s.datasetIcon, s.web)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.web')}
className='truncate'
>
{t('datasetCreation.stepOne.dataSourceType.web')} {t('datasetCreation.stepOne.dataSourceType.web')}
</span>
</div> </div>
</div> </div>
) )