diff options
| -rw-r--r-- | src/client/views/MainView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 35 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 29 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.scss | 6 |
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; |