From bb02d6b3649105786cc6ecf8a57c5761d72b8fe3 Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Mon, 8 Jan 2024 16:02:52 +0300 Subject: [PATCH 1/2] Fix share modal (#357) Fix share modal --- .../Feed/ArticleCard/ArticleCard.tsx | 10 ++------ src/components/Views/Feed/Feed.tsx | 24 ++++++++++++++++++- .../_shared/ShareLinks/ShareLinks.tsx | 1 + .../_shared/ShareModal/ShareModal.tsx | 1 - 4 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/components/Feed/ArticleCard/ArticleCard.tsx b/src/components/Feed/ArticleCard/ArticleCard.tsx index 5863a865..cd1ae0ed 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 = { @@ -367,7 +367,7 @@ export const ArticleCard = (props: ArticleCardProps) => { showModal('share')} + onShareClick={() => props.onShare(props.article)} onInviteClick={() => showModal('inviteCoAuthors')} onVisibilityChange={(isVisible) => setIsActionPopupActive(isVisible)} trigger={ @@ -386,12 +386,6 @@ export const ArticleCard = (props: ArticleCardProps) => { - ) } diff --git a/src/components/Views/Feed/Feed.tsx b/src/components/Views/Feed/Feed.tsx index 3fa42d0c..6914a6c7 100644 --- a/src/components/Views/Feed/Feed.tsx +++ b/src/components/Views/Feed/Feed.tsx @@ -8,6 +8,7 @@ import { createEffect, createMemo, createSignal, For, on, onMount, Show } from ' import { useLocalize } from '../../../context/localize' import { useReactions } from '../../../context/reactions' 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,9 @@ import { getServerDate } from '../../../utils/getServerDate' 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 { ArticleCard } from '../../Feed/ArticleCard' @@ -203,6 +206,12 @@ export const Feed = (props: Props) => { ) const ogTitle = t('Feed') + const [shareData, setShareData] = createSignal() + const handleShare = (shared) => { + showModal('share') + setShareData(shared) + } + return (
@@ -279,7 +288,12 @@ export const Feed = (props: Props) => { 0}> {(article) => ( - + handleShare(shared)} + article={article} + settings={{ isFeedMode: true }} + desktopCoverSize="M" + /> )} @@ -394,6 +408,14 @@ export const Feed = (props: Props) => {
+ + + ) } diff --git a/src/components/_shared/ShareLinks/ShareLinks.tsx b/src/components/_shared/ShareLinks/ShareLinks.tsx index b27c24c6..a0478721 100644 --- a/src/components/_shared/ShareLinks/ShareLinks.tsx +++ b/src/components/_shared/ShareLinks/ShareLinks.tsx @@ -21,6 +21,7 @@ type Props = { export const ShareLinks = (props: Props) => { const { t } = useLocalize() const [isLinkCopied, setIsLinkCopied] = createSignal(false) + const { actions: { showSnackbar }, } = useSnackbar() diff --git a/src/components/_shared/ShareModal/ShareModal.tsx b/src/components/_shared/ShareModal/ShareModal.tsx index 0d9c9427..1e7def7c 100644 --- a/src/components/_shared/ShareModal/ShareModal.tsx +++ b/src/components/_shared/ShareModal/ShareModal.tsx @@ -11,7 +11,6 @@ type Props = { } export const ShareModal = (props: Props) => { const { t } = useLocalize() - return (

{t('Share publication')}

From 96166d79ada2ca4478d67d6134b84fc33a9cfdca Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Wed, 10 Jan 2024 13:01:02 +0300 Subject: [PATCH 2/2] Share modal fix (#362) * - Close modal after share - revert opacity * resolve conversation --- src/components/Nav/Modal/Modal.module.scss | 2 +- .../_shared/ShareLinks/ShareLinks.tsx | 21 ++++++++++++++----- .../_shared/ShareModal/ShareModal.tsx | 2 ++ 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss index d475fb5a..f5785872 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/_shared/ShareLinks/ShareLinks.tsx b/src/components/_shared/ShareLinks/ShareLinks.tsx index a0478721..b2fd07c3 100644 --- a/src/components/_shared/ShareLinks/ShareLinks.tsx +++ b/src/components/_shared/ShareLinks/ShareLinks.tsx @@ -16,6 +16,7 @@ type Props = { imageUrl?: string class?: string variant: 'inModal' | 'inPopup' + onShareClick?: () => void } export const ShareLinks = (props: Props) => { @@ -31,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') }) } @@ -45,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 1e7def7c..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' @@ -20,6 +21,7 @@ export const ShareModal = (props: Props) => { shareUrl={props.shareUrl} imageUrl={props.imageUrl} description={props.description} + onShareClick={() => hideModal()} /> )