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} -
- - {props.article.stat?.commented ?? ''} -
-
- + {(triggerRef: (el) => void) => ( +
+ + {props.article.stat?.commented ?? ''} +
+ )} + + + {(triggerRef: (el) => void) => ( +
+ + +
+ } + /> +
+ )} + + + {(triggerRef: (el) => void) => ( +
- +
- } - /> -
- -
-
- -
-
+ + )} +
-
- - - {t('Edit')} - -
+ + {(triggerRef: (el) => void) => ( +
+ + + +
+ )} +
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 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 ( - + setIsVisible(value)}>
-
- - - -
+ + {(triggerRef: (el) => void) => ( +
+ + + +
+ )} +
-
- -
- -
- + {(triggerRef: (el) => void) => ( +
- } - /> -
+
+ )} + + + + {(triggerRef: (el) => void) => ( +
+ setIsSharePopupActive(value)} + trigger={ + + } + /> +
+ )} +
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)} - +