From 08a208200bd25b59155b9cce96decb96aa948784 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 17 Jul 2024 20:15:26 -0400
Subject: UI overhaul for topbar

---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 62 ++++++++++++++--------
 1 file changed, 39 insertions(+), 23 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 48b87fae7..27c5b17ef 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -54,7 +54,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _startPos?: {x: number, y: number};
     @observable _shouldDisplay: boolean = false;
 
-    @observable _menuContent: 'templates' | 'options' = 'templates';
+    @observable _menuContent: 'templates' | 'options' | 'saved' = 'templates';
     @observable _dragging: boolean = false;
     @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
@@ -368,11 +368,44 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 {this._layout.type ? this.layoutConfigOptions: null}
                 {this._layoutPreview ? this.layoutPreviewContents : null}
                 {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))}
+                <button 
+                    className='docCreatorMenu-create-docs-button'
+                    onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
+                            undoable(clickEv => {
+                                clickEv.stopPropagation();
+                                if (!this._selectedTemplate) return;
+                                const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
+                                this._dataViz?.createDocsFromTemplate(templateInfo);
+                            }, 'make docs')
+                        )
+                    }>
+                    Create
+                </button>
             </div>
         );
     }
 
     render() {
+        const topButton = (icon: string, func: Function, tag: string) => {
+            return (
+                <div className={`top-button-container ${tag}`}>
+                    <div 
+                        className="top-button-content"
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {func()}))}>
+                        <FontAwesomeIcon icon={icon as any}/>
+                    </div>
+                </div>
+            );
+        }
+
+        const onPreviewSelected = () => {this._menuContent = 'templates'}
+        const onSavedSelected = () => {this._menuContent = 'saved'}
+        const onOptionsSelected = () => {
+            this._menuContent = 'options';
+            if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+        }
+
+
         return (
             <div className='docCreatorMenu'>
                 {!this._shouldDisplay ? undefined : 
@@ -435,28 +468,11 @@ 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';
-                                    if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
-                                }))}>
-                                <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
-                            </button>
-                            <button 
-                            className='docCreatorMenu-menu-button right'
-                            onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
-                                    undoable(clickEv => {
-                                        clickEv.stopPropagation();
-                                        if (!this._selectedTemplate) return;
-                                        const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
-
-                                        this._dataViz?.createDocsFromTemplate(templateInfo);
-                                    }, 'make docs')
-                                )
-                            }>
-                                <FontAwesomeIcon icon={'plus'}/>
-                            </button>
+                            <div className='docCreatorMenu-top-buttons-container'>
+                                {topButton('table-cells', onPreviewSelected, 'left')}
+                                {topButton('bars', onOptionsSelected, 'middle')}
+                                {topButton('floppy-disk', onSavedSelected, 'right')}
+                            </div>
                             <button 
                                 className='docCreatorMenu-menu-button close-menu'
                                 onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
-- 
cgit v1.2.3-70-g09d2