diff --git a/src/components/Feed/ArticleCard/ArticleCard.tsx b/src/components/Feed/ArticleCard/ArticleCard.tsx index 2b4879aa..c070b880 100644 --- a/src/components/Feed/ArticleCard/ArticleCard.tsx +++ b/src/components/Feed/ArticleCard/ArticleCard.tsx @@ -14,7 +14,6 @@ import { Icon } from '../../_shared/Icon' import { Image } from '../../_shared/Image' import { InviteCoAuthorsModal } from '../../_shared/InviteCoAuthorsModal' import { Popover } from '../../_shared/Popover' -import { ShareModal } from '../../_shared/ShareModal' import { CoverImage } from '../../Article/CoverImage' import { getShareUrl, SharePopup } from '../../Article/SharePopup' import { ShoutRatingControl } from '../../Article/ShoutRatingControl' @@ -52,6 +51,7 @@ export type ArticleCardProps = { withAspectRatio?: boolean desktopCoverSize?: 'XS' | 'S' | 'M' | 'L' article: Shout + onShare?: (article: Shout) => void } const desktopCoverImageWidths: Record = { @@ -370,7 +370,7 @@ export const ArticleCard = (props: ArticleCardProps) => { showModal('share')} + onShareClick={() => props.onShare(props.article)} onInviteClick={() => showModal('inviteCoAuthors')} onVisibilityChange={(isVisible) => setIsActionPopupActive(isVisible)} trigger={ @@ -389,12 +389,6 @@ export const ArticleCard = (props: ArticleCardProps) => { - ) } diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss index 8229d5f0..f7b5ec19 100644 --- a/src/components/Nav/Modal/Modal.module.scss +++ b/src/components/Nav/Modal/Modal.module.scss @@ -1,7 +1,7 @@ .backdrop { align-items: center; display: flex; - background: rgb(20 20 20 / 7%); + background: rgb(20 20 20 / 90%); justify-content: center; height: 100%; left: 0; diff --git a/src/components/Views/Feed/Feed.tsx b/src/components/Views/Feed/Feed.tsx index 57c5d9c8..a81e33be 100644 --- a/src/components/Views/Feed/Feed.tsx +++ b/src/components/Views/Feed/Feed.tsx @@ -10,6 +10,7 @@ import { useReactions } from '../../../context/reactions' import { useSession } from '../../../context/session' import { apiClient } from '../../../graphql/client/core' import { router, useRouter } from '../../../stores/router' +import { showModal } from '../../../stores/ui' import { useArticlesStore, resetSortedArticles } from '../../../stores/zine/articles' import { useTopAuthorsStore } from '../../../stores/zine/topAuthors' import { useTopicsStore } from '../../../stores/zine/topics' @@ -17,7 +18,10 @@ import { getImageUrl } from '../../../utils/getImageUrl' import { DropDown } from '../../_shared/DropDown' import { Icon } from '../../_shared/Icon' import { Loading } from '../../_shared/Loading' +import { ShareModal } from '../../_shared/ShareModal' import { CommentDate } from '../../Article/CommentDate' +import { getShareUrl } from '../../Article/SharePopup' +import { AuthorLink } from '../../Author/AhtorLink' import { AuthorBadge } from '../../Author/AuthorBadge' import { AuthorLink } from '../../Author/AuthorLink' import { ArticleCard } from '../../Feed/ArticleCard' @@ -216,6 +220,12 @@ export const FeedView = (props: Props) => { ) const ogTitle = t('Feed') + const [shareData, setShareData] = createSignal() + const handleShare = (shared) => { + showModal('share') + setShareData(shared) + } + return (
@@ -292,7 +302,12 @@ export const FeedView = (props: Props) => { 0}> {(article) => ( - + handleShare(shared)} + article={article} + settings={{ isFeedMode: true }} + desktopCoverSize="M" + /> )} @@ -407,6 +422,14 @@ export const FeedView = (props: Props) => {
+ + + ) } diff --git a/src/components/_shared/ShareLinks/ShareLinks.tsx b/src/components/_shared/ShareLinks/ShareLinks.tsx index b27c24c6..b2fd07c3 100644 --- a/src/components/_shared/ShareLinks/ShareLinks.tsx +++ b/src/components/_shared/ShareLinks/ShareLinks.tsx @@ -16,11 +16,13 @@ type Props = { imageUrl?: string class?: string variant: 'inModal' | 'inPopup' + onShareClick?: () => void } export const ShareLinks = (props: Props) => { const { t } = useLocalize() const [isLinkCopied, setIsLinkCopied] = createSignal(false) + const { actions: { showSnackbar }, } = useSnackbar() @@ -30,11 +32,21 @@ export const ShareLinks = (props: Props) => { url: props.shareUrl, description: props.description, })) + + const handleShare = (network) => { + share(network) + if (props.variant === 'inModal') { + props.onShareClick() + } + } const copyLink = async () => { await navigator.clipboard.writeText(props.shareUrl) if (props.variant === 'inModal') { setIsLinkCopied(true) - setTimeout(() => setIsLinkCopied(false), 3000) + setTimeout(() => { + setIsLinkCopied(false) + props.onShareClick() + }, 3000) } else { showSnackbar({ body: t('Link copied') }) } @@ -44,25 +56,25 @@ export const ShareLinks = (props: Props) => {
  • -
  • -
  • -
  • - diff --git a/src/components/_shared/ShareModal/ShareModal.tsx b/src/components/_shared/ShareModal/ShareModal.tsx index 0d9c9427..e80fb8ef 100644 --- a/src/components/_shared/ShareModal/ShareModal.tsx +++ b/src/components/_shared/ShareModal/ShareModal.tsx @@ -1,4 +1,5 @@ import { useLocalize } from '../../../context/localize' +import { hideModal } from '../../../stores/ui' import { Modal } from '../../Nav/Modal' import { ShareLinks } from '../ShareLinks' @@ -11,7 +12,6 @@ type Props = { } export const ShareModal = (props: Props) => { const { t } = useLocalize() - return (

    {t('Share publication')}

    @@ -21,6 +21,7 @@ export const ShareModal = (props: Props) => { shareUrl={props.shareUrl} imageUrl={props.imageUrl} description={props.description} + onShareClick={() => hideModal()} />
    )