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>
<PostMenuDesktop post={post} />
{!(removed || deleted) && <PostMenuDesktop post={post} />}
{cid &&
parentCid &&
replies &&
@@ -298,7 +298,7 @@ const PostMessage = ({ post }: PostProps) => {
return (
<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 ? (
reason ? (
<>
@@ -397,14 +397,14 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
<div className={styles.replyDesktop}>
<div className={styles.sideArrows}>{'>>'}</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-author-address={author?.shortAddress}
data-post-cid={postCid}
>
<PostInfo openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
{link && !hidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} />}
{!hidden && <PostMessage post={post} />}
{!(hidden || removed || deleted) && <PostMessage post={post} />}
</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 { 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 commentMediaInfo = getCommentMediaInfo(post);
const { thumbnail, type, url } = commentMediaInfo || {};
@@ -160,24 +160,28 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
return (
<>
<span className={styles.postMenuBtn} title='Post menu' onClick={handleMenuClick} ref={refs.setReference} {...getReferenceProps()}>
...
</span>
{isMenuOpen &&
(cid || isDescription || isRules) &&
createPortal(
<FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
{cid && subplebbitAddress && <HidePostButton cid={cid} isReply={parentCid} postCid={postCid} onClose={handleClose} />}
{cid && subplebbitAddress && !isDescription && !isRules && <BlockUserButton address={author?.address} />}
{cid && subplebbitAddress && !isInBoardView && !isDescription && !isRules && <BlockBoardButton address={subplebbitAddress} />}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />}
<ViewOnButtons cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
</div>
</FloatingFocusManager>,
document.body,
)}
{!(deleted || removed) && (
<>
<span className={styles.postMenuBtn} title='Post menu' onClick={handleMenuClick} ref={refs.setReference} {...getReferenceProps()}>
...
</span>
{isMenuOpen &&
(cid || isDescription || isRules) &&
createPortal(
<FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
{cid && subplebbitAddress && <HidePostButton cid={cid} isReply={parentCid} postCid={postCid} onClose={handleClose} />}
{cid && subplebbitAddress && !isDescription && !isRules && <BlockUserButton address={author?.address} />}
{cid && subplebbitAddress && !isInBoardView && !isDescription && !isRules && <BlockBoardButton address={subplebbitAddress} />}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />}
<ViewOnButtons cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
</div>
</FloatingFocusManager>,
document.body,
)}
</>
)}
{(isAccountMod || isAccountCommentAuthor) && cid && (
<span className={styles.checkbox}>
<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) {
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 { hidden } = useHide({ cid });
@@ -322,13 +322,13 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
<div className={styles.replyMobile}>
<div className={styles.reply}>
<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-author-address={author?.shortAddress}
data-post-cid={postCid}
>
<PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
{!hidden && <PostMessageMobile post={post} />}
{!hidden && !deleted && !removed && <PostMessageMobile post={post} />}
<ReplyBacklinks post={reply} />
</div>
</div>