expanded preview option

1 files changed, 23 insertions, 6 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 64152f577..953037d13 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -59,6 +59,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _layoutPreview: boolean = true;
     @observable _layoutPreviewScale: number = 1;
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
+    @observable _expandedPreview: {icon: ImageField, doc: Doc} | undefined = undefined;
 
     @observable _suggestedTemplates: Doc[] = [];
     @observable _GPTOpt: boolean = false;
@@ -798,6 +799,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     generatePresetTemplates = async () => {
+        this._dataViz?.updateColDefaults();
+
         const cols = this.fieldsInfos;
         const templates = this.findValidTemplates(cols, TemplateLayouts.allTemplates);
         
@@ -811,7 +814,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         
         setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates) });
     };
-    
+
+    @action setExpandedView = (info: {icon: ImageField, doc: Doc} | undefined) => {
+        this._expandedPreview = info;
+    }
 
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
@@ -820,8 +826,17 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             <div></div>
 
         return (
-            <div className='docCreatorMenu-templates-view'>
-                <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 200}}>
+            <div className={`docCreatorMenu-templates-view`}>
+                {this._expandedPreview ? 
+                <div className='docCreatorMenu-expanded-template-preview'>
+                    <img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
+                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}> 
+                        <FontAwesomeIcon icon='minimize'/>
+                    </button>
+                </div> 
+                :
+                <div>
+                    <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 200}}>
                         <div className='docCreatorMenu-section-topbar'>
                             <div className='docCreatorMenu-section-title'>Suggested Templates</div>
                             <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'dashboard')}>
@@ -843,11 +858,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                         boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                                     }}
                                     onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                        <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
-                                            <FontAwesomeIcon icon='pencil' color='black'/>
+                                        <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.setExpandedView(info)})}>
+                                            <FontAwesomeIcon icon='pencil' color='white'/>
                                         </button>
                                         <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
-                                            <FontAwesomeIcon icon='plus' color='black'/>
+                                            <FontAwesomeIcon icon='plus' color='white'/>
                                         </button>
                                         <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                                     </div>
@@ -893,8 +908,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                             </div>
                         )})}
+                        </div>
                     </div>
                 </div>
+                }
             </div>
         );
     }