1 files changed, 37 insertions, 16 deletions
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')
                                 )
                             }
                         >