new menu css

3 files changed, 255 insertions, 121 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index d9a7d5e3a..b61650e43 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -412,10 +412,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             },
             { fireImmediately: true }
         );
-        this._disposers.contentSummary = reaction(
-            () => this.records,
-            () => this.updateGPTSummary()
-        );
+        // this._disposers.contentSummary = reaction(
+        //     () => this.records,
+        //     () => this.updateGPTSummary()
+        // );
     }
 
     fetchData = () => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 857d76d4f..955698b19 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -292,6 +292,19 @@
     position: relative;
     width: 100%;
     height: 100%;
+
+    .right-buttons-panel {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        height: 100%;
+        width: 40px;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        padding: 5px;
+        gap: 2px;
+    }
 }
 
 .docCreatorMenu-preview-window {
@@ -435,12 +448,6 @@
     &.float-right {
         float: right;
     }
-
-    &.top-right {
-        position: absolute;
-        top: 3px;
-        right: 3px;
-    }
 }
 
 .docCreatorMenu-section-title {
@@ -754,7 +761,7 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    overflow-y: scroll;
+    overflow-y: hidden;
     //align-items: flex-start;
     margin: 5px;
     margin-top: 0px;
@@ -765,111 +772,193 @@
     -ms-overflow-style: none; 
     scrollbar-width: none;
 
+    .panels-container {
+        height: 100%;
+        width: 100%;
+        flex-direction: column;
+        justify-content: flex-start;
+        overflow-y: scroll;
+    }
+
     .topbar {
         height: 30px;
         width: 100%;
-    }
+        background-color: rgb(50, 50, 50);
+    }
+
+//     .field-panel {
+//         position: relative;
+//         display: flex;
+//         // align-items: flex-start;
+//         flex-direction: column;
+//         gap: 5px;
+//         padding: 5px;
+//         height: 100px;
+//         //width: 100%;
+//         border: 1px solid rgb(180, 180, 180);
+//         margin: 5px;
+//         margin-top: 0px;
+//         border-radius: 3px;
+//         flex: 0 0 auto;
+
+//         .properties-wrapper {
+//             display: flex;
+//             flex-direction: row;
+//             align-items: flex-start;
+//             gap: 5px;
+
+//             .field-property-container {
+//                 background-color: rgb(40, 40, 40);
+//                 border: 1px solid rgb(100, 100, 100);
+//                 border-radius: 3px;
+//                 width: 30%;
+//                 height: 25px;
+//                 padding-left: 3px;
+//                 align-items: center;
+//                 color: whitesmoke;
+//             }
+
+//             .field-type-selection-container {
+//                 display: flex;
+//                 flex-direction: row;
+//                 align-items: center;
+//                 background-color: rgb(40, 40, 40);
+//                 border: 1px solid rgb(100, 100, 100);
+//                 border-radius: 3px;
+//                 width: 31%;
+//                 height: 25px;
+//                 padding-left: 3px;
+//                 color: whitesmoke;
+
+//                 .placeholder {
+//                     color: gray;
+//                 }
+
+//                 &:hover .placeholder {
+//                     display: none;
+//                 }
+
+//                 .bubbles {
+//                     display: none;
+//                 }
+
+//                 .text {
+//                     margin-top: 5px;
+//                     margin-bottom: 5px;
+//                 }
+
+//                 &:hover .bubbles {
+//                     display: flex;
+//                     flex-direction: row;
+//                     align-items: flex-start;
+//                 }
+
+//                 &:hover .type-display {
+//                     display: none;
+//                 }
+
+//                 .bubble {
+//                     margin: 5px;
+//                 }
+
+//                 &:hover .bubble {
+//                     margin-top: 7px;
+//                 }
+//             }
+//         }
+
+//         .field-description-container {
+//             background-color: rgb(40, 40, 40);
+//             border: 1px solid rgb(100, 100, 100);
+//             border-radius: 3px;
+//             width: 100%;
+//             height: 100%;
+//             resize: none;
+
+//             ::-webkit-scrollbar-track {
+//                 background: none; 
+//             }
+//         }
+
+//         .top-right {
+//             position: absolute;
+//             top: 0px;
+//             right: 0px;
+//         }
+//     }
+// }
 
     .field-panel {
-        position: relative;
         display: flex;
-        // align-items: flex-start;
         flex-direction: column;
-        gap: 5px;
-        padding: 5px;
-        height: 100px;
-        //width: 100%;
+        align-items: center;
+        justify-content: flex-start;
+        height: 285px;
+        width: calc(100% - 10px);
         border: 1px solid rgb(180, 180, 180);
         margin: 5px;
         margin-top: 0px;
         border-radius: 3px;
         flex: 0 0 auto;
+        gap: 25px;
+        background-color: rgb(60, 60, 60);
 
-        .properties-wrapper {
+        .top-bar {
             display: flex;
             flex-direction: row;
-            align-items: flex-start;
-            gap: 5px;
-
-            .field-property-container {
-                background-color: rgb(40, 40, 40);
-                border: 1px solid rgb(100, 100, 100);
-                border-radius: 3px;
-                width: 30%;
-                height: 25px;
-                padding-left: 3px;
-                align-items: center;
-                color: whitesmoke;
-            }
-
-            .field-type-selection-container {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                background-color: rgb(40, 40, 40);
-                border: 1px solid rgb(100, 100, 100);
-                border-radius: 3px;
-                width: 31%;
-                height: 25px;
-                padding-left: 3px;
-                color: whitesmoke;
-
-                .placeholder {
-                    color: gray;
-                }
-
-                &:hover .placeholder {
-                    display: none;
-                }
-
-                .bubbles {
-                    display: none;
-                }
-
-                .text {
-                    margin-top: 5px;
-                    margin-bottom: 5px;
-                }
-
-                &:hover .bubbles {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: flex-start;
-                }
-
-                &:hover .type-display {
-                    display: none;
-                }
+            align-items: center;
+            justify-content: center;
+            border-bottom: 1px solid rgb(180, 180, 180);
+            border-top-right-radius: 5px;
+            border-top-left-radius: 5px;
+            width: 100%;
+            height: 20px;
+            background-color: rgb(50, 50, 50);
+        }  
+        
+        .opts-bar {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
 
-                .bubble {
-                    margin: 5px;
-                }
+            .opt-box {
+                border: 1px solid rgb(180, 180, 180);
+                border-radius: 5px;
+                width: 40%;
+                height: 50px;
+                margin-right: 4%;
+                margin-left: 4%;
+                box-shadow: 5px 5px rgb(29, 29, 31);
+            }
 
-                &:hover .bubble {
-                    margin-top: 7px;
-                }
+            .content {
+                height: calc(100% - 20px);
+                width: 100%;
+                background-color: rgb(50, 50, 50);
+                border-bottom-right-radius: 5px;
+                border-bottom-left-radius: 5px;
             }
         }
 
-        .field-description-container {
-            background-color: rgb(40, 40, 40);
-            border: 1px solid rgb(100, 100, 100);
-            border-radius: 3px;
-            width: 100%;
-            height: 100%;
-            resize: none;
-
-            ::-webkit-scrollbar-track {
-                background: none; 
-            }
+        .sizes-box {
+            width: 88%;
+            height: 60px;
+            border: 1px solid rgb(180, 180, 180);
+            border-radius: 5px;
+            background-color: rgb(50, 50, 50);
+            box-shadow: 5px 5px rgb(29, 29, 31);
         }
 
-        .top-right {
-            position: absolute;
-            top: 0px;
-            right: 0px;
+        .desc-box {
+            width: 88%;
+            height: 50px;
+            border: 1px solid rgb(180, 180, 180);
+            border-radius: 5px;
+            background-color: rgb(50, 50, 50);
+            box-shadow: 5px 5px rgb(29, 29, 31);
         }
     }
-}
-
 
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 953037d13..87e1e2c96 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -825,14 +825,20 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const GPTOptions = 
             <div></div>
 
+            //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
+
         return (
             <div className={`docCreatorMenu-templates-view`}>
                 {this._expandedPreview ? 
                 <div className='docCreatorMenu-expanded-template-preview'>
-                    <img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
-                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}> 
-                        <FontAwesomeIcon icon='minimize'/>
-                    </button>
+                    <div className='right-buttons-panel'>
+                        <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}> 
+                            <FontAwesomeIcon icon='minimize'/>
+                        </button>
+                        <button className='docCreatorMenu-menu-button section-reveal-options top-right-lower' onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
+                            <FontAwesomeIcon icon='plus' color='white'/>
+                        </button>
+                    </div>
                 </div> 
                 :
                 <div>
@@ -859,8 +865,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     }}
                                     onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
                                         <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.setExpandedView(info)})}>
-                                            <FontAwesomeIcon icon='pencil' color='white'/>
-                                        </button>
+                                            <FontAwesomeIcon icon='magnifying-glass' color='white'/>
+                                        </button>   
                                         <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
                                             <FontAwesomeIcon icon='plus' color='white'/>
                                         </button>
@@ -1184,34 +1190,73 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     <FontAwesomeIcon icon='arrow-left'/>
                 </button>
             </div>
-            {this.fieldsInfos.map((field, index) => 
-                <div className='field-panel' id={`${index}`}>
-                    <div className='properties-wrapper'>
-                        <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'}  onChange={(e) => this.setColTitle(field, e.target.value)}/>
-                        <div className='field-type-selection-container'>
-                            {field.type === TemplateFieldType.UNSET ? <span className='placeholder'>Select media type</span> : null}
-                            <span className='type-display'>{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
-                            <div className='bubbles'>
-                                <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.TEXT)}}/> 
-                                <div className='text'>Text</div>
-                                <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.VISUAL)}}/> 
-                                <div className='text'>File</div>
+            <div className='panels-container'>
+                {/* {this.fieldsInfos.map((field, index) => 
+                    <div className='field-panel' id={`${index}`}>
+                        <div className='properties-wrapper'>
+                            <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'}  onChange={(e) => this.setColTitle(field, e.target.value)}/>
+                            <div className='field-type-selection-container'>
+                                {field.type === TemplateFieldType.UNSET ? <span className='placeholder'>Select media type</span> : null}
+                                <span className='type-display'>{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
+                                <div className='bubbles'>
+                                    <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.TEXT)}}/> 
+                                    <div className='text'>Text</div>
+                                    <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.VISUAL)}}/> 
+                                    <div className='text'>File</div>
+                                </div>
                             </div>
+                            <input className='field-property-container' id={`${Math.random() * 100}`} placeholder={this._dataViz?.GPTSummary?.get(field.title)?.size} style={{width: field.title === '' ? '30%' : ''} } onChange={(e) => this.setColSize(field, e.target.value as TemplateFieldSize)}/>
+                        </div>
+                        <textarea className='field-description-container' onChange={(e) => this.setColDesc(field, e.target.value)} defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc } placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description to help with template generation.'} /> 
+                        <div>
+                            <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
+                                <FontAwesomeIcon icon='trash'/>
+                            </button>
                         </div>
-                        <input className='field-property-container' id={`${Math.random() * 100}`} placeholder={this._dataViz?.GPTSummary?.get(field.title)?.size} style={{width: field.title === '' ? '30%' : ''} } onChange={(e) => this.setColSize(field, e.target.value as TemplateFieldSize)}/>
-                    </div>
-                    <textarea className='field-description-container' onChange={(e) => this.setColDesc(field, e.target.value)} defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc } placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description to help with template generation.'} /> 
-                    <div>
-                        <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
-                            <FontAwesomeIcon icon='trash'/>
-                        </button>
                     </div>
-                </div>
-            )}
+                )} */}
+                {this.hello()}
+            </div>
         </div>
         );
     }
 
+    hello = () => {
+        return (
+            <div className='field-panel'> 
+                <div className='top-bar'>
+                    <button></button>
+                </div>
+                <div className='opts-bar'> 
+                    <div className='opt-box'>
+                        <div className='top-bar'> Title </div>
+                        <textarea className='content' style={{width: '100%', height: 'calc(100% - 20px)'}}>
+
+                        </textarea>
+                    </div>
+                    <div className='opt-box'>
+                        <div className='top-bar'> Type </div>
+                        <div className='content'>
+
+                        </div>
+                    </div>
+                </div>
+                <div className='sizes-box'>
+                    <div className='top-bar'> Valid Sizes </div>
+                    <div className='content'>
+
+                    </div>
+                </div>
+                <div className='desc-box'>
+                    <div className='top-bar'> Description </div>
+                    <div className='content'>
+
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
     get renderSelectedViewType(){
         switch (this._menuContent){
             case 'templates':