diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 102 |
1 files changed, 44 insertions, 58 deletions
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(){ |