diff --git a/crates/ericrfb-frontend/src/pages/console.ts b/crates/ericrfb-frontend/src/pages/console.ts index 66032b0..870d924 100644 --- a/crates/ericrfb-frontend/src/pages/console.ts +++ b/crates/ericrfb-frontend/src/pages/console.ts @@ -20,7 +20,21 @@ export function mountConsole(el: HTMLElement, s: SessionInfo) {
@@ -228,11 +242,40 @@ function wireInputHandlers() { } function wireToolbar() { - document.getElementById('btn-cad')?.addEventListener('click', () => { - if (ws?.readyState === WebSocket.OPEN) ws.send(makeCtrlAltDel()) - document.getElementById('canvas')?.focus() + // Send Key dropdown + const sendKeyBtn = document.getElementById('btn-sendkey')! + const sendKeyMenu = document.getElementById('sendkey-menu')! + + sendKeyBtn.addEventListener('click', (e) => { + e.stopPropagation() + sendKeyMenu.hidden = !sendKeyMenu.hidden }) + // Close menu on outside click + document.addEventListener('click', () => { sendKeyMenu.hidden = true }) + sendKeyMenu.addEventListener('click', (e) => e.stopPropagation()) + + sendKeyMenu.querySelectorAll('button[data-sc]').forEach(btn => { + btn.addEventListener('click', () => { + const sc = parseInt((btn as HTMLElement).dataset.sc!) + if (ws?.readyState === WebSocket.OPEN) { + ws.send(makeKeyPress(sc)) + ws.send(makeKeyRelease(sc)) + } + sendKeyMenu.hidden = true + document.getElementById('canvas')?.focus() + }) + }) + + sendKeyMenu.querySelectorAll('button[data-cad]').forEach(btn => { + btn.addEventListener('click', () => { + if (ws?.readyState === WebSocket.OPEN) ws.send(makeCtrlAltDel()) + sendKeyMenu.hidden = true + document.getElementById('canvas')?.focus() + }) + }) + + // Fullscreen document.getElementById('btn-fs')?.addEventListener('click', () => { const shell = document.querySelector('.shell') if (document.fullscreenElement) document.exitFullscreen() diff --git a/crates/ericrfb-frontend/src/style.css b/crates/ericrfb-frontend/src/style.css index a59984c..262b172 100644 --- a/crates/ericrfb-frontend/src/style.css +++ b/crates/ericrfb-frontend/src/style.css @@ -126,6 +126,44 @@ body { .toolbar .status { margin-left: auto; color: #888; } .toolbar .status.connected { color: #4a7c59; } +/* Send Key dropdown */ +.sendkey-wrap { + position: relative; +} + +.sendkey-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 100; + background: #2a2a2a; + border: 1px solid #444; + border-radius: 4px; + padding: 0.25rem 0; + min-width: 160px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); +} + +.sendkey-menu button { + display: block; + width: 100%; + padding: 0.35rem 0.75rem; + border: none; + background: none; + color: #ccc; + text-align: left; + cursor: pointer; + font-size: 0.8rem; +} + +.sendkey-menu button:hover { background: #383838; } + +.sendkey-menu hr { + border: none; + border-top: 1px solid #3a3a3a; + margin: 0.2rem 0; +} + /* Console canvas */ .console-wrap { flex: 1;