From 6d07ea2e3cdab97e0011c58ebe5b3fe4a5dd803a Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sat, 29 Jun 2024 11:55:36 +0200 Subject: [PATCH] update styling, count/highlight logic depending on params and post id --- src/components/edit-menu/edit-menu.tsx | 2 +- src/components/post-desktop/post-desktop.tsx | 29 +++++++++---------- src/components/post-mobile/post-mobile.tsx | 21 +++++++------- .../reply-quote-preview.tsx | 6 ++-- src/components/tooltip/tooltip.tsx | 19 +++++++----- src/hooks/use-author-address-click.ts | 16 ++++++---- src/index.css | 15 +++++++--- src/themes.css | 16 +++++++--- src/views/post/post.module.css | 4 +-- 9 files changed, 74 insertions(+), 54 deletions(-) diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx index c1ee7965..4e6aa990 100644 --- a/src/components/edit-menu/edit-menu.tsx +++ b/src/components/edit-menu/edit-menu.tsx @@ -118,7 +118,7 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po return ( <> - cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} disabled={!isAccountCommentAuthor && !isAccountMod} /> + cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} /> {isEditMenuOpen && (isAccountCommentAuthor || isAccountMod) && ( diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 9a2e3ff1..d30ab423 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/src/components/post-desktop/post-desktop.tsx @@ -40,8 +40,8 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { const params = useParams(); const location = useLocation(); const isInAllView = isAllView(location.pathname, params); - const isInPostView = isPostPageView(location.pathname, params); - const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); + const isInPostPageView = isPostPageView(location.pathname, params); + const isInSubscriptionsView = isSubscriptionsView(location.pathname, params); const account = useAccount(); 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 handleUserAddressClick = useAuthorAddressClick(); - const numberOfPostsByAuthor = document.querySelectorAll(`.${shortAddress}`).length; + let numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length; return (
@@ -93,6 +93,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { } content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`} + showTooltip={isInPostPageView} /> ){' '} @@ -133,7 +134,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { )} - {!isInPostView && !isReply && !isHidden && ( + {!isInPostPageView && !isReply && !isHidden && ( [ {
{'>>'}
{link && !hidden && isValidURL(link) && } @@ -351,10 +348,12 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies )} - {link && !isHidden && isValidURL(link) && } - - {!isHidden && !content &&
} - {!isHidden && content && } +
+ {link && !isHidden && isValidURL(link) && } + + {!isHidden && !content &&
} + {!isHidden && content && } +
{!isHidden && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && ( diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx index 98e5d8fe..501b54f2 100644 --- a/src/components/post-mobile/post-mobile.tsx +++ b/src/components/post-mobile/post-mobile.tsx @@ -30,9 +30,11 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => { const displayName = author?.displayName?.trim(); const authorRole = roles?.[address]?.role; + const params = useParams(); const location = useLocation(); - const isInAllView = isAllView(location.pathname, useParams()); - const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); + const isInAllView = isAllView(location.pathname, params); + const isInPostPageView = isPostPageView(location.pathname, params); + const isInSubscriptionsView = isSubscriptionsView(location.pathname, params); const commentMediaInfo = getCommentMediaInfo(post); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -47,7 +49,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => { const stateString = useStateString(post); const handleUserAddressClick = useAuthorAddressClick(); - const numberOfPostsByAuthor = document.querySelectorAll(`.${shortAddress}`).length; + const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length; return ( <> @@ -83,6 +85,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => { } content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`} + showTooltip={isInPostPageView} /> ){' '} @@ -246,13 +249,9 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
{content && !hidden && } @@ -307,7 +306,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = )}
-
+
{content && }
diff --git a/src/components/reply-quote-preview/reply-quote-preview.tsx b/src/components/reply-quote-preview/reply-quote-preview.tsx index 7edf16ee..6df42524 100644 --- a/src/components/reply-quote-preview/reply-quote-preview.tsx +++ b/src/components/reply-quote-preview/reply-quote-preview.tsx @@ -15,7 +15,7 @@ interface ReplyQuotePreviewProps { } const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => { - const targetElements = document.querySelectorAll(`.${cid}`); + const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`); if (targetElements.length === 0) return; @@ -97,7 +97,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i const handleMouseLeave = (cid: string | null) => { if (cid) { - const targetElements = document.querySelectorAll(`.${cid}`); + const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`); targetElements.forEach((element) => { element.classList.remove('highlight'); }); @@ -183,7 +183,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is const handleMouseLeave = (cid: string | null) => { if (cid) { - const targetElements = document.querySelectorAll(`.${cid}`); + const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`); targetElements.forEach((element) => { element.classList.remove('highlight'); }); diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx index 346ce278..a0d2b4ab 100644 --- a/src/components/tooltip/tooltip.tsx +++ b/src/components/tooltip/tooltip.tsx @@ -5,9 +5,10 @@ import styles from './tooltip.module.css'; interface TooltipProps { content: string; children: ReactNode; + showTooltip?: boolean; } -const Tooltip = ({ content, children }: TooltipProps) => { +const Tooltip = ({ content, children, showTooltip = true }: TooltipProps) => { const [isOpen, setIsOpen] = useState(false); const { refs, floatingStyles, context } = useFloating({ @@ -36,13 +37,15 @@ const Tooltip = ({ content, children }: TooltipProps) => { {children} - - {isOpen && ( -
- {content} -
- )} - + {showTooltip && ( + + {isOpen && ( +
+ {content} +
+ )} + + )} ); }; diff --git a/src/hooks/use-author-address-click.ts b/src/hooks/use-author-address-click.ts index c8d50949..76ef510a 100644 --- a/src/hooks/use-author-address-click.ts +++ b/src/hooks/use-author-address-click.ts @@ -1,9 +1,11 @@ -const useAuthorAddressClick = () => { - const handleUserAddressClick = (shortAddress: string | undefined) => { - if (!shortAddress) return; +import { useParams } from 'react-router-dom'; +const useAuthorAddressClick = () => { + const { commentCid } = useParams<{ commentCid: string }>(); + + const handleUserAddressClick = (shortAddress: string) => { // 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 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 (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) => { - element.classList.add('highlight'); + if (element.getAttribute('data-cid') !== commentCid) { + element.classList.add('highlight'); + } }); }; diff --git a/src/index.css b/src/index.css index 249adaf5..77265635 100644 --- a/src/index.css +++ b/src/index.css @@ -26,10 +26,6 @@ hr { color: var(--post-greentext-color); } -.highlight { - background: var(--reply-highlight-background-color) !important; -} - .capitalize { text-transform: capitalize; } @@ -55,6 +51,10 @@ hr { select { filter: var(--filter80); } + + .highlight { + background: var(--reply-highlight-background-color) !important; + } } @media (min-width: 640px) { @@ -69,4 +69,11 @@ hr { color: var(--button-desktop-text-color-hover); 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; + } } \ No newline at end of file diff --git a/src/themes.css b/src/themes.css index 0a54d42a..ebd4b670 100644 --- a/src/themes.css +++ b/src/themes.css @@ -170,6 +170,7 @@ /* reply highlight */ --reply-highlight-background-color: #f0c0b0; + --reply-highlight-border: 1px solid #d99f91; /* reply modal */ --reply-modal-field-input-border: 1px solid #aaa; @@ -375,6 +376,7 @@ /* reply highlight */ --reply-highlight-background-color: #d6bad0; + --reply-highlight-border: 1px solid #ba9dbf; /* reply modal */ --reply-modal-field-input-border: 1px solid #aaa; @@ -549,9 +551,7 @@ --quote-preview-border-bottom: 2px solid rgba(0,0,0,.2); /* reply desktop */ - --side-arrows-color: #e0bfb7; --reply-desktop-background-color: #f0e0d6; - --reply-desktop-border: 1px solid #d9bfb7; /* reply highlight */ --reply-highlight-background-color: #f0c0b0; @@ -734,9 +734,7 @@ --quote-preview-border-bottom: 2px solid rgba(0,0,0,.2); /* reply desktop */ - --side-arrows-color: #b7c5d9; --reply-desktop-background-color: #d6daf0; - --reply-desktop-border: 1px solid #b7c5d9; /* reply highlight */ --reply-highlight-background-color: #d6bad0; @@ -937,6 +935,8 @@ --side-arrows-color: #c5c8c6; --reply-desktop-background-color: #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-field-input-border: 1px solid #515151; @@ -945,6 +945,9 @@ /* reply highlight */ --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-border: 1px solid #575a60; @@ -1133,9 +1136,14 @@ --side-arrows-color: #333; --reply-desktop-background-color: #ddd; --reply-desktop-border: 1px solid #ccc; + --reply-desktop-border-left: 1px solid #ccc; + --reply-desktop-border-top: 1px solid #ccc; /* reply highlight */ --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-field-input-border: 1px solid #aaa; diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css index 184954ab..60aa0c95 100644 --- a/src/views/post/post.module.css +++ b/src/views/post/post.module.css @@ -350,8 +350,8 @@ .replyDesktop .reply { background-color: var(--reply-desktop-background-color); border: var(--reply-desktop-border); - border-left: none; - border-top: none; + border-top: var(--reply-desktop-border-top, revert); + border-left: var(--reply-desktop-border-left, revert); display: table; padding: 0 2px 2px 2px; }