Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Clean up Virtual Keyboard styling 

Make the header a bit taller
Add keyboard layout name to header
Make the detached keyboard render smaller key text so you can read them.
Updated the settings text for keyboard layout.
This commit is contained in:
Marc Brooks 2025-08-26 20:51:52 -05:00
parent 3ec243255b
commit 248f0d38c6
No known key found for this signature in database
GPG Key ID: 583A6AF2D6AE1DC6
3 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/components/VirtualKeyboard.tsx
View File

@ -224,9 +224,10 @@ function KeyboardWrapper() {
<Card
className={cx("overflow-hidden", {
"rounded-none": isAttachedVirtualKeyboardVisible,
"keyboard-detached": !isAttachedVirtualKeyboardVisible
})}
>
<div className="flex items-center justify-center border-b border-b-slate-800/30 bg-white px-2 py-1 dark:border-b-slate-300/20 dark:bg-slate-800">
<div className="flex items-center justify-center border-b border-b-slate-800/30 bg-white px-2 py-4 dark:border-b-slate-300/20 dark:bg-slate-800">
<div className="absolute left-2 flex items-center gap-x-2">
{isAttachedVirtualKeyboardVisible ? (
<Button
@ -246,7 +247,7 @@ function KeyboardWrapper() {
)}
</div>
<h2 className="select-none self-center font-sans text-[12px] text-slate-700 dark:text-slate-300">
Virtual Keyboard
Virtual Keyboard<span className="text-[10px]"> - {selectedKeyboard.name}</span>
</h2>
<div className="absolute right-2">
<Button

14
ui/src/index.css
View File

@ -325,6 +325,20 @@ video::-webkit-media-controls {
@apply mr-[2px]! md:mr-[5px]!;
}
/* Reduce font size for selected keys when keyboard is detached */
.keyboard-detached .simple-keyboard-main.simple-keyboard {
min-width: calc(14 * 7ch);
}
.keyboard-detached .simple-keyboard.hg-theme-default div.hg-button {
text-wrap: auto;
text-align: center;
min-width: 6ch;
}
.keyboard-detached .simple-keyboard.hg-theme-default .hg-button span {
font-size: 50%;
}
/* Hide the scrollbar by setting the scrollbar color to the background color */
.xterm .xterm-viewport {
scrollbar-color: var(--color-gray-900) #002b36;

4
ui/src/routes/devices.$id.settings.keyboard.tsx
View File

@ -53,7 +53,7 @@ export default function SettingsKeyboardRoute() {
<div className="space-y-4">
<SettingsItem
title="Paste text"
title="Keyboard Layout"
description="Keyboard layout of target operating system"
>
<SelectMenuBasic
@ -66,7 +66,7 @@ export default function SettingsKeyboardRoute() {
/>
</SettingsItem>
<p className="text-xs text-slate-600 dark:text-slate-400">
Pasting text sends individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in JetKVM matches the settings in the operating system.
The virtual keyboard, paste text, and keyboard macros send individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in JetKVM matches the settings in the operating system.
</p>
</div>