expanded preview option

4 files changed, 56 insertions, 15 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 2a937d403..ac669a864 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -280,6 +280,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faMinimize,
                 fa.faArrowsRotate,
                 fa.faFloppyDisk,
                 fa.faRepeat,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 1f81bf960..857d76d4f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -288,6 +288,12 @@
     height: 100%;
 }
 
+.docCreatorMenu-expanded-template-preview {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
 .docCreatorMenu-preview-window {
     position: relative;
     display: flex;
@@ -306,15 +312,6 @@
         background-color: rgb(72, 72, 73);
     }
 
-    .docCreatorMenu-preview-image{ 
-        background-color: transparent;
-        height: 100px;
-        width: 100px;
-        display: block;
-        object-fit: contain;
-        border-radius: 5px;
-    }
-
     &.empty {
         font-size: 35px;
 
@@ -358,6 +355,20 @@
     
 }
 
+.docCreatorMenu-preview-image{ 
+    background-color: transparent;
+    height: 100px;
+    width: 100px;
+    display: block;
+    object-fit: contain;
+    border-radius: 5px;
+
+    &.expanded {
+        height: 100%;
+        width: 100%;
+    }
+}
+
 .docCreatorMenu-section {
     display: flex;
     flex-direction: column;
@@ -424,6 +435,12 @@
     &.float-right {
         float: right;
     }
+
+    &.top-right {
+        position: absolute;
+        top: 3px;
+        right: 3px;
+    }
 }
 
 .docCreatorMenu-section-title {
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>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 23dada260..7568e3b57 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -240,6 +240,12 @@
     }
 }
 
+.contentFittingDocumentView * {
+    ::-webkit-scrollbar-track {
+        background: none; 
+    }
+}
+
 .contentFittingDocumentView {
     position: relative;
     display: flex;