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

copied indicator -- quick flash. add copy button to cmdstr

Browse Source
This commit is contained in:
sawka 2023-03-05 12:49:25 -08:00
parent 04803a6c37
commit 2e4d3c3da7
2 changed files with 109 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/bookmarks.tsx
View File

@ -31,6 +31,8 @@ function CodeRenderer(props : any) : any {
@mobxReact.observer
class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
copiedIndicator : OV<boolean> = mobx.observable.box(false, {name: "copiedIndicator"});
@boundMethod
handleDeleteClick() : void {
let {bookmark} = this.props;
@ -54,7 +56,7 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
@boundMethod
handleEditUpdate() : void {
let model = GlobalModel.bookmarksModel;
let model = GlobalModel.bookmarksModel;opie
model.confirmEdit();
return;
}
@ -88,6 +90,20 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
let model = GlobalModel.bookmarksModel;
model.useBookmark(bookmark.bookmarkid);
}
@boundMethod
clickCopy() : void {
let bm = this.props.bookmark
navigator.clipboard.writeText(bm.cmdstr);
mobx.action(() => {
this.copiedIndicator.set(true);
})();
setTimeout(() => {
mobx.action(() => {
this.copiedIndicator.set(false);
})();
}, 600)
}
render() {
let bm = this.props.bookmark;
@ -137,6 +153,11 @@ 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={this.copiedIndicator.get()}>
<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">
@ -147,7 +168,15 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
</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>
<code>{bm.cmdstr}</code>
<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>
</div>
<div className="bookmark-controls">

86
src/sh2.less
View File

@ -542,12 +542,31 @@ body::-webkit-scrollbar {
position: relative;
display: flex;
flex-direction: row;
max-width: 100%;
.focus-indicator {
top: 0;
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;
@ -559,6 +578,7 @@ body::-webkit-scrollbar {
.bookmark-content, .bookmark-edit {
flex-grow: 1;
max-width: calc(100% - 50px);
}
label {
@ -590,6 +610,10 @@ body::-webkit-scrollbar {
display: block;
}
&:hover .copy-control {
display: block !important;
}
.bookmark-controls {
display: flex;
flex-direction: row;
@ -639,15 +663,47 @@ body::-webkit-scrollbar {
background-color: #777;
}
}
code {
border-left: 1px solid #777;
flex-shrink: 0;
color: white;
.mono-font();
.code-div {
background-color: black;
white-space: pre;
padding: 2px 8px 2px 8px;
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;
@ -2420,6 +2476,20 @@ input[type=checkbox] {
}
}
@keyframes fade-in-out {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#measure {
position: absolute;
z-index: -1;