RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +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" import "./index.less"
const PostCardHeader = (props) => { const PostCardHeader = (props) => {
const goToProfile = () => { const goToProfile = () => {
app.navigation.goToAccount(props.postData.user?.username) app.navigation.goToAccount(props.postData.user?.username)
} }
return <div className="post-header" onDoubleClick={props.onDoubleClick}> return (
{ <div className="post-header" onDoubleClick={props.onDoubleClick}>
!props.disableReplyTag && props.postData.reply_to && <div {!props.disableReplyTag && props.postData.reply_to && (
className="post-header-replied_to" <div className="post-header-replied_to">
> <div className="post-header-replied_to-label">
<div className="post-header-replied_to-label"> <Icons.FiRepeat />
<Icons.FiRepeat />
<span> <span>Replied to</span>
Replied to </div>
</span>
</div>
<PostReplieView <PostReplieView data={props.postData.reply_to_data} />
data={props.postData.reply_to_data} </div>
/> )}
</div>
}
<div className="post-header-user"> <div className="post-header-user">
<div className="post-header-user-avatar"> <div className="post-header-user-avatar">
<Image <Image alt="Avatar" src={props.postData.user?.avatar} />
alt="Avatar" </div>
src={props.postData.user?.avatar}
/>
</div>
<div className="post-header-user-info"> <div className="post-header-user-info">
<h1 onClick={goToProfile}> <div className="post-header-user-info-label">
{ <div className="post-header-user-info-label-left">
props.postData.user?.public_name ?? `@${props.postData.user?.username}` <h1 onClick={goToProfile}>
} {props.postData.user?.public_name ??
`@${props.postData.user?.username}`}
{ {props.postData.user?.verified && (
props.postData.user?.verified && <Icons.verifiedBadge /> <Icons.verifiedBadge id="verified-badge" />
} )}
</h1>
</div>
{ <div className="post-header-user-info-label-right">
props.postData.flags?.includes("nsfw") && <Tag {props.postData.visibility === "private" && (
color="volcano" <span>
> <Icons.FiEyeOff /> Private
NSFW </span>
</Tag> )}
} {props.postData.flags?.includes("nsfw") && (
</h1> <Tag color="volcano">NSFW</Tag>
)}
</div>
</div>
<span className="post-header-user-info-timeago"> <span className="post-header-user-info-timeago">
<TimeAgo <TimeAgo
time={props.postData.timestamp ?? props.postData.created_at} time={
/> props.postData.timestamp ??
</span> props.postData.created_at
</div> }
</div> />
</div> </span>
</div>
</div>
</div>
)
} }
export default PostCardHeader export default PostCardHeader

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

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