dots menu on flow nodes

src/components/flow/Cell/index.tsx

@@ -65,6 +65,10 @@ const Cell: FC<IProps> = ({
     >
       {can_edit && (
         <div className={styles.menu}>
+          <div className={styles.menu_button}>
+            <Icon icon="dots-vertical" />
+          </div>
+
           <div className={styles.menu_content}>
             <Icon icon="cell-single" onClick={toggleViewDescription} />
             <div className={styles.menu_sep} />

src/components/flow/Cell/styles.scss

@@ -6,7 +6,6 @@
   background: $cell_bg;
   border-radius: $cell_radius;
   position: relative;
-  overflow: hidden;
   cursor: pointer;
   color: white;
 
@@ -22,14 +21,6 @@
     }
   }
 
-  &:hover {
-    .menu {
-      opacity: 1;
-      pointer-events: all;
-      touch-action: auto;
-    }
-  }
-
   @include outer_shadow();
 }
 
@@ -132,6 +123,7 @@
 .face {
   @include outer_shadow();
 
+  overflow: hidden;
   box-sizing: border-box;
   position: absolute;
   top: 0;
@@ -148,27 +140,56 @@
   position: absolute;
   top: 0;
   right: 0;
-  height: 100%;
-  width: 80px;
+  // height: 100%;
+  // width: 80px;
   z-index: 4;
   border-radius: $radius;
-  opacity: 0;
+  // opacity: 0;
   pointer-events: none;
   touch-action: none;
   transition: opacity 0.5s;
   box-sizing: border-box;
   // display: none;
-  padding: $gap;
+  // padding: $gap;
   display: flex;
   align-items: stretch;
   justify-content: center;
+
+  &:hover {
+    opacity: 1;
+    pointer-events: all;
+    touch-action: auto;
+
+    .menu_content {
+      opacity: 1;
+    }
+  }
+}
+
+.menu_button {
+  pointer-events: all;
+  touch-action: auto;
+  position: absolute;
+  z-index: 4;
+  width: 32px + $gap * 2;
+  height: 32px + $gap * 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.2;
+
+  svg {
+    fill: white;
+    width: 30px;
+    height: 30px;
+  }
 }
 
 .menu_content {
   flex: 1;
-  // height: 100%;
+  opacity: 0;
   background: $red_gradient;
-  padding: 60px $gap $gap $gap;
+  padding: (32px + $gap * 2) $gap $gap $gap;
   border-radius: $radius;
   display: flex;
   align-items: center;

src/sprites/Sprites.tsx

@@ -144,6 +144,11 @@ const Sprites: FC<{}> = () => (
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z" />
     </g>
+
+    <g id="dots-vertical" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M16 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
+    </g>
   </svg>
 );