Add tooltip to Article details (#98)

* Add tooltip to Article details

* Hide popover f SharePopup is visible

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;
 

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,11 +214,17 @@ export const FullArticle = (props: ArticleProps) => {
                   {props.article.stat?.viewed}
                 </div>
               </Show>
-              <div class={styles.shoutStatsItem} onClick={scrollToComments}>
+              <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>
-              <div class={styles.shoutStatsItem}>
+                )}
+              </Popover>
+              <Popover content={t('Share')}>
+                {(triggerRef: (el) => void) => (
+                  <div class={styles.shoutStatsItem} ref={triggerRef}>
                     <SharePopup
                       title={props.article.title}
                       description={getDescription(props.article.body)}
@@ -230,22 +237,30 @@ export const FullArticle = (props: ArticleProps) => {
                       }
                     />
                   </div>
-
+                )}
-              <div class={styles.shoutStatsItem} onClick={handleBookmarkButtonClick}>
+              </Popover>
+              <Popover content={t('Add to bookmarks')}>
+                {(triggerRef: (el) => void) => (
+                  <div class={styles.shoutStatsItem} ref={triggerRef} onClick={handleBookmarkButtonClick}>
                     <div class={styles.shoutStatsItemInner}>
                       <Icon name="bookmark" class={styles.icon} />
                     </div>
                   </div>
+                )}
+              </Popover>
               <Show when={canEdit()}>
-                <div class={styles.shoutStatsItem}>
+                <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="edit" class={clsx(styles.icon, styles.iconEdit)} />
+                        <Icon name="pencil-outline" class={styles.icon} />
-                    {t('Edit')}
                       </a>
                     </div>
+                  )}
+                </Popover>
               </Show>
               <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
                 <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>

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)}>

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,25 +197,36 @@ export const ArticleCard = (props: ArticleCardProps) => {
             </div>
 
             <div class={styles.shoutCardDetailsContent}>
-              <div class={styles.shoutCardDetailsItem}>
+              <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}>
+              <Popover content={t('Add to bookmarks')}>
+                {(triggerRef: (el) => void) => (
+                  <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
                     <button>
                       <Icon name="bookmark" class={clsx(styles.icon, styles.feedControlIcon)} />
                     </button>
                   </div>
+                )}
+              </Popover>
 
-              <div class={styles.shoutCardDetailsItem}>
+              <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)} />
@@ -221,6 +234,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
                       }
                     />
                   </div>
+                )}
+              </Popover>
 
               <div class={styles.shoutCardDetailsItem}>
                 <FeedArticlePopup

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,6 +36,7 @@ export const Popover = (props: Props) => {
   const handleMouseOver = () => setShow(true)
   const handleMouseOut = () => setShow(false)
 
+  if (!props.disabled) {
     onMount(() => {
       showEvents.forEach((event) => {
         anchor().addEventListener(event, handleMouseOver)
@@ -51,11 +53,12 @@ export const Popover = (props: Props) => {
         })
       }
     })
+  }
 
   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} />

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'
 }