krao/fourge-portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove up-folder row, context menu flips up when near bottom

Browse Source
This commit is contained in:
Krao Hasanee
2026-06-02 14:48:24 -04:00
parent 144bda426b
commit 8b6e2739ae
1 changed files with 15 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FileBrowser.jsx
+15 -40
View File
@@ -308,7 +308,13 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
const toggleSelect = (name) => setSelected(prev => { const next = new Set(prev); next.has(name) ? next.delete(name) : next.add(name); return next; }); const toggleSelect = (name) => setSelected(prev => { const next = new Set(prev); next.has(name) ? next.delete(name) : next.add(name); return next; });
const openCtxMenu = (e, entry, childPath) => { e.preventDefault(); e.stopPropagation(); setCtxMenu({ x: e.clientX, y: e.clientY, entry, childPath }); }; const openCtxMenu = (e, entry, childPath) => {
e.preventDefault(); e.stopPropagation();
const menuW = 180, menuH = 320;
const x = e.clientX + menuW > window.innerWidth ? window.innerWidth - menuW - 8 : e.clientX;
const y = e.clientY + menuH > window.innerHeight ? e.clientY - menuH : e.clientY;
setCtxMenu({ x: Math.max(4, x), y: Math.max(4, y), entry, childPath });
};
return ( return (
<div <div
@@ -335,32 +341,15 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
)} )}
<div style={{ paddingRight: selected.size > 0 ? 260 : 0 }}> <div style={{ paddingRight: selected.size > 0 ? 260 : 0 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 2 }}> <div style={{ display: 'flex', alignItems: 'center', marginBottom: 2 }}>
<div style={LABEL}>Files</div> <div style={LABEL}>Files</div>
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}> {uploadProgress !== null && <span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 12 }}>Uploading {uploadProgress}%</span>}
{uploadProgress !== null && <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>Uploading {uploadProgress}%</span>} {!readOnly && (
{clipboard && ( <>
<button className="btn btn-outline" disabled={Boolean(working)} onClick={pasteClipboard}>Paste ({clipboard.items.length})</button> <input ref={folderInputRef} type="file" style={{ display: 'none' }} onChange={e => uploadFolder(e.target.files)} {...{ webkitdirectory: '' }} />
)} <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={e => uploadFiles(e.target.files)} />
{!readOnly && (showFolderInput ? ( </>
<form style={{ display: 'flex', gap: 6 }} onSubmit={createFolder}> )}
<input autoFocus type="text" value={folderName} onChange={e => setFolderName(e.target.value)} placeholder="Folder name" disabled={Boolean(working)} style={{ fontSize: 12, padding: '3px 8px', borderRadius: 4, border: '1px solid var(--border)', background: 'var(--card-bg-2)', color: 'var(--text-primary)', width: 140 }} />
<LoadingButton type="submit" className="btn btn-outline" loading={working === 'mkdir'} disabled={!folderName.trim() || Boolean(working)} loadingText="…">Create</LoadingButton>
<button type="button" className="btn btn-outline" onClick={() => { setShowFolderInput(false); setFolderName(''); }}>Cancel</button>
</form>
) : (
<button className="btn btn-outline" disabled={Boolean(working)} onClick={() => setShowFolderInput(true)}>+ Folder</button>
))}
{!readOnly && (
<>
<input ref={folderInputRef} type="file" style={{ display: 'none' }} onChange={e => uploadFolder(e.target.files)} {...{ webkitdirectory: '' }} />
<input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={e => uploadFiles(e.target.files)} />
<LoadingButton className="btn btn-outline" loading={working === 'upload'} disabled={Boolean(working)} loadingText="Uploading…" onClick={() => folderInputRef.current?.click()}>↑ Folder</LoadingButton>
<LoadingButton className="btn btn-primary" loading={working === 'upload'} disabled={Boolean(working)} loadingText="Uploading…" onClick={() => fileInputRef.current?.click()}>↑ Files</LoadingButton>
</>
)}
<LoadingButton className="btn btn-outline" loading={loading} disabled={Boolean(working)} loadingText="…" onClick={() => loadFiles(currentPath)}>⟳</LoadingButton>
</div>
</div> </div>
<div style={{ fontSize: 12, color: dragging ? 'var(--accent)' : 'var(--text-muted)', marginTop: 2, marginBottom: 14, transition: 'color 140ms ease' }}> <div style={{ fontSize: 12, color: dragging ? 'var(--accent)' : 'var(--text-muted)', marginTop: 2, marginBottom: 14, transition: 'color 140ms ease' }}>
Drag and drop files or folders here. Drag and drop files or folders here.
@@ -413,20 +402,6 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{canGoUp && currentPath !== rootPath && (
<tr style={{ cursor: 'pointer' }} onClick={() => loadFiles(parentPath)}>
<td style={TABLE_TD} />
<td style={TABLE_TD}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<div style={{ width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 5l-7 7 7 7" /></svg>
</div>
<span style={{ fontSize: 13, color: 'var(--text-muted)' }}>Up one folder</span>
</div>
</td>
<td /><td />
</tr>
)}
{sortedEntries.map((entry, idx) => { {sortedEntries.map((entry, idx) => {
const isDir = entry.type === 'dir'; const isDir = entry.type === 'dir';
const childPath = entry.path; const childPath = entry.path;