From c60b7e5c53d348b07a72abe1ea60b1e989bdba8c Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Wed, 17 May 2023 07:04:38 +0300
Subject: [PATCH] Add tooltip to Article details (#98)

* Add tooltip to Article details

* Hide popover f SharePopup is visible
---
 src/components/Article/Article.module.scss |  5 +-
 src/components/Article/FullArticle.tsx     | 75 +++++++++++++---------
 src/components/Article/SharePopup.tsx      | 13 +++-
 src/components/Feed/ArticleCard.tsx        | 61 +++++++++++-------
 src/components/_shared/Popover/Popover.tsx | 29 +++++----
 src/components/_shared/Popup/Popup.tsx     |  2 +-
 6 files changed, 113 insertions(+), 72 deletions(-)

diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss
index 40f186bd..d3b75047 100644
--- a/src/components/Article/Article.module.scss
+++ b/src/components/Article/Article.module.scss
@@ -149,6 +149,7 @@ img {
   display: inline-block;
   margin: 0 3.2rem 1em 0;
   vertical-align: baseline;
+  cursor: pointer;
 
   .icon {
     height: 1.6em;
@@ -194,10 +195,6 @@ img {
     margin-right: 0;
   }
 
-  .iconEdit {
-    margin-right: 0.3em;
-  }
-
   &:hover {
     background: #000;
 
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index bf4beaa6..7559fee4 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -20,6 +20,7 @@ import { useLocalize } from '../../context/localize'
 import stylesHeader from '../Nav/Header.module.scss'
 import styles from './Article.module.scss'
 import { imageProxy } from '../../utils/imageProxy'
+import { Popover } from '../_shared/Popover'
 
 interface ArticleProps {
   article: Shout
@@ -213,39 +214,53 @@ export const FullArticle = (props: ArticleProps) => {
                   {props.article.stat?.viewed}
                 </div>
               </Show>
-              <div class={styles.shoutStatsItem} onClick={scrollToComments}>
-                <Icon name="comment" class={styles.icon} />
-                {props.article.stat?.commented ?? ''}
-              </div>
-              <div class={styles.shoutStatsItem}>
-                <SharePopup
-                  title={props.article.title}
-                  description={getDescription(props.article.body)}
-                  imageUrl={props.article.cover}
-                  containerCssClass={stylesHeader.control}
-                  trigger={
+              <Popover content={t('Comment')}>
+                {(triggerRef: (el) => void) => (
+                  <div class={styles.shoutStatsItem} ref={triggerRef} onClick={scrollToComments}>
+                    <Icon name="comment" class={styles.icon} />
+                    {props.article.stat?.commented ?? ''}
+                  </div>
+                )}
+              </Popover>
+              <Popover content={t('Share')}>
+                {(triggerRef: (el) => void) => (
+                  <div class={styles.shoutStatsItem} ref={triggerRef}>
+                    <SharePopup
+                      title={props.article.title}
+                      description={getDescription(props.article.body)}
+                      imageUrl={props.article.cover}
+                      containerCssClass={stylesHeader.control}
+                      trigger={
+                        <div class={styles.shoutStatsItemInner}>
+                          <Icon name="share-outline" class={styles.icon} />
+                        </div>
+                      }
+                    />
+                  </div>
+                )}
+              </Popover>
+              <Popover content={t('Add to bookmarks')}>
+                {(triggerRef: (el) => void) => (
+                  <div class={styles.shoutStatsItem} ref={triggerRef} onClick={handleBookmarkButtonClick}>
                     <div class={styles.shoutStatsItemInner}>
-                      <Icon name="share-outline" class={styles.icon} />
+                      <Icon name="bookmark" class={styles.icon} />
                     </div>
-                  }
-                />
-              </div>
-
-              <div class={styles.shoutStatsItem} onClick={handleBookmarkButtonClick}>
-                <div class={styles.shoutStatsItemInner}>
-                  <Icon name="bookmark" class={styles.icon} />
-                </div>
-              </div>
+                  </div>
+                )}
+              </Popover>
               <Show when={canEdit()}>
-                <div class={styles.shoutStatsItem}>
-                  <a
-                    href={getPagePath(router, 'edit', { shoutId: props.article.id.toString() })}
-                    class={styles.shoutStatsItemInner}
-                  >
-                    <Icon name="edit" class={clsx(styles.icon, styles.iconEdit)} />
-                    {t('Edit')}
-                  </a>
-                </div>
+                <Popover content={t('Edit')}>
+                  {(triggerRef: (el) => void) => (
+                    <div class={styles.shoutStatsItem} ref={triggerRef}>
+                      <a
+                        href={getPagePath(router, 'edit', { shoutId: props.article.id.toString() })}
+                        class={styles.shoutStatsItemInner}
+                      >
+                        <Icon name="pencil-outline" class={styles.icon} />
+                      </a>
+                    </div>
+                  )}
+                </Popover>
               </Show>
               <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
                 <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
diff --git a/src/components/Article/SharePopup.tsx b/src/components/Article/SharePopup.tsx
index 437dcd89..f7d5d4e6 100644
--- a/src/components/Article/SharePopup.tsx
+++ b/src/components/Article/SharePopup.tsx
@@ -5,12 +5,14 @@ import styles from '../_shared/Popup/Popup.module.scss'
 import type { PopupProps } from '../_shared/Popup'
 import { Popup } from '../_shared/Popup'
 import { useLocalize } from '../../context/localize'
+import { createEffect, createSignal } from 'solid-js'
 
 type SharePopupProps = {
   title: string
   shareUrl?: string
   imageUrl: string
   description: string
+  isVisible?: (value: boolean) => void
 } & Omit<PopupProps, 'children'>
 
 export const getShareUrl = (params: { pathname?: string } = {}) => {
@@ -21,6 +23,14 @@ export const getShareUrl = (params: { pathname?: string } = {}) => {
 
 export const SharePopup = (props: SharePopupProps) => {
   const { t } = useLocalize()
+  const [isVisible, setIsVisible] = createSignal(false)
+
+  createEffect(() => {
+    if (props.isVisible) {
+      props.isVisible(isVisible())
+    }
+  })
+
   const [share] = createSocialShare(() => ({
     title: props.title,
     url: props.shareUrl,
@@ -29,8 +39,9 @@ export const SharePopup = (props: SharePopupProps) => {
   const copyLink = async () => {
     await navigator.clipboard.writeText(props.shareUrl)
   }
+
   return (
-    <Popup {...props} variant="bordered">
+    <Popup {...props} variant="bordered" onVisibilityChange={(value) => setIsVisible(value)}>
       <ul class="nodash">
         <li>
           <button role="button" class={styles.shareControl} onClick={() => share(VK)}>
diff --git a/src/components/Feed/ArticleCard.tsx b/src/components/Feed/ArticleCard.tsx
index 5423cbd6..ffe4836c 100644
--- a/src/components/Feed/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard.tsx
@@ -15,6 +15,7 @@ import { useLocalize } from '../../context/localize'
 import { getPagePath, openPage } from '@nanostores/router'
 import { router, useRouter } from '../../stores/router'
 import { imageProxy } from '../../utils/imageProxy'
+import { Popover } from '../_shared/Popover'
 
 interface ArticleCardProps {
   settings?: {
@@ -174,6 +175,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
         </Show>
 
         <Show when={props.settings?.isFeedMode}>
+          <p>asdasd</p>
           <section
             class={styles.shoutCardDetails}
             classList={{ [styles.shoutCardDetailsActive]: isSharePopupActive() }}
@@ -195,32 +197,45 @@ export const ArticleCard = (props: ArticleCardProps) => {
             </div>
 
             <div class={styles.shoutCardDetailsContent}>
-              <div class={styles.shoutCardDetailsItem}>
-                <a href={getPagePath(router, 'edit', { shoutId: id.toString() })}>
-                  <Icon name="pencil-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
-                </a>
-              </div>
+              <Popover content={t('Edit')}>
+                {(triggerRef: (el) => void) => (
+                  <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
+                    <a href={getPagePath(router, 'edit', { shoutId: id.toString() })}>
+                      <Icon name="pencil-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
+                    </a>
+                  </div>
+                )}
+              </Popover>
 
-              <div class={styles.shoutCardDetailsItem}>
-                <button>
-                  <Icon name="bookmark" class={clsx(styles.icon, styles.feedControlIcon)} />
-                </button>
-              </div>
-
-              <div class={styles.shoutCardDetailsItem}>
-                <SharePopup
-                  containerCssClass={stylesHeader.control}
-                  title={title}
-                  description={getDescription(body)}
-                  imageUrl={cover}
-                  shareUrl={getShareUrl({ pathname: `/${slug}` })}
-                  trigger={
+              <Popover content={t('Add to bookmarks')}>
+                {(triggerRef: (el) => void) => (
+                  <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
                     <button>
-                      <Icon name="share-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
+                      <Icon name="bookmark" class={clsx(styles.icon, styles.feedControlIcon)} />
                     </button>
-                  }
-                />
-              </div>
+                  </div>
+                )}
+              </Popover>
+
+              <Popover content={t('Share')} disabled={isSharePopupActive()}>
+                {(triggerRef: (el) => void) => (
+                  <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
+                    <SharePopup
+                      containerCssClass={stylesHeader.control}
+                      title={title}
+                      description={getDescription(body)}
+                      imageUrl={cover}
+                      shareUrl={getShareUrl({ pathname: `/${slug}` })}
+                      isVisible={(value) => setIsSharePopupActive(value)}
+                      trigger={
+                        <button>
+                          <Icon name="share-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
+                        </button>
+                      }
+                    />
+                  </div>
+                )}
+              </Popover>
 
               <div class={styles.shoutCardDetailsItem}>
                 <FeedArticlePopup
diff --git a/src/components/_shared/Popover/Popover.tsx b/src/components/_shared/Popover/Popover.tsx
index 88a0d91d..9c17de70 100644
--- a/src/components/_shared/Popover/Popover.tsx
+++ b/src/components/_shared/Popover/Popover.tsx
@@ -5,6 +5,7 @@ import styles from './Popover.module.scss'
 type Props = {
   children: (setTooltipEl: (el: HTMLElement | null) => void) => JSX.Element
   content: string
+  disabled?: boolean
 }
 
 export const Popover = (props: Props) => {
@@ -35,27 +36,29 @@ export const Popover = (props: Props) => {
   const handleMouseOver = () => setShow(true)
   const handleMouseOut = () => setShow(false)
 
-  onMount(() => {
-    showEvents.forEach((event) => {
-      anchor().addEventListener(event, handleMouseOver)
-    })
-    hideEvents.forEach((event) => {
-      anchor().addEventListener(event, handleMouseOut)
-    })
-    return () => {
+  if (!props.disabled) {
+    onMount(() => {
       showEvents.forEach((event) => {
-        anchor().removeEventListener(event, handleMouseOver)
+        anchor().addEventListener(event, handleMouseOver)
       })
       hideEvents.forEach((event) => {
-        anchor().removeEventListener(event, handleMouseOut)
+        anchor().addEventListener(event, handleMouseOut)
       })
-    }
-  })
+      return () => {
+        showEvents.forEach((event) => {
+          anchor().removeEventListener(event, handleMouseOver)
+        })
+        hideEvents.forEach((event) => {
+          anchor().removeEventListener(event, handleMouseOut)
+        })
+      }
+    })
+  }
 
   return (
     <>
       {props.children(setAnchor)}
-      <Show when={show()}>
+      <Show when={show() && !props.disabled}>
         <div ref={setPopper} class={styles.tooltip} role="tooltip">
           {props.content}
           <div class={styles.arrow} data-popper-arrow={true} />
diff --git a/src/components/_shared/Popup/Popup.tsx b/src/components/_shared/Popup/Popup.tsx
index e25718fe..d15fdf36 100644
--- a/src/components/_shared/Popup/Popup.tsx
+++ b/src/components/_shared/Popup/Popup.tsx
@@ -10,7 +10,7 @@ export type PopupProps = {
   popupCssClass?: string
   trigger: JSX.Element
   children: JSX.Element
-  onVisibilityChange?: (isVisible) => void
+  onVisibilityChange?: (isVisible: boolean) => void
   horizontalAnchor?: HorizontalAnchor
   variant?: 'bordered' | 'tiny'
 }