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 >c/</span>
{reply.shortCid ? (
<Link to={() => {}} id="reply-button"
title="Reply to this post">{reply.shortCid}</Link>
) : (
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
)}
</span>&nbsp;
<div id="backlink-id" className="backlink">
{reply.replies?.pages?.topAll.comments
@@ -155,9 +151,11 @@ const PostOnHover = ({ cid, feed }) => {
reply.content?.length > 500 ?
<Fragment >
<blockquote comment={reply} className="post-message">
<Link to={() => {}} className="quotelink">
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
{shortParentCid ? (
<Link to={() => {}} className="quotelink">
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
) : null}
<Post content={reply.content?.slice(0, 500)} />
<span className="ttl"> (...)
<br /> <EditLabel
@@ -167,9 +165,11 @@ const PostOnHover = ({ cid, feed }) => {
</blockquote>
</Fragment>
: <blockquote className="post-message">
<Link to={() => {}} className="quotelink">
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
{shortParentCid ? (
<Link to={() => {}} className="quotelink">
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
) : null}
<Post content={reply.content} comment={reply} />
<EditLabel
commentCid={reply.cid}
@@ -277,9 +277,11 @@ const PostOnHover = ({ cid, feed }) => {
reply.content?.length > 500 ?
<Fragment>
<blockquote className="post-message">
{shortParentCid ? (
<Link to={() => {}} className="quotelink">
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
) : null}
<Post content={reply.content?.slice(0, 500)} comment={reply} />
<span className="ttl"> (...)
<br />
@@ -291,9 +293,11 @@ const PostOnHover = ({ cid, feed }) => {
</blockquote>
</Fragment>
: <blockquote className="post-message">
{shortParentCid ? (
<Link to={() => {}} className="quotelink" >
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
) : null}
<Post content={reply.content} comment={reply} />
<EditLabel
commentCid={reply.cid}
src/components/views/Board.jsx
+33 -49
View File
@@ -1339,9 +1339,6 @@ const Board = () => {
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
@@ -1360,8 +1357,7 @@ const Board = () => {
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
}
});
});
}}
onMouseLeave={() => {
removeHighlight();
@@ -1393,9 +1389,6 @@ const Board = () => {
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
@@ -1414,7 +1407,6 @@ const Board = () => {
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
}
});
}}
onMouseLeave={() => {
@@ -1725,27 +1717,23 @@ const Board = () => {
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
});
}}
@@ -1779,27 +1767,23 @@ const Board = () => {
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === thread.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: 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) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === comment.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
setOutOfViewCid(reply.parentCid);
const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
});
}}
@@ -1528,27 +1524,23 @@ const Thread = () => {
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
if (shortParentCid === comment.shortCid) {
return;
} else {
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
setOutOfViewCid(reply.parentCid);
const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
if (distanceToRight < 200) {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
} else {
setOutOfViewPosition({
top: rect.top + window.scrollY - rect.height / 2,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width + 5
});
}
});
}}