diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 68 |
1 files changed, 42 insertions, 26 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index bae2d2000..3eda2c891 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -14,7 +14,7 @@ import { DocumentView } from '../DocumentView'; import { DataVizBox } from './DataVizBox'; import './DocCreatorMenu.scss'; import { Id } from '../../../../fields/FieldSymbols'; -import { Colors } from 'browndash-components'; +import { Colors, IconButton, Size } from 'browndash-components'; import { MakeTemplate } from '../../../util/DropConverter'; import { threadId } from 'worker_threads'; import { ideahub } from 'googleapis/build/src/apis/ideahub'; @@ -39,8 +39,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>; @observable _selectedTemplate: Doc | undefined = undefined; - @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns: number} = {yMargin: 0, xMargin: 0, columns: 1}; - @observable _layoutPreview: boolean = false; + @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, columns: 1}; + @observable _layoutPreview: boolean = true; @observable _layoutPreviewScale: number = 1; @observable _pageX: number = 0; @@ -173,6 +173,16 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { return undefined; } + @action updateSelectedTemplate = (template: Doc) => { + if (this._selectedTemplate === template) { + this._selectedTemplate = undefined; + return; + } else { + this._selectedTemplate = template; + MakeTemplate(template); + } + } + get templatesPreviewContents(){ const renderedTemplates: Doc[] = []; return ( @@ -186,7 +196,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '', boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '' }} - onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {this._selectedTemplate = info.doc; MakeTemplate(info.doc);}))}> + onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} /> </div> )})} @@ -199,12 +209,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @action updateColumns = (input: string) => { this._layout.columns = Number(input) }; get layoutConfigOptions() { - const optionInput = (title: string, func: Function, def?: number, key?: string, noMargin?: boolean) => { + const optionInput = (icon: string, func: Function, def?: number, key?: string, noMargin?: boolean) => { return ( - <div className='docCreatorMenu-option-container small' key={key} style={{marginTop: noMargin ? '0px' : ''}} + <div className='docCreatorMenu-option-container small no-margin' key={key} style={{marginTop: noMargin ? '0px' : ''}} > <div className='docCreatorMenu-option-title config layout-config'> - {title} + <FontAwesomeIcon icon={icon as any}/> </div> <input defaultValue={def} onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/> </div> @@ -215,26 +225,22 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { case LayoutType.Row: return ( <div className='docCreatorMenu-configuration-bar'> - {optionInput('Margin:', this.updateXMargin, this._layout.xMargin, '0')} + {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')} </div> ); case LayoutType.Column: return ( <div className='docCreatorMenu-configuration-bar'> - {optionInput('Margin:', this.updateYMargin, this._layout.yMargin, '1')} + {optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')} </div> ); case LayoutType.Grid: return ( - <> <div className='docCreatorMenu-configuration-bar'> - {optionInput('Y Margin:', this.updateYMargin, this._layout.xMargin, '2')} - {optionInput('X Margin:', this.updateXMargin, this._layout.xMargin, '3')} + {optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')} + {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '3')} + {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)} </div> - <div className='docCreatorMenu-configuration-bar'> - {optionInput('Columns:', this.updateColumns, this._layout.columns, '3', true)} - </div> - </> ); case LayoutType.Stacked: return null; @@ -273,7 +279,18 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { rowGap: `${scaledDown(this._layout.yMargin)}px`, columnGap: `${scaledDown(this._layout.xMargin)}px` }}> - {this.docsToRender.map(num => + {this._layout.type === LayoutType.Stacked ? + <div + className='docCreatorMenu-layout-preview-item' + style={{ + width: scaledDown(docWidth), + height: scaledDown(docHeight), + fontSize: fontSize, + }} + > + All + </div> : + this.docsToRender.map(num => <div className='docCreatorMenu-layout-preview-item' style={{ @@ -303,13 +320,13 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { ); } - const selectionBox = (width: number, height: number, title: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => { + const selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => { return (<div className='docCreatorMenu-option-container'> - <div className={`docCreatorMenu-option-title config ${specClass}`} style={{width: width * .6, height: height}}> - {title} + <div className={`docCreatorMenu-option-title config ${specClass}`} style={{width: width * .4, height: height}}> + <FontAwesomeIcon icon={icon as any}/> </div> - {manual ? <input className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .4, height: height}}/> : - <select className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .4, height: height}}> + {manual ? <input className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .6, height: height}}/> : + <select className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .6, height: height}}> {options} </select> } @@ -339,7 +356,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { </div> {this._layout.type ? this.layoutConfigOptions: null} {this._layoutPreview ? this.layoutPreviewContents : null} - {selectionBox(100, 30, 'Repeat:', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))} + {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))} </div> ); } @@ -381,7 +398,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { } onPointerMove={e => this.onPointerMove(e)} onPointerUp={() => this._dragging = false} - > + > <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates'))}> @@ -406,7 +423,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { <FontAwesomeIcon icon={'minus'}/> </button> </div> - <hr className='docCreatorMenu-menu-hr'/> {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents} </div> } @@ -417,6 +433,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { export interface DataVizTemplateInfo { doc?: Doc; - layout?: LayoutType; + layout?: {}; repeat?: number; }
\ No newline at end of file |