diff --git a/CHANGELOG.md b/CHANGELOG.md index a7a1288db..645ca409d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Posts: fix monospace font in Markdown code blocks. - Modals: fix action buttons overflow - Editing: don't insert edited posts to the top of the feed. +- Modals: close modal when navigating to a different page. +- Modals: fix "View context" button in media modal. ## [3.0.0] - 2022-12-25 diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx index 546d5f3f4..c31305c54 100644 --- a/app/soapbox/components/account.tsx +++ b/app/soapbox/components/account.tsx @@ -15,14 +15,17 @@ import type { Account as AccountEntity } from 'soapbox/types/entities'; interface IInstanceFavicon { account: AccountEntity, + disabled?: boolean, } -const InstanceFavicon: React.FC = ({ account }) => { +const InstanceFavicon: React.FC = ({ account, disabled }) => { const history = useHistory(); const handleClick: React.MouseEventHandler = (e) => { e.stopPropagation(); + if (disabled) return; + const timelineUrl = `/timeline/${account.domain}`; if (!(e.ctrlKey || e.metaKey)) { history.push(timelineUrl); @@ -32,7 +35,11 @@ const InstanceFavicon: React.FC = ({ account }) => { }; return ( - ); @@ -219,7 +226,7 @@ const Account = ({ @{username} {account.favicon && ( - + )} {(timestamp) ? ( diff --git a/app/soapbox/components/modal-root.tsx b/app/soapbox/components/modal-root.tsx index 37fc058b6..388a5393b 100644 --- a/app/soapbox/components/modal-root.tsx +++ b/app/soapbox/components/modal-root.tsx @@ -152,8 +152,10 @@ const ModalRoot: React.FC = ({ children, onCancel, onClose, type }) const handleModalOpen = () => { modalHistoryKey.current = Date.now(); - unlistenHistory.current = history.listen((_, action) => { - if (action === 'POP') { + unlistenHistory.current = history.listen(({ state }, action) => { + if (!(state as any)?.soapboxModalKey) { + onClose(); + } else if (action === 'POP') { handleOnClose(); if (onCancel) onCancel(); @@ -165,11 +167,9 @@ const ModalRoot: React.FC = ({ children, onCancel, onClose, type }) if (unlistenHistory.current) { unlistenHistory.current(); } - if (!['FAVOURITES', 'MENTIONS', 'REACTIONS', 'REBLOGS', 'MEDIA'].includes(type)) { - const { state } = history.location; - if (state && (state as any).soapboxModalKey === modalHistoryKey.current) { - history.goBack(); - } + const { state } = history.location; + if (state && (state as any).soapboxModalKey === modalHistoryKey.current) { + history.goBack(); } }; @@ -221,7 +221,7 @@ const ModalRoot: React.FC = ({ children, onCancel, onClose, type }) ensureHistoryBuffer(); } - }); + }, [children]); if (!visible) { return ( diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx index 4242094b5..6752bcdab 100644 --- a/app/soapbox/features/account-gallery/components/media-item.tsx +++ b/app/soapbox/features/account-gallery/components/media-item.tsx @@ -56,7 +56,7 @@ const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia const width = `${Math.floor((displayWidth - 4) / 3) - 4}px`; const height = width; const status = attachment.get('status'); - const title = status.get('spoiler_text') || attachment.get('description'); + const title = status.get('spoiler_text') || attachment.get('description'); let thumbnail: React.ReactNode = ''; let icon; diff --git a/app/soapbox/features/reply-mentions/account.tsx b/app/soapbox/features/reply-mentions/account.tsx index 5facac7a8..db3dbce8f 100644 --- a/app/soapbox/features/reply-mentions/account.tsx +++ b/app/soapbox/features/reply-mentions/account.tsx @@ -52,7 +52,7 @@ const Account: React.FC = ({ composeId, accountId, author }) => { return (
- +
{!author && button}
diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx index ff8b6b467..5b5ff0dc9 100644 --- a/app/soapbox/features/ui/components/modals/media-modal.tsx +++ b/app/soapbox/features/ui/components/modals/media-modal.tsx @@ -9,6 +9,7 @@ import Icon from 'soapbox/components/icon'; import IconButton from 'soapbox/components/icon-button'; import Audio from 'soapbox/features/audio'; import Video from 'soapbox/features/video'; +import { useAppDispatch } from 'soapbox/hooks'; import ImageLoader from '../image-loader'; @@ -39,6 +40,7 @@ const MediaModal: React.FC = (props) => { const intl = useIntl(); const history = useHistory(); + const dispatch = useAppDispatch(); const [index, setIndex] = useState(null); const [navigationHidden, setNavigationHidden] = useState(false); @@ -94,8 +96,14 @@ const MediaModal: React.FC = (props) => { const handleStatusClick: React.MouseEventHandler = e => { if (status && e.button === 0 && !(e.ctrlKey || e.metaKey)) { e.preventDefault(); - history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status?.id}`); - onClose(); + + dispatch((_, getState) => { + const account = typeof status.account === 'string' ? getState().accounts.get(status.account) : status.account; + if (!account) return; + + history.push(`/@${account.acct}/posts/${status?.id}`); + onClose(); + }); } }; @@ -113,7 +121,7 @@ const MediaModal: React.FC = (props) => { let pagination: React.ReactNode[] = []; - const leftNav = media.size > 1 && ( + const leftNav = media.size > 1 && (