Fix dropzone UI
This commit is contained in:
@@ -22,7 +22,7 @@ const useStyles = createStyles(({ token, css }) => ({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: ${token.paddingXS}px;
|
gap: ${token.paddingXS}px;
|
||||||
padding: ${token.paddingSM}px;
|
padding: ${token.paddingMD}px;
|
||||||
border: 2px dashed ${token.colorBorderSecondary};
|
border: 2px dashed ${token.colorBorderSecondary};
|
||||||
border-radius: ${token.borderRadiusSM}px;
|
border-radius: ${token.borderRadiusSM}px;
|
||||||
color: ${token.colorTextQuaternary};
|
color: ${token.colorTextQuaternary};
|
||||||
|
|||||||
@@ -75,9 +75,11 @@ const useStyles = createStyles(({ token, css }) => ({
|
|||||||
`,
|
`,
|
||||||
dropZoneWrapper: css`
|
dropZoneWrapper: css`
|
||||||
padding: ${token.paddingXS}px ${token.paddingSM}px;
|
padding: ${token.paddingXS}px ${token.paddingSM}px;
|
||||||
border-top: 1px solid ${token.colorBorderSecondary};
|
|
||||||
background: ${token.colorBgContainer};
|
background: ${token.colorBgContainer};
|
||||||
`,
|
`,
|
||||||
|
dropZoneWrapperWithBorder: css`
|
||||||
|
border-top: 1px solid ${token.colorBorderSecondary};
|
||||||
|
`,
|
||||||
dropOverlay: css`
|
dropOverlay: css`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -362,14 +364,10 @@ const FileSection: React.FC<FileSectionProps> = ({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* File list */}
|
{/* File list */}
|
||||||
{files.length === 0 ? (
|
{files.length > 0 && <SortableFileList items={files} onReorder={handleReorder} renderItem={renderItem} dividerColor={token.colorBorder} />}
|
||||||
<div className={styles.emptySection}>{t("noConfig")}</div>
|
|
||||||
) : (
|
|
||||||
<SortableFileList items={files} onReorder={handleReorder} renderItem={renderItem} dividerColor={token.colorBorder} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Click-to-add strip */}
|
{/* Click-to-add strip */}
|
||||||
<div className={styles.dropZoneWrapper}>
|
<div className={cx(styles.dropZoneWrapper, files.length > 0 && styles.dropZoneWrapperWithBorder)}>
|
||||||
<DropZone fileType={fileType} isSaving={isSaving} onFileSelected={saveFile} />
|
<DropZone fileType={fileType} isSaving={isSaving} onFileSelected={saveFile} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user