added option to collapse field panels

1 files changed, 48 insertions, 34 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 6d8d810aa..daba990e4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -89,6 +89,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
     @observable _userCreatedFields: Col[] = [];
     @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = [];
+    @observable _collapsedCols: String[] = []; //any columns whose options panels are hidden
 
     @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 10, xMargin: 10, columns: 3, repeat: 0 };
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
@@ -1327,52 +1328,65 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     get dashboardContents() {
         const fieldPanel = (field: Col, id: number) => (
             <div className="field-panel" key={id}>
-                <div className="top-bar">
+                <div className="top-bar" onPointerDown={e => this.setUpButtonClick(e, runInAction(() => () => {
+                    if (this._collapsedCols.includes(field.title)) {
+                        this._collapsedCols = this._collapsedCols.filter(col => col !== field.title);
+                    } else {
+                        this._collapsedCols.push(field.title);
+                    }
+                }))}>
                     <span className="field-title">{`${field.title} Field`}</span>
                     <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
                         <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)' }} value={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
+                { this._collapsedCols.includes(field.title) ? null :
+                    <>
+                    <div className="opts-bar">
+                        <div className="opt-box">
+                            <div className="top-bar"> Title </div>
+                            <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} value={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)} />
+                                    <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>
+                        </div>
                     </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">
-                            <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>
+                                {Object.values(TemplateFieldSize).map(size => (
+                                    <div key={field + size}>
+                                        <input className="bubble" type="checkbox" name="type" checked={field.sizes.includes(size)} onChange={e => this.modifyColSizes(field, size, e.target.checked)} />
+                                        <div className="text">{size}</div>
+                                    </div>
+                                ))}
                             </div>
                         </div>
                     </div>
-                </div>
-                <div className="sizes-box">
-                    <div className="top-bar"> Valid Sizes </div>
-                    <div className="content">
-                        <div className="bubbles">
-                            {Object.values(TemplateFieldSize).map(size => (
-                                <div key={field + size}>
-                                    <input className="bubble" type="checkbox" name="type" checked={field.sizes.includes(size)} onChange={e => this.modifyColSizes(field, size, e.target.checked)} />
-                                    <div className="text">{size}</div>
-                                </div>
-                            ))}
-                        </div>
+                    <div className="desc-box">
+                        <div className="top-bar"> Prompt </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/prompt to help with template generation.'}
+                        />
                     </div>
-                </div>
-                <div className="desc-box">
-                    <div className="top-bar"> Prompt </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/prompt to help with template generation.'}
-                    />
-                </div>
+                    <div>
+
+                    </div>
+                    </>
+                }
             </div>
         );