implement on hover cid highlight

This commit is contained in:
Tom
2023-06-01 21:41:48 +02:00
parent 20e746fe58
commit 6f4ca47a0f
6 changed files with 99 additions and 16 deletions
+28 -7
View File
@@ -28,7 +28,9 @@ import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick';
import handleImageClick from '../../utils/handleImageClick';
import handleQuoteClick from '../../utils/handleQuoteClick';
import handleQuoteHover from '../../utils/handleQuoteHover';
import handleStyleChange from '../../utils/handleStyleChange';
import removeHighlight from '../../utils/removeHighlight';
import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString';
@@ -968,7 +970,9 @@ const Board = () => {
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<Link key={`ql-${index}`}
to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, null, event)}>
onClick={(event) => handleQuoteClick(reply, null, event)}
onMouseOver={(event) => handleQuoteHover(reply, null, event)}
onMouseLeave={removeHighlight}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
@@ -1188,7 +1192,9 @@ const Board = () => {
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<Link to={() => {}} key={`ql-${index}`}
className="quote-link"
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}>
c/{reply.shortCid}</Link>
&nbsp;
</div>
@@ -1254,7 +1260,10 @@ const Board = () => {
reply.content?.length > 500 ?
<Fragment key={`fragment8-${index}`}>
<blockquote key={`pm-${index}`} comment={reply} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content?.slice(0, 500)} key={`post-${index}`} />
@@ -1273,7 +1282,10 @@ const Board = () => {
</blockquote>
</Fragment>
: <blockquote key={`pm-${index}`} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content} key={`post-${index}`} comment={reply} />
@@ -1570,7 +1582,10 @@ const Board = () => {
reply.content?.length > 500 ?
<Fragment key={`fragment15-${index}`}>
<blockquote key={`mob-pm-${index}`} className="post-message">
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} />
@@ -1589,7 +1604,10 @@ const Board = () => {
</blockquote>
</Fragment>
: <blockquote key={`mob-pm-${index}`} className="post-message">
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
<Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink"
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
onMouseLeave={removeHighlight}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content} key={`post-mobile-${index}`} comment={reply} />
@@ -1608,7 +1626,10 @@ const Board = () => {
.map((reply, index) => (
<div key={`div-back${index}`} style={{display: 'inline-block'}}>
<Link key={`ql-${index}`} to={() => {}}
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link">
onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
onMouseLeave={removeHighlight}
className="quote-link">
c/{reply.shortCid}</Link>
&nbsp;
</div>