mikael-lovqvists-claude-agent/electronics-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make bin editor open to image view; corners editing on demand

Browse Source 
- Default view: processed image (full size in dialog), or placeholder if
  not yet processed. Name and type selector always visible at top.
- "Adjust corners…" button reveals the canvas editor (lazy-loaded on
  first click, so there's no canvas allocation cost on open).
- "← Back to image" returns to the image view.
- Corners are only re-processed on Save if the canvas was opened.
- Tabs reduced to Fields | Contents (Corners is no longer a tab).
- Added preview image CSS; btn-link style for the back button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-04-03 13:06:30 +00:00
parent 46ce10289e
commit e2d0079ba0
3 changed files with 120 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
public/templates.html
View File

@@ -671,24 +671,29 @@
<template id="t-dialog-bin-editor">
<dialog id="dialog-bin-editor" class="app-dialog app-dialog-wide">
<h2 class="dialog-title">Edit bin</h2>
<div class="tab-bar" id="bin-editor-tabs">
<button class="tab-btn active" data-tab="corners">Corners</button>
<button class="tab-btn" data-tab="fields">Fields</button>
<button class="tab-btn" data-tab="contents">Contents</button>
<div class="form-row">
<label>Name</label>
<input type="text" id="bin-editor-name" autocomplete="off">
</div>
<div class="form-row">
<label>Type</label>
<select id="bin-editor-type">
<option value="">— Custom —</option>
</select>
</div>
<!-- Corners tab -->
<div id="bin-editor-tab-corners">
<div class="form-row">
<label>Name</label>
<input type="text" id="bin-editor-name" autocomplete="off">
</div>
<div class="form-row">
<label>Type</label>
<select id="bin-editor-type">
<option value="">— Custom —</option>
</select>
<!-- Default view: processed image -->
<div id="bin-editor-view-image">
<div class="bin-editor-preview-wrap">
<img id="bin-editor-preview" class="bin-editor-preview-img" alt="" hidden>
<div id="bin-editor-no-image" class="bin-editor-no-image">Not yet processed — click "Adjust corners" to set up</div>
</div>
<button type="button" class="btn btn-secondary btn-sm" id="bin-editor-go-corners">Adjust corners…</button>
</div>
<!-- Corners canvas (revealed on demand) -->
<div id="bin-editor-view-corners" hidden>
<div class="form-row" id="bin-editor-dims-row">
<label>Dimensions (mm)</label>
<div class="bin-editor-dims">
@@ -699,11 +704,16 @@
</div>
</div>
<canvas id="bin-editor-canvas" class="bin-editor-canvas"></canvas>
<button type="button" class="btn btn-link btn-sm" id="bin-editor-go-back">← Back to image</button>
</div>
<!-- Fields tab -->
<div id="bin-editor-tab-fields" hidden>
<div class="form-section-label">Field values</div>
<!-- Tabs: Fields | Contents -->
<div class="tab-bar" id="bin-editor-tabs">
<button class="tab-btn active" data-tab="fields">Fields</button>
<button class="tab-btn" data-tab="contents">Contents</button>
</div>
<div id="bin-editor-tab-fields">
<div id="bin-field-rows"></div>
<div class="form-row add-field-row">
<div class="input-with-action">
@@ -715,7 +725,6 @@
</div>
</div>
<!-- Contents tab -->
<div id="bin-editor-tab-contents" hidden>
<div id="bin-contents-list"></div>
<div class="form-row" style="margin-top:0.5rem">
@@ -725,7 +734,7 @@
<div class="dialog-actions">
<button type="button" class="btn btn-secondary" id="bin-editor-cancel">Cancel</button>
<button type="button" class="btn btn-primary" id="bin-editor-save">Save &amp; process</button>
<button type="button" class="btn btn-primary" id="bin-editor-save">Save</button>
</div>
</dialog>
</template>