work on menu (mostly UI improvements)

3 files changed, 68 insertions, 40 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 926e5fd55..d337aae68 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -279,6 +279,9 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faRepeat,
+                fa.faArrowsUpDown,
+                fa.faArrowsLeftRight,
                 fa.faWindowMaximize,
                 fa.faGift,
                 fa.faLockOpen,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index a9b4e2501..d2f8f13d1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -25,9 +25,14 @@
     background: whitesmoke; 
     background-color: rgb(34, 34, 37);
     border-radius: 5px;
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     padding: 0px;
     font-size: 14px;
+    //box-shadow: 3px 3px rgb(29, 29, 31);
+
+    &:hover {
+        box-shadow: none;
+    }
      
     &.right{
         margin-left: 0px;
@@ -51,6 +56,7 @@
 .docCreatorMenu-menu-hr{
     margin-top: 0px;
     margin-bottom: 0px;
+    color: rgb(180, 180, 180);
 }
 
 //------------------------------------------------------------------------------------------------------------------------------------------
@@ -67,7 +73,7 @@
     margin: 5px;
     width: calc(100% - 10px);
     height: calc(100% - 51px);
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
     .docCreatorMenu-preview-window {
@@ -107,6 +113,7 @@
     justify-content: center;
     align-items: center;
     margin-top: 10px;
+    margin-bottom: 10px;
 
     &.layout{
         z-index: 5;
@@ -120,7 +127,7 @@
     background: whitesmoke; 
     background-color: rgb(34, 34, 37);
     border-radius: 5px;
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     padding: 0px;
     font-size: 12px;
     align-items: center;
@@ -142,10 +149,12 @@
     }
 
     &.config {
+        border-radius: 4px;
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
-        width: 60px;
+        width: 30px;
         border-right: 0px;
+        gap: 3px;
 
         &.layout-config {
             height: 20px;
@@ -167,17 +176,17 @@
     display: flex;
     height: 30px;
     background-color: rgb(34, 34, 37);
-    border-radius: 5px;
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     align-items: center;
     justify-content: center;
 
     &.config {
+        border-radius: 4px;
         margin: 0px;
         border-top-left-radius: 0px;
         border-bottom-left-radius: 0px;
         border-left: 0px;
-        width: 40px;
+        width: 25px;
 
         &.layout-config {
             height: 20px;
@@ -223,7 +232,7 @@
     margin: 5px;
     width: calc(100% - 10px);
     height: calc(100% - 51px);
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
     .docCreatorMenu-option-container{
@@ -250,16 +259,16 @@
                 overflow-y: scroll;
                 -ms-overflow-style: none; 
                 scrollbar-width: none;
-                border-bottom: solid 1px whitesmoke;
+                border-bottom: 1px solid rgb(180, 180, 180);
                 border-bottom-left-radius: 5px;
                 border-bottom-right-radius: 5px;
         
                 .docCreatorMenu-dropdown-option{
                     display: flex;
                     background-color: rgb(42, 42, 46);
-                    border-left: 1px solid whitesmoke;
-                    border-right: 1px solid whitesmoke;
-                    border-bottom: 1px solid whitesmoke;
+                    border-left: 1px solid rgb(180, 180, 180);
+                    border-right: 1px solid rgb(180, 180, 180);
+                    border-bottom: 1px solid rgb(180, 180, 180);
                     width: 140px;
                     height: 25px;
                     justify-content: center;
@@ -298,7 +307,7 @@
             height: auto;
             max-width: 240;
             max-height: 240;
-            border: 1px solid whitesmoke;
+            border: 1px solid rgb(180, 180, 180);
             border-radius: 5px;
             background-color: rgb(34, 34, 37);
             -ms-overflow-style: none; 
@@ -320,7 +329,7 @@
             background: whitesmoke; 
             background-color: rgb(34, 34, 37);
             border-radius: 3px;
-            border: 1px solid whitesmoke;
+            border: 1px solid rgb(180, 180, 180);
             padding: 0px;
             font-size: 10px;
             position: absolute;
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