diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu')
5 files changed, 129 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ExpandedTemplatePreview.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ExpandedTemplatePreview.tsx new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ExpandedTemplatePreview.tsx diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/FieldOptionsScreen.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/FieldOptionsScreen.tsx new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/FieldOptionsScreen.tsx diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx new file mode 100644 index 000000000..517a998d9 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx @@ -0,0 +1,81 @@ +import { Colors } from "@dash/components/src"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, observable, runInAction } from "mobx"; +import React from "react"; +import ReactLoading from "react-loading"; +import { Doc } from "../../../../../../fields/Doc"; +import { StrCast } from "../../../../../../fields/Types"; +import { ObservableReactComponent } from "../../../../ObservableReactComponent"; +import { Template } from "../Template"; +import { observer } from "mobx-react"; +import { DocCreatorMenu } from "../DocCreatorMenu"; +import { TemplatePreviewBox } from "./TemplatePreviewBox"; + +export interface SuggestedTemplatesProps { + menu: DocCreatorMenu; + setupButtonClick: (e: React.PointerEvent, func: () => void) => void; +} + +@observer +export class SuggestedTemplatesWindow extends ObservableReactComponent<SuggestedTemplatesProps> { + + @observable _GPTLoading: boolean = false; + + @observable _suggestedTemplates: Template[] = []; + @observable _userTemplates: Template[] = []; + + @action addUserTemplate = (template: Template) => { this._userTemplates.push(template) }; + @action removeUserTemplate = (template: Template) => { this._userTemplates.splice(this._userTemplates.indexOf(template), 1) }; + + 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._suggestedTemplates.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) => this.addUserTemplate(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> + <hr className="docCreatorMenu-option-divider full no-margin" /> + <div className="docCreatorMenu-section"> + <div className="docCreatorMenu-section-topbar"> + <div className="docCreatorMenu-section-title">Your Templates</div> + <button className="docCreatorMenu-menu-button section-reveal-options"> + <FontAwesomeIcon icon="gear" /> + </button> + </div> + <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}> + {this._userTemplates.map(template => ( + <TemplatePreviewBox + template={template} + menu={this.props.menu} + + /> + ))} + </div> + </div> + </div> + </div> + ); + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingScreen.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingScreen.tsx new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingScreen.tsx diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx new file mode 100644 index 000000000..e40192fa8 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx @@ -0,0 +1,48 @@ +import { Colors } from "@dash/components/src"; +import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; +import { Template } from "../Template"; +import { runInAction } from "mobx"; +import React from "react"; +import { ObservableReactComponent } from "../../../../ObservableReactComponent"; +import { DocCreatorMenu } from "../DocCreatorMenu"; +import { IconProp } from "@fortawesome/fontawesome-svg-core"; + +export interface TemplatePreviewBoxProps { + template: Template; + menu: DocCreatorMenu; + leftButtonOpts?: [icon: IconProp, func: (template: Template) => void] + rightButtonOpts?: [icon: IconProp, func: (template: Template) => void] +} + +export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> { + + render() { + const template = this.props.template; + + return ( + <div + key={template.title} + className="docCreatorMenu-preview-window" + style={{ + border: this.props.menu._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', + boxShadow: this.props.menu._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '', + }} + onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => this.props.menu._selectedTemplate = template))}> + { this.props.leftButtonOpts ? + <button + className="option-button left" + onPointerDown={e => + this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts) + }> + <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" /> + </button> : null + } + { this.props.rightButtonOpts ? + <button className="option-button right" onPointerDown={e => this.props.menu.setUpButtonClick(e, () => this.props.rightButtonOpts)}> + <FontAwesomeIcon icon={this.props.rightButtonOpts![0]} color="white" /> + </button> : null } + {this.props.menu.docPreview(template.getRenderedDoc())} + </div> + ) + } +}
\ No newline at end of file |