new menu css

1 files changed, 72 insertions, 27 deletions

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':