diff --git a/backend/static/css/16-retro.css b/backend/static/css/16-retro.css index 4c9b9e6..26e8976 100644 --- a/backend/static/css/16-retro.css +++ b/backend/static/css/16-retro.css @@ -708,6 +708,18 @@ outline-offset: -2px; } +:root[data-theme="retro"] .file-browser.is-list .file-card:hover, +:root[data-theme="retro"] .file-browser.is-list .file-card:focus-within { + background: transparent; + outline: 2px solid #000078; + outline-offset: -2px; +} + +:root[data-theme="retro"] .file-browser.is-list .file-card:hover .file-open, +:root[data-theme="retro"] .file-browser.is-list .file-card:focus-within .file-open { + outline: 0; +} + :root[data-theme="retro"] .file-media { border: 0; border-radius: 0; diff --git a/backend/static/css/30-download.css b/backend/static/css/30-download.css index 4b01abd..b13b062 100644 --- a/backend/static/css/30-download.css +++ b/backend/static/css/30-download.css @@ -608,6 +608,7 @@ html.reaction-picker-open body { grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.32fr); align-items: center; min-height: 4.25rem; + cursor: pointer; } .file-browser.is-list .file-card:hover, diff --git a/backend/static/js/10-file-browser.js b/backend/static/js/10-file-browser.js index 05f200c..82e1b27 100644 --- a/backend/static/js/10-file-browser.js +++ b/backend/static/js/10-file-browser.js @@ -23,6 +23,28 @@ } if (fileBrowser && fileContextMenu) { + document.body.appendChild(fileContextMenu); + + fileBrowser.addEventListener("click", (event) => { + if (!fileBrowser.classList.contains("is-list")) { + return; + } + if (event.target.closest("a, button, input, select, textarea")) { + return; + } + const card = event.target.closest("[data-file-context]"); + const link = card ? card.querySelector(".file-open") : null; + if (!link) { + return; + } + event.preventDefault(); + if (link.target === "_blank") { + window.Warpbox.openInNewTab(link.href); + return; + } + window.location.href = link.href; + }); + fileBrowser.addEventListener("contextmenu", (event) => { const card = event.target.closest("[data-file-context]"); if (!card) {