prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added some layout for Drag n Drop

Browse source
This commit is contained in:
Rupin Khandelwal 2022-11-16 22:15:35 -03:00
parent b5a1d8fb9f
commit 4902019485
2 changed files with 96 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View file

@ -98,17 +98,14 @@ export function HomeFeedContainer(): JSX.Element {
const gridContainerRef = useRef<HTMLDivElement>(null)
const [shareTarget, setShareTarget] = useState<LibraryItem | undefined>(
undefined
)
const [shareTarget, setShareTarget] =
useState<LibraryItem | undefined>(undefined)
const [snoozeTarget, setSnoozeTarget] = useState<LibraryItem | undefined>(
undefined
)
const [snoozeTarget, setSnoozeTarget] =
useState<LibraryItem | undefined>(undefined)
const [labelsTarget, setLabelsTarget] = useState<LibraryItem | undefined>(
undefined
)
const [labelsTarget, setLabelsTarget] =
useState<LibraryItem | undefined>(undefined)
const [showAddLinkModal, setShowAddLinkModal] = useState(false)
const [showEditTitleModal, setShowEditTitleModal] = useState(false)
@ -127,8 +124,14 @@ export function HomeFeedContainer(): JSX.Element {
})
)
const { itemsPages, size, setSize, isValidating, performActionOnItem, mutate } =
useGetLibraryItemsQuery(queryInputs)
const {
itemsPages,
size,
setSize,
isValidating,
performActionOnItem,
mutate,
} = useGetLibraryItemsQuery(queryInputs)
useEffect(() => {
if (queryValue.startsWith('#')) {
@ -687,6 +690,19 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
},
})
const DragnDropStyle = styled('div', {
border: '3px dashed gray',
backgroundColor: 'aliceblue',
borderRadius: '5px',
width: '95%',
height: '100%',
position: 'absolute',
opacity: '0.8',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
})
const removeItem = () => {
if (!props.linkToRemove) {
return
@ -733,7 +749,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
console.log('result of uploading: ', uploadResult)
} catch (error) {
console.log("ERROR", error)
console.log('ERROR', error)
}
}
@ -856,22 +872,36 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
)}
<Dropzone
onDrop={handleDrop}
onDragEnter={() => { setInDragOperation(true) }}
onDragLeave={() => { setInDragOperation(false) }}
onDragEnter={() => {
setInDragOperation(true)
}}
onDragLeave={() => {
setInDragOperation(false)
}}
preventDropOnDocument={true}
noClick={true}
>
{({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
<div {...getRootProps({ className: 'dropzone' })}>
{(inDragOperation && uploadingFiles.length < 1) && (
<Box css={{ color: '$utilityTextDefault', marginTop: '$1'}}>
Drag n drop files anywhere below
</Box>
{inDragOperation && uploadingFiles.length < 1 && (
<DragnDropStyle>
<Box
css={{
color: '$utilityTextDefault',
fontWeight: '800',
fontSize: '$4',
}}
>
Drag n drop files here
</Box>
</DragnDropStyle>
)}
{uploadingFiles.length > 0 ? (
<Box css={{ color: '$utilityTextDefault', marginTop: '$1'}}>
Uploading Files...
</Box>
<DragnDropStyle>
<Box css={{ color: '$utilityTextDefault', marginTop: '$1' }}>
Uploading Files...
</Box>
</DragnDropStyle>
) : null}
<input {...getInputProps()} />
{!props.isValidating && props.items.length == 0 ? (

53
packages/web/components/templates/library/LibraryList.tsx
View file

@ -29,9 +29,13 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
useGetLibraryItemsQuery(defaultQuery)
const [fileNames, setFileNames] = useState([])
const [inDragOperation, setInDragOperation] = useState(false)
const [uploadingFiles, setUploadingFiles] = useState([])
const handleDrop = (acceptedFiles: any) =>
const handleDrop = (acceptedFiles: any) => {
setFileNames(acceptedFiles.map((file: { name: any }) => file.name))
setUploadingFiles(acceptedFiles.map((file: { name: any }) => file.name))
}
const libraryItems = useMemo(() => {
const items =
@ -54,14 +58,47 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
return (
<Box css={{ overflowY: 'scroll' }}>
<Dropzone onDrop={handleDrop} preventDropOnDocument={true} noClick={true}>
{inDragOperation && uploadingFiles.length < 1 && (
<Box
css={{
border: '3px dashed gray',
backgroundColor: 'aliceblue',
borderRadius: '5px',
width: '75%',
height: '70%',
position: 'absolute',
opacity: '0.8',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Box
css={{
color: '$utilityTextDefault',
fontWeight: '800',
fontSize: '$4',
}}
>
Drag n drop files here
</Box>
</Box>
)}
<Dropzone
onDrop={handleDrop}
preventDropOnDocument={true}
onDragEnter={() => {
setInDragOperation(true)
}}
onDragLeave={() => {
setInDragOperation(false)
}}
noClick={true}
noDragEventsBubbling={true}
>
{({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
<div {...getRootProps({ className: 'dropzone' })}>
<Box css={{ color: '$utilityTextDefault', marginTop: '$1'}}>
Drag n drop files anywhere below
</Box>
<Box {...getRootProps({ className: 'dropzone' })}>
<input {...getInputProps()} />
<Masonry
breakpointCols={
props.layoutCoordinator.layout == 'LIST_LAYOUT'
@ -112,7 +149,7 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
</Box>
))}
</Masonry>
</div>
</Box>
)}
</Dropzone>
{/* Temporary code */}