diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 38 |
1 files changed, 22 insertions, 16 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 27c5b17ef..67999fc39 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -35,7 +35,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { private _ref: HTMLDivElement | null = null; @observable _templateDocs: Doc[] = []; - @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>; @observable _selectedTemplate: Doc | undefined = undefined; @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0}; @@ -98,6 +97,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { } } + @computed get canMakeDocs(){ + return this._selectedTemplate !== undefined && this._layout !== undefined; + } + setUpButtonClick = (e: any, func: Function) => { setupMoveUpEvents( this, @@ -269,16 +272,18 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { return ( <div className='docCreatorMenu-layout-preview-window-wrapper'> - <button - className='docCreatorMenu-zoom-button' - onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}> - <FontAwesomeIcon icon={'minus'}/> - </button> - <button - className='docCreatorMenu-zoom-button zoom-in' - onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}> - <FontAwesomeIcon icon={'plus'}/> - </button> + <div className='docCreatorMenu-zoom-button-container'> + <button + className='docCreatorMenu-zoom-button' + onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}> + <FontAwesomeIcon icon={'minus'}/> + </button> + <button + className='docCreatorMenu-zoom-button zoom-in' + onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}> + <FontAwesomeIcon icon={'plus'}/> + </button> + </div> <div className='docCreatorMenu-layout-preview-window' style={{ @@ -370,6 +375,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))} <button className='docCreatorMenu-create-docs-button' + style={{backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'rgb(180, 180, 180)'}} onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction, undoable(clickEv => { clickEv.stopPropagation(); @@ -386,9 +392,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { } render() { - const topButton = (icon: string, func: Function, tag: string) => { + const topButton = (icon: string, opt: string, func: Function, tag: string) => { return ( - <div className={`top-button-container ${tag}`}> + <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}> <div className="top-button-content" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {func()}))}> @@ -469,9 +475,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { onPointerUp={() => this._dragging = false} > <div className='docCreatorMenu-top-buttons-container'> - {topButton('table-cells', onPreviewSelected, 'left')} - {topButton('bars', onOptionsSelected, 'middle')} - {topButton('floppy-disk', onSavedSelected, 'right')} + {topButton('table-cells', 'templates', onPreviewSelected, 'left')} + {topButton('bars', 'options', onOptionsSelected, 'middle')} + {topButton('floppy-disk', 'saved', onSavedSelected, 'right')} </div> <button className='docCreatorMenu-menu-button close-menu' |