diff --git a/src/files-ui/components/dropzone/components/DropzoneChildren/DropzoneChildren.scss b/src/files-ui/components/dropzone/components/DropzoneChildren/DropzoneChildren.scss new file mode 100644 index 0000000000000000000000000000000000000000..a959e88093e136a07a394e83d626d354288b7d7a --- /dev/null +++ b/src/files-ui/components/dropzone/components/DropzoneChildren/DropzoneChildren.scss @@ -0,0 +1,11 @@ +.files-ui-dropzone-children-container { + width: 100%; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + flex-wrap: wrap; + //padding: 5px 0; + background-color: brown; +} diff --git a/src/files-ui/components/dropzone/DropzoneChildren.tsx b/src/files-ui/components/dropzone/components/DropzoneChildren/DropzoneChildren.tsx similarity index 74% rename from src/files-ui/components/dropzone/DropzoneChildren.tsx rename to src/files-ui/components/dropzone/components/DropzoneChildren/DropzoneChildren.tsx index 48d9b2052fbd0eb1b3bad374ace2c7c9aefe015c..64407590eef2e73ead5e70f38c39b89520bc88c3 100644 --- a/src/files-ui/components/dropzone/DropzoneChildren.tsx +++ b/src/files-ui/components/dropzone/components/DropzoneChildren/DropzoneChildren.tsx @@ -3,7 +3,8 @@ import { DropzoneLocalizerSelector, Localization, LocalLabels, -} from "../../core"; +} from "../../../../core"; +import "./DropzoneChildren.scss"; declare type DropzoneChildrenProps = { children?: React.ReactNode | []; @@ -20,12 +21,14 @@ const DropzoneChildren: React.FC<DropzoneChildrenProps> = ( //children will be always consider as more important if (children) { - return <React.Fragment>{children}</React.Fragment>; + return ( + <div className="files-ui-dropzone-children-container">{children}</div> + ); } else return ( - <React.Fragment> + <div className="files-ui-dropzone-children-container"> <label> {label || (DropzoneLocalizer.defaultLabel as string)}</label> - </React.Fragment> + </div> ); }; export default DropzoneChildren; diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss index a923cdd50f7911ca034b6313e6bb0d11d3f787b2..5518c7202f7ccd0afe16c2f0554006dbb5067a73 100644 --- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss +++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss @@ -1,20 +1,20 @@ @import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900); .fui-dropzone-root { - min-height: 180px; width: 100%; min-width: 150px; + min-height: 180px; position: relative; // DISPLAY display: flex; - flex-wrap: wrap; - flex-direction: row; + //flex-wrap: wrap; + flex-direction: column; gap: 0 8px; - justify-content: center; - align-items: center; - padding: 23px 0px; + //justify-content: center; + //align-items: center; + //padding: 23px 0px; /// label color: #646c7f; @@ -48,10 +48,13 @@ } .files-ui-header { - height: 22px; - position: absolute; - cursor: text; + //-color: brown; + //box-sizing: border-box; + /* height: 22px; + position: absolute; top: 0; + */ + cursor: text; display: flex; //width: calc(100% - 10px); width: 100%; @@ -60,11 +63,11 @@ justify-content: flex-end; //font-family: "Poppins", sans-serif; font-family: inherit; - padding-right: 10px; + //padding-right: 10px; font-size: 1rem; @media (max-width: 960px) { - width: calc(100% - 1px); - padding-right: 1px; + //width: calc(100% - 1px); + //padding-right: 1px; font-size: 0.8rem; } } @@ -73,11 +76,11 @@ border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-sizing: border-box; - height: 23px; - position: absolute; cursor: text; + /* height: 23px; + position: absolute; bottom: 0; - left: 0; + left: 0; */ // width: calc(100% - 10px); width: 100%; display: flex; @@ -97,9 +100,10 @@ -webkit-line-clamp: 1; /* number of lines to show */ line-clamp: 1; -webkit-box-orient: vertical; + //background-color: brown; @media (max-width: 960px) { - width: calc(100% - 1px); + //width: calc(100% - 1px); padding-left: 1px; font-size: 0.9rem; } diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx index 4c3dd5bcd5fc698f7c3e9ceb90c7d0bea8aca9c9..20dc29323f9d4c2f810de7e85c5f20251faa6f32 100644 --- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx +++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx @@ -16,7 +16,7 @@ import { FunctionLabel, ExtFileManager, sleepPreparing, - UploadResponse, + //UploadResponse, instantPreparingToUploadOne, fakeFuiUpload, uploadExtFile, @@ -35,8 +35,10 @@ import { //DropzoneActionButton, DropzoneActions, DropzoneProps, + FooterConfig, + HeaderConfig, } from "./DropzoneProps"; -import DropzoneChildren from "./../../DropzoneChildren"; +import DropzoneChildren from "../DropzoneChildren/DropzoneChildren"; import useDropzoneClassName from "./../../useDropzoneClassName"; import DropzoneDisabledLayer from "../DropzoneDisabledLayer/DropzoneDisabledLayer"; @@ -85,8 +87,8 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => { onUploadStart, onUploadFinish, actionButtons, - headerConfig, - footerConfg, + headerConfig = {}, + footerConfg = {}, //advancedConfig, ...rest } = mergeProps(props, defaultDrozoneProps); @@ -111,6 +113,24 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => { style: containerStyle, className: containerClassName, } = actionButtons as DropzoneActions; + + /* const { + cleanFiles: cleanFilesHeader, + deleteFiles, + maxFileSize: maxFileSizeHeader, + uploadFiles, + uploading, + validFilesCount, + customHeader, + }: HeaderConfig = headerConfig; + + const { + allowedTypesLabel, + noMissingFilesLabel, + uploadProgressMessage, + uploadResultMessage, + customFooter, + }: FooterConfig = footerConfg; */ //console.log("Dropzone props", dropOnLayer); //localizers const DropzoneLocalizer: LocalLabels =