diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 7 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 63 |
2 files changed, 33 insertions, 37 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss index e3530c0ef..bfc1c1216 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss @@ -211,7 +211,6 @@ .docCreatorMenu-menu-container { display: flex; flex-direction: column; - justify-content: flex-start; align-items: center; overflow-y: scroll; margin: 5px; @@ -272,14 +271,14 @@ .docCreatorMenu-layout-preview-window { padding: 5px; + flex: 0 0 auto; overflow: scroll; - aspect-ratio: 1 / 1; display: grid; - width: 85%; + width: 240; + height: 240; border: 1px solid whitesmoke; border-radius: 5px; background-color: rgb(34, 34, 37); - margin-top: 10px; -ms-overflow-style: none; scrollbar-width: none; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index c8b414c59..9da9f5aa8 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -17,6 +17,7 @@ import { Id } from '../../../../fields/FieldSymbols'; import { Colors } from 'browndash-components'; import { MakeTemplate } from '../../../util/DropConverter'; import { threadId } from 'worker_threads'; +import { ideahub } from 'googleapis/build/src/apis/ideahub'; export enum LayoutType { Stacked = 'stacked', @@ -40,6 +41,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns?: number} = {yMargin: 0, xMargin: 0}; @observable _layoutPreview: boolean = false; + @observable _layoutPreviewScale: number = 1; @observable _pageX: number = 0; @observable _pageY: number = 0; @@ -190,48 +192,42 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @action updateXMargin = (input: string) => { this._layout.xMargin = Number(input) }; @action updateYMargin = (input: string) => { this._layout.yMargin = Number(input) }; - @action updateDimensions = (dimension: 'x' | 'y', input: string) => { - if (dimension === 'x') { - this._layout.rows = Number(input); - } else { - this._layout.columns = Number(input); - } - }; + @action updateColumns = (input: string) => { this._layout.columns = Number(input) }; get layoutConfigOptions() { - const optionInput = (title: string, func: Function) => { + const optionInput = (title: string, func: Function, def?: number, key?: string) => { return ( - <div className='docCreatorMenu-option-container'> + <div className='docCreatorMenu-option-container small' key={key}> <div className='docCreatorMenu-option-title config layout-config'> {title} </div> - <input onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/> + <input defaultValue={def} onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/> </div> ); } switch (this._layout.type) { - case LayoutType.Row: case LayoutType.Column: + case LayoutType.Row: + return ( + <div className='docCreatorMenu-configuration-bar'> + {optionInput('Margin:', this.updateXMargin, this._layout.xMargin, '0')} + </div> + ); + case LayoutType.Column: return ( <div className='docCreatorMenu-configuration-bar'> - {optionInput('Y Margin:', this.updateYMargin)} - {optionInput('X Margin:', this.updateXMargin)} + {optionInput('Margin:', this.updateYMargin, this._layout.yMargin, '1')} </div> ); case LayoutType.Grid: return ( <> <div className='docCreatorMenu-configuration-bar'> - {optionInput('Y Margin:', this.updateYMargin)} - {optionInput('X Margin:', this.updateXMargin)} + {optionInput('Y Margin:', this.updateYMargin, this._layout.xMargin, '2')} + {optionInput('X Margin:', this.updateXMargin, this._layout.xMargin, '3')} </div> <div className='docCreatorMenu-configuration-bar no-gap'> - <div className='docCreatorMenu-option-title config dimensions'> - Dimensions: - </div> - <input className='docCreatorMenu-input config dimensions left' onInput={(e) => {this.updateDimensions('x', e.currentTarget.value); this.forceUpdate()}}/> - <div className='docCreatorMenu-option-title spacer small'>x</div> - <input className='docCreatorMenu-input config dimensions right' onInput={(e) => this.updateDimensions('y', e.currentTarget.value)}/> + {optionInput('Columns:', this.updateColumns, this._layout.columns, '3')} </div> </> ); @@ -248,28 +244,29 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { const horizontalSpan: number = (docWidth + this._layout.xMargin) * this.columnsCount - this._layout.xMargin; const verticalSpan: number = (docHeight + this._layout.yMargin) * this.rowsCount - this._layout.yMargin; const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan; - const scaleDownFactor: number = largerSpan / 235; - const scaledWidth = docWidth / scaleDownFactor; - const scaledHeight = docHeight / scaleDownFactor; - - console.log(this.rowsCount); - console.log(this.columnsCount) + const scaledDown = (input: number) => {return input / (largerSpan / 225 * this._layoutPreviewScale)} + const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3)); return ( <div className='docCreatorMenu-layout-preview-window' style={{ - gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledWidth}px)`, - gridTemplateRows: `repeat(${this.rowsCount}, ${scaledHeight}px)`, - rowGap: `${this._layout.yMargin}px`, - columnGap: `${this._layout.xMargin}px` + gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledDown(docWidth)}px`, + gridTemplateRows: `${scaledDown(docHeight)}px`, + gridAutoRows: `${scaledDown(docHeight)}px`, + rowGap: `${scaledDown(this._layout.yMargin)}px`, + columnGap: `${scaledDown(this._layout.xMargin)}px` }}> + {/* <button> + + </button> */} {this.docsToRender.map(num => <div className='docCreatorMenu-layout-preview-item' style={{ - width: scaledWidth, - height: scaledHeight, + width: scaledDown(docWidth), + height: scaledDown(docHeight), + fontSize: fontSize, }} > {num} |