From b794a44c4f52a935767ea6c5e8098feaac915d09 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 29 Apr 2020 18:52:27 +0700
Subject: [PATCH] editor buttons fix on mobile

---
 .../node/NodeImageSlideBlock/styles.scss      |   6 +-
 src/components/node/NodePanelInner/index.tsx  |  36 ++++---
 .../node/NodePanelInner/styles.scss           | 101 ++++++++++++------
 3 files changed, 97 insertions(+), 46 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss
index 75dc86f2..c1d00973 100644
--- a/src/components/node/NodeImageSlideBlock/styles.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.scss
@@ -20,11 +20,11 @@
   @include tablet {
     margin-left: 0;
     margin-right: 0;
+    border-radius: 0;
   }
 }
 
 .image_container {
-  border-radius: $panel_radius 0 0 $panel_radius;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -45,6 +45,10 @@
     border-radius: $radius;
     box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
       transparentize($color: #000000, $amount: 0.6) 0 2px 5px;
+
+    @include tablet {
+      border-radius: 0;
+    }
   }
 
   &.is_dragging {
diff --git a/src/components/node/NodePanelInner/index.tsx b/src/components/node/NodePanelInner/index.tsx
index 0766220b..9232a222 100644
--- a/src/components/node/NodePanelInner/index.tsx
+++ b/src/components/node/NodePanelInner/index.tsx
@@ -60,23 +60,29 @@ const NodePanelInner: FC<IProps> = memo(
           </div>
 
           {can_edit && (
-            <div className={styles.editor_buttons}>
-              {can_star && (
-                <div className={classNames(styles.star, { is_heroic })}>
-                  {is_heroic ? (
-                    <Icon icon="star_full" size={24} onClick={onStar} />
-                  ) : (
-                    <Icon icon="star" size={24} onClick={onStar} />
-                  )}
-                </div>
-              )}
-
-              <div>
-                <Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+            <div className={styles.editor_menu}>
+              <div className={styles.editor_menu_button}>
+                <Icon icon="dots-vertical" size={24} onClick={onStar} />
               </div>
 
-              <div>
-                <Icon icon="edit" size={24} onClick={onEdit} />
+              <div className={styles.editor_buttons}>
+                {can_star && (
+                  <div className={classNames(styles.star, { is_heroic })}>
+                    {is_heroic ? (
+                      <Icon icon="star_full" size={24} onClick={onStar} />
+                    ) : (
+                      <Icon icon="star" size={24} onClick={onStar} />
+                    )}
+                  </div>
+                )}
+
+                <div>
+                  <Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+                </div>
+
+                <div>
+                  <Icon icon="edit" size={24} onClick={onEdit} />
+                </div>
               </div>
             </div>
           )}
diff --git a/src/components/node/NodePanelInner/styles.scss b/src/components/node/NodePanelInner/styles.scss
index e6dbba88..c6b978b1 100644
--- a/src/components/node/NodePanelInner/styles.scss
+++ b/src/components/node/NodePanelInner/styles.scss
@@ -1,3 +1,32 @@
+@mixin button {
+  margin: 0 $gap;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: darken(white, 50%);
+    transition: fill 0.25s;
+  }
+
+  &:hover {
+    svg {
+      fill: $red;
+    }
+  }
+
+  &::after {
+    content: ' ';
+    flex: 0 0 6px;
+    height: $gap;
+    width: 6px;
+    border-radius: 4px;
+    background: transparentize(black, 0.7);
+    margin-left: $gap * 2;
+  }
+}
+
 .wrap {
   display: flex;
   align-items: center;
@@ -96,36 +125,7 @@
   justify-content: center;
 
   & > * {
-    margin: 0 $gap;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      fill: darken(white, 50%);
-      transition: fill 0.25s;
-    }
-
-    &:hover {
-      svg {
-        fill: $red;
-      }
-    }
-
-    &::after {
-      content: ' ';
-      flex: 0 0 6px;
-      height: $gap;
-      width: 6px;
-      border-radius: 4px;
-      background: transparentize(black, 0.7);
-      margin-left: $gap * 2;
-    }
-
-    &:first-child {
-      margin-left: 0;
-    }
+    @include button;
   }
 
   @include tablet {
@@ -148,6 +148,20 @@
 .editor_buttons {
   @include tablet {
     display: none;
+
+    & > * {
+      &:last-child {
+        margin-right: 0;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
   }
 }
 
@@ -227,3 +241,30 @@
     fill: $orange;
   }
 }
+
+.editor_menu_button {
+  display: none !important;
+
+  @include button();
+
+  @include tablet {
+    display: flex !important;
+  }
+}
+
+.editor_menu {
+  // position: relative;
+
+  &:hover {
+    .editor_buttons {
+      display: flex;
+      position: absolute;
+      right: 0;
+      top: 100%;
+      background: darken($content_bg, 4%);
+      padding: $gap $gap * 2;
+      border-radius: $radius;
+      box-shadow: transparentize(black, 0.8) 5px 5px 5px;
+    }
+  }
+}