status display

This commit is contained in:
sawka 2022-08-19 16:35:38 -07:00
parent e454c170f8
commit 5dda89aa1a
2 changed files with 38 additions and 6 deletions

View File

@ -270,16 +270,20 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
let totalHeight = cellHeightPx * usedRows;
let remote = model.getRemote(cmd.remoteId);
let status = cmd.getStatus();
let running = (status == "running");
let detached = (status == "detached");
let termOpts = cmd.getTermOpts();
let isFocused = sw.getIsFocused(line.cmdid);
let cmdRefNumStr = (this.props.cmdRefNum == null ? "?" : this.props.cmdRefNum.toString());
return (
<div className={cn("line", "line-cmd", {"focus": isFocused})} id={"line-" + getLineId(line)} ref={this.lineRef} style={{position: "relative"}} data-lineid={line.lineid} data-windowid={line.windowid} data-cmdid={line.cmdid}>
<div className="line-header">
<div className={cn("avatar",{"num4": cmdRefNumStr.length == 4}, {"num5": cmdRefNumStr.length >= 5}, {"running": running}, {"detached": detached})} onClick={this.doRefresh}>
<div className={cn("avatar",{"num4": cmdRefNumStr.length == 4}, {"num5": cmdRefNumStr.length >= 5}, "status-" + status)} onClick={this.doRefresh}>
{cmdRefNumStr}
<If condition={status == "hangup" || status == "error"}>
<i className="fa fa-exclamation-triangle status-icon"/>
</If>
<If condition={status == "detached"}>
<i className="fa fa-refresh status-icon"/>
</If>
</div>
<div className="meta-wrap">
<div className="meta">

View File

@ -378,6 +378,14 @@ html, body, #main {
font-size: 1rem;
margin-right: 10px;
border-radius: 5px;
position: relative;
.status-icon {
font-size: 8px;
position: absolute;
top: 2px;
right: 2px;
}
&.num4 {
font-size: 0.8rem;
@ -387,13 +395,33 @@ html, body, #main {
font-size: 0.7rem;
}
&.running {
&.status-done {
background-color: #555;
}
&.status-error {
.status-icon {
color: #cc0000;
}
}
&.status-hangup {
.status-icon {
color: #c4a000;
}
}
&.status-running {
background-color: #729fcf;
}
&.detached {
&.status-detached {
background-color: #729fcf;
outline: 2px solid white;
.status-icon {
top: 3px;
right: 3px;
color: white;
}
}
}