Replace on-screen action buttons with right-click context menus

The tree and main panels now behave like a native file manager: right
click (or the keyboard Menu key) on a folder, asset, breadcrumb crumb, or
empty tree/panel background brings up the relevant actions instead of a
row of always-visible buttons.

- New generic showContextMenu() in app.js with per-target-kind menu
  builders (folder/asset/tree background/panel background), gated by
  admin role the same way the old buttons were.
- Removed: the "..." tree-row action button, and the New Folder/Add
  Asset/Rename/Delete/Edit/Move/Duplicate/Import/Export buttons from the
  inventory toolbar and every panel. Expand All/Collapse All shrank to two
  icon-only buttons next to the search box; everything else creation- or
  mutation-related is right-click only.
- Replaced the per-asset embedded "Move" modal with one shared
  #moveAssetModal populated via a new GET /app/folders/options endpoint,
  since move can now be triggered from any asset row, not just its own
  detail view.
- Breadcrumb crumbs (including the current folder) and folder/asset table
  rows are now valid right-click targets too, not just tree rows.
This commit is contained in:
Owen
2026-08-17 15:24:32 -05:00
parent 218687a1ee
commit 4ceb1cbc03
13 changed files with 299 additions and 193 deletions
+10 -46
View File
@@ -1,26 +1,16 @@
{{define "panel_asset"}}
<div class="panel-content p-3" data-asset-id="{{.Asset.ID}}">
<div class="d-flex align-items-start mb-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link" data-type="root">Inventory</a></li>
{{range .Asset.FolderPath}}
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link" data-type="folder" data-id="{{.ID}}">{{.Name}}</a></li>
{{end}}
<li class="breadcrumb-item active" aria-current="page">{{.Asset.Name}}</li>
</ol>
</nav>
{{if .CanEdit}}
<div class="ms-auto d-flex gap-2">
<button class="btn btn-sm btn-outline-secondary" data-action="edit-asset" data-id="{{.Asset.ID}}"><i class="bi bi-pencil"></i> Edit</button>
<button class="btn btn-sm btn-outline-secondary" data-action="move-asset" data-bs-toggle="modal" data-bs-target="#moveAssetModal-{{.Asset.ID}}"><i class="bi bi-arrows-move"></i> Move</button>
<button class="btn btn-sm btn-outline-secondary" data-action="duplicate-asset" data-id="{{.Asset.ID}}"><i class="bi bi-files"></i> Duplicate</button>
<button class="btn btn-sm btn-outline-danger" data-action="delete-asset" data-id="{{.Asset.ID}}" data-name="{{.Asset.Name}}"><i class="bi bi-trash"></i> Delete</button>
</div>
{{end}}
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link" data-type="root">Inventory</a></li>
{{range .Asset.FolderPath}}
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link" data-type="folder" data-id="{{.ID}}">{{.Name}}</a></li>
{{end}}
<li class="breadcrumb-item active" aria-current="page">{{.Asset.Name}}</li>
</ol>
</nav>
<div class="d-flex align-items-center gap-2 mb-3">
<div class="d-flex align-items-center gap-2 mb-3 mt-2" data-context="asset-header" data-id="{{.Asset.ID}}" title="Right-click for actions">
<i class="bi {{iconOr .Asset.ItemTypeIcon "bi-box-seam"}} fs-3 text-body-secondary"></i>
<div>
<h4 class="mb-0">{{.Asset.Name}}</h4>
@@ -75,30 +65,4 @@
</div>
</div>
</div>
{{if .CanEdit}}
<div class="modal fade" id="moveAssetModal-{{.Asset.ID}}" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Move "{{.Asset.Name}}"</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<label class="form-label">Destination Folder</label>
<select class="form-select" id="moveAssetDestination-{{.Asset.ID}}">
<option value="">Inventory (top level)</option>
{{range .FolderOptions}}
<option value="{{.ID}}">{{range seq .Depth}}&nbsp;&nbsp;&nbsp;{{end}}{{.Path}}</option>
{{end}}
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-action="confirm-move-asset" data-id="{{.Asset.ID}}" data-select="moveAssetDestination-{{.Asset.ID}}">Move</button>
</div>
</div>
</div>
</div>
{{end}}
{{end}}