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

feat(post): show edit reason as tooltip over red text

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-07-03 15:36:20 +02:00
parent 9ee2c6c00e
commit 1bccf87750
2 changed files with 34 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+17 -19
View File
@@ -218,7 +218,7 @@ const PostMedia = ({ post }: PostProps) => {
const PostMessage = ({ post }: PostProps) => { const PostMessage = ({ post }: PostProps) => {
const { cid, content, commentAuthor, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {}; const { cid, content, commentAuthor, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
const banned = commentAuthor?.banExpiresAt; const banned = !!commentAuthor?.banExpiresAt;
const { t } = useTranslation(); const { t } = useTranslation();
const params = useParams(); const params = useParams();
const location = useLocation(); const location = useLocation();
@@ -242,9 +242,13 @@ const PostMessage = ({ post }: PostProps) => {
<blockquote className={styles.postMessage}> <blockquote className={styles.postMessage}>
{isReply && !(removed || deleted) && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />} {isReply && !(removed || deleted) && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? ( {removed ? (
<span className={styles.removedContent}>({t('this_post_was_removed')})</span> <Tooltip
children={<span className={styles.removedContent}>({t('this_post_was_removed')})</span>}
content={`${_.capitalize(t('reason'))}: "${reason}"`}
showTooltip={!!reason}
/>
) : deleted ? ( ) : deleted ? (
<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span> <Tooltip children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>} content={reason && `${t('reason')}: ${reason}`} />
) : ( ) : (
<> <>
{!showOriginal && <Markdown content={displayContent} spoiler={spoiler} />} {!showOriginal && <Markdown content={displayContent} spoiler={spoiler} />}
@@ -269,26 +273,20 @@ const PostMessage = ({ post }: PostProps) => {
)} )}
</span> </span>
)} )}
{banned && (
<span className={styles.removedContent}>
<br />
<Tooltip
children={`(${t('user_banned')})`}
content={t('ban_expires_at', {
address: subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress),
timestamp: getFormattedDate(commentAuthor?.banExpiresAt),
interpolation: { escapeValue: false },
})}
/>
</span>
)}
</> </>
)} )}
{(removed || deleted) && reason && ( {banned && (
<span> <span className={styles.removedContent}>
<br /> <br />
<br /> <br />
{t('reason')}: {reason} <Tooltip
children={`(${t('user_banned')})`}
content={`${t('ban_expires_at', {
address: subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress),
timestamp: getFormattedDate(commentAuthor?.banExpiresAt),
interpolation: { escapeValue: false },
})}${reason ? `. ${_.capitalize(t('reason'))}: "${reason}"` : ''}`}
/>
</span> </span>
)} )}
{!isReply && content.length > 1000 && !isInPostView && ( {!isReply && content.length > 1000 && !isInPostView && (
src/components/post-mobile/post-mobile.tsx
+17 -19
View File
@@ -153,7 +153,7 @@ const ReplyBacklinks = ({ post }: PostProps) => {
const PostMessageMobile = ({ post }: PostProps) => { const PostMessageMobile = ({ post }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { cid, commentAuthor, content, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {}; const { cid, commentAuthor, content, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
const banned = commentAuthor?.banExpiresAt; const banned = !!commentAuthor?.banExpiresAt;
const [showOriginal, setShowOriginal] = useState(false); const [showOriginal, setShowOriginal] = useState(false);
const params = useParams(); const params = useParams();
@@ -178,9 +178,13 @@ const PostMessageMobile = ({ post }: PostProps) => {
<blockquote className={`${styles.postMessage} ${!isReply && styles.clampLines}`}> <blockquote className={`${styles.postMessage} ${!isReply && styles.clampLines}`}>
{isReply && !(removed || deleted) && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />} {isReply && !(removed || deleted) && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? ( {removed ? (
<span className={styles.removedContent}>({t('this_post_was_removed')})</span> <Tooltip
children={<span className={styles.removedContent}>({t('this_post_was_removed')})</span>}
content={`${_.capitalize(t('reason'))}: "${reason}"`}
showTooltip={!!reason}
/>
) : deleted ? ( ) : deleted ? (
<span className={styles.removedContent}>{t('user_deleted_this_post')}</span> <Tooltip children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>} content={reason && `${t('reason')}: ${reason}`} />
) : ( ) : (
<> <>
{!showOriginal && <Markdown content={displayContent} spoiler={spoiler} />} {!showOriginal && <Markdown content={displayContent} spoiler={spoiler} />}
@@ -205,26 +209,20 @@ const PostMessageMobile = ({ post }: PostProps) => {
)} )}
</span> </span>
)} )}
{banned && (
<span className={styles.removedContent}>
<br />
<Tooltip
children={`(${t('user_banned')})`}
content={t('ban_expires_at', {
address: subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress),
timestamp: getFormattedDate(commentAuthor?.banExpiresAt),
interpolation: { escapeValue: false },
})}
/>
</span>
)}
</> </>
)} )}
{(removed || deleted) && reason && ( {banned && (
<span> <span className={styles.removedContent}>
<br /> <br />
<br /> <br />
reason: {reason} <Tooltip
children={`(${t('user_banned')})`}
content={`${t('ban_expires_at', {
address: subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress),
timestamp: getFormattedDate(commentAuthor?.banExpiresAt),
interpolation: { escapeValue: false },
})}${reason ? `. ${_.capitalize(t('reason'))}: "${reason}"` : ''}`}
/>
</span> </span>
)} )}
{!isReply && content.length > 1000 && !isInPostView && ( {!isReply && content.length > 1000 && !isInPostView && (