From 772462ead9bd14a23c850a49a2d2edc965235b88 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Tue, 16 Mar 2021 10:54:06 +0100
Subject: [PATCH] WIP: code cleanup for context menu; still not working in
 dashboard edit mode

---
 src/widget/widget-context-menu.js | 44 +++++++++++++++----------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/widget/widget-context-menu.js b/src/widget/widget-context-menu.js
index d4cb271..5191e0d 100644
--- a/src/widget/widget-context-menu.js
+++ b/src/widget/widget-context-menu.js
@@ -18,7 +18,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Menu, Item, Separator, useContextMenu } from 'react-contexify';
-import 'react-contexify/dist/ReactContexify.css';
 import Widget from './widget';
 
 class WidgetContextMenu extends React.Component {
@@ -94,40 +93,40 @@ class WidgetContextMenu extends React.Component {
     }
   };
 
+
   render() {
     const isLocked = this.props.widget.locked;
-    const ContextMenu = () => (
-      <Menu id={'widgetMenu'+ this.props.index} style={{zIndex: 1000, display: 'inline-block'}}>
-      <Item disabled={isLocked} onClick={this.editWidget}>Edit</Item>
-      <Item disabled={isLocked} onClick={this.duplicateWidget}>Duplicate</Item>
-      <Item disabled={isLocked} onClick={this.deleteWidget}>Delete</Item>
-
-      <Separator />
-
-      <Item disabled={isLocked} onClick={this.moveAbove}>Move above</Item>
-      <Item disabled={isLocked} onClick={this.moveToFront}>Move to front</Item>
-      <Item disabled={isLocked} onClick={this.moveUnderneath}>Move underneath</Item>
-      <Item disabled={isLocked} onClick={this.moveToBack}>Move to back</Item>
-
-      <Separator />
-
-      <Item disabled={isLocked} onClick={this.lockWidget}>Lock</Item>
-      <Item disabled={isLocked === false} onClick={this.unlockWidget}>Unlock</Item>
-      </Menu>
-  );
 
     let dim = {
       width: '100%',
       height: '100%'
     };
 
-    const { show } = useContextMenu({id:'widgetMenu'+ this.props.index, style:dim} )
+    const { show } = useContextMenu({id:'widgetMenu'+ this.props.index} )
     function showMenu(e) {
       e.preventDefault();
       show(e);
     }
 
     return (<div onContextMenu={showMenu} style={dim}>
+      <Menu id={'widgetMenu'+ this.props.index}>
+        <Item disabled={isLocked} onClick={this.editWidget}>Edit</Item>
+        <Item disabled={isLocked} onClick={this.duplicateWidget}>Duplicate</Item>
+        <Item disabled={isLocked} onClick={this.deleteWidget}>Delete</Item>
+
+        <Separator />
+
+        <Item disabled={isLocked} onClick={this.moveAbove}>Move above</Item>
+        <Item disabled={isLocked} onClick={this.moveToFront}>Move to front</Item>
+        <Item disabled={isLocked} onClick={this.moveUnderneath}>Move underneath</Item>
+        <Item disabled={isLocked} onClick={this.moveToBack}>Move to back</Item>
+
+        <Separator />
+
+        <Item disabled={isLocked} onClick={this.lockWidget}>Lock</Item>
+        <Item disabled={isLocked === false} onClick={this.unlockWidget}>Unlock</Item>
+      </Menu>
+
       <Widget
         data={this.props.widget}
         onWidgetChange={this.props.onWidgetChange}
@@ -135,7 +134,8 @@ class WidgetContextMenu extends React.Component {
         index={this.props.index}
         paused={this.props.paused}
       />
-      <ContextMenu />
+
+
     </div>);
   }
 }