w1n5t0n/memlnaut-nisps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(playground): move Visual/Synth toggle into bottom toolbar in immersive UI

Browse source 
Relocated the output mode toggle from a floating top-right position into
the bottom floating bar where it's more discoverable. Removed the
duplicate toggle from the expanded sheet. Compact pill-toggle-sm style
fits the toolbar layout.
This commit is contained in:
w1n5t0n 2026-03-22 11:07:38 +02:00
parent 295221d1b2
commit a0adb8b14b
3 changed files with 13 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
playground/a-immersive.html
View file

@ -30,12 +30,6 @@
</div>
</div>
<!-- Output mode toggle (floating, top-right) -->
<div class="output-toggle-float" id="output-toggle-float">
<button class="otf-opt active" data-mode="visual">Visual</button>
<button class="otf-opt" data-mode="synth">Synth</button>
</div>
<!-- Fullscreen flow field canvas -->
<canvas id="vis-canvas"></canvas>
@ -67,6 +61,10 @@
<div class="bottom-sheet collapsed" id="bottom-sheet">
<!-- Floating mode bar (sticky inside sheet) -->
<div class="floating-bar" id="floating-bar">
<div class="pill-toggle pill-toggle-sm" id="output-toggle-float">
<button class="pill-opt active" data-mode="visual">Visual</button>
<button class="pill-opt" data-mode="synth">Synth</button>
</div>
<button class="float-btn accent" id="btn-train-bar" title="Train on examples">Train</button>
<button class="float-btn" id="btn-randomize-bar" title="Randomize weights">Randomize</button>
<button class="float-btn" id="btn-clear-examples-bar" title="Clear examples">Clear Ex</button>
@ -81,14 +79,6 @@
<!-- Sheet content -->
<div class="sheet-content" id="sheet-content">
<!-- Output mode toggle -->
<div class="mode-row">
<div class="pill-toggle" id="output-toggle">
<button class="pill-opt active" data-mode="visual">Visual</button>
<button class="pill-opt" data-mode="synth">Synth</button>
</div>
</div>
<!-- Examples mode actions -->
<div class="action-row" id="examples-actions">
<button class="action-btn" id="btn-add-example">Add Example</button>

32
playground/css/a-immersive.css
View file

@ -64,35 +64,15 @@ html, body {
}
/* ---- Output mode toggle (floating) ---- */
.output-toggle-float {
position: fixed;
top: 30px;
right: 12px;
z-index: 30;
display: flex;
border-radius: 6px;
.pill-toggle-sm {
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid rgba(255, 255, 255, 0.08);
}
.otf-opt {
padding: 6px 14px;
font-size: 12px;
font-family: inherit;
color: var(--text-dim);
background: transparent;
border: none;
cursor: pointer;
transition: all 0.15s;
}
.otf-opt.active {
background: var(--accent-dim);
color: var(--accent);
font-weight: 600;
.pill-toggle-sm .pill-opt {
padding: 3px 10px;
font-size: 11px;
}
/* ---- Fullscreen canvas ---- */

15
playground/js/a-app.js
View file

@ -738,16 +738,8 @@ function wireBottomSheet() {
// ---- Controls wiring ----
function wireControls() {
// Output mode toggle (sheet)
document.querySelectorAll('#output-toggle .pill-opt').forEach(btn => {
btn.addEventListener('click', () => {
syncOutputToggles(btn.dataset.mode);
setOutputMode(btn.dataset.mode);
});
});
// Output mode toggle (floating)
document.querySelectorAll('#output-toggle-float .otf-opt').forEach(btn => {
// Output mode toggle (floating bar)
document.querySelectorAll('#output-toggle-float .pill-opt').forEach(btn => {
btn.addEventListener('click', () => {
syncOutputToggles(btn.dataset.mode);
setOutputMode(btn.dataset.mode);
@ -778,8 +770,7 @@ function wireControls() {
}
function syncOutputToggles(mode) {
document.querySelectorAll('#output-toggle .pill-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
document.querySelectorAll('#output-toggle-float .otf-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
document.querySelectorAll('#output-toggle-float .pill-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
}
function setOutputMode(mode) {