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): add user ID with color specific to user address

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-08-13 18:27:56 +02:00
parent 25722d74a3
commit 8dfe2098ce
4 changed files with 45 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+11 -2
View File
@@ -5,6 +5,7 @@ import { Comment, useAccount, useAccountComments, useAuthorAvatar, useComment, u
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/post-utils';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isValidURL } from '../../lib/utils/url-utils';
import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
@@ -71,6 +72,9 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
const handleUserAddressClick = useAuthorAddressClick();
const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
const userIDBackgroundColor = hashStringToColor(shortAddress || accountShortAddress);
const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
return (
<div className={styles.postInfo}>
{!isHidden && <EditMenu isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} post={post} />}
@@ -106,10 +110,15 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
<img src={avatarImageUrl} alt='' />
</span>
)}
(u/
(ID: {''}
<Tooltip
children={
<span title={t('highlight_posts')} className={styles.userAddress} onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}>
<span
title={t('highlight_posts')}
className={styles.userAddress}
onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
>
{shortAddress || accountShortAddress}
</span>
}
src/components/post-mobile/post-mobile.tsx
+11 -2
View File
@@ -5,6 +5,7 @@ import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } fr
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/post-utils';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import useAuthorAddressClick from '../../hooks/use-author-address-click';
@@ -52,6 +53,9 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
const handleUserAddressClick = useAuthorAddressClick();
const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
const userIDBackgroundColor = hashStringToColor(shortAddress || accountShortAddress);
const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
return (
<>
<div className={styles.postInfo}>
@@ -79,10 +83,15 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
<img src={avatarImageUrl} alt='' />
</span>
)}
(u/
(ID: {''}
<Tooltip
children={
<span title={t('highlight_posts')} className={styles.userAddress} onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}>
<span
title={t('highlight_posts')}
className={styles.userAddress}
onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
>
{shortAddress || accountShortAddress}
</span>
}