From 353cadb09f4bb5d8eb1a52331ecb489b60f75176 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 21 Oct 2019 21:37:55 +0700
Subject: [PATCH] cell menu

---
 src/components/flow/Cell/index.tsx   |  2 ++
 src/components/flow/Cell/styles.scss | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx
index 49941986..28bc34b9 100644
--- a/src/components/flow/Cell/index.tsx
+++ b/src/components/flow/Cell/index.tsx
@@ -28,6 +28,8 @@ const Cell: FC<IProps> = ({ node: { id, title, thumbnail, type, blocks }, onSele
       className={classNames(styles.cell, 'vert-1', 'hor-1', { is_text: false })}
       onClick={onClick}
     >
+      <div className={styles.menu}>MENU</div>
+
       <div className={styles.face}>
         {title && <div className={styles.title}>{title}</div>}
         {text && <div className={styles.text}>{text}</div>}
diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss
index d225b1b5..547fb927 100644
--- a/src/components/flow/Cell/styles.scss
+++ b/src/components/flow/Cell/styles.scss
@@ -22,6 +22,14 @@
     }
   }
 
+  &:hover {
+    .menu {
+      opacity: 1;
+      pointer-events: all;
+      touch-action: auto;
+    }
+  }
+
   @include outer_shadow();
 }
 
@@ -124,3 +132,18 @@
   border-radius: $cell_radius;
   padding: $gap;
 }
+
+.menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  background: $content_bg;
+  z-index: 4;
+  border-radius: $radius;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 0.5s;
+}