refactor the cmdstr display element

src/bookmarks.tsx

@@ -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})}>
+                    <CmdStrCode cmdstr={bm.cmdstr} onUse={this.handleUse} onCopy={this.clickCopy} isCopied={isCopied}/>
-                        <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>
                 </div>
                 <div className="bookmark-controls">
                     <div className="bookmark-control" onClick={this.handleEditClick}><i className="fa-sharp fa-solid fa-pen"/></div>

src/elements.tsx

@@ -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};

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;