mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-03-09 13:00:53 +01:00
refactor the cmdstr display element
This commit is contained in:
sawka
parent
61fa23b854
commit
4f5c820af3
@ -11,6 +11,7 @@ import type {BookmarkType} from "./types";
|
||||
import {GlobalModel, GlobalCommandRunner} from "./model";
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import {CmdStrCode} from "./elements";
|
||||
|
||||
function LinkRenderer(props : any) : any {
|
||||
let newUrl = "https://extern?" + encodeURIComponent(props.href);
|
||||
@ -145,11 +146,6 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
|
||||
}
|
||||
return (
|
||||
<div className={cn("bookmark focus-parent", {"pending-delete": model.pendingDelete.get() == bm.bookmarkid})} onClick={this.handleClick}>
|
||||
<If condition={isCopied}>
|
||||
<div className="copied-indicator">
|
||||
<div>copied</div>
|
||||
</div>
|
||||
</If>
|
||||
<div className={cn("focus-indicator", {"active": isSelected})}/>
|
||||
<div className="bookmark-id-div">{bm.bookmarkid.substr(0, 8)}</div>
|
||||
<div className="bookmark-content">
|
||||
@ -158,18 +154,7 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
|
||||
<ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} components={markdownComponents}/>
|
||||
</div>
|
||||
</If>
|
||||
<div className={cn("bookmark-code", {"no-desc": !hasDesc})}>
|
||||
<div className="use-button" title="Use Bookmark" onClick={this.handleUse}><i className="fa-sharp fa-solid fa-check"/></div>
|
||||
<div className="code-div">
|
||||
<code>{bm.cmdstr}</code>
|
||||
</div>
|
||||
<div className="copy-control">
|
||||
|
||||
<div className="inner-copy" onClick={this.clickCopy}>
|
||||
<i title="copy" className="fa-sharp fa-regular fa-copy"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CmdStrCode cmdstr={bm.cmdstr} onUse={this.handleUse} onCopy={this.clickCopy} isCopied={isCopied}/>
|
||||
</div>
|
||||
<div className="bookmark-controls">
|
||||
<div className="bookmark-control" onClick={this.handleEditClick}><i className="fa-sharp fa-solid fa-pen"/></div>
|
||||
|
||||
47
src/elements.tsx
Normal file
47
src/elements.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import * as React from "react";
|
||||
import * as mobxReact from "mobx-react";
|
||||
import * as mobx from "mobx";
|
||||
import {sprintf} from "sprintf-js";
|
||||
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}, {}> {
|
||||
@boundMethod
|
||||
handleUse() {
|
||||
if (this.props.onUse != null) {
|
||||
this.props.onUse()
|
||||
}
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleCopy() {
|
||||
if (this.props.onCopy != null) {
|
||||
this.props.onCopy();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let {isCopied, cmdstr} = this.props;
|
||||
return (
|
||||
<div className={cn("cmdstr-code")}>
|
||||
<If condition={isCopied}>
|
||||
<div key="copied" className="copied-indicator">
|
||||
<div>copied</div>
|
||||
</div>
|
||||
</If>
|
||||
<div key="use" className="use-button" title="Use Command" onClick={this.handleUse}><i className="fa-sharp fa-solid fa-check"/></div>
|
||||
<div key="code" className="code-div">
|
||||
<code>{cmdstr}</code>
|
||||
</div>
|
||||
<div key="copy" className="copy-control">
|
||||
<div className="inner-copy" onClick={this.handleCopy}>
|
||||
<i title="copy" className="fa-sharp fa-regular fa-copy"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export {CmdStrCode};
|
||||
179
src/sh2.less
179
src/sh2.less
@ -553,6 +553,93 @@ body::-webkit-scrollbar {
|
||||
}
|
||||
}
|
||||
|
||||
.cmdstr-code {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 4px 10px 4px 0;
|
||||
|
||||
.copied-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
.mono-font(12px);
|
||||
animation-name: fade-in-out;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
.use-button {
|
||||
flex-grow: 0;
|
||||
padding: 3px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: flex-start;
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
|
||||
&:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
.code-div {
|
||||
background-color: black;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-width: 100px;
|
||||
overflow-x: auto;
|
||||
border-left: 1px solid #777;
|
||||
|
||||
code {
|
||||
flex-shrink: 0;
|
||||
min-width: 100px;
|
||||
color: white;
|
||||
.mono-font();
|
||||
white-space: pre;
|
||||
padding: 2px 8px 2px 8px;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-control {
|
||||
width: 0;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
.inner-copy {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: -20px;
|
||||
font-size: 9px;
|
||||
padding: 2px;
|
||||
padding-left: 4px;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
background-color: black;
|
||||
border: 1px solid #333;
|
||||
color: #777;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bookmarks-view {
|
||||
.bookmarks-list {
|
||||
color: white;
|
||||
@ -579,24 +666,6 @@ body::-webkit-scrollbar {
|
||||
height: calc(100% - 4px);
|
||||
}
|
||||
|
||||
.copied-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
.mono-font(12px);
|
||||
animation-name: fade-in-out;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
&.is-editing {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 12px;
|
||||
@ -671,81 +740,9 @@ body::-webkit-scrollbar {
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-code {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.use-button {
|
||||
flex-grow: 0;
|
||||
padding: 3px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: flex-start;
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
|
||||
&:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
.code-div {
|
||||
background-color: black;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-width: 100px;
|
||||
overflow-x: auto;
|
||||
border-left: 1px solid #777;
|
||||
|
||||
code {
|
||||
flex-shrink: 0;
|
||||
min-width: 100px;
|
||||
color: white;
|
||||
.mono-font();
|
||||
white-space: pre;
|
||||
padding: 2px 8px 2px 8px;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-control {
|
||||
width: 0;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
.inner-copy {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: -20px;
|
||||
font-size: 9px;
|
||||
padding: 2px;
|
||||
padding-left: 4px;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
background-color: black;
|
||||
border: 1px solid #333;
|
||||
color: #777;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
padding: 4px 10px 4px 0;
|
||||
margin-top: 10px;
|
||||
|
||||
&.no-desc {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown {
|
||||
color: @term-white;
|
||||
margin-bottom: 10px;
|
||||
|
||||
code {
|
||||
background-color: black;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user