fix padding, allow to select own theme for terminal

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

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

@@ -83,6 +83,15 @@ const colorTheme: PreferenceDescription<string> = {
   },
 };
 
+const terminalTheme: PreferenceDescription<string | undefined> = {
+  fromStore(val) {
+    return val || "";
+  },
+  toStore(val) {
+    return val || undefined;
+  },
+};
+
 const localeTimezone: PreferenceDescription<string> = {
   fromStore(val) {
     return val || moment.tz.guess(true) || "UTC";
@@ -233,19 +242,6 @@ const terminalCopyOnSelect: PreferenceDescription<boolean> = {
   },
 };
 
-const terminalUseDarkTheme: PreferenceDescription<boolean> = {
-  fromStore(val) {
-    return val ?? false;
-  },
-  toStore(val) {
-    if (!val) {
-      return undefined;
-    }
-
-    return val;
-  },
-};
-
 const hiddenTableColumns: PreferenceDescription<[string, string[]][], Map<string, ObservableToggleSet<string>>> = {
   fromStore(val) {
     return new Map(
@@ -364,6 +360,7 @@ export const DESCRIPTORS = {
   httpsProxy,
   shell,
   colorTheme,
+  terminalTheme,
   localeTimezone,
   allowUntrustedCAs,
   allowTelemetry,
@@ -377,7 +374,6 @@ export const DESCRIPTORS = {
   syncKubeconfigEntries,
   editorConfiguration,
   terminalCopyOnSelect,
-  terminalUseDarkTheme,
   updateChannel,
   extensionRegistryUrl,
 };

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

@@ -67,6 +67,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
   @observable allowErrorReporting: boolean;
   @observable allowUntrustedCAs: boolean;
   @observable colorTheme: string;
+  @observable terminalTheme: string;
   @observable localeTimezone: string;
   @observable downloadMirror: string;
   @observable httpsProxy?: string;
@@ -74,7 +75,6 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
   @observable downloadBinariesPath?: string;
   @observable kubectlBinariesPath?: string;
   @observable terminalCopyOnSelect: boolean;
-  @observable terminalUseDarkTheme: boolean;
   @observable updateChannel?: string;
   @observable extensionRegistryUrl: ExtensionRegistry;
 
@@ -189,6 +189,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
     this.httpsProxy = DESCRIPTORS.httpsProxy.fromStore(preferences?.httpsProxy);
     this.shell = DESCRIPTORS.shell.fromStore(preferences?.shell);
     this.colorTheme = DESCRIPTORS.colorTheme.fromStore(preferences?.colorTheme);
+    this.terminalTheme = DESCRIPTORS.terminalTheme.fromStore(preferences?.terminalTheme);
     this.localeTimezone = DESCRIPTORS.localeTimezone.fromStore(preferences?.localeTimezone);
     this.allowUntrustedCAs = DESCRIPTORS.allowUntrustedCAs.fromStore(preferences?.allowUntrustedCAs);
     this.allowTelemetry = DESCRIPTORS.allowTelemetry.fromStore(preferences?.allowTelemetry);
@@ -202,7 +203,6 @@ 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.terminalUseDarkTheme = DESCRIPTORS.terminalUseDarkTheme.fromStore(preferences?.terminalUseDarkTheme);
     this.updateChannel = DESCRIPTORS.updateChannel.fromStore(preferences?.updateChannel);
     this.extensionRegistryUrl = DESCRIPTORS.extensionRegistryUrl.fromStore(preferences?.extensionRegistryUrl);
   }
@@ -214,6 +214,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
         httpsProxy: DESCRIPTORS.httpsProxy.toStore(this.httpsProxy),
         shell: DESCRIPTORS.shell.toStore(this.shell),
         colorTheme: DESCRIPTORS.colorTheme.toStore(this.colorTheme),
+        terminalTheme: DESCRIPTORS.terminalTheme.toStore(this.terminalTheme),
         localeTimezone: DESCRIPTORS.localeTimezone.toStore(this.localeTimezone),
         allowUntrustedCAs: DESCRIPTORS.allowUntrustedCAs.toStore(this.allowUntrustedCAs),
         allowTelemetry: DESCRIPTORS.allowTelemetry.toStore(this.allowTelemetry),
@@ -227,7 +228,6 @@ 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),
-        terminalUseDarkTheme: DESCRIPTORS.terminalUseDarkTheme.toStore(this.terminalUseDarkTheme),
         updateChannel: DESCRIPTORS.updateChannel.toStore(this.updateChannel),
         extensionRegistryUrl: DESCRIPTORS.extensionRegistryUrl.toStore(this.extensionRegistryUrl),
       },

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

@@ -57,24 +57,38 @@ export const Application = observer(() => {
   const [customUrl, setCustomUrl] = React.useState(userStore.extensionRegistryUrl.customUrl || "");
   const [shell, setShell] = React.useState(userStore.shell || "");
   const extensionSettings = AppPreferenceRegistry.getInstance().getItems().filter((preference) => preference.showInPreferencesTab === "application");
+  const themeStore = ThemeStore.getInstance();
 
   return (
     <section id="application">
       <h2 data-testid="application-header">Application</h2>
       <section id="appearance">
-        <SubTitle title="Theme"/>
+        <SubTitle title="Theme" />
         <Select
-          options={ThemeStore.getInstance().themeOptions}
+          options={themeStore.themeOptions}
           value={userStore.colorTheme}
           onChange={({ value }) => userStore.colorTheme = value}
           themeName="lens"
         />
       </section>
 
-      <hr/>
+      <hr />
+
+      <section id="terminalTheme">
+        <SubTitle title="Terminal theme" />
+        <Select
+          themeName="lens"
+          options={[
+            { label: "Use global theme settings", value: "" },
+            ...themeStore.themeOptions,
+          ]}
+          value={userStore.terminalTheme}
+          onChange={({ value }) => userStore.terminalTheme = value}
+        />
+      </section>
 
       <section id="shell">
-        <SubTitle title="Terminal Shell Path"/>
+        <SubTitle title="Terminal Shell Path" />
         <Input
           theme="round-black"
           placeholder={defaultShell}
@@ -94,17 +108,7 @@ export const Application = observer(() => {
         </Switch>
       </section>
 
-      <section id="terminalColors">
+      <hr />
-        <SubTitle title="Terminal color scheme" />
-        <Switch
-          checked={userStore.terminalUseDarkTheme}
-          onChange={() => userStore.terminalUseDarkTheme = !userStore.terminalUseDarkTheme}
-        >
-          Always use dark terminal theme colors
-        </Switch>
-      </section>
-
-      <hr/>
 
       <section id="extensionRegistryUrl">
         <SubTitle title="Extension Install Registry" />

src/renderer/components/dock/terminal-window.scss

@@ -27,7 +27,15 @@
   flex: 1;
   overflow: hidden;
 
-  > .xterm {
+  .xterm {
     padding: var(--spacing);
+
+    &, &-viewport {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
 }

src/renderer/theme.store.ts

@@ -60,8 +60,8 @@ export class ThemeStore extends Singleton {
   }
 
   @computed get terminalColors(): Record<string, string> {
-    const useDarkThemeColors = UserStore.getInstance().terminalUseDarkTheme;
+    const { terminalTheme } = UserStore.getInstance();
-    const theme = useDarkThemeColors ? this.themes.get("lens-dark") : this.activeTheme;
+    const theme = this.themes.get(terminalTheme) ?? this.activeTheme;
     const xtermColors: Record<string, string> = {}; // see also "terminal.ts"
 
     // Replacing keys stored in styles to format accepted by terminal