diff options
| author | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2025-05-10 16:52:56 -0400 |
|---|---|---|
| committer | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2025-05-10 16:52:56 -0400 |
| commit | 1451849d857afaea3a3bdc5feaeba0d4b8182e68 (patch) | |
| tree | d3bdb0a46a6d7dc35a1b48ee7482d48da4a3785c /src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx | |
| parent | f60a8539a4b1fd0c9b3249b94bff011fd7f742e5 (diff) | |
c
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx | 49 |
1 files changed, 23 insertions, 26 deletions
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> |