edit and copy buttons added to GPT template preview

2 files changed, 50 insertions, 6 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 3b6aeb0dd..5a9fd3436 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -287,6 +287,7 @@
 }
 
 .docCreatorMenu-preview-window {
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -316,6 +317,34 @@
             margin-top: 0px;
         }
     }
+
+    .option-button {
+        display: none;
+        height: 25px;
+        width: 25px;
+        margin: 0px;
+        background: none;
+        border: 0px;
+        padding: 0px;
+        font-size: 15px;
+
+        &.right {
+            position: absolute;
+            bottom: 0px;
+            right: 0px;
+        }
+
+        &.left {
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+        }
+    }
+
+    &:hover .option-button {
+        display: block;
+    }
+    
 }
 
 .docCreatorMenu-section {
@@ -361,13 +390,13 @@
     display: flex;
     flex-direction: row;
     width: 100%;
+}
 
-    .section-reveal-options {
-        margin: 0px;
-        margin-left: auto;
-        border: 0px;
-        background: none;
-    }
+.section-reveal-options {
+    margin: 0px;
+    margin-left: auto;
+    border: 0px;
+    background: none;
 }
 
 .docCreatorMenu-section-title {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index b45ac7f46..205923346 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -135,6 +135,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             emptyFunction,
             undoable(clickEv => {
                 clickEv.stopPropagation();
+                clickEv.preventDefault();
                 func();
             }, 'create docs')
         )
@@ -356,6 +357,14 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         this.forceUpdate();
     }
 
+    editTemplate = () => {
+
+    }
+
+    copyGPTTemplate = () => {
+
+    }
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
 
@@ -383,6 +392,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                             }}
                             onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate()})}>
+                                    <FontAwesomeIcon icon='pencil' color='black'/>
+                                </button>
+                                <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => {this.copyGPTTemplate()})}>
+                                    <FontAwesomeIcon icon='plus' color='black'/>
+                                </button>
                                 <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                             </div>
                         )}