Add support for file dropdown menu

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -0,0 +1,92 @@
+import React, { createRef, useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
+import { FileObject } from '@/api/server/files/loadDirectory';
+import { CSSTransition } from 'react-transition-group';
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import { faFileDownload } from '@fortawesome/free-solid-svg-icons/faFileDownload';
+import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
+import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons/faArrowsAltH';
+import { faBalanceScaleLeft } from '@fortawesome/free-solid-svg-icons/faBalanceScaleLeft';
+import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
+
+export default ({ file }: { file: FileObject }) => {
+    const menu = createRef<HTMLDivElement>();
+    const [ visible, setVisible ] = useState(false);
+    const [posX, setPosX] = useState(0);
+
+    const windowListener = (e: MouseEvent) => {
+        if (e.button === 2 || !visible || !menu.current) {
+            return;
+        }
+
+        if (e.target === menu.current || menu.current.contains(e.target as Node)) {
+            return;
+        }
+
+        if (e.target !== menu.current && !menu.current.contains(e.target as Node)) {
+            setVisible(false);
+        }
+    };
+
+    useEffect(() => {
+        visible
+            ? document.addEventListener('click', windowListener)
+            : document.removeEventListener('click', windowListener);
+
+        if (visible && menu.current) {
+            menu.current.setAttribute(
+                'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`
+            );
+        }
+    }, [ visible ]);
+
+    useEffect(() => () => {
+        document.removeEventListener('click', windowListener);
+    }, []);
+
+    return (
+        <div>
+            <div
+                className={'p-3 hover:text-white'}
+                onClick={e => {
+                    e.preventDefault();
+                    if (!visible) {
+                        setPosX(e.clientX);
+                    }
+                    setVisible(!visible);
+                }}
+            >
+                <FontAwesomeIcon icon={faEllipsisH}/>
+            </div>
+            <CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}>
+                <div
+                    className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
+                    ref={menu}
+                >
+                    <div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
+                        <FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
+                        <span className={'ml-2'}>Rename</span>
+                    </div>
+                    <div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
+                        <FontAwesomeIcon icon={faLevelUpAlt} className={'text-xs'}/>
+                        <span className={'ml-2'}>Move</span>
+                    </div>
+                    <div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
+                        <FontAwesomeIcon icon={faCopy} className={'text-xs'}/>
+                        <span className={'ml-2'}>Copy</span>
+                    </div>
+                    <div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
+                        <FontAwesomeIcon icon={faFileDownload} className={'text-xs'}/>
+                        <span className={'ml-2'}>Download</span>
+                    </div>
+                    <div className={'hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded'}>
+                        <FontAwesomeIcon icon={faTrashAlt} className={'text-xs'}/>
+                        <span className={'ml-2'}>Delete</span>
+                    </div>
+                </div>
+            </CSSTransition>
+        </div>
+    );
+};

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -6,9 +6,9 @@ import { bytesToHuman } from '@/helpers';
 import differenceInHours from 'date-fns/difference_in_hours';
 import format from 'date-fns/format';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
 import React from 'react';
 import { FileObject } from '@/api/server/files/loadDirectory';
+import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
 
 export default ({ file, directory }: { file: FileObject; directory: string }) => {
     return (
@@ -16,7 +16,7 @@ export default ({ file, directory }: { file: FileObject; directory: string }) =>
             key={file.name}
             href={file.isFile ? undefined : `#${directory}/${file.name}`}
             className={`
-                flex px-4 py-3 bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
+                flex bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
                 hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600
             `}
             onClick={(e) => {
@@ -25,7 +25,7 @@ export default ({ file, directory }: { file: FileObject; directory: string }) =>
                 }
             }}
         >
-            <div className={'flex-none text-neutral-400 mr-4 text-lg'}>
+            <div className={'flex-none text-neutral-400 mr-4 text-lg pl-3'}>
                 {file.isFile ?
                     <FontAwesomeIcon icon={file.isSymlink ? faFileImport : faFileAlt}/>
                     :
@@ -50,9 +50,7 @@ export default ({ file, directory }: { file: FileObject; directory: string }) =>
                     distanceInWordsToNow(file.modifiedAt, { includeSeconds: true })
                 }
             </div>
-            <div>
+            <FileDropdownMenu file={file}/>
-                <FontAwesomeIcon icon={faEllipsisH}/>
-            </div>
         </a>
     );
 };

tailwind.js

@@ -531,6 +531,20 @@ module.exports = {
 
     minWidth: {
         '0': '0',
+        '1': '0.25rem',
+        '2': '0.5rem',
+        '3': '0.75rem',
+        '4': '1rem',
+        '6': '1.5rem',
+        '8': '2rem',
+        '10': '2.5rem',
+        '12': '3rem',
+        '16': '4rem',
+        '24': '6rem',
+        '32': '8rem',
+        '48': '12rem',
+        '64': '16rem',
+        '96': '24rem',
         'full': '100%',
     },