diff --git a/js/src/MyModal.tsx b/js/src/MyModal.tsx index fff165a..c8b2da3 100644 --- a/js/src/MyModal.tsx +++ b/js/src/MyModal.tsx @@ -1,6 +1,7 @@ import { createRef, Component, ComponentChildren } from "preact"; import { Modal } from "bootstrap"; import './bootstrap.scss'; +import './style.scss'; interface ModalProps { children: ComponentChildren; diff --git a/js/src/style.scss b/js/src/style.scss new file mode 100644 index 0000000..55a38de --- /dev/null +++ b/js/src/style.scss @@ -0,0 +1,11 @@ +#terminal { + width: auto; + height: 100%; + margin: 0 auto; + padding: 0; + + .terminal { + padding: 5px; + height: 100%; + } +} \ No newline at end of file diff --git a/js/src/xterm.tsx b/js/src/xterm.tsx index 4e5aa96..0bd4754 100644 --- a/js/src/xterm.tsx +++ b/js/src/xterm.tsx @@ -1,9 +1,37 @@ -import { Terminal, IDisposable } from "xterm"; +import { Terminal, IDisposable, ITerminalOptions, ITheme } from "xterm"; import { FitAddon } from 'xterm-addon-fit'; import { WebLinksAddon } from 'xterm-addon-web-links'; import { WebglAddon } from 'xterm-addon-webgl'; 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 { // The HTMLElement that contains our terminal elem: HTMLElement; @@ -27,7 +55,7 @@ export class OurXterm { constructor(elem: HTMLElement) { this.elem = elem; - this.term = new Terminal(); + this.term = new Terminal(termOptions); this.fitAddOn = new FitAddon(); this.zmodemAddon = new ZModemAddon({ toTerminal: (x: Uint8Array) => this.term.write(x),