From 0ea62ea2367650c5f0c4e9afdd9142284b259c67 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Thu, 4 May 2023 19:59:38 +0300
Subject: [PATCH] fix broken float menu logic

---
 .../EditorFloatingMenu.module.scss                |  4 ++--
 .../EditorFloatingMenu/EditorFloatingMenu.tsx     | 15 ++++++++++-----
 .../Editor/EditorFloatingMenu/Menu/Menu.tsx       |  1 +
 .../Editor/UploadModal/UploadModalContent.tsx     |  1 +
 src/components/Feed/Sidebar/Sidebar.tsx           |  6 +-----
 src/components/Nav/Header.module.scss             | 12 ++++++++----
 src/components/_shared/Icon/Icon.module.scss      |  1 +
 7 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss
index 83d6bdbd..0e677cbb 100644
--- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss
+++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss
@@ -15,9 +15,9 @@
 
   .menuHolder {
     background: #fff;
-    left: calc(100% + 1rem);
+    left: 40px;
     position: absolute;
-    top: -0.8rem;
+    top: -0.4rem;
     min-width: 64vw;
   }
 }
diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
index 30d91a07..43ea8501 100644
--- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
+++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx
@@ -32,7 +32,7 @@ const validateEmbed = async (value) => {
 
 export const EditorFloatingMenu = (props: FloatingMenuProps) => {
   const { t } = useLocalize()
-  const [selectedMenuItem, setSelectedMenuItem] = createSignal<MenuItem | null>(null)
+  const [selectedMenuItem, setSelectedMenuItem] = createSignal<MenuItem | undefined>()
   const [menuOpen, setMenuOpen] = createSignal<boolean>(false)
   const handleEmbedFormSubmit = async (value: string) => {
     // TODO: add support instagram embed (blockquote)
@@ -53,14 +53,19 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
     }
   })
   const closeUploadModalHandler = () => {
-    setSelectedMenuItem(null)
+    setSelectedMenuItem()
     setMenuOpen(false)
   }
 
   return (
     <>
       <div ref={props.ref} class={styles.editorFloatingMenu}>
-        <button type="button" onClick={() => setMenuOpen(!menuOpen())}>
+        <button
+          type="button"
+          onClick={() => {
+            setMenuOpen(!menuOpen())
+          }}
+        >
           <Icon name="editor-plus" />
         </button>
         <Show when={menuOpen()}>
@@ -73,7 +78,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
                 placeholder={t('Paste Embed code')}
                 showInput={true}
                 onClose={closeUploadModalHandler}
-                onClear={() => setSelectedMenuItem(null)}
+                onClear={() => setSelectedMenuItem()}
                 validate={validateEmbed}
                 onSubmit={handleEmbedFormSubmit}
                 errorMessage={t('Error')}
@@ -83,7 +88,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
         </Show>
       </div>
       <Modal variant="narrow" name="uploadImage" onClose={closeUploadModalHandler}>
-        <UploadModalContent closeCallback={() => setSelectedMenuItem(null)} editor={props.editor} />
+        <UploadModalContent closeCallback={() => setSelectedMenuItem()} editor={props.editor} />
       </Modal>
     </>
   )
diff --git a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx b/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx
index 3a2b63ee..74b5c52b 100644
--- a/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx
+++ b/src/components/Editor/EditorFloatingMenu/Menu/Menu.tsx
@@ -2,6 +2,7 @@ import styles from './Menu.module.scss'
 import { Icon } from '../../../_shared/Icon'
 
 export type MenuItem = 'image' | 'embed' | 'horizontal-rule'
+
 type Props = {
   selectedItem: (value: string) => void
 }
diff --git a/src/components/Editor/UploadModal/UploadModalContent.tsx b/src/components/Editor/UploadModal/UploadModalContent.tsx
index 004de8aa..52b64753 100644
--- a/src/components/Editor/UploadModal/UploadModalContent.tsx
+++ b/src/components/Editor/UploadModal/UploadModalContent.tsx
@@ -44,6 +44,7 @@ export const UploadModalContent = (props: Props) => {
       setIsUploading(true)
       const fileUrl = await handleFileUpload(file)
       setIsUploading(false)
+      props.closeCallback()
       renderImage(fileUrl)
     } catch (error) {
       console.error('[upload image] error', error)
diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx
index 94863863..bf76695e 100644
--- a/src/components/Feed/Sidebar/Sidebar.tsx
+++ b/src/components/Feed/Sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { createSignal, For } from 'solid-js'
+import { For } from 'solid-js'
 import type { Author } from '../../../graphql/types.gen'
 import { useAuthorsStore } from '../../../stores/zine/authors'
 import { Icon } from '../../_shared/Icon'
@@ -29,10 +29,6 @@ export const Sidebar = (props: FeedSidebarProps) => {
   const { articlesByTopic } = useArticlesStore()
   const { topicEntities } = useTopicsStore()
 
-  createSignal(() => {
-    console.log('!!! topicEntities:', topicEntities())
-  })
-
   const checkTopicIsSeen = (topicSlug: string) => {
     return articlesByTopic()[topicSlug]?.every((article) => Boolean(seen()[article.slug]))
   }
diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index c941b577..fe344927 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -484,11 +484,15 @@
       width: 100%;
     }
   }
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
-  img {
-    height: 20px;
-    vertical-align: middle;
-    width: auto;
+    img {
+      height: 20px;
+      width: auto;
+    }
   }
 
   .textLabel {
diff --git a/src/components/_shared/Icon/Icon.module.scss b/src/components/_shared/Icon/Icon.module.scss
index b5602d55..6618efa9 100644
--- a/src/components/_shared/Icon/Icon.module.scss
+++ b/src/components/_shared/Icon/Icon.module.scss
@@ -5,6 +5,7 @@
   img {
     width: 100%;
     height: 100%;
+    display: block;
   }
 }