diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx | 46 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx | 49 |
2 files changed, 47 insertions, 48 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx index fe7822087..c5c5f5cfd 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx @@ -105,28 +105,30 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit render() { return ( - <div className="docCreatorMenu-expanded-template-preview"> - <div className="top-panel" /> - {this.renderedDocPreview} - {this.fireflyVariationsTab} - <div className="right-buttons-panel"> - <button - className="docCreatorMenu-menu-button section-reveal-options top-right" - onPointerDown={e => - this._props.setupButtonClick(e, () => { - if (this._props.template === this._props.menu._selectedTemplate) { - this._props.menu.updateRenderedPreviewCollection(this._props.template); - } - this._props.menu.setExpandedView(undefined); - }) - }> - <FontAwesomeIcon icon="minimize" /> - </button> - <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this._props.setupButtonClick(e, async () => { - this.setVariationTab(!this._variationsTabOpen); - })}> - <FontAwesomeIcon icon="lightbulb" /> - </button> + <div className={`docCreatorMenu-templates-view`}> + <div className="docCreatorMenu-expanded-template-preview"> + <div className="top-panel" /> + {this.renderedDocPreview} + {this.fireflyVariationsTab} + <div className="right-buttons-panel"> + <button + className="docCreatorMenu-menu-button section-reveal-options top-right" + onPointerDown={e => + this._props.setupButtonClick(e, () => { + if (this._props.template === this._props.menu._selectedTemplate) { + this._props.menu.updateRenderedPreviewCollection(this._props.template); + } + this._props.menu.setExpandedView(undefined); + }) + }> + <FontAwesomeIcon icon="minimize" /> + </button> + <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this._props.setupButtonClick(e, async () => { + this.setVariationTab(!this._variationsTabOpen); + })}> + <FontAwesomeIcon icon="lightbulb" /> + </button> + </div> </div> </div> ); diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx index 5035227d1..a5f96ef90 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx @@ -14,6 +14,7 @@ import { TemplatePreviewBox } from "./TemplatePreviewBox"; export interface SuggestedTemplatesProps { menu: DocCreatorMenu; templates: Template[]; + title: string; previewBoxLeftButtonOpts?: [string, () => any]; previewBoxRightButtonOpts?: [string, () => any]; setupButtonClick: (e: React.PointerEvent, func: () => void) => void; @@ -26,32 +27,28 @@ export class TemplateSidescrollView extends ObservableReactComponent<SuggestedTe render() { return ( - <div className='docCreatorMenu-templates-view'> - <div className="docCreatorMenu-templates-displays"> - <div className="docCreatorMenu-section"> - <div className="docCreatorMenu-section-topbar"> - <div className="docCreatorMenu-section-title">Suggested Templates</div> - <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.props.setupButtonClick(e, () => runInAction(() => (this.props.menu._menuContent = 'dashboard')))}> - <FontAwesomeIcon icon="gear" /> - </button> - </div> - <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}> - {this.props.templates.map(template => ( - <TemplatePreviewBox - template={template} - menu={this.props.menu} - leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]} - rightButtonOpts={["plus", (template: Template) => {}]} - /> - ))} - </div> - <div className="docCreatorMenu-GPT-options"> - <div className="docCreatorMenu-GPT-options-container"> - <button className="docCreatorMenu-menu-button" onPointerDown={e => this.props.setupButtonClick(e, () => this.props.menu.generatePresetTemplates())}> - <FontAwesomeIcon icon="arrows-rotate" /> - </button> - </div> - </div> + <div className="docCreatorMenu-section"> + <div className="docCreatorMenu-section-topbar"> + <div className="docCreatorMenu-section-title">{this.props.title}</div> + <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.props.setupButtonClick(e, () => runInAction(() => (this.props.menu._menuContent = 'dashboard')))}> + <FontAwesomeIcon icon="gear" /> + </button> + </div> + <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}> + {this.props.templates.map(template => ( + <TemplatePreviewBox + template={template} + menu={this.props.menu} + leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]} + rightButtonOpts={["plus", (template: Template) => {}]} + /> + ))} + </div> + <div className="docCreatorMenu-GPT-options"> + <div className="docCreatorMenu-GPT-options-container"> + <button className="docCreatorMenu-menu-button" onPointerDown={e => this.props.setupButtonClick(e, () => this.props.menu.generatePresetTemplates())}> + <FontAwesomeIcon icon="arrows-rotate" /> + </button> </div> </div> </div> |