Add termilan font settings to store

Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box>

src/common/user-store/preferences-helpers.ts

@@ -10,7 +10,7 @@ import { getAppVersion, ObservableToggleSet } from "../utils";
 import type { editor } from "monaco-editor";
 import merge from "lodash/merge";
 import { SemVer } from "semver";
-import { defaultTheme } from "../vars";
+import { defaultTheme, defaultFontFamily, defaultFontSize } from "../vars";
 
 export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
   filePath: string;
@@ -188,6 +188,32 @@ const downloadBinariesPath: PreferenceDescription<string | undefined> = {
   },
 };
 
+const terminalFontSize: PreferenceDescription<number | undefined> = {
+  fromStore(val) {
+    return val;
+  },
+  toStore(val) {
+    if (!val) {
+      return defaultFontSize;
+    }
+
+    return val;
+  },
+};
+
+const terminalFontFamily: PreferenceDescription<string | undefined> = {
+  fromStore(val) {
+    return val;
+  },
+  toStore(val) {
+    if (!val) {
+      return defaultFontFamily;
+    }
+
+    return val;
+  },
+};
+
 const kubectlBinariesPath: PreferenceDescription<string | undefined> = {
   fromStore(val) {
     return val;
@@ -359,6 +385,8 @@ export const DESCRIPTORS = {
   syncKubeconfigEntries,
   editorConfiguration,
   terminalCopyOnSelect,
+  terminalFontSize,
+  terminalFontFamily,
   updateChannel,
   extensionRegistryUrl,
 };

src/common/user-store/user-store.ts

@@ -57,6 +57,8 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
   @observable downloadBinariesPath?: string;
   @observable kubectlBinariesPath?: string;
   @observable terminalCopyOnSelect: boolean;
+  @observable terminalFontSize?: number;
+  @observable terminalFontFamily?: string;
   @observable updateChannel?: string;
   @observable extensionRegistryUrl: ExtensionRegistry;
 
@@ -185,6 +187,8 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
     this.syncKubeconfigEntries.replace(DESCRIPTORS.syncKubeconfigEntries.fromStore(preferences?.syncKubeconfigEntries));
     this.editorConfiguration = DESCRIPTORS.editorConfiguration.fromStore(preferences?.editorConfiguration);
     this.terminalCopyOnSelect = DESCRIPTORS.terminalCopyOnSelect.fromStore(preferences?.terminalCopyOnSelect);
+    this.terminalFontSize = DESCRIPTORS.terminalFontSize.fromStore(preferences?.terminalFontSize);
+    this.terminalFontFamily = DESCRIPTORS.terminalFontFamily.fromStore(preferences?.terminalFontFamily);
     this.updateChannel = DESCRIPTORS.updateChannel.fromStore(preferences?.updateChannel);
     this.extensionRegistryUrl = DESCRIPTORS.extensionRegistryUrl.fromStore(preferences?.extensionRegistryUrl);
   }
@@ -210,6 +214,8 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
         syncKubeconfigEntries: DESCRIPTORS.syncKubeconfigEntries.toStore(this.syncKubeconfigEntries),
         editorConfiguration: DESCRIPTORS.editorConfiguration.toStore(this.editorConfiguration),
         terminalCopyOnSelect: DESCRIPTORS.terminalCopyOnSelect.toStore(this.terminalCopyOnSelect),
+        terminalFontFamily: DESCRIPTORS.terminalFontFamily.toStore(this.terminalFontFamily),
+        terminalFontSize: DESCRIPTORS.terminalFontSize.toStore(this.terminalFontSize),
         updateChannel: DESCRIPTORS.updateChannel.toStore(this.updateChannel),
         extensionRegistryUrl: DESCRIPTORS.extensionRegistryUrl.toStore(this.extensionRegistryUrl),
       },

src/common/vars.ts

@@ -26,6 +26,8 @@ export const productName = packageInfo.productName;
 export const appName = `${packageInfo.productName}${isDevelopment ? "Dev" : ""}`;
 export const publicPath = "/build/" as string;
 export const defaultTheme = "lens-dark" as string;
+export const defaultFontSize = 10;
+export const defaultFontFamily = "Verdana";
 
 // Webpack build paths
 export const contextDir = process.cwd();

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

@@ -22,7 +22,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { UserStore } from "../../../common/user-store";
 import { SubTitle } from "../layout/sub-title";
-import { Input } from "../input";
+import { Input, InputValidators } from "../input";
 import { isWindows } from "../../../common/vars";
 import { Switch } from "../switch";
 
@@ -58,7 +58,25 @@ export const Terminal = observer(() => {
           Copy on select and paste on right-click
       </Switch>
     </section>
-
+    <section>
-    <hr/>
+      <SubTitle title="Font size"/>
+      <Input
+        theme="round-black"
+        type="number"
+        min={10}
+        validators={InputValidators.isNumber}
+        value={userStore.terminalFontSize.toString()}
+        onChange={value => userStore.terminalFontSize = Number(value)}
+      />
+    </section>
+    <section>
+      <SubTitle title="Font family"/>
+      <Input
+        theme="round-black"
+        type="text"
+        value={userStore.terminalFontFamily}
+        onChange={value => userStore.terminalFontFamily = value}
+      />
+    </section>
   </div>);
 });