Restyle VC lock as attached orange button segment

This commit is contained in:
2026-06-05 17:06:25 -05:00
parent a81488b9ff
commit abbb35bb7e
+11 -9
View File
@@ -111,9 +111,11 @@
</div> </div>
</div> </div>
<div style="display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;"> <div style="display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;">
<button class="btn btn-primary" id="vc-btn" onclick="submitTTS()" disabled style="opacity:0.5;"> <div style="display:inline-flex;">
<span id="spinner" class="spin" style="display:none;"></span><span id="vc-lock" style="font-size:0.75rem;">&#9906;</span> Speak in VC <button class="btn btn-primary" id="vc-btn" onclick="submitTTS()" disabled style="opacity:0.5;border-top-right-radius:0;border-bottom-right-radius:0;">
</button> <span id="spinner" class="spin" style="display:none;"></span> Speak in VC
</button><button id="vc-lock-btn" onclick="toggleVcLock()" style="border:none;background:#e67e22;color:#fff;padding:0.4rem 0.6rem;cursor:pointer;border-top-right-radius:4px;border-bottom-right-radius:4px;font-size:0.85rem;display:inline-flex;align-items:center;" title="Click to unlock">&#9906;</button>
</div>
<button class="btn btn-secondary" id="gen-only-btn" onclick="generateOnly()" style="display:none;"> <button class="btn btn-secondary" id="gen-only-btn" onclick="generateOnly()" style="display:none;">
<span id="gen-spinner" class="spin" style="display:none;"></span> Generate Only <span id="gen-spinner" class="spin" style="display:none;"></span> Generate Only
</button> </button>
@@ -360,22 +362,22 @@ loadSfxEmojis();
// Show generate-only button for all modes // Show generate-only button for all modes
document.getElementById('gen-only-btn').style.display = ''; document.getElementById('gen-only-btn').style.display = '';
// VC lock toggle — click the lock icon to unlock // VC lock toggle
document.getElementById('vc-lock').addEventListener('click', function(e) { function toggleVcLock() {
e.stopPropagation();
const btn = document.getElementById('vc-btn'); const btn = document.getElementById('vc-btn');
const lock = document.getElementById('vc-lock'); const lock = document.getElementById('vc-lock-btn');
if (btn.disabled) { if (btn.disabled) {
btn.disabled = false; btn.disabled = false;
btn.style.opacity = '1'; btn.style.opacity = '1';
lock.innerHTML = '&#9907;'; lock.innerHTML = '&#9907;';
lock.title = 'Click to lock';
} else { } else {
btn.disabled = true; btn.disabled = true;
btn.style.opacity = '0.5'; btn.style.opacity = '0.5';
lock.innerHTML = '&#9906;'; lock.innerHTML = '&#9906;';
lock.title = 'Click to unlock';
} }
}); }
document.getElementById('vc-lock').style.cursor = 'pointer';
let sfxEmojis = []; let sfxEmojis = [];
let sfxDrawerOpen = false; let sfxDrawerOpen = false;