hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Revert "Allow to customize terminal theme (#4666)" (#4682)

Browse Source 
This reverts commit a5e89b79d6.
This commit is contained in:
Roman 2022-01-13 11:54:54 +01:00 committed by GitHub
parent a5e89b79d6
commit 0be1ab4ce0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 65 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/common/user-store/preferences-helpers.ts
View File

@ -83,15 +83,6 @@ 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";
@ -360,7 +351,6 @@ export const DESCRIPTORS = {
httpsProxy,
shell,
colorTheme,
terminalTheme,
localeTimezone,
allowUntrustedCAs,
allowTelemetry,

3
src/common/user-store/user-store.ts
View File

@ -67,7 +67,6 @@ 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;
@ -189,7 +188,6 @@ 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);
@ -214,7 +212,6 @@ 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),

16
src/renderer/components/+preferences/application.tsx
View File

@ -57,7 +57,6 @@ 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">
@ -65,7 +64,7 @@ export const Application = observer(() => {
<section id="appearance">
<SubTitle title="Theme"/>
<Select
options={themeStore.themeOptions}
options={ThemeStore.getInstance().themeOptions}
value={userStore.colorTheme}
onChange={({ value }) => userStore.colorTheme = value}
themeName="lens"
@ -74,19 +73,6 @@ export const Application = observer(() => {
<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

5
src/renderer/components/dock/dock.scss
View File

@ -76,14 +76,11 @@
.tab-content {
position: relative;
background: var(--terminalBackground);
flex: 1;
overflow: hidden;
transition: flex-basis 25ms ease-in;
&.terminal {
background: var(--terminalBackground);
}
> *:not(.Spinner) {
position: absolute;
left: 0;

2
src/renderer/components/dock/dock.tsx
View File

@ -105,7 +105,7 @@ export class Dock extends React.Component<Props> {
if (!isOpen || !selectedTab) return null;
return (
<div className={`tab-content ${selectedTab.kind}`} style={{ flexBasis: height }}>
<div className="tab-content" style={{ flexBasis: height }}>
{this.renderTab(selectedTab)}
</div>
);

25
src/renderer/components/dock/terminal.ts
View File

@ -26,9 +26,9 @@ import { FitAddon } from "xterm-addon-fit";
import { dockStore, TabId } from "./dock.store";
import { TerminalApi, TerminalChannels } from "../../api/terminal-api";
import { ThemeStore } from "../../theme.store";
import { disposer } from "../../utils";
import { boundMethod, disposer } from "../../utils";
import { isMac } from "../../../common/vars";
import { once } from "lodash";
import { camelCase, once } from "lodash";
import { UserStore } from "../../../common/user-store";
import { clipboard } from "electron";
import logger from "../../../common/logger";
@ -56,6 +56,23 @@ export class Terminal {
private scrollPos = 0;
private disposer = disposer();
@boundMethod
protected setTheme(colors: Record<string, string>) {
if (!this.xterm) {
return;
}
// Replacing keys stored in styles to format accepted by terminal
// E.g. terminalBrightBlack -> brightBlack
const colorPrefix = "terminal";
const terminalColorEntries = Object.entries(colors)
.filter(([name]) => name.startsWith(colorPrefix))
.map(([name, color]) => [camelCase(name.slice(colorPrefix.length)), color]);
const terminalColors = Object.fromEntries(terminalColorEntries);
this.xterm.setOption("theme", terminalColors);
}
get elem() {
return this.xterm?.element;
}
@ -104,9 +121,7 @@ export class Terminal {
window.addEventListener("resize", this.onResize);
this.disposer.push(
reaction(() => ThemeStore.getInstance().xtermColors, colors => {
this.xterm?.setOption("theme", colors);
}, {
reaction(() => ThemeStore.getInstance().activeTheme.colors, this.setTheme, {
fireImmediately: true,
}),
dockStore.onResize(this.onResize),

60
src/renderer/theme.store.ts
View File

@ -19,7 +19,7 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import { comparer, computed, makeObservable, observable, reaction } from "mobx";
import { computed, makeObservable, observable, reaction } from "mobx";
import { autoBind, Singleton } from "./utils";
import { UserStore } from "../common/user-store";
import logger from "../main/logger";
@ -28,7 +28,6 @@ import lensLightThemeJson from "./themes/lens-light.json";
import type { SelectOption } from "./components/select";
import type { MonacoEditorProps } from "./components/monaco-editor";
import { defaultTheme } from "../common/vars";
import { camelCase } from "lodash";
export type ThemeId = string;
@ -42,7 +41,7 @@ export interface Theme {
}
export class ThemeStore extends Singleton {
private terminalColorPrefix = "terminal";
protected styles: HTMLStyleElement;
// bundled themes from `themes/${themeId}.json`
private themes = observable.map<ThemeId, Theme>({
@ -50,37 +49,14 @@ export class ThemeStore extends Singleton {
"lens-light": lensLightThemeJson as Theme,
});
@computed get activeThemeId(): ThemeId {
@computed get activeThemeId(): string {
return UserStore.getInstance().colorTheme;
}
@computed get terminalThemeId(): ThemeId {
return UserStore.getInstance().terminalTheme;
}
@computed get activeTheme(): Theme {
return this.themes.get(this.activeThemeId) ?? this.themes.get(defaultTheme);
}
@computed get terminalColors(): [string, string][] {
const theme = this.themes.get(this.terminalThemeId) ?? this.activeTheme;
return Object
.entries(theme.colors)
.filter(([name]) => name.startsWith(this.terminalColorPrefix));
}
// Replacing keys stored in styles to format accepted by terminal
// E.g. terminalBrightBlack -> brightBlack
@computed get xtermColors(): Record<string, string> {
return Object.fromEntries(
this.terminalColors.map(([name, color]) => [
camelCase(name.replace(this.terminalColorPrefix, "")),
color,
]),
);
}
@computed get themeOptions(): SelectOption<string>[] {
return Array.from(this.themes).map(([themeId, theme]) => ({
label: theme.name,
@ -95,19 +71,15 @@ export class ThemeStore extends Singleton {
autoBind(this);
// auto-apply active theme
reaction(() => ({
themeId: this.activeThemeId,
terminalThemeId: this.terminalThemeId,
}), ({ themeId }) => {
reaction(() => this.activeThemeId, themeId => {
try {
this.applyTheme(themeId);
this.applyTheme(this.getThemeById(themeId));
} catch (err) {
logger.error(err);
UserStore.getInstance().resetTheme();
}
}, {
fireImmediately: true,
equals: comparer.shallow,
});
}
@ -115,18 +87,20 @@ export class ThemeStore extends Singleton {
return this.themes.get(themeId);
}
protected applyTheme(themeId: ThemeId) {
const theme = this.getThemeById(themeId);
const colors = Object.entries({
...theme.colors,
...Object.fromEntries(this.terminalColors),
});
colors.forEach(([name, value]) => {
document.documentElement.style.setProperty(`--${name}`, value);
protected applyTheme(theme: Theme) {
if (!this.styles) {
this.styles = document.createElement("style");
this.styles.id = "lens-theme";
document.head.append(this.styles);
}
const cssVars = Object.entries(theme.colors).map(([cssName, color]) => {
return `--${cssName}: ${color};`;
});
this.styles.textContent = `:root {\n${cssVars.join("\n")}}`;
// Adding universal theme flag which can be used in component styles
document.body.classList.toggle("theme-light", theme.type === "light");
const body = document.querySelector("body");
body.classList.toggle("theme-light", theme.type === "light");
}
}

2
src/renderer/themes/lens-dark.json
View File

@ -1,5 +1,5 @@
{
"name": "Dark",
"name": "Dark (Lens)",
"type": "dark",
"description": "Original Lens dark theme",
"author": "Mirantis",

40
src/renderer/themes/lens-light.json
View File

@ -1,5 +1,5 @@
{
"name": "Light",
"name": "Light (Lens)",
"type": "light",
"description": "Original Lens light theme",
"author": "Mirantis",
@ -76,26 +76,26 @@
"logsBackground": "#24292e",
"logsForeground": "#ffffff",
"logRowHoverBackground": "#35373a",
"terminalBackground": "#ffffff",
"terminalForeground": "#2d2d2d",
"terminalCursor": "#2d2d2d",
"terminalCursorAccent": "#ffffff",
"terminalSelection": "#bfbfbf",
"terminalBlack": "#2d2d2d",
"terminalRed": "#cd3734 ",
"terminalGreen": "#18cf12",
"terminalYellow": "#acb300",
"terminalBlue": "#3d90ce",
"terminalMagenta": "#c100cd",
"terminalCyan": "#07c4b9",
"terminalBackground": "#24292e",
"terminalForeground": "#ffffff",
"terminalCursor": "#ffffff",
"terminalCursorAccent": "#000000",
"terminalSelection": "#ffffff77",
"terminalBlack": "#2e3436",
"terminalRed": "#cc0000",
"terminalGreen": "#4e9a06",
"terminalYellow": "#c4a000",
"terminalBlue": "#3465a4",
"terminalMagenta": "#75507b",
"terminalCyan": "#06989a",
"terminalWhite": "#d3d7cf",
"terminalBrightBlack": "#a8a8a8",
"terminalBrightRed": "#ff6259",
"terminalBrightGreen": "#5cdb59",
"terminalBrightYellow": "#f8c000",
"terminalBrightBlue": "#008db6",
"terminalBrightMagenta": "#ee55f8",
"terminalBrightCyan": "#50e8df",
"terminalBrightBlack": "#555753",
"terminalBrightRed": "#ef2929",
"terminalBrightGreen": "#8ae234",
"terminalBrightYellow": "#fce94f",
"terminalBrightBlue": "#729fcf",
"terminalBrightMagenta": "#ad7fa8",
"terminalBrightCyan": "#34e2e2",
"terminalBrightWhite": "#eeeeec",
"dialogTextColor": "#87909c",
"dialogBackground": "#ffffff",