From 6a54d4e65ddeec743304ee14c33e5e034ee0bdab Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 15 Jun 2018 15:50:27 -0700
Subject: [PATCH] Separate hover interactions between func node and func node
 menu

---
 ui/src/flux/components/FuncNode.tsx           | 19 +++++++++++--------
 .../components/time-machine/flux-builder.scss | 19 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/ui/src/flux/components/FuncNode.tsx b/ui/src/flux/components/FuncNode.tsx
index 2b339f538e..79ae66c07b 100644
--- a/ui/src/flux/components/FuncNode.tsx
+++ b/ui/src/flux/components/FuncNode.tsx
@@ -54,14 +54,16 @@ export default class FuncNode extends PureComponent<Props, State> {
 
     return (
       <>
-        <div
-          className={this.nodeClassName}
-          onClick={this.handleToggleEdit}
-          title="Edit function arguments"
-        >
-          <div className="func-node--connector" />
-          <div className="func-node--name">{func.name}</div>
-          <FuncArgsPreview func={func} />
+        <div className="func-node--wrapper">
+          <div
+            className={this.nodeClassName}
+            onClick={this.handleToggleEdit}
+            title="Edit function arguments"
+          >
+            <div className="func-node--connector" />
+            <div className="func-node--name">{func.name}</div>
+            <FuncArgsPreview func={func} />
+          </div>
           {this.funcMenu}
         </div>
         {this.funcArgs}
@@ -146,6 +148,7 @@ export default class FuncNode extends PureComponent<Props, State> {
           confirmText="Delete this query"
           square={true}
           confirmAction={this.handleDelete}
+          position="right"
         />
       )
     }
diff --git a/ui/src/style/components/time-machine/flux-builder.scss b/ui/src/style/components/time-machine/flux-builder.scss
index f5bac9c86f..7866f92c37 100644
--- a/ui/src/style/components/time-machine/flux-builder.scss
+++ b/ui/src/style/components/time-machine/flux-builder.scss
@@ -144,6 +144,8 @@ $flux-invalid-hover: $c-dreamsicle;
 
   &:hover,
   &.active {
+    cursor: pointer !important;
+
     .func-node--preview {
       color: $g20-white;
     }
@@ -196,7 +198,7 @@ $flux-invalid-hover: $c-dreamsicle;
 }
 
 // When a query exists unassigned to a variable
-.func-node:first-child {
+.func-node--wrapper:first-child .func-node {
   margin-left: 0;
   padding-left: $flux-node-gap;
   .func-node--connector {
@@ -248,13 +250,14 @@ $flux-invalid-hover: $c-dreamsicle;
   }
 }
 
+.func-node--wrapper {
+  display: flex;
+  align-items: center;
+}
+
 .func-node--menu {
   display: flex;
   align-items: center;
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translate(100%, -50%);
   opacity: 0;
   transition: opacity 0.25s ease;
 
@@ -264,9 +267,9 @@ $flux-invalid-hover: $c-dreamsicle;
   }
 }
 
-.func-node:hover .func-node--menu,
-.func-node.editing .func-node--menu,
-.func-node.active .func-node--menu {
+.func-node--wrapper:hover .func-node--menu,
+.func-node.editing + .func-node--menu,
+.func-node.active + .func-node--menu {
   opacity: 1;
 }