Compare commits

...

2 Commits

Author SHA1 Message Date
Callum Gare
f189dfc503
Merge af11e3a19b into bf3eae1d9a 2023-08-09 09:44:55 +12:00
Callum Gare
af11e3a19b Improve the appearance and readability of the tty
Values take from 2b4dbacc10/html/src/components/app.tsx
2022-05-18 23:43:43 +10:00
3 changed files with 42 additions and 2 deletions

View File

@ -1,6 +1,7 @@
import { createRef, Component, ComponentChildren } from "preact"; import { createRef, Component, ComponentChildren } from "preact";
import { Modal } from "bootstrap"; import { Modal } from "bootstrap";
import './bootstrap.scss'; import './bootstrap.scss';
import './style.scss';
interface ModalProps { interface ModalProps {
children: ComponentChildren; children: ComponentChildren;

11
js/src/style.scss Normal file
View File

@ -0,0 +1,11 @@
#terminal {
width: auto;
height: 100%;
margin: 0 auto;
padding: 0;
.terminal {
padding: 5px;
height: 100%;
}
}

View File

@ -1,9 +1,37 @@
import { Terminal, IDisposable } from "xterm"; import { Terminal, IDisposable, ITerminalOptions, ITheme } from "xterm";
import { FitAddon } from 'xterm-addon-fit'; import { FitAddon } from 'xterm-addon-fit';
import { WebLinksAddon } from 'xterm-addon-web-links'; import { WebLinksAddon } from 'xterm-addon-web-links';
import { WebglAddon } from 'xterm-addon-webgl'; import { WebglAddon } from 'xterm-addon-webgl';
import { ZModemAddon } from "./zmodem"; import { ZModemAddon } from "./zmodem";
const termOptions = {
fontSize: 13,
fontFamily: 'Menlo For Powerline,Consolas,Liberation Mono,Menlo,Courier,monospace',
macOptionClickForcesSelection: true,
macOptionIsMeta: true,
theme: {
foreground: '#d4d4d4',
background: '#1e1e1e',
cursor: '#adadad',
black: '#000000',
red: '#d81e00',
green: '#5ea702',
yellow: '#cfae00',
blue: '#427ab3',
magenta: '#89658e',
cyan: '#00a7aa',
white: '#dbded8',
brightBlack: '#686a66',
brightRed: '#f54235',
brightGreen: '#99e343',
brightYellow: '#fdeb61',
brightBlue: '#84b0d8',
brightMagenta: '#bc94b7',
brightCyan: '#37e6e8',
brightWhite: '#f1f1f0',
} as ITheme,
} as ITerminalOptions;
export class OurXterm { export class OurXterm {
// The HTMLElement that contains our terminal // The HTMLElement that contains our terminal
elem: HTMLElement; elem: HTMLElement;
@ -27,7 +55,7 @@ export class OurXterm {
constructor(elem: HTMLElement) { constructor(elem: HTMLElement) {
this.elem = elem; this.elem = elem;
this.term = new Terminal(); this.term = new Terminal(termOptions);
this.fitAddOn = new FitAddon(); this.fitAddOn = new FitAddon();
this.zmodemAddon = new ZModemAddon({ this.zmodemAddon = new ZModemAddon({
toTerminal: (x: Uint8Array) => this.term.write(x), toTerminal: (x: Uint8Array) => this.term.write(x),