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

style(post): collapse reply if it's deleted or removed

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-09-18 16:38:19 +02:00
parent d5dcedf3bd
commit 41c8f9dff8
3 changed files with 30 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+4 -4
View File
@@ -202,7 +202,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
</span> </span>
)} )}
</span> </span>
<PostMenuDesktop post={post} /> {!(removed || deleted) && <PostMenuDesktop post={post} />}
{cid && {cid &&
parentCid && parentCid &&
replies && replies &&
@@ -298,7 +298,7 @@ const PostMessage = ({ post }: PostProps) => {
return ( return (
<blockquote className={`${styles.postMessage} ${isRules && styles.rulesMessage}`}> <blockquote className={`${styles.postMessage} ${isRules && styles.rulesMessage}`}>
{isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />} {isReply && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? ( {removed ? (
reason ? ( reason ? (
<> <>
@@ -397,14 +397,14 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
<div className={styles.replyDesktop}> <div className={styles.replyDesktop}>
<div className={styles.sideArrows}>{'>>'}</div> <div className={styles.sideArrows}>{'>>'}</div>
<div <div
className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`} className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${(hidden || removed || deleted) && styles.postDesktopHidden}`}
data-cid={cid} data-cid={cid}
data-author-address={author?.shortAddress} data-author-address={author?.shortAddress}
data-post-cid={postCid} data-post-cid={postCid}
> >
<PostInfo openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} /> <PostInfo openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
{link && !hidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} />} {link && !hidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} />}
{!hidden && <PostMessage post={post} />} {!(hidden || removed || deleted) && <PostMessage post={post} />}
</div> </div>
</div> </div>
); );
src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+23 -19
View File
@@ -130,7 +130,7 @@ const BlockBoardButton = ({ address }: { address: string }) => {
}; };
const PostMenuMobile = ({ post }: { post: Comment }) => { const PostMenuMobile = ({ post }: { post: Comment }) => {
const { author, cid, isDescription, isRules, link, parentCid, postCid, subplebbitAddress } = post || {}; const { author, cid, deleted, isDescription, isRules, link, parentCid, postCid, removed, subplebbitAddress } = post || {};
const { isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: author?.address, subplebbitAddress }); const { isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: author?.address, subplebbitAddress });
const commentMediaInfo = getCommentMediaInfo(post); const commentMediaInfo = getCommentMediaInfo(post);
const { thumbnail, type, url } = commentMediaInfo || {}; const { thumbnail, type, url } = commentMediaInfo || {};
@@ -160,24 +160,28 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
return ( return (
<> <>
<span className={styles.postMenuBtn} title='Post menu' onClick={handleMenuClick} ref={refs.setReference} {...getReferenceProps()}> {!(deleted || removed) && (
... <>
</span> <span className={styles.postMenuBtn} title='Post menu' onClick={handleMenuClick} ref={refs.setReference} {...getReferenceProps()}>
{isMenuOpen && ...
(cid || isDescription || isRules) && </span>
createPortal( {isMenuOpen &&
<FloatingFocusManager context={context} modal={false}> (cid || isDescription || isRules) &&
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}> createPortal(
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />} <FloatingFocusManager context={context} modal={false}>
{cid && subplebbitAddress && <HidePostButton cid={cid} isReply={parentCid} postCid={postCid} onClose={handleClose} />} <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
{cid && subplebbitAddress && !isDescription && !isRules && <BlockUserButton address={author?.address} />} {cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
{cid && subplebbitAddress && !isInBoardView && !isDescription && !isRules && <BlockBoardButton address={subplebbitAddress} />} {cid && subplebbitAddress && <HidePostButton cid={cid} isReply={parentCid} postCid={postCid} onClose={handleClose} />}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />} {cid && subplebbitAddress && !isDescription && !isRules && <BlockUserButton address={author?.address} />}
<ViewOnButtons cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} /> {cid && subplebbitAddress && !isInBoardView && !isDescription && !isRules && <BlockBoardButton address={subplebbitAddress} />}
</div> {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />}
</FloatingFocusManager>, <ViewOnButtons cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
document.body, </div>
)} </FloatingFocusManager>,
document.body,
)}
</>
)}
{(isAccountMod || isAccountCommentAuthor) && cid && ( {(isAccountMod || isAccountCommentAuthor) && cid && (
<span className={styles.checkbox}> <span className={styles.checkbox}>
<EditMenu post={post} /> <EditMenu post={post} />
src/components/post-mobile/post-mobile.tsx
+3 -3
View File
@@ -314,7 +314,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
if (editedComment) { if (editedComment) {
post = editedComment; post = editedComment;
} }
const { author, cid, postCid, subplebbitAddress } = post || {}; const { author, cid, deleted, postCid, removed, subplebbitAddress } = post || {};
const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`); const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
const { hidden } = useHide({ cid }); const { hidden } = useHide({ cid });
@@ -322,13 +322,13 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
<div className={styles.replyMobile}> <div className={styles.replyMobile}>
<div className={styles.reply}> <div className={styles.reply}>
<div <div
className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`} className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight} ${(hidden || deleted || removed) && styles.postDesktopHidden}`}
data-cid={cid} data-cid={cid}
data-author-address={author?.shortAddress} data-author-address={author?.shortAddress}
data-post-cid={postCid} data-post-cid={postCid}
> >
<PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} /> <PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
{!hidden && <PostMessageMobile post={post} />} {!hidden && !deleted && !removed && <PostMessageMobile post={post} />}
<ReplyBacklinks post={reply} /> <ReplyBacklinks post={reply} />
</div> </div>
</div> </div>