kodi/webmanager-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix context menu positioning and remove unnecessary width

Browse Source
This commit is contained in:
kodi
2026-03-28 08:12:29 +01:00
parent 9778dc6c33
commit 54e56ab0d8
9 changed files with 299 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/backend/data/tasks.db
BIN
View File
Binary file not shown.
webui/backend/tests/golden/__pycache__/test_ui_smoke_golden.cpython-313.pyc
BIN
View File
Binary file not shown.
webui/backend/tests/golden/test_ui_smoke_golden.py
+14 -12
View File
@@ -850,7 +850,7 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn('id="download-modal-close-btn"', body)
self.assertIn('id="context-menu"', body)
self.assertIn('id="context-menu-scope"', body)
self.assertIn('id="context-menu-target"', body)
self.assertNotIn('id="context-menu-target"', body)
self.assertIn('id="context-menu-open-btn"', body)
self.assertIn('id="context-menu-edit-btn"', body)
self.assertIn('id="context-menu-download-btn"', body)
@@ -1133,7 +1133,7 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn('setStatus("Preparing download...");', app_js)
self.assertIn('setStatus("Requesting download...");', app_js)
self.assertIn('setStatus(zipDownload ? "Preparing download..." : "Requesting download...");', app_js)
self.assertIn('setStatus(`Download requested: ${anchor.download}`);', app_js)
self.assertIn('setStatus(`Download requested: ${fileName}`);', app_js)
self.assertIn('"/api/files/download/archive-prepare"', app_js)
self.assertIn('"/api/files/duplicate"', app_js)
self.assertIn('"/api/files/delete"', app_js)
@@ -1181,24 +1181,26 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn('if (!row) {', app_js)
self.assertIn('closeContextMenu();', app_js)
self.assertIn('elements.openButton.classList.toggle("hidden", isMulti);', app_js)
self.assertIn('const openableSingle = items.length === 1 && isOpenableSelection(items[0]);', app_js)
self.assertIn('const openableSingle =', app_js)
self.assertIn('items[0].kind === "directory" || isRemoteViewableSelection(items[0])', app_js)
self.assertIn('elements.openButton.disabled = !openableSingle;', app_js)
self.assertIn('if (item.kind === "directory") {', app_js)
self.assertIn('return isImageSelection(item) || isVideoSelection(item);', app_js)
self.assertIn('const editableSingle = items.length === 1 && isEditableSelection(items[0]);', app_js)
self.assertIn('const editableSingle = items.length === 1 && !remoteSelection && isEditableSelection(items[0]);', app_js)
self.assertIn('return [".txt", ".log", ".md", ".yml", ".yaml", ".json", ".js", ".py", ".css", ".html", ".conf"].some((suffix) => lower.endsWith(suffix));', app_js)
self.assertIn('if (!item || item.kind !== "file") {', app_js)
self.assertIn('elements.editButton.classList.toggle("hidden", isMulti || items.length !== 1 || items[0].kind !== "file");', app_js)
self.assertIn('elements.editButton.classList.toggle("hidden", isMulti || items.length !== 1 || items[0].kind !== "file" || remoteSelection);', app_js)
self.assertIn('elements.editButton.disabled = !editableSingle;', app_js)
self.assertIn('const downloadableSelection = items.length > 0;', app_js)
self.assertIn('const downloadableSelection = items.length === 1 && items[0].kind === "file";', app_js)
self.assertIn('elements.downloadButton.classList.remove("hidden");', app_js)
self.assertIn('elements.downloadButton.disabled = !downloadableSelection;', app_js)
self.assertIn('elements.renameButton.classList.toggle("hidden", isMulti);', app_js)
self.assertIn('elements.renameButton.classList.toggle("hidden", isMulti || remoteSelection);', app_js)
self.assertIn('elements.duplicateButton.classList.remove("hidden");', app_js)
self.assertIn('elements.duplicateButton.disabled = items.length === 0;', app_js)
self.assertIn('elements.duplicateButton.disabled = remoteSelection || items.length === 0;', app_js)
self.assertIn('elements.copyButton.classList.remove("hidden");', app_js)
self.assertIn('elements.copyButton.disabled = items.length === 0;', app_js)
self.assertIn('elements.copyButton.disabled = remoteSelection || items.length === 0;', app_js)
self.assertIn('elements.moveButton.classList.remove("hidden");', app_js)
self.assertIn('elements.moveButton.disabled = remoteSelection || items.length === 0;', app_js)
self.assertIn('elements.propertiesButton.classList.remove("hidden");', app_js)
self.assertIn('elements.propertiesButton.disabled = items.length === 0;', app_js)
self.assertIn('openCurrentDirectory();', app_js)
@@ -1207,8 +1209,8 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn('const created = await createArchiveDownloadTask(selectedPaths);', app_js)
self.assertIn('const task = await waitForArchiveDownloadReady(created.task_id);', app_js)
self.assertIn('startArchiveDownload(task.id, task.destination);', app_js)
self.assertIn('const { blob, fileName } = await downloadFileRequest(selectedPaths);', app_js)
self.assertIn('anchor.download = fileName || selected.name;', app_js)
self.assertIn('const response = await downloadFileRequest(selectedPaths);', app_js)
self.assertIn('anchor.download = response.fileName || selected.name;', app_js)
self.assertIn('openRenamePopup();', app_js)
self.assertIn('const result = await createDuplicateTask(selectedItems.map((item) => item.path));', app_js)
self.assertIn('showActionSummary("Duplicate", 1, 0, null);', app_js)
@@ -1233,7 +1235,7 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn('renderInfoField("Selected items", selectedItems.length);', app_js)
self.assertIn('renderInfoField("Files", fileCount);', app_js)
self.assertIn('renderInfoField("Directories", directoryCount);', app_js)
self.assertIn('document.getElementById("copy-btn").disabled = !hasSelection;', app_js)
self.assertIn('document.getElementById("copy-btn").disabled = remoteBrowse || !hasSelection;', app_js)
self.assertNotIn('Only files are supported for copy', app_js)
self.assertIn('document.getElementById("upload-menu-toggle").onclick = (event) => {', app_js)
self.assertIn('document.getElementById("upload-folder-btn").onclick = openFolderPicker;', app_js)
webui/html/app.js
+42 -9
View File
@@ -436,7 +436,6 @@ function contextMenuElements() {
return {
menu: document.getElementById("context-menu"),
scope: document.getElementById("context-menu-scope"),
target: document.getElementById("context-menu-target"),
openButton: document.getElementById("context-menu-open-btn"),
editButton: document.getElementById("context-menu-edit-btn"),
downloadButton: document.getElementById("context-menu-download-btn"),
@@ -774,7 +773,8 @@ function closeContextMenu() {
}
elements.menu.classList.add("hidden");
elements.scope.textContent = "";
elements.target.textContent = "";
elements.menu.style.left = "";
elements.menu.style.top = "";
}
function openContextMenu(pane, entry, event) {
@@ -800,7 +800,6 @@ function openContextMenu(pane, entry, event) {
const editableSingle = items.length === 1 && !remoteSelection && isEditableSelection(items[0]);
const downloadableSelection = items.length === 1 && items[0].kind === "file";
elements.scope.textContent = isMulti ? "Multi-selection" : "Single item";
elements.target.textContent = isMulti ? `${items.length} selected items` : entry.name;
elements.openButton.classList.toggle("hidden", isMulti);
elements.openButton.disabled = !openableSingle;
elements.editButton.classList.toggle("hidden", isMulti || items.length !== 1 || items[0].kind !== "file" || remoteSelection);
@@ -819,13 +818,47 @@ function openContextMenu(pane, entry, event) {
elements.propertiesButton.classList.remove("hidden");
elements.propertiesButton.disabled = items.length === 0;
const menuWidth = 220;
const menuHeight = 120;
const x = Math.min(event.clientX, window.innerWidth - menuWidth - 12);
const y = Math.min(event.clientY, window.innerHeight - menuHeight - 12);
elements.menu.style.left = `${Math.max(8, x)}px`;
elements.menu.style.top = `${Math.max(8, y)}px`;
elements.menu.classList.remove("hidden");
positionContextMenu(elements.menu, event.currentTarget, event);
}
function positionContextMenu(menu, rowElement, event) {
if (!menu) {
return;
}
const paneElement = rowElement instanceof Element ? rowElement.closest(".pane") : null;
const paneRect = paneElement ? paneElement.getBoundingClientRect() : null;
const rowRect = rowElement instanceof Element ? rowElement.getBoundingClientRect() : null;
const menuRect = menu.getBoundingClientRect();
const viewportPadding = 8;
const panePadding = 8;
const minLeft = paneRect ? Math.max(viewportPadding, paneRect.left + panePadding) : viewportPadding;
const maxLeft = paneRect
? Math.max(minLeft, Math.min(window.innerWidth - viewportPadding - menuRect.width, paneRect.right - panePadding - menuRect.width))
: Math.max(minLeft, window.innerWidth - viewportPadding - menuRect.width);
const preferredLeft = rowRect ? rowRect.left + 12 : event.clientX;
const left = Math.max(minLeft, Math.min(maxLeft, preferredLeft));
const paneTop = paneRect ? paneRect.top + panePadding : viewportPadding;
const paneBottom = paneRect ? paneRect.bottom - panePadding : window.innerHeight - viewportPadding;
const rowTop = rowRect ? rowRect.top : event.clientY;
const rowBottom = rowRect ? rowRect.bottom : event.clientY;
const spaceBelow = paneBottom - rowBottom;
const spaceAbove = rowTop - paneTop;
let top;
if (spaceBelow >= menuRect.height || spaceBelow >= spaceAbove) {
top = rowBottom;
} else if (spaceAbove >= menuRect.height) {
top = rowTop - menuRect.height;
} else {
top = Math.max(paneTop, Math.min(paneBottom - menuRect.height, rowBottom));
}
top = Math.max(paneTop, Math.min(top, paneBottom - menuRect.height));
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
}
function applyContextMenuSelection() {
webui/html/base.css
+8 -12
View File
@@ -907,7 +907,11 @@ button:disabled {
.context-menu {
position: fixed;
min-width: 220px;
display: inline-flex;
flex-direction: column;
align-items: stretch;
width: max-content;
max-width: min(196px, calc(100vw - 24px));
padding: 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
@@ -924,24 +928,16 @@ button:disabled {
color: var(--color-text-muted);
}
.context-menu-target {
margin-top: 4px;
font-size: 12px;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.context-menu-separator {
height: 1px;
margin: 8px 0;
margin: 6px 0 8px;
background: var(--color-border);
}
.context-menu button {
width: 100%;
width: auto;
justify-content: flex-start;
white-space: nowrap;
}
#upload-modal .popup-card {
webui/html/index.html
-1
View File
@@ -161,7 +161,6 @@
<div id="context-menu" class="context-menu hidden" role="menu" aria-label="Item context menu">
<div id="context-menu-scope" class="context-menu-scope"></div>
<div id="context-menu-target" class="context-menu-target"></div>
<div class="context-menu-separator"></div>
<button id="context-menu-open-btn" type="button" role="menuitem">Open</button>
<button id="context-menu-edit-btn" type="button" role="menuitem">Edit</button>