dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Upgrade mobile keyboard with more keys.

Browse Source
This commit is contained in:
LukeGus
2025-09-05 00:13:02 -05:00
parent e24b7668a4
commit 1888872a63
4 changed files with 120 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui/Mobile/Apps/Terminal/Terminal.tsx
View File

@@ -405,7 +405,7 @@ style.innerHTML = `
font-feature-settings: "liga" 1, "calt" 1;
}
.xterm .xterm-screen .xterm-char[data-char-code^="\\uE"] {
.xterm .xterm-screen .xterm-char[data-char-code^="\uE000"] {
font-family: 'JetBrains Mono Nerd Font', 'MesloLGS NF', 'FiraCode Nerd Font' !important;
}
`;

124
src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
View File

@@ -9,59 +9,137 @@ interface TerminalKeyboardProps {
export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
const [layoutName, setLayoutName] = useState("default");
const [isCtrl, setIsCtrl] = useState(false);
const [isAlt, setIsAlt] = useState(false);
const onKeyPress = (button: string) => {
const onKeyPress = async (button: string) => {
if (button === "{shift}") {
setLayoutName("shift");
return;
}
if (button === "{unshift}") {
setLayoutName("default");
return;
}
if (button === "{more}") {
setLayoutName("more")
setLayoutName("more");
return;
}
if (button === "{less}") {
setLayoutName("default");
return;
}
if (button === "{hide}") {
setLayoutName("hide");
return;
}
if (button === "{unhide}") {
setLayoutName("default");
return;
}
onSendInput(button);
if (button === "{ctrl}") {
setIsCtrl(prev => !prev);
return;
}
if (button === "{alt}") {
setIsAlt(prev => !prev);
return;
}
if (button === "{paste}") {
if (navigator.clipboard?.readText) {
try {
const text = await navigator.clipboard.readText();
if (text) {
onSendInput(text);
}
} catch (err) {
}
}
return;
}
let input = button;
const specialKeyMap: { [key: string]: string } = {
"{esc}": "\x1b", "{enter}": "\r", "{tab}": "\t", "{backspace}": "\x7f",
"{arrowUp}": "\x1b[A", "{arrowDown}": "\x1b[B", "{arrowRight}": "\x1b[C", "{arrowLeft}": "\x1b[D",
"{home}": "\x1b[H", "{end}": "\x1b[F", "{pgUp}": "\x1b[5~", "{pgDn}": "\x1b[6~",
"F1": "\x1bOP", "F2": "\x1bOQ", "F3": "\x1bOR", "F4": "\x1bOS",
"F5": "\x1b[15~", "F6": "\x1b[17~", "F7": "\x1b[18~", "F8": "\x1b[19~",
"F9": "\x1b[20~", "F10": "\x1b[21~", "F11": "\x1b[23~", "F12": "\x1b[24~",
"{space}": " "
};
if (specialKeyMap[input]) {
input = specialKeyMap[input];
}
if (isCtrl) {
if (input.length === 1) {
const charCode = input.toUpperCase().charCodeAt(0);
if (charCode >= 64 && charCode <= 95) {
input = String.fromCharCode(charCode - 64);
}
}
}
if (isAlt) {
input = `\x1b${input}`;
}
onSendInput(input);
};
const buttonTheme = [
{
class: "hg-space-big",
buttons: "{space}",
},
{
class: "hg-space-medium",
buttons: "{enter} {backspace}",
},
{
class: "hg-space-small",
buttons: "{hide} {less} {more}",
}
];
if (isCtrl) {
buttonTheme.push({class: "key-active", buttons: "{ctrl}"});
}
if (isAlt) {
buttonTheme.push({class: "key-active", buttons: "{alt}"});
}
return (
<div className="">
<Keyboard
layout={{
default: [
"{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
"q w e r t y u i o p",
"a s d f g h j k l",
"{shift} z x c v b n m {backspace}",
"{hide} {more} {space} {enter}",
],
shift: [
"{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
"Q W E R T Y U I O P",
"A S D F G H J K L",
"{unshift} Z X C V B N M {backspace}",
"{hide} {more} {space} {enter}",
],
more: [
"{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {backspace}",
"{esc} {tab} {ctrl} {alt} {end} {home} {pgUp} {pgDn}",
"1 2 3 4 5 6 7 8 9 0",
"! @ # $ % ^ & * ( ) _ +",
"[ ] { } | \\ ; : ' \" , . / < >",
"F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12",
"{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {paste} {backspace}",
"{hide} {less} {space} {enter}",
],
hide: [
@@ -73,7 +151,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
display={{
"{shift}": "up",
"{unshift}": "dn",
"{backspace}": "del",
"{backspace}": "back",
"{more}": "more",
"{less}": "less",
"{space}": "space",
@@ -84,24 +162,20 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
"{arrowDown}": "↓",
"{hide}": "hide",
"{unhide}": "unhide",
"{esc}": "esc",
"{tab}": "tab",
"{ctrl}": "ctrl",
"{alt}": "alt",
"{paste}": "paste",
"{end}": "end",
"{home}": "home",
"{pgUp}": "pgUp",
"{pgDn}": "pgDn",
}}
theme={"hg-theme-default dark-theme"}
useTouchEvents={true}
buttonTheme={[
{
class: "hg-space-big",
buttons: "{space}",
},
{
class: "hg-space-medium",
buttons: "{enter} {backspace}",
},
{
class: "hg-space-small",
buttons: "{hide} {less} {more}",
}
]}
buttonTheme={buttonTheme}
/>
</div>
);
}
}

5
src/ui/Mobile/Apps/Terminal/kb-dark-theme.css
View File

@@ -22,6 +22,11 @@
background: rgba(83, 83, 83, 0.5);
}
.dark-theme .hg-button.key-active {
background: rgba(126, 126, 126, 0.5);
color: white;
}
.hg-space-big {
width: 100px;
}

28
src/ui/Mobile/MobileApp.tsx
View File

@@ -1,8 +1,8 @@
import {useRef} from "react";
import {useRef, FC} from "react";
import {Terminal} from "@/ui/Mobile/Apps/Terminal/Terminal.tsx";
import {TerminalKeyboard} from "@/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx";
export function MobileApp() {
export const MobileApp: FC = () => {
const terminalRef = useRef<any>(null);
function handleKeyboardInput(input: string) {
@@ -34,16 +34,18 @@ export function MobileApp() {
return (
<div className="h-screen w-screen flex flex-col bg-[#09090b] overflow-y-hidden overflow-x-hidden">
<Terminal
ref={terminalRef}
hostConfig={{
ip: "192.210.197.55",
port: 22,
username: "bugattiguy527",
password: "bugatti$123"
}}
isVisible={true}
/>
<div className="flex-1 min-h-0">
<Terminal
ref={terminalRef}
hostConfig={{
ip: "192.210.197.55",
port: 22,
username: "bugattiguy527",
password: "bugatti$123"
}}
isVisible={true}
/>
</div>
<TerminalKeyboard
onSendInput={handleKeyboardInput}
/>
@@ -52,4 +54,4 @@ export function MobileApp() {
</div>
</div>
)
}
}