通知界面UI调整

修复BUG:通知界面系统栏空白区域调整合适长度,统一点赞/粉丝/评论3个页面的消息长宽和大小
This commit is contained in:
2025-11-26 18:45:17 +08:00
parent 0a1601c16c
commit cfe5ce8102
7 changed files with 227 additions and 197 deletions

View File

@@ -41,9 +41,8 @@ import com.aiosman.ravenow.R
import com.aiosman.ravenow.entity.CommentEntity import com.aiosman.ravenow.entity.CommentEntity
import com.aiosman.ravenow.exp.timeAgo import com.aiosman.ravenow.exp.timeAgo
import com.aiosman.ravenow.ui.NavigationRoute import com.aiosman.ravenow.ui.NavigationRoute
import com.aiosman.ravenow.ui.comment.NoticeScreenHeader
import com.aiosman.ravenow.ui.composables.CustomAsyncImage import com.aiosman.ravenow.ui.composables.CustomAsyncImage
import com.aiosman.ravenow.ui.composables.StatusBarSpacer import com.aiosman.ravenow.ui.composables.StatusBarMaskLayout
import com.aiosman.ravenow.ui.modifiers.noRippleClickable import com.aiosman.ravenow.ui.modifiers.noRippleClickable
import com.aiosman.ravenow.ui.navigateToPost import com.aiosman.ravenow.ui.navigateToPost
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
@@ -68,10 +67,14 @@ fun CommentNoticeScreen(includeStatusBarPadding: Boolean = true){
val navController = LocalNavController.current val navController = LocalNavController.current
val AppColors = LocalAppTheme.current val AppColors = LocalAppTheme.current
Column( StatusBarMaskLayout(
modifier = Modifier.fillMaxSize().background(color = AppColors.background) modifier = Modifier
.background(color = AppColors.background)
.padding(horizontal = 16.dp),
darkIcons = !AppState.darkMode,
maskBoxBackgroundColor = AppColors.background,
includeStatusBarPadding = includeStatusBarPadding
) { ) {
StatusBarSpacer()
val isNetworkAvailable = NetworkUtils.isNetworkAvailable(LocalContext.current) val isNetworkAvailable = NetworkUtils.isNetworkAvailable(LocalContext.current)
if (!isNetworkAvailable) { if (!isNetworkAvailable) {
@@ -109,7 +112,8 @@ fun CommentNoticeScreen(includeStatusBarPadding: Boolean = true){
} else { } else {
LazyColumn( LazyColumn(
modifier = Modifier modifier = Modifier
.fillMaxSize().padding(horizontal = 16.dp) .weight(1f)
.background(color = AppColors.background)
) { ) {
items(comments.itemCount) { index -> items(comments.itemCount) { index ->
comments[index]?.let { comment -> comments[index]?.let { comment ->
@@ -183,55 +187,58 @@ fun CommentNoticeItem(
val navController = LocalNavController.current val navController = LocalNavController.current
val context = LocalContext.current val context = LocalContext.current
val AppColors = LocalAppTheme.current val AppColors = LocalAppTheme.current
val commentPrefix = stringResource(R.string.comment_notice)
Row( Row(
modifier = Modifier.padding(vertical = 20.dp, horizontal = 16.dp) modifier = Modifier.padding(vertical = 12.dp)
) { ) {
Box { // 左侧头像区域
CustomAsyncImage( CustomAsyncImage(
context = context, context = context,
imageUrl = commentItem.avatar, imageUrl = commentItem.avatar,
contentDescription = commentItem.name, contentDescription = commentItem.name,
modifier = Modifier modifier = Modifier
.size(48.dp) .size(40.dp)
.clip(CircleShape) .clip(CircleShape)
.noRippleClickable { .noRippleClickable {
navController.navigate( navController.navigate(
NavigationRoute.AccountProfile.route.replace( NavigationRoute.AccountProfile.route.replace(
"{id}", "{id}",
commentItem.author.toString() commentItem.author.toString()
)
) )
} )
) }
} )
// 右侧内容区域
Row( Row(
modifier = Modifier modifier = Modifier
.weight(1f) .weight(1f)
.padding(start = 12.dp) .padding(start = 8.dp)
.noRippleClickable { .noRippleClickable {
onPostClick() onPostClick()
} }
) { ) {
// 主要信息列
Column( Column(
modifier = Modifier.weight(1f) modifier = Modifier.weight(1f)
) { ) {
Text( Text(
text = commentItem.name, text = commentItem.name,
fontSize = 18.sp, fontSize = 14.sp,
modifier = Modifier,
color = AppColors.text, color = AppColors.text,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis overflow = TextOverflow.Ellipsis
) )
Spacer(modifier = Modifier.height(4.dp)) Spacer(modifier = Modifier.height(4.dp))
// 评论内容行
Row { Row {
var text = commentItem.comment var text = commentItem.comment
if (commentItem.parentCommentId != null) { if (commentItem.parentCommentId != null) {
text = "Reply you: $text" text = "Reply you: $text"
} }
Text( Text(
text = text, text = "$commentPrefix $text",
fontSize = 14.sp, fontSize = 14.sp,
maxLines = 1, maxLines = 1,
color = AppColors.secondaryText, color = AppColors.secondaryText,
@@ -245,25 +252,20 @@ fun CommentNoticeItem(
color = AppColors.secondaryText, color = AppColors.secondaryText,
) )
} }
} }
Spacer(modifier = Modifier.width(24.dp)) Spacer(modifier = Modifier.width(4.dp))
// 右侧帖子图片
commentItem.post?.let { commentItem.post?.let {
Box { Box {
Box( CustomAsyncImage(
modifier = Modifier.padding(4.dp) context = context,
) { imageUrl = it.images[0].thumbnail,
CustomAsyncImage( contentDescription = "Post Image",
context = context, modifier = Modifier
imageUrl = it.images[0].thumbnail, .size(40.dp)
contentDescription = "Post Image", .clip(RoundedCornerShape(8.dp))
modifier = Modifier )
.size(48.dp).clip(RoundedCornerShape(8.dp)) // 未读指示器
)
// unread indicator
}
if (commentItem.unread) { if (commentItem.unread) {
Box( Box(
modifier = Modifier modifier = Modifier
@@ -273,11 +275,7 @@ fun CommentNoticeItem(
) )
} }
} }
} }
} }
} }
} }

View File

@@ -141,42 +141,57 @@ fun FollowItem(
val AppColors = LocalAppTheme.current val AppColors = LocalAppTheme.current
val context = LocalContext.current val context = LocalContext.current
val navController = LocalNavController.current val navController = LocalNavController.current
Box( val followText = stringResource(R.string.followed_you)
Row(
modifier = Modifier modifier = Modifier
.padding(vertical = 16.dp) .fillMaxWidth()
.noRippleClickable { .padding(vertical = 12.dp),
navController.navigate( verticalAlignment = Alignment.CenterVertically
NavigationRoute.AccountProfile.route.replace(
"{id}",
userId.toString()
)
)
}
) { ) {
// 左侧头像区域
CustomAsyncImage(
context = context,
imageUrl = avatar,
contentDescription = nickname,
modifier = Modifier
.size(40.dp)
.clip(CircleShape)
.noRippleClickable {
navController.navigate(
NavigationRoute.AccountProfile.route.replace(
"{id}",
userId.toString()
)
)
}
)
// 右侧内容区域
Row( Row(
modifier = Modifier.fillMaxWidth(), modifier = Modifier
verticalAlignment = Alignment.CenterVertically, .weight(1f)
.padding(start = 8.dp),
verticalAlignment = Alignment.CenterVertically
) { ) {
CustomAsyncImage(
context = context,
imageUrl = avatar,
contentDescription = nickname,
modifier = Modifier
.size(40.dp)
.clip(CircleShape)
)
Spacer(modifier = Modifier.width(12.dp))
Column( Column(
modifier = Modifier.weight(1f) modifier = Modifier.weight(1f)
) { ) {
Text( Text(
text = nickname, text = nickname,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
fontSize = 16.sp, fontSize = 14.sp,
color = AppColors.text, color = AppColors.text,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis overflow = TextOverflow.Ellipsis
) )
Spacer(modifier = Modifier.height(4.dp))
Text(
text = followText,
fontSize = 14.sp,
color = AppColors.secondaryText,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
} }
if (!isFollowing && userId != AppState.UserId) { if (!isFollowing && userId != AppState.UserId) {
FollowButton( FollowButton(

View File

@@ -155,64 +155,83 @@ fun ActionPostNoticeItem(
val navController = LocalNavController.current val navController = LocalNavController.current
val AppColors = LocalAppTheme.current val AppColors = LocalAppTheme.current
Box( val actionLabel = when (action) {
modifier = Modifier.padding(vertical = 16.dp) "favourite" -> stringResource(R.string.favourite_your_post)
else -> stringResource(R.string.like_your_post)
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 12.dp, horizontal = 0.dp),
verticalAlignment = Alignment.CenterVertically
) { ) {
CustomAsyncImage(
context = context,
imageUrl = avatar,
modifier = Modifier
.size(40.dp)
.clip(CircleShape)
.noRippleClickable {
navController.navigate(
NavigationRoute.AccountProfile.route.replace(
"{id}",
userId.toString()
)
)
},
contentDescription = action,
)
Row( Row(
modifier = Modifier.fillMaxWidth(), modifier = Modifier
verticalAlignment = Alignment.Top, .weight(1f)
.padding(start = 8.dp)
.noRippleClickable {
navController.navigateToPost(
id = postId,
highlightCommentId = 0,
initImagePagerIndex = 0
)
},
verticalAlignment = Alignment.CenterVertically
) { ) {
CustomAsyncImage(
context,
imageUrl = avatar,
modifier = Modifier
.size(48.dp)
.clip(CircleShape)
.noRippleClickable {
navController.navigate(
NavigationRoute.AccountProfile.route.replace(
"{id}",
userId.toString()
)
)
},
contentDescription = action,
)
Spacer(modifier = Modifier.width(12.dp))
Column( Column(
modifier = Modifier modifier = Modifier.weight(1f)
.weight(1f)
.noRippleClickable {
navController.navigateToPost(
id = postId,
highlightCommentId = 0,
initImagePagerIndex = 0
)
}
) { ) {
Text( Text(
text = nickName, text = nickName,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
fontSize = 16.sp, fontSize = 14.sp,
color = AppColors.text, color = AppColors.text,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis overflow = TextOverflow.Ellipsis
) )
Spacer(modifier = Modifier.height(2.dp)) Spacer(modifier = Modifier.height(4.dp))
when (action) { Row(
"like" -> Text(stringResource(R.string.like_your_post), color = AppColors.text) verticalAlignment = Alignment.CenterVertically
"favourite" -> Text(stringResource(R.string.favourite_your_post), color = AppColors.text) ) {
} Text(
Spacer(modifier = Modifier.height(2.dp)) text = actionLabel,
Row { fontSize = 14.sp,
Text(likeTime.timeAgo(context), fontSize = 12.sp, color = AppColors.secondaryText) color = AppColors.secondaryText,
modifier = Modifier.weight(1f),
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Spacer(modifier = Modifier.width(4.dp))
Text(
text = likeTime.timeAgo(context),
fontSize = 14.sp,
color = AppColors.secondaryText
)
} }
} }
Spacer(modifier = Modifier.width(4.dp))
CustomAsyncImage( CustomAsyncImage(
context, context = context,
imageUrl = thumbnail, imageUrl = thumbnail,
modifier = Modifier modifier = Modifier
.size(48.dp) .size(40.dp)
.clip(RoundedCornerShape(8.dp)), .clip(RoundedCornerShape(8.dp)),
contentDescription = action, contentDescription = action,
) )
@@ -227,10 +246,11 @@ fun LikeCommentNoticeItem(
val navController = LocalNavController.current val navController = LocalNavController.current
val context = LocalContext.current val context = LocalContext.current
val AppColors = LocalAppTheme.current val AppColors = LocalAppTheme.current
val previewPost = item.comment?.replyComment?.post ?: item.comment?.post
Box( Column(
modifier = Modifier modifier = Modifier
.padding(vertical = 16.dp) .padding(vertical = 12.dp)
.noRippleClickable { .noRippleClickable {
item.comment?.postId.let { item.comment?.postId.let {
navController.navigateToPost( navController.navigateToPost(
@@ -241,112 +261,103 @@ fun LikeCommentNoticeItem(
} }
} }
) { ) {
Row { Row(
Column( verticalAlignment = Alignment.CenterVertically
modifier = Modifier.weight(1f) ) {
CustomAsyncImage(
imageUrl = item.user.avatar,
modifier = Modifier
.size(40.dp)
.clip(CircleShape),
contentDescription = stringResource(R.string.like_your_comment)
)
Row(
modifier = Modifier
.weight(1f)
.padding(start = 8.dp),
verticalAlignment = Alignment.CenterVertically
) { ) {
Row( Column(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.weight(1f)
verticalAlignment = Alignment.Top,
) { ) {
CustomAsyncImage( Text(
imageUrl = item.user.avatar, text = item.user.nickName,
modifier = Modifier fontWeight = FontWeight.Bold,
.size(48.dp) fontSize = 14.sp,
.clip(CircleShape), color = AppColors.text,
contentDescription = stringResource(R.string.like_your_comment) maxLines = 1,
overflow = TextOverflow.Ellipsis
) )
Spacer(modifier = Modifier.width(12.dp)) Spacer(modifier = Modifier.height(4.dp))
Column( Row(
modifier = Modifier verticalAlignment = Alignment.CenterVertically
.weight(1f)
) { ) {
Text( Text(
text = item.user.nickName, text = stringResource(R.string.like_your_comment),
fontWeight = FontWeight.Bold, fontSize = 14.sp,
fontSize = 16.sp, color = AppColors.secondaryText,
color = AppColors.text, modifier = Modifier.weight(1f),
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis overflow = TextOverflow.Ellipsis
) )
Spacer(modifier = Modifier.height(2.dp)) Spacer(modifier = Modifier.width(4.dp))
Text(stringResource(R.string.like_your_comment), color = AppColors.text)
Spacer(modifier = Modifier.height(2.dp))
Row {
Text(
item.likeTime.timeAgo(context),
fontSize = 12.sp,
color = AppColors.secondaryText
)
}
}
}
Spacer(modifier = Modifier.height(12.dp))
Row(
modifier = Modifier.padding(start = 48.dp)
) {
Box(
modifier = Modifier
.size(24.dp)
.background(Color.Gray.copy(alpha = 0.1f))
) {
CustomAsyncImage(
context = context,
imageUrl = AppState.profile?.avatar ?: "",
contentDescription = "Comment Profile Picture",
modifier = Modifier
.size(24.dp)
.clip(RoundedCornerShape(24.dp)),
contentScale = ContentScale.Crop
)
}
Spacer(modifier = Modifier.width(8.dp))
Column(
modifier = Modifier.weight(1f)
) {
Text( Text(
text = AppState.profile?.nickName ?: "", text = item.likeTime.timeAgo(context),
fontWeight = FontWeight.W600,
fontSize = 14.sp, fontSize = 14.sp,
color = AppColors.text color = AppColors.secondaryText
)
Text(
text = item.comment?.content ?: "",
fontSize = 12.sp,
color = AppColors.secondaryText,
maxLines = 2
) )
} }
} }
} Spacer(modifier = Modifier.width(4.dp))
Spacer(modifier = Modifier.width(16.dp)) previewPost?.let {
if (item.comment?.replyComment?.post != null) {
item.comment.replyComment.post.let {
CustomAsyncImage( CustomAsyncImage(
context = context, context = context,
imageUrl = it.images[0].thumbnail, imageUrl = it.images[0].thumbnail,
contentDescription = "Post Thumbnail", contentDescription = "Post Thumbnail",
modifier = Modifier modifier = Modifier
.size(48.dp) .size(40.dp)
.clip(RoundedCornerShape(8.dp)),
contentScale = ContentScale.Crop
)
}
} else {
item.comment?.post?.let {
CustomAsyncImage(
context = context,
imageUrl = it.images[0].thumbnail,
contentDescription = "Post Thumbnail",
modifier = Modifier
.size(48.dp)
.clip(RoundedCornerShape(8.dp)), .clip(RoundedCornerShape(8.dp)),
contentScale = ContentScale.Crop contentScale = ContentScale.Crop
) )
} }
} }
}
Spacer(modifier = Modifier.height(8.dp))
Row(
modifier = Modifier.padding(start = 48.dp)
) {
Box(
modifier = Modifier
.size(24.dp)
.background(Color.Gray.copy(alpha = 0.1f))
) {
CustomAsyncImage(
context = context,
imageUrl = AppState.profile?.avatar ?: "",
contentDescription = "Comment Profile Picture",
modifier = Modifier
.size(24.dp)
.clip(RoundedCornerShape(24.dp)),
contentScale = ContentScale.Crop
)
}
Spacer(modifier = Modifier.width(8.dp))
Column(
modifier = Modifier.weight(1f)
) {
Text(
text = AppState.profile?.nickName ?: "",
fontWeight = FontWeight.W600,
fontSize = 14.sp,
color = AppColors.text
)
Text(
text = item.comment?.content ?: "",
fontSize = 12.sp,
color = AppColors.secondaryText,
maxLines = 2
)
}
} }
} }
} }

View File

@@ -107,7 +107,7 @@ fun NotificationScreen() {
TabSpacer() TabSpacer()
TabItem( TabItem(
text = stringResource(R.string.followers_upper), text = stringResource(R.string.follow_upper),
isSelected = pagerState.currentPage == 1, isSelected = pagerState.currentPage == 1,
onClick = { onClick = {
scope.launch { scope.launch {

View File

@@ -75,6 +75,7 @@
<string name="bio">署名</string> <string name="bio">署名</string>
<string name="nickname">名前</string> <string name="nickname">名前</string>
<string name="comment">コメント</string> <string name="comment">コメント</string>
<string name="comment_notice">コメント:</string>
<string name="order_comment_default">デフォルト</string> <string name="order_comment_default">デフォルト</string>
<string name="order_comment_latest">最新</string> <string name="order_comment_latest">最新</string>
<string name="order_comment_earliest">最も古い</string> <string name="order_comment_earliest">最も古い</string>
@@ -102,6 +103,7 @@
<string name="private_policy_keyword">Rave Nowのプライバシーポリシー</string> <string name="private_policy_keyword">Rave Nowのプライバシーポリシー</string>
<string name="gallery">ギャラリー</string> <string name="gallery">ギャラリー</string>
<string name="chat_upper">チャット</string> <string name="chat_upper">チャット</string>
<string name="followed_you">フォローしました</string>
<string name="like_your_post">あなたの投稿にいいねしました</string> <string name="like_your_post">あなたの投稿にいいねしました</string>
<string name="favourite_your_post">あなたの投稿をお気に入りにしました</string> <string name="favourite_your_post">あなたの投稿をお気に入りにしました</string>
<string name="like_your_comment">あなたのコメントにいいねしました</string> <string name="like_your_comment">あなたのコメントにいいねしました</string>

View File

@@ -80,6 +80,7 @@
<string name="bio">个性签名</string> <string name="bio">个性签名</string>
<string name="nickname">昵称</string> <string name="nickname">昵称</string>
<string name="comment">评论</string> <string name="comment">评论</string>
<string name="comment_notice">评论:</string>
<string name="order_comment_default">默认</string> <string name="order_comment_default">默认</string>
<string name="order_comment_latest">最新</string> <string name="order_comment_latest">最新</string>
<string name="order_comment_earliest">最早</string> <string name="order_comment_earliest">最早</string>
@@ -107,6 +108,7 @@
<string name="private_policy_keyword">用户协议</string> <string name="private_policy_keyword">用户协议</string>
<string name="gallery">图片</string> <string name="gallery">图片</string>
<string name="chat_upper">私信</string> <string name="chat_upper">私信</string>
<string name="followed_you">关注了你</string>
<string name="like_your_post">喜欢了你的动态</string> <string name="like_your_post">喜欢了你的动态</string>
<string name="favourite_your_post">收藏了你的动态</string> <string name="favourite_your_post">收藏了你的动态</string>
<string name="like_your_comment">喜欢了你的评论</string> <string name="like_your_comment">喜欢了你的评论</string>

View File

@@ -74,6 +74,7 @@
<string name="bio">Signature</string> <string name="bio">Signature</string>
<string name="nickname">Name</string> <string name="nickname">Name</string>
<string name="comment">COMMENTS</string> <string name="comment">COMMENTS</string>
<string name="comment_notice">commented:</string>
<string name="order_comment_default">Default</string> <string name="order_comment_default">Default</string>
<string name="order_comment_latest">Latest</string> <string name="order_comment_latest">Latest</string>
<string name="order_comment_earliest">Earliest</string> <string name="order_comment_earliest">Earliest</string>
@@ -101,6 +102,7 @@
<string name="private_policy_keyword">Rave Nows Privacy Policy</string> <string name="private_policy_keyword">Rave Nows Privacy Policy</string>
<string name="gallery">Gallery</string> <string name="gallery">Gallery</string>
<string name="chat_upper">CHAT</string> <string name="chat_upper">CHAT</string>
<string name="followed_you">followed you</string>
<string name="like_your_post">Like your post</string> <string name="like_your_post">Like your post</string>
<string name="favourite_your_post">Favourite your post</string> <string name="favourite_your_post">Favourite your post</string>
<string name="like_your_comment">Like your comment</string> <string name="like_your_comment">Like your comment</string>