Font settings for editor and ternimal (#4694)

* Add font settings for editor. Add terminal tab Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Move shell settings to terminal tab Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Add termilan font settings to store Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Fix store crash Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Cleanup Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Remove unsued font-list Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Cleanup. Move default font size to a const Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Remove package.lock Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * PR fixes and cleanup Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Move to settings object Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Test Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Add reaction to update terminals. Cleanup Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Add config field to terminal Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Merge with master and resolve conflicts Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Fix merge issues Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> * Fix lint and resolve conflicts Signed-off-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box> Co-authored-by: DMYTRO ZHARKOV <dmytrozharkov@DMYTROs-MBP.fritz.box>
2025-05-20 05:10:56 +00:00 · 2022-01-21 09:18:53 +01:00
1 parent 6cba82c491
commit b7d29f8c49
@@ -10,7 +10,6 @@ import { Select, SelectOption } from "../select";
 import { ThemeStore } from "../../theme.store";
 import { UserStore } from "../../../common/user-store";
 import { Input } from "../input";
-import { isWindows } from "../../../common/vars";
 import { Switch } from "../switch";
 import moment from "moment-timezone";
 import { CONSTANTS, defaultExtensionRegistryUrl, ExtensionRegistryLocation } from "../../../common/user-store/preferences-helpers";
@@ -36,16 +35,7 @@ interface Dependencies {

 const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems }) => {
  const userStore = UserStore.getInstance();
-  const defaultShell = process.env.SHELL
-    || process.env.PTYSHELL
-    || (
-      isWindows
-        ? "powershell.exe"
-        : "System default shell"
-    );
-
  const [customUrl, setCustomUrl] = React.useState(userStore.extensionRegistryUrl.customUrl || "");
-  const [shell, setShell] = React.useState(userStore.shell || "");
  const extensionSettings = appPreferenceItems.get().filter((preference) => preference.showInPreferencesTab === "application");
  const themeStore = ThemeStore.getInstance();

@@ -62,43 +52,7 @@ const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems })
        />
      </section>

-      <hr />
-
-      <section id="terminalTheme">
-        <SubTitle title="Terminal theme" />
-        <Select
-          themeName="lens"
-          options={[
-            { label: "Match theme", value: "" },
-            ...themeStore.themeOptions,
-          ]}
-          value={userStore.terminalTheme}
-          onChange={({ value }) => userStore.terminalTheme = value}
-        />
-      </section>
-
-      <section id="shell">
-        <SubTitle title="Terminal Shell Path" />
-        <Input
-          theme="round-black"
-          placeholder={defaultShell}
-          value={shell}
-          onChange={setShell}
-          onBlur={() => userStore.shell = shell}
-        />
-      </section>
-
-      <section id="terminalSelection">
-        <SubTitle title="Terminal copy & paste" />
-        <Switch
-          checked={userStore.terminalCopyOnSelect}
-          onChange={() => userStore.terminalCopyOnSelect = !userStore.terminalCopyOnSelect}
-        >
-          Copy on select and paste on right-click
-        </Switch>
-      </section>
-
-      <hr />
+      <hr/>

      <section id="extensionRegistryUrl">
        <SubTitle title="Extension Install Registry" />
@@ -69,6 +69,27 @@ export const Editor = observer(() => {
          onChange={value => editorConfiguration.tabSize = Number(value)}
        />
      </section>
+      <section>
+        <SubTitle title="Font size"/>
+        <Input
+          theme="round-black"
+          type="number"
+          min={10}
+          validators={InputValidators.isNumber}
+          value={editorConfiguration.fontSize.toString()}
+          onChange={value => editorConfiguration.fontSize = Number(value)}
+        />
+      </section>
+      <section>
+        <SubTitle title="Font family"/>
+        <Input
+          theme="round-black"
+          type="text"
+          validators={InputValidators.isNumber}
+          value={editorConfiguration.fontFamily}
+          onChange={value => editorConfiguration.fontFamily = value}
+        />
+      </section>
    </section>
  );
 });
@@ -22,6 +22,8 @@ import {
  editorRoute,
  telemetryRoute,
  telemetryURL,
+  terminalRoute,
+  terminalURL,
 } from "../../../common/routes";
 import { navigateWithoutHistoryChange, navigation } from "../../navigation";
 import { SettingLayout } from "../layout/setting-layout";
@@ -29,6 +31,7 @@ import { Tab, Tabs } from "../tabs";
 import { Application } from "./application";
 import { Kubernetes } from "./kubernetes";
 import { Editor } from "./editor";
+import { Terminal } from "./terminal";
 import { LensProxy } from "./proxy";
 import { Telemetry } from "./telemetry";
 import { Extensions } from "./extensions";
@@ -56,6 +59,7 @@ const NonInjectedPreferences: React.FC<Dependencies> = ({ appPreferenceItems })
        <Tab value={proxyURL()} label="Proxy" data-testid="proxy-tab" active={isActive(proxyRoute)}/>
        <Tab value={kubernetesURL()} label="Kubernetes" data-testid="kubernetes-tab" active={isActive(kubernetesRoute)}/>
        <Tab value={editorURL()} label="Editor" data-testid="editor-tab" active={isActive(editorRoute)}/>
+        <Tab value={terminalURL()} label="Terminal" data-testid="terminal-tab" active={isActive(terminalRoute)}/>
        {(telemetryExtensions.length > 0 || !!sentryDsn) &&
          <Tab value={telemetryURL()} label="Telemetry" data-testid="telemetry-tab" active={isActive(telemetryRoute)}/>
        }
@@ -77,6 +81,7 @@ const NonInjectedPreferences: React.FC<Dependencies> = ({ appPreferenceItems })
        <Route path={proxyURL()} component={LensProxy}/>
        <Route path={kubernetesURL()} component={Kubernetes}/>
        <Route path={editorURL()} component={Editor}/>
+        <Route path={terminalURL()} component={Terminal}/>
        <Route path={telemetryURL()} component={Telemetry}/>
        <Route path={extensionURL()} component={Extensions}/>
        <Redirect exact from={`${preferencesURL()}/`} to={appURL()}/>
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { UserStore } from "../../../common/user-store";
+import { SubTitle } from "../layout/sub-title";
+import { Input, InputValidators } from "../input";
+import { isWindows } from "../../../common/vars";
+import { Switch } from "../switch";
+import { Select } from "../select";
+import { ThemeStore } from "../../theme.store";
+
+export const Terminal = observer(() => {
+  const userStore = UserStore.getInstance();
+  const themeStore = ThemeStore.getInstance();
+  const defaultShell = process.env.SHELL
+  || process.env.PTYSHELL
+  || (
+    isWindows
+      ? "powershell.exe"
+      : "System default shell"
+  );
+
+  return (<div>
+    <section id="shell">
+      <SubTitle title="Terminal Shell Path"/>
+      <Input
+        theme="round-black"
+        placeholder={defaultShell}
+        value={userStore.shell}
+        onChange={(value) => userStore.shell = value}
+      />
+    </section>
+
+    <section id="terminalSelection">
+      <SubTitle title="Terminal copy & paste" />
+      <Switch
+        checked={userStore.terminalCopyOnSelect}
+        onChange={() => userStore.terminalCopyOnSelect = !userStore.terminalCopyOnSelect}
+      >
+          Copy on select and paste on right-click
+      </Switch>
+    </section>
+
+    <section id="terminalTheme">
+      <SubTitle title="Terminal theme" />
+      <Select
+        themeName="lens"
+        options={[
+          { label: "Match theme", value: "" },
+          ...themeStore.themeOptions,
+        ]}
+        value={userStore.terminalTheme}
+        onChange={({ value }) => userStore.terminalTheme = value}
+      />
+    </section>
+
+    <section>
+      <SubTitle title="Font size"/>
+      <Input
+        theme="round-black"
+        type="number"
+        min={10}
+        validators={InputValidators.isNumber}
+        value={userStore.terminalConfig.fontSize.toString()}
+        onChange={(value) => userStore.terminalConfig.fontSize=Number(value)}
+      />
+    </section>
+    <section>
+      <SubTitle title="Font family"/>
+      <Input
+        theme="round-black"
+        type="text"
+        value={userStore.terminalConfig.fontFamily}
+        onChange={(value) => userStore.terminalConfig.fontFamily=value}
+      />
+    </section>
+  </div>);
+});