From 2e4d3c3da7809359eba439dc5e18530cbf82a9bc Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Sun, 5 Mar 2023 12:49:25 -0800
Subject: [PATCH] copied indicator -- quick flash.  add copy button to cmdstr

---
 src/bookmarks.tsx | 33 ++++++++++++++++--
 src/sh2.less      | 86 ++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 109 insertions(+), 10 deletions(-)

diff --git a/src/bookmarks.tsx b/src/bookmarks.tsx
index 67e70788e..354f9a075 100644
--- a/src/bookmarks.tsx
+++ b/src/bookmarks.tsx
@@ -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">
diff --git a/src/sh2.less b/src/sh2.less
index 69cc7528e..93eb9dc53 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -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;