work on menu (mostly UI improvements)

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