diff options
Diffstat (limited to 'tools/mq_editor')
| -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 === */ |