mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
implement codeedit focus with the help of a shouldFocus prop from the Line component. also update line status, and remove websharing in left nav
This commit is contained in:
parent
5f04f14df6
commit
13fe90cdb5
@ -152,21 +152,22 @@ class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRigh
|
||||
let isComment = line.linetype == "text";
|
||||
let icon: string = null;
|
||||
let iconTitle = null;
|
||||
let iconColor = "auto";
|
||||
let iconColor = null;
|
||||
if (isComment) {
|
||||
icon = "fa-comment";
|
||||
iconTitle = "comment";
|
||||
} else if (status == "done") {
|
||||
icon = exitcode === 0 ? "fa-check" : "fa-xmark";
|
||||
iconTitle = exitcode === 0 ? "success" : "fail";
|
||||
iconColor = exitcode === 0 ? "auto" : "red";
|
||||
iconColor = exitcode === 0 ? "color-green" : "color-red";
|
||||
} else if (status == "hangup" || status == "error") {
|
||||
icon = "fa-triangle-exclamation";
|
||||
iconTitle = status;
|
||||
iconColor = "yellow";
|
||||
iconColor = "color-yellow";
|
||||
} else if (status == "running" || "detached") {
|
||||
icon = "fa-rotate";
|
||||
icon = "fa-rotate fa-spin";
|
||||
iconTitle = "running";
|
||||
iconColor = "color-green";
|
||||
} else {
|
||||
icon = "fa-square-question";
|
||||
iconTitle = "unknown";
|
||||
@ -177,7 +178,7 @@ class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRigh
|
||||
className={cn("simple-line-status", "status-" + status, rtnstate ? "has-rtnstate" : null)}
|
||||
>
|
||||
<span className="linenum">{lineNumStr}</span>
|
||||
<i title={iconTitle} className={cn("fa-sharp fa-solid", icon)} style={{ color: iconColor }} />
|
||||
<i title={iconTitle} className={cn("fa-sharp fa-solid", icon, iconColor)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -676,6 +677,15 @@ class LineCmd extends React.Component<
|
||||
{ name: "computed-isFocused" }
|
||||
)
|
||||
.get();
|
||||
let shouldCmdFocus = mobx
|
||||
.computed(
|
||||
() => {
|
||||
let screenFocusType = screen.getFocusType();
|
||||
return isSelected && screenFocusType == "cmd";
|
||||
},
|
||||
{ name: "computed-shouldCmdFocus" }
|
||||
)
|
||||
.get();
|
||||
let isStatic = staticRender;
|
||||
let isRunning = cmd.isRunning();
|
||||
let isExpanded = this.isCmdExpanded.get();
|
||||
@ -768,6 +778,7 @@ class LineCmd extends React.Component<
|
||||
initParams={this.makeRendererModelInitializeParams()}
|
||||
scrollToBringIntoViewport={this.scrollToBringIntoViewport}
|
||||
isSelected={isSelected}
|
||||
shouldFocus={shouldCmdFocus}
|
||||
/>
|
||||
</If>
|
||||
<If condition={rendererPlugin != null && rendererPlugin.rendererType == "full"}>
|
||||
|
@ -22,7 +22,15 @@
|
||||
}
|
||||
|
||||
.line .load-error-text {
|
||||
color: #cc0000;
|
||||
.mono-font();
|
||||
color: @term-red;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.line .renderer-loading {
|
||||
.mono-font();
|
||||
color: @term-white;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.line.line-cmd {
|
||||
@ -221,6 +229,18 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.color-red {
|
||||
color: @term-red;
|
||||
}
|
||||
|
||||
.color-green {
|
||||
color: @term-bright-green;
|
||||
}
|
||||
|
||||
.color-yellow {
|
||||
color: @term-bright-yellow;
|
||||
}
|
||||
}
|
||||
|
||||
&.top-border {
|
||||
|
10
src/main.tsx
10
src/main.tsx
@ -1793,16 +1793,6 @@ class MainSideBar extends React.Component<{}, {}> {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="menu-list">
|
||||
<li className="menu-websharing">
|
||||
<a
|
||||
onClick={this.handleWebSharingClick}
|
||||
className={cn({ "is-active": mainView == "webshare" })}
|
||||
>
|
||||
<i className="fa-sharp fa-solid fa-share-nodes" /> WEB SHARING
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="menu-label display-none">Playbooks</p>
|
||||
<ul className="menu-list display-none">
|
||||
<li key="default">
|
||||
|
@ -20,6 +20,7 @@ import type {
|
||||
TermContextUnion,
|
||||
RendererContainerType,
|
||||
} from "./types";
|
||||
import * as T from "./types";
|
||||
import { PacketDataBuffer } from "./ptydata";
|
||||
import { debounce, throttle } from "throttle-debounce";
|
||||
import * as util from "./util";
|
||||
@ -177,6 +178,7 @@ class SimpleBlobRenderer extends React.Component<
|
||||
initParams: RendererModelInitializeParams;
|
||||
scrollToBringIntoViewport: () => void;
|
||||
isSelected: boolean;
|
||||
shouldFocus: boolean;
|
||||
},
|
||||
{}
|
||||
> {
|
||||
@ -243,18 +245,23 @@ class SimpleBlobRenderer extends React.Component<
|
||||
let { plugin } = this.props;
|
||||
let model = this.model;
|
||||
if (model.loadError.get() != null) {
|
||||
let errorText = model.loadError.get();
|
||||
let height = this.model.savedHeight;
|
||||
return (
|
||||
<div ref={this.wrapperDivRef} style={{ minHeight: height }}>
|
||||
<div className="load-error-text">ERROR: {model.loadError.get()}</div>
|
||||
<div ref={this.wrapperDivRef} style={{ minHeight: height, fontSize: model.opts.termFontSize }}>
|
||||
<div className="load-error-text">ERROR: {errorText}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (model.loading.get()) {
|
||||
let height = this.model.savedHeight;
|
||||
return (
|
||||
<div ref={this.wrapperDivRef} style={{ minHeight: height }}>
|
||||
...
|
||||
<div
|
||||
ref={this.wrapperDivRef}
|
||||
className="renderer-loading"
|
||||
style={{ minHeight: height, fontSize: model.opts.termFontSize }}
|
||||
>
|
||||
loading content <i className="fa fa-ellipsis fa-fade" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -262,7 +269,6 @@ class SimpleBlobRenderer extends React.Component<
|
||||
if (Comp == null) {
|
||||
<div ref={this.wrapperDivRef}>(no component found in plugin)</div>;
|
||||
}
|
||||
let simpleModel = model as SimpleBlobRendererModel;
|
||||
let { festate, cmdstr, exitcode } = this.props.initParams.rawCmd;
|
||||
return (
|
||||
<div ref={this.wrapperDivRef} className="sr-wrapper">
|
||||
@ -270,15 +276,16 @@ class SimpleBlobRenderer extends React.Component<
|
||||
cwd={festate.cwd}
|
||||
cmdstr={cmdstr}
|
||||
exitcode={exitcode}
|
||||
data={simpleModel.dataBlob}
|
||||
readOnly={simpleModel.readOnly}
|
||||
notFound={simpleModel.notFound}
|
||||
lineState={simpleModel.lineState}
|
||||
context={simpleModel.context}
|
||||
opts={simpleModel.opts}
|
||||
savedHeight={simpleModel.savedHeight}
|
||||
data={model.dataBlob}
|
||||
readOnly={model.readOnly}
|
||||
notFound={model.notFound}
|
||||
lineState={model.lineState}
|
||||
context={model.context}
|
||||
opts={model.opts}
|
||||
savedHeight={model.savedHeight}
|
||||
scrollToBringIntoViewport={this.props.scrollToBringIntoViewport}
|
||||
isSelected={this.props.isSelected}
|
||||
shouldFocus={this.props.shouldFocus}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -413,6 +413,7 @@ type SimpleBlobRendererComponent = React.ComponentType<{
|
||||
readOnly?: boolean;
|
||||
notFound?: boolean;
|
||||
isSelected?: boolean;
|
||||
shouldFocus?: boolean;
|
||||
cmdstr?: string;
|
||||
cwd?: string;
|
||||
exitcode?: number;
|
||||
|
@ -26,6 +26,7 @@ class SourceCodeRenderer extends React.Component<
|
||||
scrollToBringIntoViewport: () => void;
|
||||
lineState: LineStateType;
|
||||
isSelected: boolean;
|
||||
shouldFocus: boolean;
|
||||
},
|
||||
{
|
||||
code: string;
|
||||
@ -70,12 +71,21 @@ class SourceCodeRenderer extends React.Component<
|
||||
const code = SourceCodeRenderer.codeCache.get(this.cacheKey);
|
||||
if (code) {
|
||||
this.setState({ code, isClosed: this.props.lineState["prompt:closed"] });
|
||||
} else
|
||||
} else {
|
||||
this.props.data.text().then((code) => {
|
||||
this.originalData = code;
|
||||
this.setState({ code, isClosed: this.props.lineState["prompt:closed"] });
|
||||
SourceCodeRenderer.codeCache.set(this.cacheKey, code);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: any): void {
|
||||
if (!prevProps.shouldFocus && this.props.shouldFocus) {
|
||||
if (this.monacoEditor) {
|
||||
this.monacoEditor.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setInitialLanguage = (editor) => {
|
||||
@ -125,6 +135,9 @@ class SourceCodeRenderer extends React.Component<
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
if (this.props.shouldFocus) {
|
||||
this.monacoEditor.focus();
|
||||
}
|
||||
};
|
||||
|
||||
handleLanguageChange = (event) => {
|
||||
|
Loading…
Reference in New Issue
Block a user