101 lines
4.1 KiB
Vue
101 lines
4.1 KiB
Vue
<template>
|
|
<div class="quick-keys" @contextmenu.prevent>
|
|
<button class="quick-key ctrl-c" @click="send('ctrl_c')" @touchend.prevent="send('ctrl_c')">C-c</button>
|
|
<button class="quick-key ctrl-z" @click="send('ctrl_z')" @touchend.prevent="send('ctrl_z')">C-z</button>
|
|
<button class="quick-key ctrl-d" @click="send('ctrl_d')" @touchend.prevent="send('ctrl_d')">C-d</button>
|
|
<button class="quick-key ctrl-l" @click="send('ctrl_l')" @touchend.prevent="send('ctrl_l')">C-l</button>
|
|
<div class="sep"></div>
|
|
<button class="quick-key" @click="send('esc')" @touchend.prevent="send('esc')">ESC</button>
|
|
<button class="quick-key" :class="{ active: shiftPending }" @click="send('shift')" @touchend.prevent="send('shift')">SHF</button>
|
|
<button class="quick-key" :class="{ active: ctrlPending }" @click="send('ctrl')" @touchend.prevent="send('ctrl')">CTL</button>
|
|
<button class="quick-key" @click="send('tab')" @touchend.prevent="send('tab')">TAB</button>
|
|
<div class="sep"></div>
|
|
<button class="quick-key" @click="send('up')" @touchend.prevent="send('up')">↑</button>
|
|
<button class="quick-key" @click="send('down')" @touchend.prevent="send('down')">↓</button>
|
|
<button class="quick-key" @click="send('left')" @touchend.prevent="send('left')">←</button>
|
|
<button class="quick-key" @click="send('right')" @touchend.prevent="send('right')">→</button>
|
|
<div class="sep"></div>
|
|
<button class="quick-key" @click="send('slash')" @touchend.prevent="send('slash')">/</button>
|
|
<button class="quick-key" @click="send('minus')" @touchend.prevent="send('minus')">-</button>
|
|
<button class="quick-key" @click="send('dot')" @touchend.prevent="send('dot')">.</button>
|
|
<button class="quick-key" @click="send('hash')" @touchend.prevent="send('hash')">#</button>
|
|
<button class="quick-key" @click="send('amp')" @touchend.prevent="send('amp')">&</button>
|
|
<button class="quick-key enter-key" @click="send('enter')" @touchend.prevent="send('enter')">↵</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useQuickKeys } from "../composables/useQuickKeys";
|
|
const { shiftPending, ctrlPending, sendQuickKey } = useQuickKeys();
|
|
const send = sendQuickKey;
|
|
</script>
|
|
|
|
<style scoped>
|
|
.quick-keys {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
touch-action: pan-x;
|
|
gap: 3px;
|
|
padding: 4px 6px;
|
|
background: var(--bg-1);
|
|
border-top: 1px solid var(--border);
|
|
scrollbar-width: none;
|
|
flex-shrink: 0;
|
|
}
|
|
.quick-keys::-webkit-scrollbar { display: none; }
|
|
|
|
.sep {
|
|
width: 1px;
|
|
background: var(--border);
|
|
margin: 4px 2px;
|
|
flex-shrink: 0;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.quick-key {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
min-width: 40px;
|
|
height: 32px;
|
|
border-radius: 5px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-2);
|
|
color: var(--text-2);
|
|
font-size: 12px;
|
|
font-family: "JetBrains Mono", ui-monospace, monospace;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
transition: background 0.1s, color 0.1s;
|
|
}
|
|
.quick-key:hover, .quick-key:active { background: var(--bg-3); color: var(--text-1); }
|
|
.quick-key.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
|
|
|
|
.quick-key.ctrl-c { color: var(--danger); border-color: rgba(248, 81, 73, 0.35); }
|
|
.quick-key.ctrl-c:hover { background: rgba(248, 81, 73, 0.12); }
|
|
.quick-key.ctrl-z { color: #e3b341; border-color: rgba(210, 153, 34, 0.35); }
|
|
.quick-key.ctrl-z:hover { background: rgba(210, 153, 34, 0.1); }
|
|
.quick-key.ctrl-d { color: var(--accent-blue); border-color: var(--border-blue); }
|
|
.quick-key.ctrl-d:hover { background: rgba(88, 166, 255, 0.1); }
|
|
|
|
.quick-key.enter-key {
|
|
min-width: 48px;
|
|
border-color: var(--border-blue);
|
|
background: rgba(88, 166, 255, 0.08);
|
|
color: var(--accent-blue);
|
|
}
|
|
.quick-key.enter-key:hover { background: rgba(88, 166, 255, 0.18); }
|
|
|
|
@media (max-width: 768px) {
|
|
.quick-keys { padding: 5px 6px; gap: 4px; }
|
|
.quick-key { min-width: 44px; height: 38px; font-size: 12px; border-radius: 6px; }
|
|
.quick-key.enter-key { min-width: 52px; }
|
|
}
|
|
</style>
|