- added select-list with bundled fonts instead of single text-area (settings -> terminal)

- fix: proper assets exports with webpack (see: fonts.scss)
- fix: lint

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+preferences/terminal.tsx

@@ -23,11 +23,12 @@ interface Dependencies {
   defaultShell: string;
 }
 
-const NonInjectedTerminal = observer(({
-  userStore,
-  themeStore,
-  defaultShell,
-}: Dependencies) => {
+const NonInjectedTerminal = observer((
+  {
+    userStore,
+    themeStore,
+    defaultShell,
+  }: Dependencies) => {
   const themeOptions = [
     {
       value: "", // TODO: replace with a sentinal value that isn't string (and serialize it differently)
@@ -39,6 +40,12 @@ const NonInjectedTerminal = observer(({
     })),
   ];
 
+  // fonts must be declared in `fonts.scss` and at `template.html` (if early-preloading required)
+  const supportedCustomFonts = [
+    "RobotoMono", "Anonymous Pro", "IBM Plex Mono", "JetBrains Mono", "Red Hat Mono",
+    "Source Code Pro", "Space Mono", "Ubuntu Mono",
+  ];
+
   return (
     <Preferences data-testid="terminal-preferences-page">
       <section>
@@ -88,11 +95,11 @@ const NonInjectedTerminal = observer(({
         </section>
         <section>
           <SubTitle title="Font family" />
-          <Input
-            theme="round-black"
-            type="text"
+          <Select
+            themeName="lens"
             value={userStore.terminalConfig.fontFamily}
-            onChange={(value) => userStore.terminalConfig.fontFamily = value}
+            options={supportedCustomFonts}
+            onChange={opt => userStore.terminalConfig.fontFamily = opt?.value ?? supportedCustomFonts[0]}
           />
         </section>
       </section>

src/renderer/components/dock/terminal/terminal.ts

@@ -74,7 +74,7 @@ export class Terminal {
 
   constructor(protected readonly dependencies: TerminalDependencies, {
     tabId,
-    api
+    api,
   }: TerminalArguments) {
     this.tabId = tabId;
     this.api = api;
@@ -110,8 +110,8 @@ export class Terminal {
       }, {
         fireImmediately: true,
       }),
-      reaction(() => this.fontSize, this.setFontSize, { fireImmediately: true, }),
-      reaction(() => this.fontFamily, this.setFontFamily, { fireImmediately: true, }),
+      reaction(() => this.fontSize, this.setFontSize, { fireImmediately: true }),
+      reaction(() => this.fontFamily, this.setFontFamily, { fireImmediately: true }),
       () => onDataHandler.dispose(),
       () => this.fitAddon.dispose(),
       () => this.api.removeAllListeners(),
@@ -203,14 +203,18 @@ export class Terminal {
     }
   };
 
-  setFontSize = (size: number) => {
-    this.xterm.options.fontSize = size;
+  setFontSize = (fontSize: number) => {
+    logger.info(`[TERMINAL]: set fontSize to ${fontSize}`);
+
+    this.xterm.options.fontSize = fontSize;
   };
 
   setFontFamily = (fontFamily: string) => {
+    logger.info(`[TERMINAL]: set fontFamily to ${fontFamily}`);
+
     this.xterm.options.fontFamily = fontFamily;
 
-    // provide access to current terminal-font in css in :root {}
+    // provide css-variable within `:root {}`
     document.documentElement.style.setProperty("--font-terminal", fontFamily);
   };
 

src/renderer/components/fonts.scss

@@ -16,44 +16,44 @@
 // Terminal fonts (monospaced)
 // Source: https://fonts.google.com/?category=Monospace
 @font-face {
-  font-family: "Anonymous Pro", monospace;
+  font-family: "Anonymous Pro";
   src: local("Anonymous Pro"), url("../fonts/AnonymousPro-Regular.ttf") format("truetype");
   font-display: block;
 }
 
 @font-face {
-  font-family: "IBM Plex Mono", monospace;
+  font-family: "IBM Plex Mono";
   src: local("IBM Plex Mono"), url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");
   font-display: block;
 }
 
 @font-face {
-  font-family: "JetBrains Mono", monospace;
+  font-family: "JetBrains Mono";
   src: local("JetBrains Mono"), url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
   font-display: block;
 }
 
 @font-face {
-  font-family: "Red Hat Mono", monospace;
+  font-family: "Red Hat Mono";
   src: local("Red Hat Mono"), url("../fonts/RedHatMono-Regular.ttf") format("truetype");
   font-display: block;
 }
 
 
 @font-face {
-  font-family: "Source Code Pro", monospace;
+  font-family: "Source Code Pro";
   src: local("Source Code Pro"), url("../fonts/SourceCodePro-Regular.ttf") format("truetype");
   font-display: block;
 }
 
 @font-face {
-  font-family: "Space Mono", monospace;
+  font-family: "Space Mono";
   src: local("Space Mono"), url("../fonts/SpaceMono-Regular.ttf") format("truetype");
   font-display: block;
 }
 
 @font-face {
-  font-family: "Ubuntu Mono", monospace;
+  font-family: "Ubuntu Mono";
   src: local("Ubuntu Mono"), url("../fonts/UbuntuMono-Regular.ttf") format("truetype");
   font-display: block;
 }
@@ -62,7 +62,7 @@
 // RobotoMono Windows Compatible for using in terminal
 // https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
 @font-face {
-  font-family: "RobotoMono", monospace;
+  font-family: "RobotoMono";
   src: local("RobotoMono"), url("../fonts/roboto-mono-nerd.ttf") format("truetype");
   font-display: block;
 }

src/renderer/template.html

@@ -4,14 +4,11 @@
     <meta charset="UTF-8">
   </head>
   <body>
-
     <div id="app"></div>
-    <div id="terminal-init"></div>
-
     <div id="fonts-preloading">
       <span style="font-family: 'Material Icons'" />
-      <span style="font-family: 'Anonymous Pro'" />
       <span style="font-family: 'RobotoMono'" />
+      <span style="font-family: 'Anonymous Pro'" />
       <span style="font-family: 'IBM Plex Mono'" />
       <span style="font-family: 'JetBrains Mono'" />
       <span style="font-family: 'Red Hat Mono'" />
@@ -19,6 +16,6 @@
       <span style="font-family: 'Space Mono'" />
       <span style="font-family: 'Ubuntu Mono'" />
     </div>
-
+    <div id="terminal-init"></div>
   </body>
 </html>