Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix file rename selection dragging and tooltip cutoff/delay
All checks were successful
Automated Container Build / build-and-push (push) Successful in 34s
Details

Browse source
This commit is contained in:
Elijah 2026-05-23 08:23:25 -07:00
parent ffea6afeb0
commit 745d959c9b
1 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/components/FileExplorer.tsx
View file

@ -113,12 +113,24 @@ function getFileExtension(name: string, isDir: boolean) {
function Tooltip({ children, text }: { children: React.ReactNode; text: string }) { function Tooltip({ children, text }: { children: React.ReactNode; text: string }) {
const [hovered, setHovered] = useState(false);
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
useEffect(() => {
let timeout: NodeJS.Timeout;
if (hovered) {
timeout = setTimeout(() => setShow(true), 800);
} else {
setShow(false);
}
return () => clearTimeout(timeout);
}, [hovered]);
return ( return (
<div <div
className="relative flex items-center justify-center w-full min-w-0" className="relative flex items-center justify-center w-full min-w-0"
onMouseEnter={() => setShow(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setShow(false)} onMouseLeave={() => setHovered(false)}
> >
{children} {children}
<AnimatePresence> <AnimatePresence>
@ -128,7 +140,8 @@ function Tooltip({ children, text }: { children: React.ReactNode; text: string }
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 5 }} exit={{ opacity: 0, y: 5 }}
transition={{ duration: 0.15 }} transition={{ duration: 0.15 }}
className="absolute bottom-full mb-1.5 px-3 py-1.5 bg-black/90 text-white text-xs font-medium rounded-lg shadow-xl whitespace-nowrap z-50 pointer-events-none border border-white/10" className="absolute bottom-full mb-1.5 px-3 py-1.5 bg-black/90 text-white text-xs font-medium rounded-lg shadow-xl z-50 pointer-events-none border border-white/10 whitespace-normal break-words text-center"
style={{ minWidth: '100px', maxWidth: '250px' }}
> >
{text} {text}
</motion.div> </motion.div>
@ -1314,7 +1327,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
key={file.path} key={file.path}
data-file-item data-file-item
data-file-path={file.path} data-file-path={file.path}
draggable draggable={renaming !== file.path}
onDragStart={(e: any) => handleItemDragStart(e, file.path)} onDragStart={(e: any) => handleItemDragStart(e, file.path)}
onDragOver={(e: any) => handleItemDragOver(e, file)} onDragOver={(e: any) => handleItemDragOver(e, file)}
onDragLeave={(e: any) => handleItemDragLeave(e, file)} onDragLeave={(e: any) => handleItemDragLeave(e, file)}
@ -1409,7 +1422,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
key={file.path} key={file.path}
data-file-item data-file-item
data-file-path={file.path} data-file-path={file.path}
draggable draggable={renaming !== file.path}
onDragStart={(e: any) => handleItemDragStart(e, file.path)} onDragStart={(e: any) => handleItemDragStart(e, file.path)}
onDragOver={(e: any) => handleItemDragOver(e, file)} onDragOver={(e: any) => handleItemDragOver(e, file)}
onDragLeave={(e: any) => handleItemDragLeave(e, file)} onDragLeave={(e: any) => handleItemDragLeave(e, file)}