RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

display private post indicator

Browse Source
This commit is contained in:
SrGooglo 2025-03-21 18:38:44 +00:00
parent 31e27f83aa
commit 16952789ec
2 changed files with 135 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
packages/app/src/components/PostCard/components/header/index.jsx
View File

@ -11,64 +11,66 @@ import PostReplieView from "@components/PostReplieView"
import "./index.less"
const PostCardHeader = (props) => {
const goToProfile = () => {
app.navigation.goToAccount(props.postData.user?.username)
}
const goToProfile = () => {
app.navigation.goToAccount(props.postData.user?.username)
}
return <div className="post-header" onDoubleClick={props.onDoubleClick}>
{
!props.disableReplyTag && props.postData.reply_to && <div
className="post-header-replied_to"
>
<div className="post-header-replied_to-label">
<Icons.FiRepeat />
return (
<div className="post-header" onDoubleClick={props.onDoubleClick}>
{!props.disableReplyTag && props.postData.reply_to && (
<div className="post-header-replied_to">
<div className="post-header-replied_to-label">
<Icons.FiRepeat />
<span>
Replied to
</span>
</div>
<span>Replied to</span>
</div>
<PostReplieView
data={props.postData.reply_to_data}
/>
</div>
}
<PostReplieView data={props.postData.reply_to_data} />
</div>
)}
<div className="post-header-user">
<div className="post-header-user-avatar">
<Image
alt="Avatar"
src={props.postData.user?.avatar}
/>
</div>
<div className="post-header-user">
<div className="post-header-user-avatar">
<Image alt="Avatar" src={props.postData.user?.avatar} />
</div>
<div className="post-header-user-info">
<h1 onClick={goToProfile}>
{
props.postData.user?.public_name ?? `@${props.postData.user?.username}`
}
<div className="post-header-user-info">
<div className="post-header-user-info-label">
<div className="post-header-user-info-label-left">
<h1 onClick={goToProfile}>
{props.postData.user?.public_name ??
`@${props.postData.user?.username}`}
{
props.postData.user?.verified && <Icons.verifiedBadge />
}
{props.postData.user?.verified && (
<Icons.verifiedBadge id="verified-badge" />
)}
</h1>
</div>
{
props.postData.flags?.includes("nsfw") && <Tag
color="volcano"
>
NSFW
</Tag>
}
</h1>
<div className="post-header-user-info-label-right">
{props.postData.visibility === "private" && (
<span>
<Icons.FiEyeOff /> Private
</span>
)}
{props.postData.flags?.includes("nsfw") && (
<Tag color="volcano">NSFW</Tag>
)}
</div>
</div>
<span className="post-header-user-info-timeago">
<TimeAgo
time={props.postData.timestamp ?? props.postData.created_at}
/>
</span>
</div>
</div>
</div>
<span className="post-header-user-info-timeago">
<TimeAgo
time={
props.postData.timestamp ??
props.postData.created_at
}
/>
</span>
</div>
</div>
</div>
)
}
export default PostCardHeader

144
packages/app/src/components/PostCard/components/header/index.less
View File

@ -1,90 +1,108 @@
.post-header {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
gap: 10px;
gap: 10px;
.post-header-replied_to {
display: flex;
flex-direction: column;
.post-header-replied_to {
display: flex;
flex-direction: column;
gap: 7px;
gap: 7px;
.post-header-replied_to-label {
display: flex;
flex-direction: row;
.post-header-replied_to-label {
display: flex;
flex-direction: row;
gap: 7px;
gap: 7px;
align-items: center;
align-items: center;
svg {
color: var(--text-color);
margin: 0 !important;
}
svg {
color: var(--text-color);
margin: 0 !important;
}
line-height: 1.5rem;
}
}
line-height: 1.5rem;
}
}
.post-header-user {
display: inline-flex;
flex-direction: row;
align-items: center;
.post-header-user {
display: inline-flex;
flex-direction: row;
align-items: center;
>div {
margin-right: 10px;
}
> div {
margin-right: 10px;
}
svg {
fill: var(--app-color);
margin-left: 6px;
}
.post-header-user-avatar {
width: 40px;
height: 40px;
.post-header-user-avatar {
width: 40px;
height: 40px;
img {
object-fit: cover;
img {
object-fit: cover;
width: 40px;
height: 40px;
border-radius: 8px;
}
}
width: 40px;
height: 40px;
border-radius: 8px;
}
}
.post-header-user-info {
display: flex;
flex-direction: column;
.post-header-user-info {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
align-items: flex-start;
width: 100%;
width: fit-content;
.post-header-user-info-label {
display: inline-flex;
flex-direction: row;
h1 {
margin: 0 0 4px 0;
align-items: center;
justify-content: space-between;
align-self: start;
width: 100%;
font-weight: 500;
font-size: 1rem;
.post-header-user-info-label-left {
h1 {
margin: 0 0 4px 0;
cursor: pointer;
align-self: start;
color: var(--background-color-contrast);
}
font-weight: 500;
font-size: 1rem;
.post-header-user-info-timeago {
font-weight: 400;
font-size: 0.7rem;
cursor: pointer;
color: rgb(var(--bg_color_4));
}
color: var(--background-color-contrast);
}
>div {
align-self: start;
}
}
}
#verified-badge {
fill: var(--app-color) !important;
}
}
.post-header-user-info-label-right {
display: flex;
flex-direction: row;
gap: 8px;
}
}
.post-header-user-info-timeago {
font-weight: 400;
font-size: 0.7rem;
color: rgb(var(--bg_color_4));
}
> div {
align-self: start;
}
}
}
}