Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve design of drag & drop overlay

Browse source
This commit is contained in:
DaneEveritt 2022-07-24 18:59:20 -04:00
parent 4458822c60
commit 8d82aa2124
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
resources/scripts/components/server/files/UploadButton.tsx
View file

@ -3,7 +3,6 @@ import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import tw from 'twin.macro';
import { Button } from '@/components/elements/button/index';
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components/macro';
import { ModalMask } from '@/components/elements/Modal';
import Fade from '@/components/elements/Fade';
import useEventListener from '@/plugins/useEventListener';
@ -12,11 +11,7 @@ import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import { ServerContext } from '@/state/server';
import { WithClassname } from '@/components/types';
import Portal from '@/components/elements/Portal';
const InnerContainer = styled.div`
max-width: 600px;
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
`;
import { CloudUploadIcon } from '@heroicons/react/outline';
function isFileOrDirectory(event: DragEvent): boolean {
if (!event.dataTransfer?.types) {
@ -123,10 +118,17 @@ export default ({ className }: WithClassname) => {
onFileSubmission(e.dataTransfer.files);
}}
>
<div css={tw`w-full flex items-center justify-center pointer-events-none`}>
<InnerContainer>
<p css={tw`text-lg text-neutral-200 text-center`}>Drag and drop files to upload.</p>
</InnerContainer>
<div className={'w-full flex items-center justify-center pointer-events-none'}>
<div
className={
'flex items-center space-x-4 bg-black w-full ring-4 ring-blue-200 ring-opacity-60 rounded p-6 mx-10 max-w-sm'
}
>
<CloudUploadIcon className={'w-10 h-10 flex-shrink-0'} />
<p className={'font-header flex-1 text-lg text-neutral-100 text-center'}>
Drag and drop files to upload.
</p>
</div>
</div>
</ModalMask>
</Fade>