Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-10 19:58:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

history uses CmdStrCode, now supports use/copy

Browse Source
This commit is contained in:
sawka 2023-03-06 15:50:05 -08:00
parent 4f5c820af3
commit 1a377a4324
4 changed files with 77 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/bookmarks.tsx
View File

@ -154,7 +154,7 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
<ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} components={markdownComponents}/>
</div>
</If>
<CmdStrCode cmdstr={bm.cmdstr} onUse={this.handleUse} onCopy={this.clickCopy} isCopied={isCopied}/>
<CmdStrCode cmdstr={bm.cmdstr} onUse={this.handleUse} onCopy={this.clickCopy} isCopied={isCopied} fontSize="large" limitHeight={false}/>
</div>
<div className="bookmark-controls">
<div className="bookmark-control" onClick={this.handleEditClick}><i className="fa-sharp fa-solid fa-pen"/></div>

12
src/elements.tsx
View File

@ -6,25 +6,27 @@ import {boundMethod} from "autobind-decorator";
import cn from "classnames";
import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
class CmdStrCode extends React.Component<{cmdstr : string, onUse : () => void, onCopy : () => void, isCopied : boolean}, {}> {
class CmdStrCode extends React.Component<{cmdstr : string, onUse : () => void, onCopy : () => void, isCopied : boolean, fontSize : "normal" | "large", limitHeight : boolean}, {}> {
@boundMethod
handleUse() {
handleUse(e : any) {
e.stopPropagation();
if (this.props.onUse != null) {
this.props.onUse()
}
}
@boundMethod
handleCopy() {
handleCopy(e : any) {
e.stopPropagation();
if (this.props.onCopy != null) {
this.props.onCopy();
}
}
render() {
let {isCopied, cmdstr} = this.props;
let {isCopied, cmdstr, fontSize, limitHeight} = this.props;
return (
<div className={cn("cmdstr-code")}>
<div className={cn("cmdstr-code", {"is-large": (fontSize == "large")}, {"limit-height": limitHeight})}>
<If condition={isCopied}>
<div key="copied" className="copied-indicator">
<div>copied</div>

32
src/history.tsx
View File

@ -11,6 +11,7 @@ import dayjs from "dayjs";
import localizedFormat from 'dayjs/plugin/localizedFormat';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import {Line} from "./linecomps";
import {CmdStrCode} from "./elements";
dayjs.extend(customParseFormat)
dayjs.extend(localizedFormat)
@ -82,6 +83,7 @@ class HistoryView extends React.Component<{}, {}> {
tableRszObs : ResizeObserver;
sessionDropdownActive : OV<boolean> = mobx.observable.box(false, {name: "sessionDropdownActive"});
remoteDropdownActive : OV<boolean> = mobx.observable.box(false, {name: "remoteDropdownActive"});
copiedItemId : OV<string> = mobx.observable.box(null, {name: "copiedItemId"});
@boundMethod
clickCloseHandler() : void {
@ -271,6 +273,34 @@ class HistoryView extends React.Component<{}, {}> {
let hvm = GlobalModel.historyViewModel;
hvm.resetAllFilters();
}
@boundMethod
handleCopy(item : HistoryItem) : void {
if (isBlank(item.cmdstr)) {
return;
}
navigator.clipboard.writeText(item.cmdstr);
mobx.action(() => {
this.copiedItemId.set(item.historyid);
})();
setTimeout(() => {
mobx.action(() => {
this.copiedItemId.set(null);
})();
}, 600);
}
@boundMethod
handleUse(item : HistoryItem) : void {
if (isBlank(item.cmdstr)) {
return;
}
mobx.action(() => {
GlobalModel.showSessionView();
GlobalModel.inputModel.setCurLine(item.cmdstr);
setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
})();
}
render() {
let isHidden = (GlobalModel.activeMainView.get() != "history");
@ -416,7 +446,7 @@ class HistoryView extends React.Component<{}, {}> {
{formatRemoteName(rnames, item.remote)}
</td>
<td className="cmdstr" onClick={() => this.activateItem(item.historyid)}>
<div className="cmdstr-content">{item.cmdstr}</div>
<CmdStrCode cmdstr={item.cmdstr} onUse={() => this.handleUse(item)} onCopy={() => this.handleCopy(item)} isCopied={this.copiedItemId.get() == item.historyid} fontSize="normal" limitHeight={true}/>
</td>
</tr>
<If condition={activeItemId == item.historyid}>

65
src/sh2.less
View File

@ -456,27 +456,15 @@ body::-webkit-scrollbar {
&.is-selected {
background-color: #003;
td.cmdstr {
background-color: #000017;
}
}
&.is-selected:hover {
background-color: #336;
td.cmdstr {
background-color: #113;
}
}
&:hover {
background-color: #333;
td.cmdstr {
background-color: #111;
}
td.bookmark i {
display: block;
}
@ -535,18 +523,23 @@ body::-webkit-scrollbar {
td.cmdstr {
.mono-font(12px);
color: white;
background-color: black;
flex: 1 0 0;
padding-left: 20px;
border-radius: 3px;
white-space: pre;
max-height: 64px;
max-height: 70px;
cursor: pointer;
min-width: 300px;
overflow-y: auto;
padding-top: 4px;
padding-bottom: 4px;
overflow: hidden;
.cmdstr-content {
overflow-x: auto;
.use-button {
visibility: hidden;
}
&:hover .use-button {
visibility: visible;
}
}
}
@ -557,7 +550,26 @@ body::-webkit-scrollbar {
position: relative;
display: flex;
flex-direction: row;
padding: 4px 10px 4px 0;
padding: 0px 10px 0px 0;
&.is-large {
.use-button {
height: 28px;
width: 28px;
}
.code-div code {
.mono-font(14px);
}
}
&.limit-height .code-div {
max-height: 58px;
}
&.limit-height.is-large .code-div {
max-height: 68px;
}
.copied-indicator {
position: absolute;
@ -582,8 +594,8 @@ body::-webkit-scrollbar {
padding: 3px;
border-radius: 3px 0 0 3px;
font-size: 12px;
height: 28px;
width: 28px;
height: 22px;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
@ -601,14 +613,14 @@ body::-webkit-scrollbar {
display: flex;
flex-direction: row;
min-width: 100px;
overflow-x: auto;
overflow: auto;
border-left: 1px solid #777;
code {
flex-shrink: 0;
min-width: 100px;
color: white;
.mono-font();
.mono-font(12px);
white-space: pre;
padding: 2px 8px 2px 8px;
background-color: black;
@ -637,7 +649,10 @@ body::-webkit-scrollbar {
}
}
}
&:hover .copy-control {
display: block !important;
}
}
.bookmarks-view {
@ -709,10 +724,6 @@ body::-webkit-scrollbar {
display: block;
}
&:hover .copy-control {
display: block !important;
}
.bookmark-controls {
display: flex;
flex-direction: row;