Merge branch 'mainview-jenny' of https://github.com/brown-dash/Dash-Web into mainview-jenny

1 files changed, 39 insertions, 14 deletions

diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index f754c1ff5..c7631da84 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -60,19 +60,6 @@ export class DashboardView extends React.Component {
             this.abortCreateNewDashboard();
       }
 
-      onContextMenu = (e: React.MouseEvent): void => {
-            ContextMenu.Instance.addItem({
-                  description: "Share Dashboard", event: async () => {
-                     // ...
-                  }, icon: "edit"
-            });
-            ContextMenu.Instance.addItem({
-                  description: "Delete Dashboard", event: async () => {
-                     // ...
-                  }, icon: "trash"
-            });
-        }
-
         showContextMenu = (e: React.MouseEvent) => {
             // DocumentViewInternal.SelectAfterContextMenu = false;
             // simulateMouseClick(this._docRef?.ContentDiv, e.clientX, e.clientY + 30, e.screenX, e.screenY + 30);
@@ -87,6 +74,35 @@ export class DashboardView extends React.Component {
                   <button className="password-submit" onClick={() => { this.createNewDashboard(this.newDashboardName!) }}>Create</button>
             </div>;
       }
+      
+      _downX: number = 0;
+      _downY: number = 0;
+      @action
+      onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => {
+          // the touch onContextMenu is button 0, the pointer onContextMenu is button 2
+          if (e) {
+              e.preventDefault();
+              e.stopPropagation();
+              e.persist();
+  
+              if (!navigator.userAgent.includes("Mozilla") && (Math.abs(this._downX - e?.clientX) > 3 || Math.abs(this._downY - e?.clientY) > 3)) {
+                  return;
+              }
+              const cm = ContextMenu.Instance;
+             cm.addItem({
+                    description: "Share Dashboard", event: async () => {
+                       // ...
+                    }, icon: "edit"
+              });
+              cm.addItem({
+                    description: "Delete Dashboard", event: async () => {
+                       // ...
+                    }, icon: "trash"
+              });
+              cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15);
+          }
+        }
+  
 
       render() {
             return <>
@@ -99,11 +115,20 @@ export class DashboardView extends React.Component {
                         <div className="all-dashboards">
                               {this.getDashboards().map((dashboard) => {
                                     const href = ImageCast((dashboard.thumb as Doc)?.data)?.url.href;
-                                    return <div className="dashboard-container" key={dashboard[Id]} onClick={e => this.clickDashboard(e, dashboard)}>
+                                    return <div className="dashboard-container" key={dashboard[Id]}
+                                              onContextMenu={this.onContextMenu}  
+                                              onClick={e => this.clickDashboard(e, dashboard)}>
                                           <img src={href ?? "https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU="}></img>
                                           <div className="info">
                                                 <div className="title"> {StrCast(dashboard.title)} </div>
+<<<<<<< HEAD
                                                 <div className="more" onClick={this.showContextMenu} onContextMenu={this.onContextMenu}>
+=======
+                                                <div className="more" onPointerDown={e => {
+                                                    this._downX = e.clientX;
+                                                    this._downY = e.clientY;
+                                                }} onClick={this.onContextMenu}>
+>>>>>>> 1bb2772ee619e29ebd800192eb3df69dc0f38205
                                                       <FontAwesomeIcon color="black" size="lg" icon="bars" />
                                                 </div>
                                           </div>