deal with line hide/show

This commit is contained in:
sawka 2022-12-21 22:05:05 -08:00
parent 71980589bb
commit ffba2f3d6c
3 changed files with 25 additions and 5 deletions

View File

@ -318,6 +318,7 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
} }
componentDidMount() { componentDidMount() {
this.componentDidUpdate();
} }
componentWillUnmount() { componentWillUnmount() {
@ -384,6 +385,9 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
if (elem != null) { if (elem != null) {
curHeight = elem.offsetHeight; curHeight = elem.offsetHeight;
} }
if (snapshot == null) {
snapshot = {height: 0};
}
if (snapshot.height != curHeight && this.props.onHeightChange != null) { if (snapshot.height != curHeight && this.props.onHeightChange != null) {
this.props.onHeightChange(line.linenum, curHeight, snapshot.height); this.props.onHeightChange(line.linenum, curHeight, snapshot.height);
} }
@ -479,7 +483,7 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
<div className="term-block" onClick={this.clickTermBlock}></div> <div className="term-block" onClick={this.clickTermBlock}></div>
</If> </If>
<div className="terminal-connectelem" id={"term-" + getLineId(line)} data-cmdid={line.cmdid} style={{height: termHeight}}></div> <div className="terminal-connectelem" id={"term-" + getLineId(line)} data-cmdid={line.cmdid} style={{height: termHeight}}></div>
<If condition={!termLoaded}><div style={{position: "absolute", top: 60, left: 30}}>(loading)</div></If> <If condition={!termLoaded}><div className="terminal-loading-message">(loading)</div></If>
</div> </div>
<If condition={cmd.getRtnState()}> <If condition={cmd.getRtnState()}>
<div className="cmd-rtnstate" style={{visibility: ((cmd.getStatus() == "done") ? "visible" : "hidden")}}> <div className="cmd-rtnstate" style={{visibility: ((cmd.getStatus() == "done") ? "visible" : "hidden")}}>
@ -503,6 +507,9 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
class Line extends React.Component<{sw : ScreenWindow, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType}, {}> { class Line extends React.Component<{sw : ScreenWindow, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType}, {}> {
render() { render() {
let line = this.props.line; let line = this.props.line;
if (line.hidden) {
return null;
}
if (line.linetype == "text") { if (line.linetype == "text") {
return <LineText {...this.props}/>; return <LineText {...this.props}/>;
} }
@ -2449,7 +2456,7 @@ class MainSideBar extends React.Component<{}, {}> {
</p> </p>
<ul className="menu-list"> <ul className="menu-list">
<If condition={!model.sessionListLoaded.get()}> <If condition={!model.sessionListLoaded.get()}>
<li><a>(loading)</a></li> <li className="menu-loading-message"><a>(loading)</a></li>
</If> </If>
<If condition={model.sessionListLoaded.get()}> <If condition={model.sessionListLoaded.get()}>
<For each="session" index="idx" of={model.sessionList}> <For each="session" index="idx" of={model.sessionList}>

View File

@ -94,6 +94,7 @@ html, body, #main {
padding: 10px; padding: 10px;
height: 100%; height: 100%;
color: #ccc; color: #ccc;
.mono-font();
code { code {
background-color: black; background-color: black;
@ -240,6 +241,10 @@ html, body, #main {
li { li {
.mono-font(); .mono-font();
} }
li.menu-loading-message {
.mono-font();
}
} }
.menu-list.remotes-menu-list { .menu-list.remotes-menu-list {
@ -456,6 +461,13 @@ html, body, #main {
&.cmd-done .terminal .xterm-cursor { &.cmd-done .terminal .xterm-cursor {
display: none; display: none;
} }
.terminal-loading-message {
position: absolute;
top: 60px;
left: 30px;
.mono-font();
}
} }
.cmd-rtnstate { .cmd-rtnstate {

View File

@ -25,9 +25,10 @@ type LineType = {
linelocal : boolean, linelocal : boolean,
linetype : string, linetype : string,
text : string, text : string,
cmdid : string, cmdid? : string,
contentheight : number, contentheight? : number,
star : number, star? : number,
hidden? : boolean,
ephemeral? : boolean, ephemeral? : boolean,
remove? : boolean, remove? : boolean,
}; };