diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 65 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 74 |
2 files changed, 120 insertions, 19 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss index 243954873..71ad9e105 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss @@ -121,11 +121,38 @@ text-transform: uppercase; cursor: pointer; - &.repeat { + &.spacer { + border-left: none; + border-right: none; + border-radius: 0px; + width: auto; + text-transform: none; + + &.small { + height: 20px; + transform: translateY(-5px); + } + } + + &.config { border-top-right-radius: 0px; border-bottom-right-radius: 0px; width: 60px; border-right: 0px; + + &.layout-config { + height: 20px; + transform: translateY(-5px); + text-transform: none; + padding-left: 2px; + } + + &.dimensions { + text-transform: none; + height: 20px; + transform: translateY(-5px); + width: 70px; + } } } @@ -138,12 +165,46 @@ align-items: center; justify-content: center; - &.repeat { + &.config { margin: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 0px; width: 40px; + + &.layout-config { + height: 20px; + transform: translateY(-5px); + } + + &.dimensions { + height: 20px; + width: 30px; + transform: translateY(-5px); + + &.right { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + } + + &.left { + border-radius: 0px; + border-right: 0px; + } + } + } +} + +.docCreatorMenu-configuration-bar { + width: 200; + gap: 5px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &.no-gap { + gap: 0px; } } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 1b4fe0879..a45234a79 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -136,9 +136,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => { if (renderedTemplates.includes(info.doc)) return undefined; renderedTemplates.push(info.doc); - //let ref: any = undefined; return (<div - //ref={r => ref = r} className='docCreatorMenu-preview-window' style={{ background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '', @@ -150,8 +148,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { clickEv.stopPropagation(); this._selectedTemplate = info.doc; MakeTemplate(info.doc); - // ref.style.background = Colors.MEDIUM_BLUE; - // ref.style.boxShadow = `0 0 15px rgba(68, 118, 247, .8)`; }, 'open actions menu') ) }> @@ -162,6 +158,50 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { ); } + get layoutConfigOptions() { + const optionInput = (title: string) => { + return ( + <div className='docCreatorMenu-option-container'> + <div className='docCreatorMenu-option-title config layout-config'> + {title} + </div> + <input className='docCreatorMenu-input config layout-config'/> + </div> + ); + } + + switch (this._selectedLayout) { + case LayoutType.Row: case LayoutType.Column: + return ( + <div className='docCreatorMenu-configuration-bar'> + {optionInput('Y Margin:')} + {optionInput('X Margin:')} + </div> + ); + case LayoutType.Grid: + return ( + <> + <div className='docCreatorMenu-configuration-bar'> + {optionInput('Y Margin:')} + {optionInput('X Margin:')} + </div> + <div className='docCreatorMenu-configuration-bar no-gap'> + <div className='docCreatorMenu-option-title config dimensions'> + Dimensions: + </div> + <input className='docCreatorMenu-input config dimensions left'/> + <div className='docCreatorMenu-option-title spacer small'>x</div> + <input className='docCreatorMenu-input config dimensions right'/> + </div> + </> + ); + case LayoutType.Stacked: + return null; + default: + break; + } + } + get layoutPreviewContents() { return ( <div className='docCreatorMenu-layout-preview-window'> @@ -189,13 +229,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { ); } - const repeatOption = (num: number) => { - return (<option - value="Option 1" - onPointerDown={e => this._templateInfo.repeat = num} - > - {`${num}x`} - </option>); + const selectionBox = (width: number, height: number, title: 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> + {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}}> + {options} + </select> + } + </div>); } const repeatOptions = [0, 1, 2, 3, 4, 5]; @@ -226,13 +270,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/> </button> </div> + {this._selectedLayout ? this.layoutConfigOptions: null} {this._layoutPreview ? this.layoutPreviewContents : null} - <div className='docCreatorMenu-option-container'> - <div className="docCreatorMenu-option-title repeat">Repeat</div> - <select className='docCreatorMenu-input repeat'> - {repeatOptions.map(num => repeatOption(num))} - </select> - </div> + {selectionBox(100, 30, 'Repeat:', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))} </div> ); } |