From 8b3e118a7bac21ac3886320f220ca7a9b85cd502 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 25 Jan 2022 16:16:13 +0700
Subject: [PATCH] fixed editor buttons appearance

---
 src/components/node/NodeEditMenu/index.tsx    |  53 +++++++++
 .../node/NodeEditMenu/styles.module.scss      | 109 ++++++++++++++++++
 src/components/node/NodeTitle/index.tsx       |  32 ++---
 .../node/NodeTitle/styles.module.scss         |  66 +----------
 4 files changed, 172 insertions(+), 88 deletions(-)
 create mode 100644 src/components/node/NodeEditMenu/index.tsx
 create mode 100644 src/components/node/NodeEditMenu/styles.module.scss

diff --git a/src/components/node/NodeEditMenu/index.tsx b/src/components/node/NodeEditMenu/index.tsx
new file mode 100644
index 00000000..1b85ea2b
--- /dev/null
+++ b/src/components/node/NodeEditMenu/index.tsx
@@ -0,0 +1,53 @@
+import React, { VFC } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon } from '~/components/input/Icon';
+
+import styles from './styles.module.scss';
+
+interface NodeEditMenuProps {
+  canStar: boolean;
+
+  isHeroic: boolean;
+  isLocked: boolean;
+
+  onStar: () => void;
+  onLock: () => void;
+  onEdit: () => void;
+}
+
+const NodeEditMenu: VFC<NodeEditMenuProps> = ({
+  canStar,
+  isHeroic,
+  isLocked,
+  onStar,
+  onLock,
+  onEdit,
+}) => (
+  <div className={styles.editor_menu}>
+    <div className={styles.editor_menu_button}>
+      <Icon icon="dots-vertical" size={24} />
+    </div>
+
+    <div className={styles.editor_buttons}>
+      {canStar && (
+        <div className={classNames(styles.star, { [styles.is_heroic]: isHeroic })}>
+          {isHeroic ? (
+            <Icon icon="star_full" size={24} onClick={onStar} />
+          ) : (
+            <Icon icon="star" size={24} onClick={onStar} />
+          )}
+        </div>
+      )}
+
+      <div>
+        <Icon icon={isLocked ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+      </div>
+
+      <Icon icon="edit" size={24} onClick={onEdit} />
+    </div>
+  </div>
+);
+
+export { NodeEditMenu };
diff --git a/src/components/node/NodeEditMenu/styles.module.scss b/src/components/node/NodeEditMenu/styles.module.scss
new file mode 100644
index 00000000..70b4fde1
--- /dev/null
+++ b/src/components/node/NodeEditMenu/styles.module.scss
@@ -0,0 +1,109 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+@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;
+  }
+}
+
+.editor_buttons {
+  flex: 0;
+  padding-right: $gap;
+  fill: transparentize(white, 0.7);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    @include button;
+  }
+
+  @include tablet {
+    align-self: center;
+    display: none;
+
+    & > * {
+      &:last-child {
+        margin-right: 0;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+
+.star {
+  transition: fill, stroke 0.25s;
+  will-change: transform;
+
+  .is_heroic {
+    svg {
+      fill: $orange;
+    }
+  }
+
+  &:hover {
+    fill: $orange;
+  }
+}
+
+.editor_menu_button {
+  display: none !important;
+
+  @include button();
+
+  @include tablet {
+    display: flex !important;
+  }
+}
+
+.editor_menu {
+  &:hover {
+    .editor_buttons {
+      @include tablet {
+        display: flex;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        background: darken($content_bg, 4%);
+        padding: $gap * 2;
+        border-radius: $radius;
+        box-shadow: transparentize(black, 0.8) 5px 5px 5px;
+        transform: translate(0, -10px);
+        z-index: 10;
+      }
+    }
+  }
+}
diff --git a/src/components/node/NodeTitle/index.tsx b/src/components/node/NodeTitle/index.tsx
index 036d5046..38af78e7 100644
--- a/src/components/node/NodeTitle/index.tsx
+++ b/src/components/node/NodeTitle/index.tsx
@@ -3,6 +3,7 @@ import React, { memo, VFC } from 'react';
 import classNames from 'classnames';
 
 import { Icon } from '~/components/input/Icon';
+import { NodeEditMenu } from '~/components/node/NodeEditMenu';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { getPrettyDate } from '~/utils/dom';
 
@@ -74,29 +75,14 @@ const NodeTitle: VFC<IProps> = memo(
           </div>
 
           {canEdit && (
-            <div className={styles.editor_menu}>
-              <div className={styles.editor_menu_button}>
-                <Icon icon="dots-vertical" size={24} />
-              </div>
-
-              <div className={styles.editor_buttons}>
-                {canStar && (
-                  <div className={classNames(styles.star, { [styles.is_heroic]: isHeroic })}>
-                    {isHeroic ? (
-                      <Icon icon="star_full" size={24} onClick={onStar} />
-                    ) : (
-                      <Icon icon="star" size={24} onClick={onStar} />
-                    )}
-                  </div>
-                )}
-
-                <div>
-                  <Icon icon={isLocked ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
-                </div>
-
-                {!!id && <Icon icon="edit" size={24} onClick={onEdit} />}
-              </div>
-            </div>
+            <NodeEditMenu
+              canStar={canStar}
+              isHeroic={isHeroic}
+              isLocked={isLocked}
+              onStar={onStar}
+              onLock={onLock}
+              onEdit={onEdit}
+            />
           )}
 
           <div className={styles.buttons}>
diff --git a/src/components/node/NodeTitle/styles.module.scss b/src/components/node/NodeTitle/styles.module.scss
index 5645c83a..22b47451 100644
--- a/src/components/node/NodeTitle/styles.module.scss
+++ b/src/components/node/NodeTitle/styles.module.scss
@@ -95,8 +95,7 @@
   min-width: 0;
 }
 
-.buttons,
-.editor_buttons {
+.buttons {
   flex: 0;
   padding-right: $gap;
   fill: transparentize(white, 0.7);
@@ -126,26 +125,6 @@
   }
 }
 
-.editor_buttons {
-  @include tablet {
-    display: none;
-
-    & > * {
-      &:last-child {
-        margin-right: 0;
-
-        &::after {
-          display: none;
-        }
-      }
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-}
-
 .mark {
   flex: 0 0 32px;
   position: relative;
@@ -233,46 +212,3 @@
   pointer-events: none;
   touch-action: none;
 }
-
-.star {
-  transition: fill, stroke 0.25s;
-  will-change: transform;
-
-  .is_heroic {
-    svg {
-      fill: $orange;
-    }
-  }
-
-  &:hover {
-    fill: $orange;
-  }
-}
-
-.editor_menu_button {
-  display: none !important;
-
-  @include button();
-
-  @include tablet {
-    display: flex !important;
-  }
-}
-
-.editor_menu {
-  &:hover {
-    .editor_buttons {
-      @include tablet {
-        display: flex;
-        position: absolute;
-        right: 0;
-        top: 100%;
-        background: darken($content_bg, 4%);
-        padding: $gap * 2;
-        border-radius: $radius;
-        box-shadow: transparentize(black, 0.8) 5px 5px 5px;
-        transform: translate(0, -10px);
-      }
-    }
-  }
-}