create button coloring and zoom buttons moved

2 files changed, 50 insertions, 27 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index bc10600ca..0fc85ba5d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -43,8 +43,9 @@
 
     &.close-menu {
         font-size: 12px;
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
+        border-radius: 2px;
         font-size: 12px;
         margin-left: auto;
     }
@@ -96,12 +97,20 @@
         position: absolute;
         left: 40px;
         z-index: 2;
+
+        &.selected {
+            z-index: 4;
+        }
     }
 
     &.right {
         position: absolute;
         left: 80px;
         z-index: 1;
+
+        &.selected {
+            z-index: 4;
+        }
     }
 
     &:hover::before{
@@ -132,6 +141,10 @@
         width: 52px;
         z-index: -1;
     }
+
+    &.selected::before {
+        border-bottom-color: rgb(67, 119, 214);
+    }
 }
 
 .top-button-content {
@@ -164,6 +177,7 @@
     padding: 0px;
     font-size: 16px;
     color: black;
+    flex: 0 0 auto;
 
     &:hover {
         background-color: rgb(129, 223, 83);
@@ -408,7 +422,7 @@
         position: relative;
         padding: 0px;
 
-        &:hover .docCreatorMenu-zoom-button {
+        &:hover .docCreatorMenu-zoom-button-container {
             display: block;
         }
 
@@ -441,8 +455,17 @@
             }
         }
 
-        .docCreatorMenu-zoom-button{ 
+        .docCreatorMenu-zoom-button-container {
+            position: absolute;
+            top: 0px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             display: none;
+            z-index: 999;
+        }
+
+        .docCreatorMenu-zoom-button{ 
             width: 15px;
             height: 15px;
             background: whitesmoke; 
@@ -451,17 +474,11 @@
             border: 1px solid rgb(180, 180, 180);
             padding: 0px;
             font-size: 10px;
-            position: absolute;
-            top: 0px;
             z-index: 6;
             margin-left: 0px;
             margin-top: 0px;
-            margin-right: 225px;
+            margin-right: 0px; //225px
             margin-bottom: 0px;
-
-            &.zoom-in{
-                top: 15px;
-            }
         }
     }
 }
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'