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

implement on hover cid highlight

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Board.styled.jsx
+2 -2
View File
@@ -1822,7 +1822,7 @@ export const BoardForm = styled.div`
case 'Tomorrow':
return `.highlighted {
background-color: #1d1d21 !important;
border: 1px solid #111 !important;
outline: 1px solid #111 !important;
}
#post-menu {
@@ -1842,7 +1842,7 @@ export const BoardForm = styled.div`
case 'Photon':
return `.highlighted {
background-color: #ccc !important;
border: 1px solid #ccc !important;
outline: 1px solid #ccc !important;
}
#post-menu {
src/components/styled/views/Thread.styled.jsx
+2 -2
View File
@@ -1020,7 +1020,7 @@ export const BoardForm = styled.div`
case 'Tomorrow':
return `.highlighted {
background-color: #1d1d21 !important;
border: 1px solid #111 !important;
outline: 1px solid #111 !important;
}
#post-menu {
@@ -1042,7 +1042,7 @@ export const BoardForm = styled.div`
case 'Photon':
return `.highlighted {
background-color: #ccc !important;
border: 1px solid #ccc !important;
outline: 1px solid #ccc !important;
}
#post-menu {
src/components/views/Board.jsx
+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>
src/components/views/Thread.jsx
+17 -5
View File
@@ -27,7 +27,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';
@@ -923,7 +925,9 @@ const Thread = () => {
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<span style={{cursor: 'pointer'}} key={`ql-${index}`}
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}</span>
&nbsp;
</div>
@@ -1106,7 +1110,9 @@ const Thread = () => {
<div key={`div-${index}`} style={{display: 'inline-block'}}>
<span style={{cursor: 'pointer'}} 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}</span>
&nbsp;
</div>
@@ -1171,7 +1177,9 @@ const Thread = () => {
onClick={(event) => {
handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
}}
>
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
onMouseLeave={removeHighlight}
>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</span>
<Post content={reply.content} comment={reply} key={`post-${index}`} />
@@ -1414,7 +1422,9 @@ const Thread = () => {
) : null}
<blockquote key={`mob-pm-${index}`} className="post-message-mobile">
<span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile"
onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}>
onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}
onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
onMouseLeave={removeHighlight}>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</span>
<Post content={reply.content} comment={reply} key={`post-mobile-${index}`} />
@@ -1432,7 +1442,9 @@ const Thread = () => {
.map((reply, index) => (
<div key={`div-back${index}`} style={{display: 'inline-block'}}>
<span style={{cursor: 'pointer'}} 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}</span>
&nbsp;
</div>