iot/spore-ledlab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve editor layout

Browse Source
This commit is contained in:
0x1d
2025-10-12 17:02:47 +02:00
parent 01350ac233
commit 9d5d0e4d67
4 changed files with 267 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
public/index.html
View File

@@ -90,61 +90,80 @@
<div class="editor-layout-modern">
<!-- Left Panel: Preset Info & Layers -->
<div class="editor-left-panel">
<!-- Preset Info -->
<div class="editor-section-compact">
<h3 class="section-title-compact">Preset Info</h3>
<!-- Preset -->
<div class="editor-section-compact editor-preset-section">
<div class="preset-header">
<h3 class="section-title-compact">Preset</h3>
<div class="preset-header-buttons">
<button class="btn btn-icon" id="editor-new-preset" title="New Preset">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<polyline points="10,9 9,9 8,9"/>
</svg>
</button>
<button class="btn btn-icon" id="editor-save-preset" title="Save Preset">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17,21 17,13 7,13 7,21"/>
<polyline points="7,3 7,8 15,8"/>
</svg>
</button>
<button class="btn btn-icon" id="editor-delete-preset" title="Delete Preset">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="3,6 5,6 21,6"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
<line x1="10" y1="11" x2="10" y2="17"/>
<line x1="14" y1="11" x2="14" y2="17"/>
</svg>
</button>
<button class="btn btn-icon" id="editor-export-json" title="Export JSON">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7,10 12,15 17,10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
<label class="btn btn-icon" title="Import JSON">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17,8 12,3 7,8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
<input type="file" id="editor-import-json" accept=".json" style="display: none;" />
</label>
</div>
</div>
<!-- Preset Name -->
<div class="editor-input-wrapper">
<label>Name</label>
<input type="text" id="editor-preset-name" value="New Custom Preset" />
</div>
<div class="editor-input-wrapper">
<label>Description</label>
<textarea id="editor-preset-desc" rows="3">A custom configurable preset</textarea>
<!-- Preset Actions -->
<div class="preset-actions">
<div class="preset-actions-row">
<select class="preset-select" id="editor-load-preset">
<option value="">Load saved preset...</option>
</select>
</div>
</div>
</div>
<!-- Add Layer Section -->
<div class="editor-section-compact">
<h3 class="section-title-compact">Add Layer</h3>
<div class="editor-input-wrapper">
<label>Layer Type</label>
<select id="editor-layer-type">
<option value="shape">Shape</option>
<option value="pattern">Pattern</option>
</select>
</div>
<button class="btn btn-primary btn-full-width" id="editor-add-layer">➕ Add Layer</button>
</div>
<!-- Layers List -->
<div class="editor-section-compact editor-layers-section">
<h3 class="section-title-compact">Layers</h3>
<div class="section-title-with-button">
<h3 class="section-title-compact">Layers</h3>
<button class="btn btn-primary btn-small" id="editor-add-layer">➕</button>
</div>
<div id="editor-layer-list" class="editor-layer-list-expandable">
<p class="editor-empty-state">No layers yet. Click "Add Layer" to get started!</p>
</div>
</div>
<!-- Manage Section -->
<div class="editor-section-compact">
<h3 class="section-title-compact">Manage</h3>
<div class="editor-actions">
<button class="btn btn-primary" id="editor-new-preset">📄 New</button>
<button class="btn btn-success" id="editor-save-preset">💾 Save</button>
<button class="btn btn-danger" id="editor-delete-preset">🗑️ Delete</button>
</div>
<div class="editor-actions">
<select class="preset-select" id="editor-load-preset">
<option value="">Load saved preset...</option>
</select>
</div>
<div class="editor-actions">
<button class="btn btn-secondary" id="editor-export-json">📤 Export JSON</button>
<label class="btn btn-secondary" style="margin: 0; text-align: center;">
📥 Import JSON
<input type="file" id="editor-import-json" accept=".json" style="display: none;" />
</label>
</div>
</div>
</div>
<!-- Right Panel: Preview & Controls -->