diff options
| author | skal <pascal.massimino@gmail.com> | 2026-02-18 21:25:30 +0100 |
|---|---|---|
| committer | skal <pascal.massimino@gmail.com> | 2026-02-18 21:25:30 +0100 |
| commit | eeecb76eef15f684b7909ff22fd054680c2a3498 (patch) | |
| tree | 1516d97f0d5bcae33eebb0a9d4f5bacfdaf1adcb /tools | |
| parent | 909d04f973d123a891e6879cb57c536ef0f69ef7 (diff) | |
feat(mq_editor): group toolbar buttons with separators
handoff(Claude): toolbar buttons grouped with vertical separators:
[Open WAV] | [Extract][AutoSpread] | [Play][Stop] | [+Partial][ClearAll] | [Explore][Contour] | [Undo][Redo] | [Params]
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'tools')
| -rw-r--r-- | tools/mq_editor/index.html | 40 | ||||
| -rw-r--r-- | tools/mq_editor/style.css | 5 |
2 files changed, 33 insertions, 12 deletions
diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html index 77e0f56..605d91a 100644 --- a/tools/mq_editor/index.html +++ b/tools/mq_editor/index.html @@ -13,17 +13,35 @@ <div class="toolbar"> <input type="file" id="wavFile" accept=".wav"> - <button id="chooseFileBtn">📂 Open WAV</button> - <button id="extractBtn" disabled>Extract Partials</button> - <button id="autoSpreadAllBtn" disabled>Auto Spread All</button> - <button id="playBtn" disabled>▶ Play</button> - <button id="stopBtn" disabled>■ Stop</button> - <button id="newPartialBtn" disabled>+ Partial</button> - <button id="clearAllBtn" disabled>✕ Clear All</button> - <button id="exploreBtn" disabled>⊕ Explore</button> - <button id="contourBtn" disabled>≋ Contour</button> - <button id="undoBtn" disabled>↩ Undo</button> - <button id="redoBtn" disabled>↪ Redo</button> + <span class="toolbar-group"> + <button id="chooseFileBtn">📂 Open WAV</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="extractBtn" disabled>Extract Partials</button> + <button id="autoSpreadAllBtn" disabled>Auto Spread All</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="playBtn" disabled>▶ Play</button> + <button id="stopBtn" disabled>■ Stop</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="newPartialBtn" disabled>+ Partial</button> + <button id="clearAllBtn" disabled>✕ Clear All</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="exploreBtn" disabled>⊕ Explore</button> + <button id="contourBtn" disabled>≋ Contour</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="undoBtn" disabled>↩ Undo</button> + <button id="redoBtn" disabled>↪ Redo</button> + </span> + <span class="toolbar-sep"></span> <span class="toolbar-wrap"> <button id="paramsBtn">⚙ Params</button> <div id="paramsPanel"> diff --git a/tools/mq_editor/style.css b/tools/mq_editor/style.css index 6b266d9..ed518f5 100644 --- a/tools/mq_editor/style.css +++ b/tools/mq_editor/style.css @@ -14,7 +14,10 @@ input[type="file"] { display: none; } .canvas-wrap { position: relative; } /* === Toolbar === */ -.toolbar { margin-bottom: 10px; padding: 10px; background: #2a2a2a; border-radius: 4px; } +.toolbar { margin-bottom: 10px; padding: 10px; background: #2a2a2a; border-radius: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } +.toolbar-group { display: inline-flex; align-items: center; gap: 2px; } +.toolbar-group button { margin-right: 0; } +.toolbar-sep { align-self: stretch; width: 1px; background: #555; margin: 3px 6px; } .toolbar-wrap { position: relative; display: inline-block; } /* === Buttons === */ |