cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(files-overlay): filename click opens editor, actions align next to row

Browse source 
Replaces the dedicated edit button with a click target on the filename
itself (download stays as a separate ⬇ action). Drops margin-left:auto on
.files-row-actions so action buttons sit immediately after the row's name
instead of at the far right.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mwiegand 2026-05-17 10:40:54 +02:00
parent 54842f71c6
commit 2942467cfd
No known key found for this signature in database
3 changed files with 26 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
l4d2web/l4d2web/static/css/components.css
View file

@ -254,6 +254,23 @@ dialog.modal::backdrop {
padding-left: calc(1ch + var(--space-xs));
}
.file-tree-name-button {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--color-link);
cursor: pointer;
text-align: left;
text-decoration: underline;
text-underline-offset: 2px;
}
.file-tree-name-button:hover,
.file-tree-name-button:focus-visible {
text-decoration-thickness: 2px;
}
.file-tree-toggle[aria-expanded="true"] .chevron {
transform: rotate(90deg);
}
@ -583,8 +600,7 @@ button.danger-outline:hover {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-left: auto;
padding-left: var(--space-m);
padding-left: var(--space-s);
opacity: 0;
pointer-events: none;
transition: opacity 80ms ease;

7
l4d2web/l4d2web/static/js/files-overlay.js
View file

@ -3,7 +3,8 @@
// overlay is type='files' and the user can edit). The script binds:
//
// * Per-row hover actions: + new file, + new folder, ⬇ zip, ✕ on
// folders; edit, ✕ on files (download is a regular <a>).
// folders; ⬇ (download), ✕ on files. Clicking the filename opens
// the editor (binary fallback for non-editable files).
// * Drag-and-drop: dragging from the OS uploads (one POST per file,
// queue with concurrency 3); dragging a row inside the tree moves
// (rename/move via /files/move).
@ -977,7 +978,9 @@
// ---------- click delegation: action buttons ----------------------------
document.addEventListener("click", (event) => {
const action = event.target?.closest?.(".files-row-action[data-action]");
const action = event.target?.closest?.(
".files-row-action[data-action], .file-tree-name-button[data-action]"
);
if (!action) return;
if (!manager.contains(action)) return;
const op = action.dataset.action;

5
l4d2web/l4d2web/templates/_overlay_file_node.html
View file

@ -24,7 +24,9 @@
<span>{{ entry.name }}</span>
<span class="file-tree-badge file-tree-badge-warn">broken link</span>
{% else %}
{% if download_supported %}
{% if files_overlay %}
<button type="button" class="file-tree-name-button" data-action="edit" data-target-path="{{ entry.rel }}" data-editable="{{ '1' if entry.editable else '0' }}" title="Open in editor">{{ entry.name }}</button>
{% elif download_supported %}
<a href="{{ files_base_url }}/files/download?path={{ entry.rel|urlencode }}">{{ entry.name }}</a>
{% else %}
<span>{{ entry.name }}</span>
@ -34,7 +36,6 @@
{% endif %}
{% if files_overlay and not entry.broken %}
<span class="files-row-actions" aria-label="File actions">
<button type="button" class="files-row-action" data-action="edit" data-target-path="{{ entry.rel }}" data-editable="{{ '1' if entry.editable else '0' }}" title="Edit">edit</button>
<a class="files-row-action" href="{{ files_base_url }}/files/download?path={{ entry.rel|urlencode }}" title="Download">⬇</a>
<button type="button" class="files-row-action files-row-danger" data-action="delete" data-target-path="{{ entry.rel }}" data-row-kind="file" data-row-name="{{ entry.name }}" title="Delete">✕</button>
</span>