From 6e65af16347169a9932c9e8ba737a2c76e684c5f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 11 Jul 2024 01:53:02 -0400
Subject: menu

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 33 +++++++++++---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 53 +++++++++++++++-------
 2 files changed, 63 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 43d4ed7e5..452d9b354 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -49,6 +49,8 @@
 .docCreatorMenu-preview-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 140px;
+    grid-auto-rows: 141px;
     overflow-y: scroll;
     margin: 5px;
     width: calc(100% - 10px);
@@ -57,17 +59,33 @@
     border-radius: 5px;
 
     .docCreatorMenu-preview-window {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         width: 125px;
         height: 125px;
         margin-top: 10px;
         margin-left: 10px;
         border: 1px solid whitesmoke;
         border-radius: 5px;
+        box-shadow: 5px 5px rgb(34, 34, 37);
+
+        &:hover{
+            background-color: rgb(72, 72, 73);
+        }
+
+        .docCreatorMenu-preview-image{ 
+            width: 105px;
+            height: 105px;
+            border-radius: 5px;
+        }
+
     }
 }
 
 .docCreatorMenu-options-container {
     display: flex;
+    justify-content: center;
     overflow-y: scroll;
     margin: 5px;
     width: calc(100% - 10px);
@@ -77,22 +95,23 @@
 
     .docCreatorMenu-dropdown-button{
         display: flex;
-        width: 120px;
-        height: 30px;
+        width: 140px;
+        height: 25px;
         background: whitesmoke; 
         background-color: rgb(34, 34, 37);
         border-radius: 5px;
         border: 1px solid whitesmoke;
         padding: 0px;
-        font-size: 13px;
+        font-size: 12px;
         margin: 10px;
-        align-content: center;
+        align-items: center;
         justify-content: center;
         text-transform: uppercase;
+        cursor: pointer;
 
-        // &:hover .docCreatorMenu-dropdown-content{
-        //     display: block;
-        // }
+        &:hover .docCreatorMenu-dropdown-content{
+            display: block;
+        }
     }
 
     .docCreatorMenu-dropdown-content {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 1976ecad2..7859ec60a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
@@ -13,6 +13,8 @@ import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocumentView } from '../DocumentView';
 import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
+import { Id } from '../../../../fields/FieldSymbols';
+import { Colors } from 'browndash-components';
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<{}> {
@@ -22,7 +24,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     private _ref: HTMLDivElement | null = null;
 
     @observable _templateDocs: Doc[] = [];
-    @observable _icons : (ImageField|undefined)[] = [];
+    @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
+    @observable _selectedTemplateID?: Doc;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -64,13 +67,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     };
 
-    _disposer: IReactionDisposer|undefined;
+    _disposer: IReactionDisposer | undefined;
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
-        this._disposer = reaction(() => this._templateDocs.slice(),
-            async(docs) => this._icons =  (await Promise.all(docs.map(doc => this.getIcon(doc))))
-            , {fireImmediately: true});
+        this._disposer = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
     }
 
     componentWillUnmount() {
@@ -117,13 +118,34 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     get templatesPreviewContents(){
+        const renderedTemplates: Doc[] = [];
         return (
             <div className='docCreatorMenu-preview-container'>
-                {this._icons.filter(url => url).map(url => 
-                    <div className='docCreatorMenu-preview-window'>
-                        <img src={url!.url.href.replace(".png", "_s.png")} />
-                    </div>)
-                }
+                {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);
+                    return (<div 
+                    className='docCreatorMenu-preview-window'
+                    style={{
+                        background: this._selectedTemplateID === info.doc ? Colors.MEDIUM_BLUE : '',
+                        boxShadow: this._selectedTemplateID === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+                    }}
+                    onPointerDown={e =>
+                        setupMoveUpEvents(
+                            this,
+                            e,
+                            returnFalse,
+                            emptyFunction,
+                            undoable(clickEv => {
+                                clickEv.stopPropagation();
+                                this._selectedTemplateID = info.doc;
+                                this.forceUpdate();
+                            }, 'open actions menu')
+                        )
+                    }>
+                        <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
+                    </div>
+                )})}
             </div>
         );
     }
@@ -131,7 +153,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     get optionsMenuContents(){
         return (
             <div className='docCreatorMenu-options-container'>
-                <div className="docCreatorMenu-dropdown-button">Dropdown</div>
+                <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>
@@ -173,9 +195,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             emptyFunction,
                             undoable(clickEv => {
                                 clickEv.stopPropagation();
-                            }, 'open actions menu')
+                            }, 'drag menu')
                         )
-                    
                     }
                     onPointerMove={e => this.onPointerMove(e)}
                     onPointerUp={() => this._dragging = false}
@@ -191,7 +212,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     undoable(clickEv => {
                                         clickEv.stopPropagation();
                                         runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
-                                    }, 'open actions menu')
+                                    }, 'create docs')
                                 )
                             }
                         >
@@ -211,7 +232,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     undoable(clickEv => {
                                         clickEv.stopPropagation();
                                         this.closeMenu();
-                                    }, 'open actions menu')
+                                    }, 'close menu')
                                 )
                             }
                         >
-- 
cgit v1.2.3-70-g09d2