discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Add tooltip to Article details (#98)

Browse Source 
* Add tooltip to Article details

* Hide popover f SharePopup is visible
This commit is contained in:
Ilya Y 2023-05-17 07:04:38 +03:00 committed by GitHub
parent 3710812668
commit c60b7e5c53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 113 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Article/Article.module.scss
View File

@ -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;

29
src/components/Article/FullArticle.tsx
View File

@ -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)} />
{t('Edit')}
<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)}>

13
src/components/Article/SharePopup.tsx
View File

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

21
src/components/Feed/ArticleCard.tsx
View File

@ -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

5
src/components/_shared/Popover/Popover.tsx
View File

@ -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} />

2
src/components/_shared/Popup/Popup.tsx
View File

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