fix some cmd typography. rtnstate, rtnstate diff, descenders on last line of terminal, lineheight, smaller info line, simple-rendering, etc.

This commit is contained in:
sawka 2023-10-12 12:10:50 -07:00
parent 0c9084364c
commit 9d347ae08c
3 changed files with 20 additions and 5 deletions

View File

@ -607,6 +607,11 @@ class LineCmd extends React.Component<
} }
let rendererType = lineutil.getRendererType(line); let rendererType = lineutil.getRendererType(line);
let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt; let hidePrompt = rendererPlugin != null && rendererPlugin.hidePrompt;
let termFontSize = GlobalModel.termFontSize.get();
let rtnStateDiffSize = termFontSize - 2;
if (rtnStateDiffSize < 10) {
rtnStateDiffSize = Math.max(termFontSize, 10);
}
return ( return (
<div <div
className={mainDivCn} className={mainDivCn}
@ -701,8 +706,8 @@ class LineCmd extends React.Component<
<div className="cmd-rtnstate-label">state unchanged</div> <div className="cmd-rtnstate-label">state unchanged</div>
</If> </If>
<If condition={rsdiff != null && rsdiff != ""}> <If condition={rsdiff != null && rsdiff != ""}>
<div className="cmd-rtnstate-label">new state</div> <div className="cmd-rtnstate-label" style={{fontSize: rtnStateDiffSize-1}}>new state</div>
<div className="cmd-rtnstate-diff">{this.rtnStateDiff.get()}</div> <div className="cmd-rtnstate-diff" style={{fontSize: rtnStateDiffSize}}>{this.rtnStateDiff.get()}</div>
</If> </If>
</div> </div>
</If> </If>

View File

@ -82,6 +82,7 @@
.meta.meta-line1 { .meta.meta-line1 {
margin-left: 2px; margin-left: 2px;
color: rgba(@base-color, 0.6) !important; color: rgba(@base-color, 0.6) !important;
font-size: 11px;
} }
&.has-rtnstate .terminal-wrapper { &.has-rtnstate .terminal-wrapper {
@ -129,19 +130,23 @@
position: relative; position: relative;
.cmd-rtnstate-label { .cmd-rtnstate-label {
font-family: @terminal-font;
position: relative; position: relative;
z-index: 2; z-index: 2;
margin: 6px 0 -2px 10px; margin: 6px 0 -2px 10px;
padding: 2px 5px 2px 5px; padding: 2px 5px 2px 0px;
display: inline-block; display: inline-block;
font-size: 0.8em; font-size: 0.8em;
opacity: 0.5; opacity: 0.5;
} }
.cmd-rtnstate-diff { .cmd-rtnstate-diff {
font-family: @terminal-font;
color: @term-white; color: @term-white;
white-space: pre; white-space: pre;
margin-left: 15px; margin-left: 15px;
font-size: 11px;
line-height: 1.2;
} }
} }
} }
@ -174,6 +179,9 @@
&.line-simple { &.line-simple {
flex-direction: row; flex-direction: row;
font-size: 11px;
line-height: 1.2;
color: rgba(@base-color, 0.6);
.ts { .ts {
display: flex; display: flex;
@ -294,7 +302,7 @@
&.status-error { &.status-error {
.status-icon { .status-icon {
color: #cc0000; color: @error-red;
} }
} }
@ -328,6 +336,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
line-height: 1.2;
} }
.meta { .meta {

View File

@ -150,7 +150,8 @@ class TerminalRenderer extends React.Component<
.get(); .get();
let cmd = screen.getCmd(line); // will not be null let cmd = screen.getCmd(line); // will not be null
let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width); let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
let termHeight = termHeightFromRows(usedRows, GlobalModel.termFontSize.get()); // TODO: replace the +2 with some calculation based on termFontSize. the +2 is for descenders, which get cut off without this.
let termHeight = termHeightFromRows(usedRows, GlobalModel.termFontSize.get()) + 2;
let termLoaded = this.termLoaded.get(); let termLoaded = this.termLoaded.get();
return ( return (
<div <div