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

update styling, count/highlight logic depending on params and post id

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-29 11:55:36 +02:00
parent a6a41edd76
commit 6d07ea2e3c
9 changed files with 74 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/edit-menu/edit-menu.tsx
+1 -1
View File
@@ -118,7 +118,7 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po
return ( return (
<> <>
<span className={`${styles.checkbox} ${isReply && styles.replyCheckbox}`} ref={refs.setReference} {...(cid && getReferenceProps())}> <span className={`${styles.checkbox} ${isReply && styles.replyCheckbox}`} ref={refs.setReference} {...(cid && getReferenceProps())}>
<input type='checkbox' onChange={() => cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} disabled={!isAccountCommentAuthor && !isAccountMod} /> <input type='checkbox' onChange={() => cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} />
</span> </span>
{isEditMenuOpen && (isAccountCommentAuthor || isAccountMod) && ( {isEditMenuOpen && (isAccountCommentAuthor || isAccountMod) && (
<FloatingFocusManager context={context} modal={false}> <FloatingFocusManager context={context} modal={false}>
src/components/post-desktop/post-desktop.tsx
+14 -15
View File
@@ -40,8 +40,8 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
const params = useParams(); const params = useParams();
const location = useLocation(); const location = useLocation();
const isInAllView = isAllView(location.pathname, params); const isInAllView = isAllView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params); const isInPostPageView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const account = useAccount(); const account = useAccount();
const accountShortAddress = account?.author?.shortAddress; // if reply by account is pending, it doesn't have an author yet const accountShortAddress = account?.author?.shortAddress; // if reply by account is pending, it doesn't have an author yet
@@ -49,7 +49,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress }); const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress });
const handleUserAddressClick = useAuthorAddressClick(); const handleUserAddressClick = useAuthorAddressClick();
const numberOfPostsByAuthor = document.querySelectorAll(`.${shortAddress}`).length; let numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
return ( return (
<div className={styles.postInfo}> <div className={styles.postInfo}>
@@ -93,6 +93,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
</span> </span>
} }
content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`} content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
showTooltip={isInPostPageView}
/> />
){' '} ){' '}
</> </>
@@ -133,7 +134,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
<img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} /> <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
</span> </span>
)} )}
{!isInPostView && !isReply && !isHidden && ( {!isInPostPageView && !isReply && !isHidden && (
<span className={styles.replyButton}> <span className={styles.replyButton}>
[ [
<Link <Link
@@ -294,13 +295,9 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
<div className={styles.replyDesktop}> <div className={styles.replyDesktop}>
<div className={styles.sideArrows}>{'>>'}</div> <div className={styles.sideArrows}>{'>>'}</div>
<div <div
className={` className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
${styles.reply} data-cid={cid}
${isRouteLinkToReply && styles.highlight} data-author-address={post?.author?.shortAddress}
${hidden && styles.postDesktopHidden}
${cid}
${post?.author?.shortAddress}
`}
> >
<PostInfo openReplyModal={openReplyModal} post={post} roles={roles} /> <PostInfo openReplyModal={openReplyModal} post={post} roles={roles} />
{link && !hidden && isValidURL(link) && <PostMedia post={post} />} {link && !hidden && isValidURL(link) && <PostMedia post={post} />}
@@ -351,10 +348,12 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
<span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} /> <span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} />
</span> </span>
)} )}
{link && !isHidden && isValidURL(link) && <PostMedia post={post} />} <div data-cid={cid} data-author-address={post?.author?.shortAddress}>
<PostInfo isHidden={isHidden} openReplyModal={openReplyModal} post={post} roles={roles} /> {link && !isHidden && isValidURL(link) && <PostMedia post={post} />}
{!isHidden && !content && <div className={styles.spacer} />} <PostInfo isHidden={isHidden} openReplyModal={openReplyModal} post={post} roles={roles} />
{!isHidden && content && <PostMessage post={post} />} {!isHidden && !content && <div className={styles.spacer} />}
{!isHidden && content && <PostMessage post={post} />}
</div>
{!isHidden && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && ( {!isHidden && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
<span className={styles.summary}> <span className={styles.summary}>
<span className={styles.expandButtonWrapper}> <span className={styles.expandButtonWrapper}>
src/components/post-mobile/post-mobile.tsx
+10 -11
View File
@@ -30,9 +30,11 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
const displayName = author?.displayName?.trim(); const displayName = author?.displayName?.trim();
const authorRole = roles?.[address]?.role; const authorRole = roles?.[address]?.role;
const params = useParams();
const location = useLocation(); const location = useLocation();
const isInAllView = isAllView(location.pathname, useParams()); const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); const isInPostPageView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const commentMediaInfo = getCommentMediaInfo(post); const commentMediaInfo = getCommentMediaInfo(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
@@ -47,7 +49,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
const stateString = useStateString(post); const stateString = useStateString(post);
const handleUserAddressClick = useAuthorAddressClick(); const handleUserAddressClick = useAuthorAddressClick();
const numberOfPostsByAuthor = document.querySelectorAll(`.${shortAddress}`).length; const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
return ( return (
<> <>
@@ -83,6 +85,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
</span> </span>
} }
content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`} content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
showTooltip={isInPostPageView}
/> />
){' '} ){' '}
</> </>
@@ -246,13 +249,9 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
<div className={styles.replyMobile}> <div className={styles.replyMobile}>
<div className={styles.reply}> <div className={styles.reply}>
<div <div
className={` className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
${styles.replyContainer} data-cid={cid}
${isRouteLinkToReply && styles.highlight} data-author-address={post?.author?.shortAddress}
${hidden && styles.postDesktopHidden}
${cid}
${post?.author?.shortAddress}
`}
> >
<PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} /> <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
{content && !hidden && <PostMessageMobile post={post} />} {content && !hidden && <PostMessageMobile post={post} />}
@@ -307,7 +306,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
)} )}
<div className={showReplies ? styles.thread : styles.quotePreview}> <div className={showReplies ? styles.thread : styles.quotePreview}>
<div className={styles.postContainer}> <div className={styles.postContainer}>
<div className={styles.postOp}> <div className={styles.postOp} data-cid={cid} data-author-address={post?.author?.shortAddress}>
<PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} /> <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
{content && <PostMessageMobile post={post} />} {content && <PostMessageMobile post={post} />}
</div> </div>
src/components/reply-quote-preview/reply-quote-preview.tsx
+3 -3
View File
@@ -15,7 +15,7 @@ interface ReplyQuotePreviewProps {
} }
const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => { const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
const targetElements = document.querySelectorAll(`.${cid}`); const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
if (targetElements.length === 0) return; if (targetElements.length === 0) return;
@@ -97,7 +97,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
const handleMouseLeave = (cid: string | null) => { const handleMouseLeave = (cid: string | null) => {
if (cid) { if (cid) {
const targetElements = document.querySelectorAll(`.${cid}`); const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
targetElements.forEach((element) => { targetElements.forEach((element) => {
element.classList.remove('highlight'); element.classList.remove('highlight');
}); });
@@ -183,7 +183,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
const handleMouseLeave = (cid: string | null) => { const handleMouseLeave = (cid: string | null) => {
if (cid) { if (cid) {
const targetElements = document.querySelectorAll(`.${cid}`); const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
targetElements.forEach((element) => { targetElements.forEach((element) => {
element.classList.remove('highlight'); element.classList.remove('highlight');
}); });
src/components/tooltip/tooltip.tsx
+11 -8
View File
@@ -5,9 +5,10 @@ import styles from './tooltip.module.css';
interface TooltipProps { interface TooltipProps {
content: string; content: string;
children: ReactNode; children: ReactNode;
showTooltip?: boolean;
} }
const Tooltip = ({ content, children }: TooltipProps) => { const Tooltip = ({ content, children, showTooltip = true }: TooltipProps) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const { refs, floatingStyles, context } = useFloating({ const { refs, floatingStyles, context } = useFloating({
@@ -36,13 +37,15 @@ const Tooltip = ({ content, children }: TooltipProps) => {
<span ref={refs.setReference} {...getReferenceProps()}> <span ref={refs.setReference} {...getReferenceProps()}>
{children} {children}
</span> </span>
<FloatingPortal> {showTooltip && (
{isOpen && ( <FloatingPortal>
<div className={styles.tooltip} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}> {isOpen && (
{content} <div className={styles.tooltip} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
</div> {content}
)} </div>
</FloatingPortal> )}
</FloatingPortal>
)}
</> </>
); );
}; };
src/hooks/use-author-address-click.ts
+10 -6
View File
@@ -1,9 +1,11 @@
const useAuthorAddressClick = () => { import { useParams } from 'react-router-dom';
const handleUserAddressClick = (shortAddress: string | undefined) => {
if (!shortAddress) return;
const useAuthorAddressClick = () => {
const { commentCid } = useParams<{ commentCid: string }>();
const handleUserAddressClick = (shortAddress: string) => {
// Select the elements corresponding to the clicked short address // Select the elements corresponding to the clicked short address
const elements = document.querySelectorAll(`.${shortAddress}`); const elements = document.querySelectorAll(`[data-author-address="${shortAddress}"]`);
// Check if the clicked address is already highlighted // Check if the clicked address is already highlighted
const isAlreadyHighlighted = Array.from(elements).some((element) => element.classList.contains('highlight')); const isAlreadyHighlighted = Array.from(elements).some((element) => element.classList.contains('highlight'));
@@ -17,9 +19,11 @@ const useAuthorAddressClick = () => {
// If the clicked address was already highlighted, don't add the highlight back // If the clicked address was already highlighted, don't add the highlight back
if (isAlreadyHighlighted) return; if (isAlreadyHighlighted) return;
// Highlight the new elements // Highlight the new elements, excluding the element matching the cid if it is the OP post
elements.forEach((element) => { elements.forEach((element) => {
element.classList.add('highlight'); if (element.getAttribute('data-cid') !== commentCid) {
element.classList.add('highlight');
}
}); });
}; };
src/index.css
+11 -4
View File
@@ -26,10 +26,6 @@ hr {
color: var(--post-greentext-color); color: var(--post-greentext-color);
} }
.highlight {
background: var(--reply-highlight-background-color) !important;
}
.capitalize { .capitalize {
text-transform: capitalize; text-transform: capitalize;
} }
@@ -55,6 +51,10 @@ hr {
select { select {
filter: var(--filter80); filter: var(--filter80);
} }
.highlight {
background: var(--reply-highlight-background-color) !important;
}
} }
@media (min-width: 640px) { @media (min-width: 640px) {
@@ -69,4 +69,11 @@ hr {
color: var(--button-desktop-text-color-hover); color: var(--button-desktop-text-color-hover);
cursor: pointer; cursor: pointer;
} }
.highlight {
background: var(--reply-highlight-background-color) !important;
border: var(--reply-highlight-border) !important;
border-left: var(--reply-highlight-border-left, revert) !important;
border-top: var(--reply-highlight-border-top, revert) !important;
}
} }
src/themes.css
+12 -4
View File
@@ -170,6 +170,7 @@
/* reply highlight */ /* reply highlight */
--reply-highlight-background-color: #f0c0b0; --reply-highlight-background-color: #f0c0b0;
--reply-highlight-border: 1px solid #d99f91;
/* reply modal */ /* reply modal */
--reply-modal-field-input-border: 1px solid #aaa; --reply-modal-field-input-border: 1px solid #aaa;
@@ -375,6 +376,7 @@
/* reply highlight */ /* reply highlight */
--reply-highlight-background-color: #d6bad0; --reply-highlight-background-color: #d6bad0;
--reply-highlight-border: 1px solid #ba9dbf;
/* reply modal */ /* reply modal */
--reply-modal-field-input-border: 1px solid #aaa; --reply-modal-field-input-border: 1px solid #aaa;
@@ -549,9 +551,7 @@
--quote-preview-border-bottom: 2px solid rgba(0,0,0,.2); --quote-preview-border-bottom: 2px solid rgba(0,0,0,.2);
/* reply desktop */ /* reply desktop */
--side-arrows-color: #e0bfb7;
--reply-desktop-background-color: #f0e0d6; --reply-desktop-background-color: #f0e0d6;
--reply-desktop-border: 1px solid #d9bfb7;
/* reply highlight */ /* reply highlight */
--reply-highlight-background-color: #f0c0b0; --reply-highlight-background-color: #f0c0b0;
@@ -734,9 +734,7 @@
--quote-preview-border-bottom: 2px solid rgba(0,0,0,.2); --quote-preview-border-bottom: 2px solid rgba(0,0,0,.2);
/* reply desktop */ /* reply desktop */
--side-arrows-color: #b7c5d9;
--reply-desktop-background-color: #d6daf0; --reply-desktop-background-color: #d6daf0;
--reply-desktop-border: 1px solid #b7c5d9;
/* reply highlight */ /* reply highlight */
--reply-highlight-background-color: #d6bad0; --reply-highlight-background-color: #d6bad0;
@@ -937,6 +935,8 @@
--side-arrows-color: #c5c8c6; --side-arrows-color: #c5c8c6;
--reply-desktop-background-color: #282a2e; --reply-desktop-background-color: #282a2e;
--reply-desktop-border: 1px solid #282a2e; --reply-desktop-border: 1px solid #282a2e;
--reply-desktop-border-left: 1px solid #282a2e;
--reply-desktop-border-top: 1px solid #282a2e;
/* reply modal */ /* reply modal */
--reply-modal-field-input-border: 1px solid #515151; --reply-modal-field-input-border: 1px solid #515151;
@@ -945,6 +945,9 @@
/* reply highlight */ /* reply highlight */
--reply-highlight-background-color: #1d1d21; --reply-highlight-background-color: #1d1d21;
--reply-highlight-border: 1px solid #111;
--reply-highlight-border-left: 1px solid #111;
--reply-highlight-border-top: 1px solid #111;
/* select */ /* select */
--select-border: 1px solid #575a60; --select-border: 1px solid #575a60;
@@ -1133,9 +1136,14 @@
--side-arrows-color: #333; --side-arrows-color: #333;
--reply-desktop-background-color: #ddd; --reply-desktop-background-color: #ddd;
--reply-desktop-border: 1px solid #ccc; --reply-desktop-border: 1px solid #ccc;
--reply-desktop-border-left: 1px solid #ccc;
--reply-desktop-border-top: 1px solid #ccc;
/* reply highlight */ /* reply highlight */
--reply-highlight-background-color: #ccc; --reply-highlight-background-color: #ccc;
--reply-highlight-border: 1px solid #ccc;
--reply-highlight-border-left: 1px solid #ccc;
--reply-highlight-border-top: 1px solid #ccc;
/* reply modal */ /* reply modal */
--reply-modal-field-input-border: 1px solid #aaa; --reply-modal-field-input-border: 1px solid #aaa;
src/views/post/post.module.css
+2 -2
View File
@@ -350,8 +350,8 @@
.replyDesktop .reply { .replyDesktop .reply {
background-color: var(--reply-desktop-background-color); background-color: var(--reply-desktop-background-color);
border: var(--reply-desktop-border); border: var(--reply-desktop-border);
border-left: none; border-top: var(--reply-desktop-border-top, revert);
border-top: none; border-left: var(--reply-desktop-border-left, revert);
display: table; display: table;
padding: 0 2px 2px 2px; padding: 0 2px 2px 2px;
} }