added contextMenus to dashboards in dashboardView

1 files changed, 36 insertions, 16 deletions

diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 027cfd376..d24cde149 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -66,6 +66,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 <>
@@ -78,25 +107,16 @@ 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>
-                                                <div className="more" onClick={e => {
-                                                      const dashView = DocumentManager.Instance.getDocumentView(dashboard);
-                                                      console.log(dashView)
-                                                      ContextMenu.Instance.addItem({
-                                                            description: "Share Dashboard", event: async () => {
-                                                               // ...
-                                                            }, icon: "edit"
-                                                      });
-                                                      ContextMenu.Instance.addItem({
-                                                            description: "Delete Dashboard", event: async () => {
-                                                               // ...
-                                                            }, icon: "trash"
-                                                      });
-                                                      dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
-                                                }}>
+                                                <div className="more" onPointerDown={e => {
+                                                    this._downX = e.clientX;
+                                                    this._downY = e.clientY;
+                                                }} onClick={this.onContextMenu}>
                                                       <FontAwesomeIcon color="black" size="lg" icon="bars" />
                                                 </div>
                                           </div>