moved settings menu to the the documentButtonsBar

3 files changed, 30 insertions, 30 deletions

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index bbe60776f..9cd35a3c4 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -6,7 +6,7 @@ import { observer } from "mobx-react";
 import { Doc } from "../../fields/Doc";
 import { RichTextField } from '../../fields/RichTextField';
 import { Cast, NumCast, StrCast } from "../../fields/Types";
-import { emptyFunction, setupMoveUpEvents } from "../../Utils";
+import { emptyFunction, setupMoveUpEvents, simulateMouseClick } from "../../Utils";
 import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
 import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
 import { Docs } from '../documents/Documents';
@@ -218,8 +218,16 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${isAnnotating ? "Exit" : "Enter"} annotation mode`}</div></>}>
             <div className="documentButtonBar-linker" style={{ backgroundColor: isAnnotating ? "white" : "", color: isAnnotating ? "black" : "white", }}
                 onClick={e => targetDoc.isAnnotating = !targetDoc.isAnnotating}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="edit"
-                />
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="edit" />
+            </div></Tooltip >;
+    }
+
+    @computed
+    get menuButton() {
+        const targetDoc = this.view0?.props.Document;
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`Open Context Menu`}</div></>}>
+            <div className="documentButtonBar-linker" style={{ color: "white" }} onClick={e => this.openContextMenu(e)}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="bars" />
             </div></Tooltip >;
     }
 
@@ -229,8 +237,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${CurrentUserUtils.propertiesWidth > 0 ? "Close" : "Open"} Properties Panel`}</div></>}>
             <div className="documentButtonBar-linker" style={{ color: "white" }} onClick={action(e =>
                 CurrentUserUtils.propertiesWidth = CurrentUserUtils.propertiesWidth > 0 ? 0 : 250)}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="ellipsis-h"
-                />
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="ellipsis-h" />
             </div></Tooltip >;
     }
 
@@ -286,6 +293,17 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                 </div></Tooltip>;
     }
 
+    openContextMenu = (e: React.MouseEvent) => {
+        let child = SelectionManager.SelectedDocuments()[0].ContentDiv!.children[0];
+        while (child.children.length) {
+            const next = Array.from(child.children).find(c => typeof (c.className) === "string");
+            if (next?.className.includes("documentView-node")) break;
+            if (next) child = next;
+            else break;
+        }
+        simulateMouseClick(child, e.clientX, e.clientY - 30, e.screenX, e.screenY - 30);
+    }
+
     render() {
         if (!this.view0) return (null);
 
@@ -324,6 +342,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                 {this.considerGoogleDocsPull}
             </div>
             <div className="documentButtonBar-button">
+                {this.menuButton}
+            </div>
+            <div className="documentButtonBar-button">
                 {this.moreButton}
             </div>
         </div>;
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e02408559..8fcc63d71 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -171,7 +171,7 @@ $linkGap : 3px;
 
     .documentDecorations-title {
         opacity: 1;
-        grid-column-start: 3;
+        grid-column-start: 2;
         grid-column-end: 4;
         pointer-events: auto;
         overflow: hidden;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index abad53b6d..41be364fd 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -127,22 +127,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         setTimeout(() => this._keyinput.current!.focus(), 0);
     }
 
-    @action onSettingsDown = (e: React.PointerEvent): void => {
-        setupMoveUpEvents(this, e, () => false, (e) => { }, this.onSettingsClick);
-    }
-    @action onSettingsClick = (e: PointerEvent): void => {
-        if (e.button === 0 && !e.altKey && !e.ctrlKey) {
-            let child = SelectionManager.SelectedDocuments()[0].ContentDiv!.children[0];
-            while (child.children.length) {
-                const next = Array.from(child.children).find(c => typeof (c.className) === "string");
-                if (next?.className.includes("documentView-node")) break;
-                if (next) child = next;
-                else break;
-            }
-            simulateMouseClick(child, e.clientX, e.clientY + 30, e.screenX, e.screenY + 30);
-        }
-    }
-
     onBackgroundDown = (e: React.PointerEvent): void => {
         setupMoveUpEvents(this, e, this.onBackgroundMove, (e) => { }, (e) => { });
     }
@@ -607,14 +591,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         const titleArea = this._edtingTitle ?
             <input ref={this._keyinput} className="documentDecorations-title" type="text" name="dynbox" autoComplete="on" value={this._accumulatedTitle}
                 onBlur={e => this.titleBlur(true)} onChange={action(e => this._accumulatedTitle = e.target.value)} onKeyPress={this.titleEntered} /> :
-            <>
-                {minimal ? (null) : <Tooltip title={<div className="dash-tooltip">Show context menu</div>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
-                    <FontAwesomeIcon size="lg" icon="bars" />
-                </div></Tooltip>}
-                <div className="documentDecorations-title" style={{ gridColumnEnd: minimal ? 4 : 5, gridColumnStart: minimal ? 2 : 3 }} key="title" onPointerDown={this.onTitleDown} >
-                    <span style={{ width: "100%", display: "inline-block", cursor: "move" }}>{`${this.selectionTitle}`}</span>
-                </div>
-            </>;
+            <div className="documentDecorations-title" style={{ gridColumnEnd: minimal ? 4 : 5 }} key="title" onPointerDown={this.onTitleDown} >
+                <span style={{ width: "100%", display: "inline-block", cursor: "move" }}>{`${this.selectionTitle}`}</span>
+            </div>;
 
         bounds.x = Math.max(0, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
         bounds.y = Math.max(0, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;