diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 29 |
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> ); } |