waveterm/backup
0
0
Fork 0
mirror of https://github.com/wavetermdev/backup.git synced 2026-08-05 13:57:07 -07:00
Code Issues Packages Projects Releases Wiki Activity

checkpoint on history rendering

Browse Source
This commit is contained in:
sawka
2022-08-30 15:25:51 -07:00
parent 35a2fb71af
commit d037666ad1
3 changed files with 95 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.tsx
+66 -24
View File
@@ -527,6 +527,69 @@ class TextAreaInput extends React.Component<{}, {}> {
}
}
@mobxReact.observer
class HistoryInfo extends React.Component<{}, {}> {
componentDidMount() {
let inputModel = GlobalModel.inputModel;
let selNum = inputModel.historySelectedNum.get();
if (selNum != null) {
let elem = document.querySelector(".cmd-history .hnum-" + selNum);
if (elem != null) {
elem.scrollIntoView({block: "nearest"});
}
}
}
renderHItem(hitem : HistoryItem, selNum : number) : any {
let lines = hitem.cmdstr.split("\n");
let line : string = "";
let idx = 0;
return (
<div key={hitem.historynum} className={cn("history-item", {"is-selected": selNum == hitem.historynum}, "hnum-" + hitem.historynum)}>
<div className="history-line">{(selNum == hitem.historynum ? "*" : " ")}{sprintf("%5s", hitem.historynum)} {lines[0]}</div>
<For each="line" index="index" of={lines.slice(1)}>
<div key={idx} className="history-line">{line}</div>
</For>
</div>
);
}
render() {
let inputModel = GlobalModel.inputModel;
let idx : number = 0;
let hitems : HistoryItem[] = inputModel.historyItems.get() ?? [];
let selNum = inputModel.historySelectedNum.get();
hitems = hitems.slice().reverse();
return (
<div className="cmd-history">
<div className="history-title">
showing history for
{" "}
<span className="term-bright-white">[containing '']</span>
{" "}
<span className="term-bright-white">[this session &#x2318;S]</span>
{" "}
<span className="term-bright-white">[this window &#x2318;W]</span>
{" "}
<span className="term-bright-white">[this remote &#x2318;R]</span>
{" "}
<span className="term-bright-white">[including metacmds &#x2318;M]</span>
</div>
<div className="history-items">
<If condition={hitems.length == 0}>
[no history]
</If>
<If condition={hitems.length > 0}>
<For each="hitem" index="idx" of={hitems}>
{this.renderHItem(hitem, selNum)}
</For>
</If>
</div>
</div>
);
}
}
@mobxReact.observer
class CmdInput extends React.Component<{}, {}> {
getAfterSlash(s : string) : string {
@@ -568,32 +631,11 @@ class CmdInput extends React.Component<{}, {}> {
let istrIdx : number = 0;
let line : string = null;
let idx : number = 0;
let hitems : HistoryItem[] = inputModel.historyItems.get() ?? [];
return (
<div className={cn("box cmd-input has-background-black", {"has-info": infoShow || historyShow})}>
<div className="cmd-history" style={{display: (historyShow ? "block" : "none")}}>
<div className="history-title">
showing history for
{" "}
<span className="term-bright-white">[this session &#x2318;S]</span>
{" "}
<span className="term-bright-white">[this window &#x2318;W]</span>
{" "}
<span className="term-bright-white">[this remote &#x2318;R]</span>
{" "}
<span className="term-bright-white">[including metacmds &#x2318;M]</span>
</div>
<div className="history-items">
<If condition={hitems.length == 0}>
[no history]
</If>
<If condition={hitems.length > 0}>
<For each="hitem" index="idx" of={hitems}>
<div>{idx+1} item</div>
</For>
</If>
</div>
</div>
<If condition={historyShow}>
<HistoryInfo/>
</If>
<div className="cmd-input-info" style={{display: (infoShow ? "block" : "none")}}>
<If condition={infoMsg && infoMsg.infotitle != null}>
<div className="info-title">
src/model.ts
+9 -1
View File
@@ -584,6 +584,7 @@ class InputModel {
queryOpts : OV<HistoryQueryOpts> = mobx.observable.box(null);
infoMsg : OV<InfoType> = mobx.observable.box(null);
infoTimeoutId : any = null;
historySelectedNum : OV<string> = mobx.observable.box(null);
updateCmdLine(cmdLine : CmdLineUpdateType) : void {
mobx.action(() => {
@@ -603,7 +604,14 @@ class InputModel {
this.infoShow.set(false);
}
this.historyShow.set(true);
this.historyItems.set(hinfo.items);
let items = hinfo.items ?? [];
this.historyItems.set(items);
if (items.length == 0) {
this.historySelectedNum.set(null);
}
else {
this.historySelectedNum.set(items[0].historynum);
}
})();
}
src/sh2.less
+20 -2
View File
@@ -634,11 +634,29 @@ body .xterm .xterm-viewport {
.history-items {
margin-top: 24px;
color: #d3d7cf;
color: @term-white;
font-size: 12px;
font-family: 'JetBrains Mono', monospace;
white-space: pre;
padding-bottom: 6px;
.history-line {
white-space: pre;
margin-left: 58px;
}
.history-line:first-child {
margin-left: 0;
}
.history-item {
padding-left: 5px;
}
.history-item.is-selected {
font-weight: bold;
color: @term-bright-white;
background-color: #444;
}
}
}