From 31bfb5e8b5e40322572252e1d823aebe48b27788 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 11 Jul 2024 02:54:35 -0400
Subject: menu

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 86 +++++++++++++++-------
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 43 ++++++++---
 2 files changed, 93 insertions(+), 36 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 452d9b354..ba20c9179 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -85,7 +85,9 @@
 
 .docCreatorMenu-options-container {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     overflow-y: scroll;
     margin: 5px;
     width: calc(100% - 10px);
@@ -93,40 +95,72 @@
     border: 1px solid whitesmoke;
     border-radius: 5px;
 
-    .docCreatorMenu-dropdown-button{
-        display: flex;
+    .docCreatorMenu-dropdown-hoverable {
         width: 140px;
         height: 25px;
-        background: whitesmoke; 
-        background-color: rgb(34, 34, 37);
-        border-radius: 5px;
-        border: 1px solid whitesmoke;
-        padding: 0px;
-        font-size: 12px;
-        margin: 10px;
-        align-items: center;
-        justify-content: center;
-        text-transform: uppercase;
-        cursor: pointer;
+        margin-bottom: 17px;
+        z-index: 5;
 
-        &:hover .docCreatorMenu-dropdown-content{
+        &:hover .docCreatorMenu-dropdown-content {
             display: block;
         }
-    }
-
-    .docCreatorMenu-dropdown-content {
-        display: none;
-        position: absolute;
-        min-width: 100px;
-        z-index: 1;
 
-        .docCreatorMenu-dropdown-option{
-            display: block;
+        &:hover .docCreatorMenu-dropdown-title {
+            border-bottom-left-radius: 0px;
+            border-bottom-right-radius: 0px;
         }
 
+        .docCreatorMenu-dropdown-title{
+            display: flex;
+            width: 140px;
+            height: 25px;
+            background: whitesmoke; 
+            background-color: rgb(34, 34, 37);
+            border-radius: 5px;
+            border: 1px solid whitesmoke;
+            padding: 0px;
+            font-size: 12px;
+            margin-top: 10px;
+            align-items: center;
+            justify-content: center;
+            text-transform: uppercase;
+            cursor: pointer;
+        }
+    
+        .docCreatorMenu-dropdown-content {
+            display: none;
+            min-width: 100px;
+            height: 75px;
+            overflow-y: scroll;
+            -ms-overflow-style: none; 
+            scrollbar-width: none;
+    
+            .docCreatorMenu-dropdown-option{
+                display: flex;
+                background-color: rgb(42, 42, 46);
+                border-left: 1px solid whitesmoke;
+                border-right: 1px solid whitesmoke;
+                border-bottom: 1px solid whitesmoke;
+                width: 140px;
+                height: 25px;
+                justify-content: center;
+                justify-items: center;
+                padding-top: 3px;
+
+                &:hover {
+                    background-color: rgb(68, 68, 74);
+                    cursor: pointer;
+                }
+            }
+        }    
     }
 
-
-
+    .docCreatorMenu-layout-preview-window {
+        width: 85%;
+        height: 100px;
+        border: 1px solid whitesmoke;
+        border-radius: 5px;
+        background-color: rgb(34, 34, 37);
+    }
 }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 7859ec60a..356172b6a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -27,6 +27,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplateID?: Doc;
 
+    @observable _selectedLayout?: 'stacked' | 'grid' | 'row' | 'column' | 'custom';
+
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
     @observable _display: boolean = false;
@@ -131,11 +133,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         boxShadow: this._selectedTemplateID === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                     }}
                     onPointerDown={e =>
-                        setupMoveUpEvents(
-                            this,
-                            e,
-                            returnFalse,
-                            emptyFunction,
+                        setupMoveUpEvents(this, e, returnFalse, emptyFunction,
                             undoable(clickEv => {
                                 clickEv.stopPropagation();
                                 this._selectedTemplateID = info.doc;
@@ -151,13 +149,38 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     get optionsMenuContents(){
+
+        const layoutOption = (option: 'stacked' | 'grid' | 'row' | 'column' | 'custom') => {
+            return (
+                <div 
+                    className="docCreatorMenu-dropdown-option" 
+                    onPointerDown={e =>
+                        setupMoveUpEvents(this, e, returnFalse, emptyFunction,
+                            undoable(clickEv => {
+                                clickEv.stopPropagation();
+                                runInAction(() => this._selectedLayout = option);
+                            }, 'open actions menu')
+                        )
+                    }>
+                    {option}
+                </div>
+            );
+        }
+
         return (
             <div className='docCreatorMenu-options-container'>
-                <div className="docCreatorMenu-dropdown-button">Choose Layout</div>
-                <div className="docCreatorMenu-dropdown-content">
-                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
-                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
-                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                <div className='docCreatorMenu-dropdown-hoverable'>
+                    <div className="docCreatorMenu-dropdown-title">Choose Layout</div>
+                    <div className="docCreatorMenu-dropdown-content">
+                        {layoutOption('stacked')}
+                        {layoutOption('grid')}
+                        {layoutOption('row')}
+                        {layoutOption('column')}
+                        {layoutOption('custom')}
+                    </div>
+                </div>
+                <div className='docCreatorMenu-layout-preview-window'>
+
                 </div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2