feat(flows): improve add cell button ux (#19400)

* refactor: WIP redesign add cell interaction * feat: redesign add cell interaction
influxdata · Aug 20, 2020 · 9b02fa6 · 9b02fa6
1 parent 45b1f86
commit 9b02fa6
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 85 deletions.
diff --git a/ui/src/notebooks/NotebookVariables.scss b/ui/src/notebooks/NotebookVariables.scss
@@ -4,6 +4,8 @@ $notebook-header-height: 46px;
 
 $notebook-panel--gutter: $cf-marg-d;
 $notebook-panel--bg: mix($g1-raven, $g2-kevlar, 50%);
+$notebook-panel--node-gap: $cf-marg-d + $cf-marg-b;
+$notebook-panel--node-dot: 20px;
 
 $notebook-divider-height: ($cf-marg-a * 2) + $cf-border;
 $notebook-divider-color: $g2-kevlar;

diff --git a/ui/src/notebooks/components/panel/InsertCellButton.scss b/ui/src/notebooks/components/panel/InsertCellButton.scss
@@ -2,54 +2,56 @@
 @import '~src/notebooks/NotebookVariables.scss';
 
 .notebook-divider {
-  height: 12px;
-  margin: $cf-marg-a $notebook-panel--gutter;
-  position: relative;
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    background-color: $notebook-divider-color;
-    height: $cf-border;
-    transform: translateY(-50%);
-    z-index: 0;
-  }
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: $notebook-panel--node-gap;
+  height: $notebook-panel--node-gap;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  z-index: 2;
 
   &:hover {
     cursor: pointer;
   }
+}
 
-  &:last-of-type {
-    margin-bottom: 25vh;
-  }
+.notebook-panel:hover .notebook-divider,
+.notebook-panel:last-child .notebook-divider,
+.notebook-divider__popped {
+  opacity: 1;
 }
 
-.notebook-divider:hover:after,
-.notebook-divider__popped:after {
-  background-color: $c-star;
+.notebook-panel:last-child .notebook-divider {
+  transform: translateY(100%);
+}
+
+.notebook-panel:last-child .notebook-divider:after {
+  content: '';
+  width: $cf-border;
+  position: absolute;
+  left: 50%;
+  top: 5px;
+  height: 150%;
+  transform: translate(-50%, -100%);
+  @include gradient-v($g5-pepper, $c-amethyst);
+}
+
+.notebook-panel__hidden.notebook-panel:last-child .notebook-divider:after {
+  height: 50%;
 }
 
 .notebook-divider--button {
+  border-radius: 50%;
   position: absolute;
-  z-index: 1;
   top: 50%;
+  left: 50%;
   transform: translate(-50%, -50%);
-  border-radius: 50%;
-  opacity: 0;
   cursor: pointer;
 
   &:after {
     border-radius: 50%;
   }
-
-  .notebook-divider:hover &,
-  .notebook-divider__popped &,
-  .notebook-divider__popped:hover & {
-    opacity: 1;
-  }
 }
 
 .insert-cell-menu {

diff --git a/ui/src/notebooks/components/panel/InsertCellButton.tsx b/ui/src/notebooks/components/panel/InsertCellButton.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, useRef, useEffect, useContext} from 'react'
+import React, {FC, useRef, useContext} from 'react'
 
 // Components
 import {
@@ -29,45 +29,8 @@ const InsertCellButton: FC<Props> = ({id}) => {
   const dividerRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const popoverVisible = useRef<boolean>(false)
-  const buttonPositioningEnabled = useRef<boolean>(false)
   const index = notebook.data.indexOf(id)
 
-  useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-
-    return () => {
-      window.removeEventListener('mousemove', handleMouseMove)
-    }
-  }, [])
-
-  const handleMouseMove = (e: MouseEvent): void => {
-    if (!dividerRef.current || !buttonRef.current) {
-      return
-    }
-
-    if (
-      popoverVisible.current === false &&
-      buttonPositioningEnabled.current === true
-    ) {
-      const {pageX} = e
-      const {left, width} = dividerRef.current.getBoundingClientRect()
-
-      const minLeft = 0
-      const maxLeft = width
-
-      const buttonLeft = Math.min(Math.max(pageX - left, minLeft), maxLeft)
-      buttonRef.current.setAttribute('style', `left: ${buttonLeft}px`)
-    }
-  }
-
-  const handleMouseEnter = () => {
-    buttonPositioningEnabled.current = true
-  }
-
-  const handleMouseLeave = () => {
-    buttonPositioningEnabled.current = false
-  }
-
   const handlePopoverShow = () => {
     popoverVisible.current = true
     dividerRef.current &&
@@ -81,12 +44,7 @@ const InsertCellButton: FC<Props> = ({id}) => {
   }
 
   return (
-    <div
-      className="notebook-divider"
-      ref={dividerRef}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
+    <div className="notebook-divider" ref={dividerRef}>
       <SquareButton
         icon={IconFont.Plus}
         ref={buttonRef}

diff --git a/ui/src/notebooks/components/panel/NotebookPanel.tsx b/ui/src/notebooks/components/panel/NotebookPanel.tsx
@@ -67,6 +67,9 @@ const NotebookPanelHeader: FC<HeaderProps> = ({id, controls}) => {
 
   return (
     <div className="notebook-panel--header">
+      <div className="notebook-panel--node-wrapper">
+        <div className="notebook-panel--node" />
+      </div>
       <FlexBox
         className="notebook-panel--header-left"
         alignItems={AlignItems.Center}
@@ -142,15 +145,13 @@ const NotebookPanel: FC<Props> = ({id, children, controls}) => {
     return null
   }
   return (
-    <>
-      <ClickOutside onClickOutside={handleClickOutside}>
-        <div className={panelClassName} onClick={handleClick} ref={panelRef}>
-          <NotebookPanelHeader id={id} controls={controls} />
-          <div className="notebook-panel--body">{children}</div>
-        </div>
-      </ClickOutside>
-      {!notebook.readOnly && <InsertCellButton id={id} />}
-    </>
+    <ClickOutside onClickOutside={handleClickOutside}>
+      <div className={panelClassName} onClick={handleClick} ref={panelRef}>
+        <NotebookPanelHeader id={id} controls={controls} />
+        <div className="notebook-panel--body">{children}</div>
+        {!notebook.readOnly && <InsertCellButton id={id} />}
+      </div>
+    </ClickOutside>
   )
 }
 

diff --git a/ui/src/notebooks/style.scss b/ui/src/notebooks/style.scss
@@ -30,11 +30,30 @@
 }
 
 .notebook-panel {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   border-radius: $cf-radius;
   margin: 0 $notebook-panel--gutter;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: $cf-border;
+    background-color: $g5-pepper;
+    bottom: 0;
+    top: 0;
+    left: ($notebook-panel--node-gap / 2) - ($cf-border / 2);
+  }
+
+  &:first-child::after {
+    top: ($notebook-header-height - $notebook-panel--node-dot) / 2;
+  }
+
+  &:last-child {
+    margin-bottom: 25vh;
+  }
 }
 
 .notebook-panel--header,
@@ -46,7 +65,7 @@
   border-radius: $cf-radius $cf-radius 0 0;
   height: $notebook-header-height;
   flex: 0 0 $notebook-header-height;
-  padding: 0 $cf-marg-b;
+  padding-right: $cf-marg-b;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -62,6 +81,45 @@
   opacity: 0;
 }
 
+.notebook-panel--node-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  width: $notebook-panel--node-gap;
+  position: relative;
+  z-index: 2;
+}
+
+.notebook-panel--node {
+  width: $notebook-panel--node-dot;
+  height: $notebook-panel--node-dot;
+  border-radius: 50%;
+  background-color: $g1-raven;
+  border: $cf-border solid $g5-pepper;
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    background-color: $c-laser;
+    transform: translate(-50%, -50%) scale(1.5, 1.5);
+    width: $cf-marg-b;
+    height: $cf-marg-b;
+    box-shadow: 0 0 8px 2px $c-void, 0 0 4px 2px $c-pool, 0 0 1px 1px$c-laser;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+    opacity: 0;
+  }
+
+  .notebook-panel__focus &:after {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1, 1);
+  }
+}
+
 .notebook-panel--title,
 .notebook-panel--data-source {
   font-size: 14px;
@@ -121,7 +179,7 @@
 .notebook-panel--body {
   border-radius: 0 0 $cf-radius $cf-radius;
   padding: $cf-marg-b;
-  padding-left: $cf-marg-d;
+  padding-left: $notebook-panel--node-gap;
   padding-top: 0;
   position: relative;
 }