From 5e619c3f2491ee78297ac00329bb9c0a11132e6e Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 13 Jul 2024 03:15:44 -0400
Subject: layout configuration options added to menu

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 65 ++++++++++++++++++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 74 +++++++++++++++++-----
 2 files changed, 120 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 243954873..71ad9e105 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -121,11 +121,38 @@
     text-transform: uppercase;
     cursor: pointer;
 
-    &.repeat {
+    &.spacer {
+        border-left: none;
+        border-right: none;
+        border-radius: 0px;
+        width: auto;
+        text-transform: none;
+         
+        &.small {
+            height: 20px;
+            transform: translateY(-5px);
+        }
+    }
+
+    &.config {
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
         width: 60px;
         border-right: 0px;
+
+        &.layout-config {
+            height: 20px;
+            transform: translateY(-5px);
+            text-transform: none;
+            padding-left: 2px;
+        }
+
+        &.dimensions {
+            text-transform: none;
+            height: 20px;
+            transform: translateY(-5px);
+            width: 70px;
+        }
     }
 }
 
@@ -138,12 +165,46 @@
     align-items: center;
     justify-content: center;
 
-    &.repeat {
+    &.config {
         margin: 0px;
         border-top-left-radius: 0px;
         border-bottom-left-radius: 0px;
         border-left: 0px;
         width: 40px;
+
+        &.layout-config {
+            height: 20px;
+            transform: translateY(-5px);
+        }
+
+        &.dimensions {
+            height: 20px;
+            width: 30px;
+            transform: translateY(-5px);
+
+            &.right {
+                border-top-left-radius: 0px;
+                border-bottom-left-radius: 0px;
+            }
+
+            &.left {
+                border-radius: 0px;
+                border-right: 0px;
+            }
+        }
+    }
+}
+
+.docCreatorMenu-configuration-bar {
+    width: 200;
+    gap: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    &.no-gap {
+        gap: 0px;
     }
 }
 
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>
         );
     }
-- 
cgit v1.2.3-70-g09d2