External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add PostOnHover to OP links

Browse Source
This commit is contained in:
plebeius.eth
2023-06-11 12:17:22 +02:00
parent 9659fb4480
commit b03a542cec
3 changed files with 78 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PostOnHover.jsx
+14 -10
View File
@@ -78,12 +78,8 @@ const PostOnHover = ({ cid, feed }) => {
   
<span className="post-number post-number-desktop"> <span className="post-number post-number-desktop">
<span >c/</span> <span >c/</span>
{reply.shortCid ? (
<Link to={() => {}} id="reply-button" <Link to={() => {}} id="reply-button"
title="Reply to this post">{reply.shortCid}</Link> title="Reply to this post">{reply.shortCid}</Link>
) : (
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
)}
</span>&nbsp; </span>&nbsp;
<div id="backlink-id" className="backlink"> <div id="backlink-id" className="backlink">
{reply.replies?.pages?.topAll.comments {reply.replies?.pages?.topAll.comments
@@ -155,9 +151,11 @@ const PostOnHover = ({ cid, feed }) => {
reply.content?.length > 500 ? reply.content?.length > 500 ?
<Fragment > <Fragment >
<blockquote comment={reply} className="post-message"> <blockquote comment={reply} className="post-message">
<Link to={() => {}} className="quotelink"> {shortParentCid ? (
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} <Link to={() => {}} className="quotelink">
</Link> {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
) : null}
<Post content={reply.content?.slice(0, 500)} /> <Post content={reply.content?.slice(0, 500)} />
<span className="ttl"> (...) <span className="ttl"> (...)
<br /> <EditLabel <br /> <EditLabel
@@ -167,9 +165,11 @@ const PostOnHover = ({ cid, feed }) => {
</blockquote> </blockquote>
</Fragment> </Fragment>
: <blockquote className="post-message"> : <blockquote className="post-message">
<Link to={() => {}} className="quotelink"> {shortParentCid ? (
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} <Link to={() => {}} className="quotelink">
</Link> {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
) : null}
<Post content={reply.content} comment={reply} /> <Post content={reply.content} comment={reply} />
<EditLabel <EditLabel
commentCid={reply.cid} commentCid={reply.cid}
@@ -277,9 +277,11 @@ const PostOnHover = ({ cid, feed }) => {
reply.content?.length > 500 ? reply.content?.length > 500 ?
<Fragment> <Fragment>
<blockquote className="post-message"> <blockquote className="post-message">
{shortParentCid ? (
<Link to={() => {}} className="quotelink"> <Link to={() => {}} className="quotelink">
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
) : null}
<Post content={reply.content?.slice(0, 500)} comment={reply} /> <Post content={reply.content?.slice(0, 500)} comment={reply} />
<span className="ttl"> (...) <span className="ttl"> (...)
<br /> <br />
@@ -291,9 +293,11 @@ const PostOnHover = ({ cid, feed }) => {
</blockquote> </blockquote>
</Fragment> </Fragment>
: <blockquote className="post-message"> : <blockquote className="post-message">
{shortParentCid ? (
<Link to={() => {}} className="quotelink" > <Link to={() => {}} className="quotelink" >
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
) : null}
<Post content={reply.content} comment={reply} /> <Post content={reply.content} comment={reply} />
<EditLabel <EditLabel
commentCid={reply.cid} commentCid={reply.cid}
src/components/views/Board.jsx
+33 -49
View File
@@ -1339,9 +1339,6 @@ const Board = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right; const distanceToRight = window.innerWidth - rect.right;
@@ -1360,8 +1357,7 @@ const Board = () => {
maxWidth: window.innerWidth - rect.left - rect.width + 5 maxWidth: window.innerWidth - rect.left - rect.width + 5
}); });
} }
} });
});
}} }}
onMouseLeave={() => { onMouseLeave={() => {
removeHighlight(); removeHighlight();
@@ -1393,9 +1389,6 @@ const Board = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid); setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right; const distanceToRight = window.innerWidth - rect.right;
@@ -1414,7 +1407,6 @@ const Board = () => {
maxWidth: window.innerWidth - rect.left - rect.width + 5 maxWidth: window.innerWidth - rect.left - rect.width + 5
}); });
} }
}
}); });
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -1725,27 +1717,23 @@ const Board = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) { setOutOfViewCid(reply.parentCid);
return; const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
} else { const distanceToRight = window.innerWidth - rect.right;
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect(); if (distanceToRight < 200) {
const distanceToRight = window.innerWidth - rect.right; setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
if (distanceToRight < 200) { right: window.innerWidth - rect.left - 10,
setOutOfViewPosition({ maxWidth: rect.left - 5
top: rect.top + window.scrollY - rect.height / 2, });
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5 maxWidth: window.innerWidth - rect.left - rect.width + 5
}); });
}
} }
}); });
}} }}
@@ -1779,27 +1767,23 @@ const Board = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) { setOutOfViewCid(reply.parentCid);
return; const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
} else { const distanceToRight = window.innerWidth - rect.right;
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect(); if (distanceToRight < 200) {
const distanceToRight = window.innerWidth - rect.right; setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
if (distanceToRight < 200) { right: window.innerWidth - rect.left - 10,
setOutOfViewPosition({ maxWidth: rect.left - 5
top: rect.top + window.scrollY - rect.height / 2, });
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5 maxWidth: window.innerWidth - rect.left - rect.width + 5
}); });
}
} }
}); });
}} }}
src/components/views/Thread.jsx
+31 -39
View File
@@ -1252,26 +1252,22 @@ const Thread = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === comment.shortCid) { setOutOfViewCid(reply.parentCid);
return; const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
} else { const distanceToRight = window.innerWidth - rect.right;
setOutOfViewCid(reply.parentCid); if (distanceToRight < 200) {
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect(); setOutOfViewPosition({
const distanceToRight = window.innerWidth - rect.right; top: rect.top + window.scrollY - rect.height / 2,
if (distanceToRight < 200) { right: window.innerWidth - rect.left - 10,
setOutOfViewPosition({ maxWidth: rect.left - 5
top: rect.top + window.scrollY - rect.height / 2, });
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5 maxWidth: window.innerWidth - rect.left - rect.width + 5
}); });
}
} }
}); });
}} }}
@@ -1528,27 +1524,23 @@ const Thread = () => {
onMouseOver={(event) => { onMouseOver={(event) => {
event.stopPropagation(); event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => { handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === comment.shortCid) { setOutOfViewCid(reply.parentCid);
return; const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
} else { const distanceToRight = window.innerWidth - rect.right;
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect(); if (distanceToRight < 200) {
const distanceToRight = window.innerWidth - rect.right; setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
if (distanceToRight < 200) { right: window.innerWidth - rect.left - 10,
setOutOfViewPosition({ maxWidth: rect.left - 5
top: rect.top + window.scrollY - rect.height / 2, });
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else { } else {
setOutOfViewPosition({ setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2, top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5 maxWidth: window.innerWidth - rect.left - rect.width + 5
}); });
}
} }
}); });
}} }}