Bug 1776361: Show hover treatment for context menu's reference item

openshift · Nov 25, 2019 · f3838c3 · f3838c3
1 parent a90fe53
commit f3838c3
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/frontend/packages/dev-console/src/components/topology2/components/nodes/ApplicationGroup.tsx b/frontend/packages/dev-console/src/components/topology2/components/nodes/ApplicationGroup.tsx
@@ -69,6 +69,7 @@ const ApplicationGroup: React.FC<ApplicationGroupProps> = ({
   canDrop,
   dropTarget,
   onContextMenu,
+  contextMenuShown,
   dragging,
 }) => {
   const [groupHover, groupHoverRef] = useHover();
@@ -120,7 +121,7 @@ const ApplicationGroup: React.FC<ApplicationGroupProps> = ({
   const pathClasses = classNames('odc2-application-group', {
     'is-highlight': canDrop,
     'is-selected': selected,
-    'is-hover': hover || (canDrop && dropTarget),
+    'is-hover': hover || (canDrop && dropTarget) || contextMenuShown,
   });
 
   return (
@@ -131,7 +132,9 @@ const ApplicationGroup: React.FC<ApplicationGroupProps> = ({
           <path
             ref={refs}
             filter={createSvgIdUrl(
-              hover || dragging ? NODE_SHADOW_FILTER_ID_HOVER : NODE_SHADOW_FILTER_ID,
+              hover || dragging || contextMenuShown
+                ? NODE_SHADOW_FILTER_ID_HOVER
+                : NODE_SHADOW_FILTER_ID,
             )}
             className={pathClasses}
             d={pathRef.current}

diff --git a/frontend/packages/dev-console/src/components/topology2/components/nodes/BaseNode.tsx b/frontend/packages/dev-console/src/components/topology2/components/nodes/BaseNode.tsx
@@ -57,14 +57,15 @@ const BaseNode: React.FC<BaseNodeProps> = ({
   onHideCreateConnector,
   onShowCreateConnector,
   onContextMenu,
+  contextMenuShown,
 }) => {
   const [hover, hoverRef] = useHover();
   useAnchor(EllipseAnchor);
   const cx = element.getBounds().width / 2;
   const cy = element.getBounds().height / 2;
 
   const contentsClasses = classNames('odc2-base-node__contents', {
-    'is-hover': hover,
+    'is-hover': hover || contextMenuShown,
     'is-highlight': canDrop,
     'is-dragging': dragging || edgeDragging,
     'is-droppable': dropTarget && canDrop,
@@ -95,7 +96,7 @@ const BaseNode: React.FC<BaseNodeProps> = ({
           cy={cy}
           r={outerRadius}
           filter={createSvgIdUrl(
-            hover || dragging || edgeDragging || dropTarget
+            hover || dragging || edgeDragging || dropTarget || contextMenuShown
               ? NODE_SHADOW_FILTER_ID_HOVER
               : NODE_SHADOW_FILTER_ID,
           )}

diff --git a/frontend/packages/dev-console/src/components/topology2/components/nodes/EventSource.tsx b/frontend/packages/dev-console/src/components/topology2/components/nodes/EventSource.tsx
@@ -28,6 +28,7 @@ const EventSource: React.FC<EventSourceProps> = ({
   selected,
   onSelect,
   onContextMenu,
+  contextMenuShown,
   dragNodeRef,
   dragging,
 }) => {
@@ -50,7 +51,9 @@ const EventSource: React.FC<EventSourceProps> = ({
         className="odc-event-source__bg"
         ref={svgAnchorRef}
         filter={createSvgIdUrl(
-          hover || dragging ? NODE_SHADOW_FILTER_ID_HOVER : NODE_SHADOW_FILTER_ID,
+          hover || dragging || contextMenuShown
+            ? NODE_SHADOW_FILTER_ID_HOVER
+            : NODE_SHADOW_FILTER_ID,
         )}
         points={`${width / 2}, ${(height - size) / 2} ${width - (width - size) / 2},${height /
           2} ${width / 2},${height - (height - size) / 2} ${(width - size) / 2},${height / 2}`}

diff --git a/frontend/packages/dev-console/src/components/topology2/components/nodes/KnativeService.tsx b/frontend/packages/dev-console/src/components/topology2/components/nodes/KnativeService.tsx
@@ -37,6 +37,7 @@ const KnativeService: React.FC<EventSourceProps> = ({
   selected,
   onSelect,
   onContextMenu,
+  contextMenuShown,
   dragNodeRef,
   dragging,
   regrouping,
@@ -74,7 +75,9 @@ const KnativeService: React.FC<EventSourceProps> = ({
           rx="5"
           ry="5"
           filter={createSvgIdUrl(
-            hover || innerHover || dragging ? NODE_SHADOW_FILTER_ID_HOVER : NODE_SHADOW_FILTER_ID,
+            hover || innerHover || dragging || contextMenuShown
+              ? NODE_SHADOW_FILTER_ID_HOVER
+              : NODE_SHADOW_FILTER_ID,
           )}
         />
       </Layer>

diff --git a/frontend/packages/topology/src/behavior/withContextMenu.tsx b/frontend/packages/topology/src/behavior/withContextMenu.tsx
@@ -8,6 +8,7 @@ type Reference = React.ComponentProps<typeof ContextMenu>['reference'];
 
 export type WithContextMenuProps = {
   onContextMenu: (e: React.MouseEvent) => void;
+  contextMenuShown: boolean;
 };
 
 export const withContextMenu = <E extends TopologyElement>(
@@ -34,7 +35,11 @@ export const withContextMenu = <E extends TopologyElement>(
 
     return (
       <>
-        <WrappedComponent {...props as any} onContextMenu={onContextMenu} />
+        <WrappedComponent
+          {...props as any}
+          onContextMenu={onContextMenu}
+          contextMenuShown={!!reference}
+        />
         {reference ? (
           <ContextMenu
             reference={reference}