Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Experiment: make replies container not whole-clickable

Browse source 
Except for "thread" statuses
This commit is contained in:
Lim Chee Aun 2023-08-01 00:15:07 +08:00
parent 3fe99050e0
commit 8cd00a053c
2 changed files with 34 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/status.jsx
View file

@ -94,6 +94,7 @@ function Status({
allowFilters, allowFilters,
onMediaClick, onMediaClick,
quoted, quoted,
onStatusLinkClick = () => {},
}) { }) {
if (skeleton) { if (skeleton) {
return ( return (
@ -526,7 +527,10 @@ function Status({
<br /> <br />
{createdDateText} {createdDateText}
</MenuHeader> </MenuHeader>
<MenuLink to={instance ? `/${instance}/s/${id}` : `/s/${id}`}> <MenuLink
to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
onClick={onStatusLinkClick}
>
<Icon icon="arrow-right" /> <Icon icon="arrow-right" />
<span>View post by @{username || acct}</span> <span>View post by @{username || acct}</span>
</MenuLink> </MenuLink>
@ -944,6 +948,7 @@ function Status({
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
onStatusLinkClick?.();
}} }}
class={`time ${open ? 'is-open' : ''}`} class={`time ${open ? 'is-open' : ''}`}
> >

41
src/pages/status.jsx
View file

@ -843,6 +843,24 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
weight, weight,
} = status; } = status;
const isHero = statusID === id; const isHero = statusID === id;
const StatusParent = useCallback(
(props) =>
isThread || thread ? (
<Link
class="status-link"
to={
instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
}
onClick={() => {
resetScrollPosition(statusID);
}}
{...props}
/>
) : (
<div class="status-focus" tabIndex={0} {...props} />
),
[isThread, thread],
);
return ( return (
<li <li
key={statusID} key={statusID}
@ -923,15 +941,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
)} )}
</> </>
) : ( ) : (
<Link <StatusParent>
class="status-link"
to={
instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
}
onClick={() => {
resetScrollPosition(statusID);
}}
>
<Status <Status
statusID={statusID} statusID={statusID}
instance={instance} instance={instance}
@ -939,6 +949,9 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
size={thread || ancestor ? 'm' : 's'} size={thread || ancestor ? 'm' : 's'}
enableTranslate enableTranslate
onMediaClick={handleMediaClick} onMediaClick={handleMediaClick}
onStatusLinkClick={() => {
resetScrollPosition(statusID);
}}
/> />
{ancestor && isThread && repliesCount > 1 && ( {ancestor && isThread && repliesCount > 1 && (
<div class="replies-link"> <div class="replies-link">
@ -956,7 +969,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
</span> </span>
</div> </div>
)} */} )} */}
</Link> </StatusParent>
)} )}
{descendant && replies?.length > 0 && ( {descendant && replies?.length > 0 && (
<SubComments <SubComments
@ -1171,13 +1184,14 @@ function SubComments({
<ul> <ul>
{replies.map((r) => ( {replies.map((r) => (
<li key={r.id}> <li key={r.id}>
<Link {/* <Link
class="status-link" class="status-link"
to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`} to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`}
onClick={() => { onClick={() => {
resetScrollPosition(r.id); resetScrollPosition(r.id);
}} }}
> > */}
<div class="status-focus" tabIndex={0}>
<Status <Status
statusID={r.id} statusID={r.id}
instance={instance} instance={instance}
@ -1194,7 +1208,8 @@ function SubComments({
</span> </span>
</div> </div>
)} )}
</Link> </div>
{/* </Link> */}
{r.replies?.length && ( {r.replies?.length && (
<SubComments <SubComments
instance={instance} instance={instance}