1 files changed, 57 insertions, 17 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 1b4fe0879..a45234a79 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -136,9 +136,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
                     if (renderedTemplates.includes(info.doc)) return undefined;
                     renderedTemplates.push(info.doc);
-                    //let ref: any = undefined;
                     return (<div 
-                    //ref={r => ref = r}
                     className='docCreatorMenu-preview-window'
                     style={{
                         background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '',
@@ -150,8 +148,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 clickEv.stopPropagation();
                                 this._selectedTemplate = info.doc;
                                 MakeTemplate(info.doc);
-                                // ref.style.background = Colors.MEDIUM_BLUE;
-                                // ref.style.boxShadow = `0 0 15px rgba(68, 118, 247, .8)`;
                             }, 'open actions menu')
                         )
                     }>
@@ -162,6 +158,50 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         );
     }
 
+    get layoutConfigOptions() {
+        const optionInput = (title: string) => {
+            return (
+                <div className='docCreatorMenu-option-container'>
+                    <div className='docCreatorMenu-option-title config layout-config'>
+                        {title}
+                    </div>
+                    <input className='docCreatorMenu-input config layout-config'/>
+                </div>
+            );
+        }
+
+        switch (this._selectedLayout) {
+            case LayoutType.Row: case LayoutType.Column:
+                return (
+                    <div className='docCreatorMenu-configuration-bar'>
+                        {optionInput('Y Margin:')}
+                        {optionInput('X Margin:')}
+                    </div>
+                    );
+            case LayoutType.Grid:
+                return (
+                    <>
+                    <div className='docCreatorMenu-configuration-bar'>
+                        {optionInput('Y Margin:')}
+                        {optionInput('X Margin:')}
+                    </div>
+                    <div className='docCreatorMenu-configuration-bar no-gap'>
+                        <div className='docCreatorMenu-option-title config dimensions'>
+                            Dimensions:
+                        </div>
+                        <input className='docCreatorMenu-input config dimensions left'/>
+                        <div className='docCreatorMenu-option-title spacer small'>x</div>
+                        <input className='docCreatorMenu-input config dimensions right'/>
+                    </div>
+                    </>
+                );
+            case LayoutType.Stacked:
+                return null;
+            default:
+                break;
+        }
+    }
+
     get layoutPreviewContents() {
         return (
             <div className='docCreatorMenu-layout-preview-window'>
@@ -189,13 +229,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             );
         }
 
-        const repeatOption = (num: number) => {
-            return (<option 
-            value="Option 1"
-            onPointerDown={e => this._templateInfo.repeat = num}
-            >
-                {`${num}x`}
-            </option>);
+        const selectionBox = (width: number, height: number, title: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
+            return (<div className='docCreatorMenu-option-container'>
+                <div className={`docCreatorMenu-option-title config ${specClass}`} style={{width: width * .6, height: height}}>
+                    {title}
+                </div>
+                {manual ? <input className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .4, height: height}}/> :
+                <select className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .4, height: height}}>
+                    {options}
+                </select>
+                }
+            </div>);
         }
 
         const repeatOptions = [0, 1, 2, 3, 4, 5];
@@ -226,13 +270,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
                     </button>
                 </div>
+                {this._selectedLayout ? this.layoutConfigOptions: null}
                 {this._layoutPreview ? this.layoutPreviewContents : null}
-                <div className='docCreatorMenu-option-container'>
-                    <div className="docCreatorMenu-option-title repeat">Repeat</div>
-                    <select className='docCreatorMenu-input repeat'>
-                        {repeatOptions.map(num => repeatOption(num))}
-                    </select>
-                </div>
+                {selectionBox(100, 30, 'Repeat:', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))}
             </div>
         );
     }