feat: Open card actions on right-click

client/src/components/cards/Card/Card.jsx

@@ -5,13 +5,13 @@
 
 import upperFirst from 'lodash/upperFirst';
 import camelCase from 'lodash/camelCase';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Icon } from 'semantic-ui-react';
 import { push } from '../../../lib/redux-router';
-import { usePopup } from '../../../lib/popup';
+import { closePopup, usePopup } from '../../../lib/popup';
 
 import selectors from '../../../selectors';
 import Paths from '../../../constants/Paths';
@@ -51,6 +51,8 @@ const Card = React.memo(({ id, isInline }) => {
   const dispatch = useDispatch();
   const [isEditNameOpened, setIsEditNameOpened] = useState(false);
 
+  const actionsPopupRef = useRef(null);
+
   const handleClick = useCallback(() => {
     if (document.activeElement) {
       document.activeElement.blur();
@@ -59,6 +61,17 @@ const Card = React.memo(({ id, isInline }) => {
     dispatch(push(Paths.CARDS.replace(':id', id)));
   }, [id, dispatch]);
 
+  const handleContextMenu = useCallback((event) => {
+    if (!actionsPopupRef.current) {
+      return;
+    }
+
+    event.preventDefault();
+
+    closePopup();
+    actionsPopupRef.current.open();
+  }, []);
+
   const handleNameEdit = useCallback(() => {
     setIsEditNameOpened(true);
   }, []);
@@ -110,12 +123,13 @@ const Card = React.memo(({ id, isInline }) => {
           <div
             className={classNames(styles.content, card.isClosed && styles.contentDisabled)}
             onClick={handleClick}
+            onContextMenu={handleContextMenu}
           >
             <Content cardId={id} />
             {colorLineNode}
           </div>
           {canUseActions && (
-            <ActionsPopup cardId={id} onNameEdit={handleNameEdit}>
+            <ActionsPopup ref={actionsPopupRef} cardId={id} onNameEdit={handleNameEdit}>
               <Button className={styles.actionsButton}>
                 <Icon fitted name="pencil" size="small" />
               </Button>