work on fields menu

2 files changed, 111 insertions, 58 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 955698b19..eaa32e62a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -898,6 +898,7 @@
         border: 1px solid rgb(180, 180, 180);
         margin: 5px;
         margin-top: 0px;
+        margin-bottom: 10px;
         border-radius: 3px;
         flex: 0 0 auto;
         gap: 25px;
@@ -914,6 +915,7 @@
             width: 100%;
             height: 20px;
             background-color: rgb(50, 50, 50);
+            color: rgb(168, 167, 167);
         }  
         
         .opts-bar {
@@ -934,11 +936,38 @@
             }
 
             .content {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
                 height: calc(100% - 20px);
                 width: 100%;
                 background-color: rgb(50, 50, 50);
                 border-bottom-right-radius: 5px;
                 border-bottom-left-radius: 5px;
+                resize: none;
+
+                .bubbles {
+                    display: none;
+                }
+
+                .text {
+                    margin-right: 5px;
+                }
+
+                &:hover .bubbles {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: flex-start;
+                }
+        
+                &:hover .type-display {
+                    display: none;
+                }
+        
+                .bubble {
+                    margin: 3px;
+                }
             }
         }
 
@@ -949,6 +978,33 @@
             border-radius: 5px;
             background-color: rgb(50, 50, 50);
             box-shadow: 5px 5px rgb(29, 29, 31);
+
+            .content {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                height: calc(100% - 20px);
+                width: 100%;
+                background-color: rgb(50, 50, 50);
+                border-bottom-right-radius: 5px;
+                border-bottom-left-radius: 5px;
+
+                .text {
+                    margin-right: 9px;
+                }
+
+                .bubbles {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                }
+        
+                .bubble {
+                    margin: 3px;
+                    margin-right: 4px;
+                }
+            }
         }
 
         .desc-box {
@@ -958,7 +1014,18 @@
             border-radius: 5px;
             background-color: rgb(50, 50, 50);
             box-shadow: 5px 5px rgb(29, 29, 31);
+
+            .content {
+                height: calc(100% - 20px);
+                width: 100%;
+                background-color: rgb(50, 50, 50);
+                border-bottom-right-radius: 5px;
+                border-bottom-left-radius: 5px;
+                resize: none;
+
+            }
         }
+
     }
 
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 87e1e2c96..a01b26036 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1179,24 +1179,24 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     get dashboardContents(){
+        const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge'];
 
-        return (
-        <div className='docCreatorMenu-dashboard-view'>
-            <div className='topbar'>
-                <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
-                    <FontAwesomeIcon icon='plus'/>
-                </button>
-                <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'templates')}>
-                    <FontAwesomeIcon icon='arrow-left'/>
-                </button>
-            </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}
+        const fieldPanel = (field: Col) => {
+            return (
+                <div className='field-panel'> 
+                    <div className='top-bar'>
+                        <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                            <FontAwesomeIcon icon='minus'/>
+                        </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)'}} defaultValue={field.title} placeholder={'Enter title'}  onChange={(e) => this.setColTitle(field, e.target.value)}/>
+                        </div>
+                        <div className='opt-box'>
+                            <div className='top-bar'> Type </div>
+                            <div className='content'>
                                 <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)}}/> 
@@ -1205,56 +1205,42 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     <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>
                     </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='sizes-box'>
+                        <div className='top-bar'> Valid Sizes </div>
                         <div className='content'>
-
+                            <div className='bubbles'>
+                                {sizes.map(size => <>
+                                    <input className='bubble' type="checkbox" name="type" onChange={() => {this.setColSize(field, size as TemplateFieldSize)}}/> 
+                                    <div className='text'>{size}</div>
+                                </>)}
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div className='sizes-box'>
-                    <div className='top-bar'> Valid Sizes </div>
-                    <div className='content'>
-
+                    <div className='desc-box'>
+                        <div className='top-bar'> Description </div>
+                        <textarea className='content' 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>
                 </div>
-                <div className='desc-box'>
-                    <div className='top-bar'> Description </div>
-                    <div className='content'>
+            )
+        }    
 
-                    </div>
-                </div>
+        return (
+        <div className='docCreatorMenu-dashboard-view'>
+            <div className='topbar'>
+                <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                    <FontAwesomeIcon icon='plus'/>
+                </button>
+                <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'templates')}>
+                    <FontAwesomeIcon icon='arrow-left'/>
+                </button>
             </div>
-        )
+            <div className='panels-container'>
+                {this.fieldsInfos.map(field => fieldPanel(field))}
+            </div>
+        </div>
+        );
     }
 
     get renderSelectedViewType(){