1 files changed, 33 insertions, 10 deletions
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>
         );