save work

This commit is contained in:
Red Adaya 2024-04-12 14:57:42 +08:00
parent 03acda07b5
commit efcd8ad03a
2 changed files with 34 additions and 38 deletions

View File

@ -22,6 +22,7 @@ import { DisconnectedModal, ClientStopModal } from "@/modals";
import { ModalsProvider } from "@/modals/provider"; import { ModalsProvider } from "@/modals/provider";
import { Button, TermStyleBlock } from "@/elements"; import { Button, TermStyleBlock } from "@/elements";
import { ErrorBoundary } from "@/common/error/errorboundary"; import { ErrorBoundary } from "@/common/error/errorboundary";
import { For } from "tsx-control-statements/components";
import cn from "classnames"; import cn from "classnames";
import "./app.less"; import "./app.less";
@ -80,6 +81,21 @@ class App extends React.Component<{}, {}> {
rightSidebarModel.saveState(width, false); rightSidebarModel.saveState(width, false);
} }
getSelector(themeKey: string) {
const sessions = GlobalModel.getSessionNames();
const screens = GlobalModel.getScreenNames();
if (themeKey === "main") {
return ":root";
} else if (themeKey in screens) {
return `.main-content [data-screenid="${themeKey}"]`;
} else if (themeKey in sessions) {
return `.main-content [data-sessionid="${themeKey}"]`;
}
return null;
}
render() { render() {
const remotesModel = GlobalModel.remotesModel; const remotesModel = GlobalModel.remotesModel;
const disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get(); const disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get();
@ -125,6 +141,7 @@ class App extends React.Component<{}, {}> {
const activeMainView = GlobalModel.activeMainView.get(); const activeMainView = GlobalModel.activeMainView.get();
const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light"; const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
const termTheme = GlobalModel.getTermTheme(); const termTheme = GlobalModel.getTermTheme();
const themeKey = null;
return ( return (
<div <div
@ -153,7 +170,13 @@ class App extends React.Component<{}, {}> {
</div> </div>
</If> </If>
<div ref={this.mainContentRef} className="main-content"> <div ref={this.mainContentRef} className="main-content">
<TermStyleBlock termTheme={termTheme} /> <For index="idx" each="themeKey" of={Object.keys(termTheme)}>
<TermStyleBlock
key={themeKey}
themeName={termTheme[themeKey]}
selector={this.getSelector(themeKey)}
/>
</For>
<MainSideBar parentRef={this.mainContentRef} /> <MainSideBar parentRef={this.mainContentRef} />
<ErrorBoundary> <ErrorBoundary>
<PluginsView /> <PluginsView />

View File

@ -33,39 +33,12 @@ const VALID_CSS_VARIABLES = [
@mobxReact.observer @mobxReact.observer
class TermStyleBlock extends React.Component<{ class TermStyleBlock extends React.Component<{
termTheme: TermThemeType; themeName: string;
selector: string;
}> { }> {
styleRules: OV<string> = mobx.observable.box("", { name: "StyleBlock-styleRules" }); styleRules: OV<string> = mobx.observable.box("", { name: "StyleBlock-styleRules" });
injectedStyleElement: HTMLStyleElement | null = null; injectedStyleElement: HTMLStyleElement | null = null;
componentDidUpdate(): void {
const { termTheme } = this.props;
for (const key of Object.keys(termTheme)) {
const selector = this.getSelector(key);
if (selector) {
this.removeInjectedStyle();
this.loadThemeStyles(selector, termTheme[key]);
break;
}
}
}
getSelector(themeKey: string) {
const session = GlobalModel.getActiveSession();
const activeSessionId = session.sessionId;
const screen = GlobalModel.getActiveScreen();
const activeScreenId = screen.screenId;
if (themeKey == activeScreenId) {
return `.main-content [data-screenid="${activeScreenId}"]`;
} else if (themeKey == activeSessionId) {
return `.main-content [data-sessionid="${activeSessionId}"]`;
} else if (themeKey == "main") {
return ".main-content";
}
return null;
}
isValidCSSColor(color) { isValidCSSColor(color) {
const element = document.createElement("div"); const element = document.createElement("div");
element.style.color = color; element.style.color = color;
@ -101,11 +74,12 @@ class TermStyleBlock extends React.Component<{
.map(([key, value]) => `--term-${key}: ${value};`) .map(([key, value]) => `--term-${key}: ${value};`)
.join(" "); .join(" ");
const style = document.createElement("style"); const styleRules = `${selector} { ${styleProperties} }`;
style.innerHTML = `${selector} { ${styleProperties} }`;
document.head.appendChild(style); mobx.action(() => {
this.styleRules.set(styleRules);
})();
this.injectedStyleElement = style;
console.log("loaded theme styles:", this.styleRules.get()); console.log("loaded theme styles:", this.styleRules.get());
} else { } else {
console.error("termThemeJson is not an object:", termThemeJson); console.error("termThemeJson is not an object:", termThemeJson);
@ -120,11 +94,10 @@ class TermStyleBlock extends React.Component<{
} }
render() { render() {
// To trigger componentDidUpdate when switching between sessions/screens const { themeName, selector } = this.props;
GlobalModel.getActiveSession(); console.log("themeName:", themeName, "selector:", selector);
GlobalModel.getActiveScreen();
return null; return this.styleRules.get() ? <style>{this.styleRules.get()}</style> : null;
} }
} }