feat: folder upload - deel 3

This commit is contained in:
kodi
2026-03-14 07:10:49 +01:00
parent 287dddb7b3
commit f0b04fd4ee
6 changed files with 104 additions and 11 deletions
Binary file not shown.
@@ -50,6 +50,9 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn('id="right-focus-line"', body)
self.assertIn('id="function-bar"', body)
self.assertIn('id="upload-btn"', body)
self.assertIn('id="upload-menu-toggle"', body)
self.assertIn('id="upload-menu-popup"', body)
self.assertIn('id="upload-folder-btn"', body)
self.assertIn('id="upload-input"', body)
self.assertIn('id="upload-progress"', body)
self.assertIn('id="upload-target"', body)
@@ -178,10 +181,12 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn('function effectiveThemeKey(theme, colorMode)', app_js)
self.assertIn("document.documentElement.dataset.theme", app_js)
self.assertIn('document.getElementById("theme-toggle").onclick = toggleTheme;', app_js)
self.assertIn('document.getElementById("upload-btn").onclick = (event) => {', app_js)
self.assertIn('if (event.altKey) {', app_js)
self.assertIn("openFolderPicker();", app_js)
self.assertIn("openUploadPicker();", app_js)
self.assertIn('document.getElementById("upload-btn").onclick = openUploadPicker;', app_js)
self.assertIn('document.getElementById("upload-menu-toggle").onclick = (event) => {', app_js)
self.assertIn('document.getElementById("upload-folder-btn").onclick = openFolderPicker;', app_js)
self.assertIn('function closeUploadMenu()', app_js)
self.assertIn('function toggleUploadMenu()', app_js)
self.assertNotIn('if (event.altKey) {', app_js)
self.assertIn('document.getElementById("settings-btn").onclick = () => openSettings("general");', app_js)
self.assertIn('async function loadSettings()', app_js)
self.assertIn('await loadSettings();', app_js)
+42 -6
View File
@@ -325,7 +325,11 @@ function infoElements() {
function uploadElements() {
return {
menu: document.getElementById("upload-menu"),
button: document.getElementById("upload-btn"),
menuToggle: document.getElementById("upload-menu-toggle"),
menuPopup: document.getElementById("upload-menu-popup"),
folderButton: document.getElementById("upload-folder-btn"),
input: document.getElementById("upload-input"),
progress: document.getElementById("upload-progress"),
target: document.getElementById("upload-target"),
@@ -477,6 +481,25 @@ function setUploadProgressVisible(visible) {
uploadElements().progress.classList.toggle("hidden", !visible);
}
function closeUploadMenu() {
const elements = uploadElements();
if (!elements.menuPopup || !elements.menuToggle) {
return;
}
elements.menuPopup.classList.add("hidden");
elements.menuToggle.setAttribute("aria-expanded", "false");
}
function toggleUploadMenu() {
const elements = uploadElements();
if (!elements.menuPopup || !elements.menuToggle) {
return;
}
const nextOpen = elements.menuPopup.classList.contains("hidden");
elements.menuPopup.classList.toggle("hidden", !nextOpen);
elements.menuToggle.setAttribute("aria-expanded", nextOpen ? "true" : "false");
}
function resetUploadProgress() {
const elements = uploadElements();
uploadState.active = false;
@@ -523,6 +546,7 @@ function openUploadPicker() {
if (uploadState.active) {
return;
}
closeUploadMenu();
uploadState.targetPath = activePaneState().currentPath;
const elements = uploadElements();
elements.input.value = "";
@@ -533,6 +557,7 @@ function openFolderPicker() {
if (uploadState.active) {
return;
}
closeUploadMenu();
folderUploadPlanState = {
targetPane: state.activePane,
targetPath: activePaneState().currentPath,
@@ -3040,6 +3065,11 @@ function clearSelectionForActivePane() {
}
function handleKeyboardShortcuts(event) {
if (event.key === "Escape" && !uploadElements().menuPopup.classList.contains("hidden")) {
event.preventDefault();
closeUploadMenu();
return;
}
if (isInfoOpen()) {
if (event.key === "Escape") {
event.preventDefault();
@@ -3264,13 +3294,12 @@ function setupEvents() {
setupPaneEvents("right");
document.addEventListener("keydown", handleKeyboardShortcuts);
document.getElementById("theme-toggle").onclick = toggleTheme;
document.getElementById("upload-btn").onclick = (event) => {
if (event.altKey) {
openFolderPicker();
return;
}
openUploadPicker();
document.getElementById("upload-btn").onclick = openUploadPicker;
document.getElementById("upload-menu-toggle").onclick = (event) => {
event.stopPropagation();
toggleUploadMenu();
};
document.getElementById("upload-folder-btn").onclick = openFolderPicker;
document.getElementById("settings-btn").onclick = () => openSettings("general");
document.getElementById("view-btn").onclick = openViewer;
document.getElementById("edit-btn").onclick = openEditor;
@@ -3280,6 +3309,13 @@ function setupEvents() {
document.getElementById("move-btn").onclick = openF6Flow;
document.getElementById("mkdir-btn").onclick = createFolderForActivePane;
uploadElements().input.onchange = handleUploadSelection;
document.addEventListener("click", (event) => {
const elements = uploadElements();
if (!elements.menu || elements.menu.contains(event.target)) {
return;
}
closeUploadMenu();
});
const rename = renameElements();
rename.closeButton.onclick = closeRenamePopup;
+44
View File
@@ -577,6 +577,50 @@ button:disabled {
justify-content: center;
}
.split-button {
position: relative;
display: inline-flex;
align-items: stretch;
}
.split-button > button {
min-width: 0;
}
#upload-btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#upload-menu-toggle {
min-width: 32px;
padding-left: 7px;
padding-right: 7px;
border-left: 1px solid var(--color-border);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.split-menu {
position: absolute;
left: 0;
bottom: calc(100% + 6px);
min-width: 148px;
display: grid;
gap: 4px;
padding: 6px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-elevated);
box-shadow: var(--shadow-elevated);
z-index: 20;
}
.split-menu button {
width: 100%;
justify-content: flex-start;
}
.shortcut-hint {
color: var(--color-text-muted);
font-size: 10px;
+9 -1
View File
@@ -85,7 +85,15 @@
<section id="footer-bar">
<div id="function-bar" class="toolbar compact-toolbar">
<button id="upload-btn" type="button"><span>Upload</span></button>
<div id="upload-menu" class="split-button upload-menu">
<button id="upload-btn" type="button"><span>Upload Files</span></button>
<button id="upload-menu-toggle" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Upload options">
<span aria-hidden="true"></span>
</button>
<div id="upload-menu-popup" class="split-menu hidden" role="menu" aria-label="Upload options">
<button id="upload-folder-btn" type="button" role="menuitem"><span>Upload Folder</span></button>
</div>
</div>
<button id="settings-btn" type="button"><span class="shortcut-hint">F1</span><span>Settings</span></button>
<button id="rename-btn" type="button" disabled><span class="shortcut-hint">F2</span><span>Rename</span></button>
<button id="view-btn" type="button" disabled><span class="shortcut-hint">F3</span><span>View</span></button>