Skip to content

Commit 2381a4f

Browse files
DaneEverittDaneEveritt
committed
Add support for file dropdown menu
1 parent 0ee10e5 commit 2381a4f

File tree

3 files changed

+110
-6
lines changed

3 files changed

+110
-6
lines changed

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

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React, { createRef, useEffect, useState } from 'react';
2+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3+
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
4+
import { FileObject } from '@/api/server/files/loadDirectory';
5+
import { CSSTransition } from 'react-transition-group';
6+
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
7+
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
8+
import { faFileDownload } from '@fortawesome/free-solid-svg-icons/faFileDownload';
9+
import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
10+
import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons/faArrowsAltH';
11+
import { faBalanceScaleLeft } from '@fortawesome/free-solid-svg-icons/faBalanceScaleLeft';
12+
import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
13+
14+
export default ({ file }: { file: FileObject }) => {
15+
const menu = createRef<HTMLDivElement>();
16+
const [ visible, setVisible ] = useState(false);
17+
const [posX, setPosX] = useState(0);
18+
19+
const windowListener = (e: MouseEvent) => {
20+
if (e.button === 2 || !visible || !menu.current) {
21+
return;
22+
}
23+
24+
if (e.target === menu.current || menu.current.contains(e.target as Node)) {
25+
return;
26+
}
27+
28+
if (e.target !== menu.current && !menu.current.contains(e.target as Node)) {
29+
setVisible(false);
30+
}
31+
};
32+
33+
useEffect(() => {
34+
visible
35+
? document.addEventListener('click', windowListener)
36+
: document.removeEventListener('click', windowListener);
37+
38+
if (visible && menu.current) {
39+
menu.current.setAttribute(
40+
'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`
41+
);
42+
}
43+
}, [ visible ]);
44+
45+
useEffect(() => () => {
46+
document.removeEventListener('click', windowListener);
47+
}, []);
48+
49+
return (
50+
<div>
51+
<div
52+
className={'p-3 hover:text-white'}
53+
onClick={e => {
54+
e.preventDefault();
55+
if (!visible) {
56+
setPosX(e.clientX);
57+
}
58+
setVisible(!visible);
59+
}}
60+
>
61+
<FontAwesomeIcon icon={faEllipsisH}/>
62+
</div>
63+
<CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}>
64+
<div
65+
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
66+
ref={menu}
67+
>
68+
<div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
69+
<FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
70+
<span className={'ml-2'}>Rename</span>
71+
</div>
72+
<div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
73+
<FontAwesomeIcon icon={faLevelUpAlt} className={'text-xs'}/>
74+
<span className={'ml-2'}>Move</span>
75+
</div>
76+
<div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
77+
<FontAwesomeIcon icon={faCopy} className={'text-xs'}/>
78+
<span className={'ml-2'}>Copy</span>
79+
</div>
80+
<div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
81+
<FontAwesomeIcon icon={faFileDownload} className={'text-xs'}/>
82+
<span className={'ml-2'}>Download</span>
83+
</div>
84+
<div className={'hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded'}>
85+
<FontAwesomeIcon icon={faTrashAlt} className={'text-xs'}/>
86+
<span className={'ml-2'}>Delete</span>
87+
</div>
88+
</div>
89+
</CSSTransition>
90+
</div>
91+
);
92+
};

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ import { bytesToHuman } from '@/helpers';
66
import differenceInHours from 'date-fns/difference_in_hours';
77
import format from 'date-fns/format';
88
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
9-
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
109
import React from 'react';
1110
import { FileObject } from '@/api/server/files/loadDirectory';
11+
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
1212

1313
export default ({ file, directory }: { file: FileObject; directory: string }) => {
1414
return (
1515
<a
1616
key={file.name}
1717
href={file.isFile ? undefined : `#${directory}/${file.name}`}
1818
className={`
19-
flex px-4 py-3 bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
19+
flex bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
2020
hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600
2121
`}
2222
onClick={(e) => {
@@ -25,7 +25,7 @@ export default ({ file, directory }: { file: FileObject; directory: string }) =>
2525
}
2626
}}
2727
>
28-
<div className={'flex-none text-neutral-400 mr-4 text-lg'}>
28+
<div className={'flex-none text-neutral-400 mr-4 text-lg pl-3'}>
2929
{file.isFile ?
3030
<FontAwesomeIcon icon={file.isSymlink ? faFileImport : faFileAlt}/>
3131
:
@@ -50,9 +50,7 @@ export default ({ file, directory }: { file: FileObject; directory: string }) =>
5050
distanceInWordsToNow(file.modifiedAt, { includeSeconds: true })
5151
}
5252
</div>
53-
<div>
54-
<FontAwesomeIcon icon={faEllipsisH}/>
55-
</div>
53+
<FileDropdownMenu file={file}/>
5654
</a>
5755
);
5856
};

‎tailwind.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -531,6 +531,20 @@ module.exports = {
531531

532532
minWidth: {
533533
'0': '0',
534+
'1': '0.25rem',
535+
'2': '0.5rem',
536+
'3': '0.75rem',
537+
'4': '1rem',
538+
'6': '1.5rem',
539+
'8': '2rem',
540+
'10': '2.5rem',
541+
'12': '3rem',
542+
'16': '4rem',
543+
'24': '6rem',
544+
'32': '8rem',
545+
'48': '12rem',
546+
'64': '16rem',
547+
'96': '24rem',
534548
'full': '100%',
535549
},
536550

0 commit comments

Comments
 (0)