更新动态详情页样式

- 更新动态详情页样式，包括图片比例、评论样式、点赞和收藏按钮等 - 新增文案 - 移除冗余代码
2024-09-06 21:39:57 +08:00
parent 3a668b8b2a
commit d1e9365d69
15 changed files with 185 additions and 105 deletions
--- a/app/src/main/java/com/aiosman/riderpro/ui/account/edit2.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/account/edit2.kt
@@ -48,6 +48,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
@@ -154,16 +155,6 @@ fun AccountEditScreen2() {
            }
        }
    }
-    val pickBannerImageLauncher = rememberLauncherForActivityResult(
-        contract = ActivityResultContracts.StartActivityForResult()
-    ) { result ->
-        if (result.resultCode == Activity.RESULT_OK) {
-            val uri = result.data?.data
-            uri?.let {
-                bannerImageUrl = uri
-            }
-        }
-    }

    LaunchedEffect(Unit) {
        reloadProfile()
@@ -178,7 +169,7 @@ fun AccountEditScreen2() {
            modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
        ) {
            NoticeScreenHeader(
-                title = "编辑资料",
+                title = stringResource(R.string.edit_profile),
                moreIcon = false
            ) {

@@ -248,7 +239,7 @@ fun AccountEditScreen2() {
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
-                        text = "Name",
+                        text = stringResource(R.string.nickname),
                        modifier = Modifier
                            .widthIn(100.dp),
                        style = TextStyle(
@@ -284,7 +275,7 @@ fun AccountEditScreen2() {
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
-                        text = "Bio",
+                        text = stringResource(R.string.bio),
                        modifier = Modifier
                            .widthIn(100.dp),
                        style = TextStyle(
--- a/app/src/main/java/com/aiosman/riderpro/ui/comment/CommentModal.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/comment/CommentModal.kt
@@ -34,6 +34,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
@@ -158,8 +159,8 @@ fun CommentModalContent(

        ) {
            Text(
-                "评论",
-                fontSize = 20.sp,
+                stringResource(R.string.comment),
+                fontSize = 18.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.align(Alignment.Center)
            )
--- a/app/src/main/java/com/aiosman/riderpro/ui/composables/AnimatedFavouriteButton.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/composables/AnimatedFavouriteButton.kt
@@ -26,7 +26,6 @@ fun AnimatedFavouriteIcon(
    onClick: (() -> Unit)? = null
 ) {
    val animatableRotation = remember { Animatable(0f) }
-    val animatedColor by animateColorAsState(targetValue = if (isFavourite) Color(0xFFd83737) else Color.Black)
    val scope = rememberCoroutineScope()
    suspend fun shake() {
        repeat(2) {
@@ -57,12 +56,15 @@ fun AnimatedFavouriteIcon(
        }
    }) {
        Image(
-            painter = painterResource(id = R.drawable.rider_pro_favoriate),
-            contentDescription = "Like",
+            painter =  if (isFavourite) {
+                painterResource(id = R.drawable.rider_pro_favourited)
+            } else {
+                painterResource(id = R.drawable.rider_pro_favourite)
+            },
+            contentDescription = "Favourite",
            modifier = modifier.graphicsLayer {
                rotationZ = animatableRotation.value
            },
-            colorFilter = ColorFilter.tint(animatedColor)
        )
    }
 }
--- a/app/src/main/java/com/aiosman/riderpro/ui/composables/AnimatedLikeButton.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/composables/AnimatedLikeButton.kt
@@ -28,7 +28,6 @@ fun AnimatedLikeIcon(
    onClick: (() -> Unit)? = null
 ) {
    val animatableRotation = remember { Animatable(0f) }
-    val animatedColor by animateColorAsState(targetValue = if (liked) Color(0xFFd83737) else Color.Black)
    val scope = rememberCoroutineScope()
    suspend fun shake() {
        repeat(2) {
@@ -59,12 +58,13 @@ fun AnimatedLikeIcon(
        }
    }) {
        Image(
-            painter = painterResource(id = R.drawable.rider_pro_like),
+            painter = if (!liked) painterResource(id = R.drawable.rider_pro_moment_like) else painterResource(
+                id = R.drawable.rider_pro_moment_liked
+            ),
            contentDescription = "Like",
            modifier = modifier.graphicsLayer {
-                    rotationZ = animatableRotation.value
-                },
-            colorFilter = androidx.compose.ui.graphics.ColorFilter.tint(animatedColor)
+                rotationZ = animatableRotation.value
+            },
        )
    }
 }
--- a/app/src/main/java/com/aiosman/riderpro/ui/index/tabs/moment/Moment.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/index/tabs/moment/Moment.kt
@@ -554,7 +554,7 @@ fun MomentBottomOperateRowGroup(
                contentAlignment = Alignment.Center
            ) {
                MomentOperateBtn(
-                    icon = R.drawable.rider_pro_moment_comment,
+                    icon = R.drawable.rider_pro_comment,
                    count = momentEntity.commentCount.toString()
                )
            }
--- a/app/src/main/java/com/aiosman/riderpro/ui/post/Post.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/post/Post.kt
@@ -71,6 +71,7 @@ import androidx.paging.cachedIn
 import androidx.paging.compose.LazyPagingItems
 import androidx.paging.compose.collectAsLazyPagingItems
 import androidx.paging.map
+import com.aiosman.riderpro.AppState
 import com.aiosman.riderpro.LocalAnimatedContentScope
 import com.aiosman.riderpro.LocalNavController
 import com.aiosman.riderpro.LocalSharedTransitionScope
@@ -92,6 +93,8 @@ import com.aiosman.riderpro.exp.timeAgo
 import com.aiosman.riderpro.entity.MomentEntity
 import com.aiosman.riderpro.entity.MomentImageEntity
 import com.aiosman.riderpro.ui.NavigationRoute
+import com.aiosman.riderpro.ui.composables.AnimatedFavouriteIcon
+import com.aiosman.riderpro.ui.composables.AnimatedLikeIcon
 import com.aiosman.riderpro.ui.composables.StatusBarMaskLayout
 import com.aiosman.riderpro.ui.composables.BottomNavigationPlaceholder
 import com.aiosman.riderpro.ui.composables.CustomAsyncImage
@@ -319,6 +322,7 @@ fun PostScreen(
        Column(
            modifier = Modifier
                .fillMaxSize()
+                .background(Color.White)
        ) {
            StatusBarSpacer()
            Header(
@@ -345,7 +349,7 @@ fun PostScreen(
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
-                            .aspectRatio(1f)
+                            .aspectRatio(383f / 527f)
                    ) {
                        PostImageView(
                            id,
@@ -357,7 +361,35 @@ fun PostScreen(
                        id,
                        viewModel.moment
                    )
+                    Spacer(modifier = Modifier.height(16.dp))
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 16.dp)
+                            .height(1.dp)
+                            .background(Color(0xFFF7F7F7))
+                    ) {
+
+                    }
+                    Spacer(modifier = Modifier.height(24.dp))
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 16.dp),
+                        horizontalArrangement = Arrangement.SpaceBetween
+                    ) {
+                        Text(
+                            text = stringResource(
+                                R.string.comment_count,
+                                (viewModel.moment?.commentCount ?: 0)
+                            ), fontSize = 14.sp
+                        )
+                    }
+
+                    Spacer(modifier = Modifier.height(16.dp))
+
                }
+
                items(commentsPagging.itemCount) { idx ->
                    val item = commentsPagging[idx] ?: return@items
                    Box(
@@ -440,30 +472,34 @@ fun Header(

        Spacer(modifier = Modifier.width(8.dp))
        Text(text = nickname ?: "", fontWeight = FontWeight.Bold)
-        Box(
-            modifier = Modifier
-                .height(20.dp)
-                .wrapContentWidth()
-                .padding(start = 6.dp)
-                .noRippleClickable {
-                    onFollowClick()
-                },
-            contentAlignment = Alignment.Center
-        ) {
-            Image(
-                modifier = Modifier.height(18.dp),
-                painter = painterResource(id = R.drawable.follow_bg),
-                contentDescription = ""
-            )
-            Text(
-                text = if (isFollowing) stringResource(R.string.following_upper) else stringResource(
-                    R.string.follow_upper
-                ),
-                fontSize = 12.sp,
-                color = Color.White,
-                style = TextStyle(fontWeight = FontWeight.Bold)
-            )
+        if (AppState.UserId != userId) {
+            Box(
+                modifier = Modifier
+                    .height(20.dp)
+                    .wrapContentWidth()
+                    .padding(start = 6.dp)
+                    .noRippleClickable {
+                        onFollowClick()
+                    },
+                contentAlignment = Alignment.Center
+            ) {
+                Image(
+                    modifier = Modifier.height(18.dp),
+                    painter = painterResource(id = R.drawable.follow_bg),
+                    contentDescription = ""
+                )
+                Text(
+                    text = if (isFollowing) stringResource(R.string.following_upper) else stringResource(
+                        R.string.follow_upper
+                    ),
+                    fontSize = 12.sp,
+                    color = Color.White,
+                    style = TextStyle(fontWeight = FontWeight.Bold)
+                )
+            }
        }
+
+
    }
 }

@@ -521,7 +557,7 @@ fun PostImageView(
            images.forEachIndexed { index, _ ->
                Box(
                    modifier = Modifier
-                        .size(8.dp)
+                        .size(4.dp)
                        .clip(CircleShape)

                        .background(
@@ -549,20 +585,18 @@ fun PostDetails(

    Column(
        modifier = Modifier
-            .padding(16.dp)
+            .padding(start = 16.dp, end = 16.dp, top = 12.dp)
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
-
-        Text(
-            text = momentEntity?.momentTextContent ?: "",
-            fontSize = 16.sp,
-            fontWeight = FontWeight.Bold,
-        )
+        if (!momentEntity?.momentTextContent.isNullOrEmpty()) {
+            Text(
+                text = momentEntity?.momentTextContent ?: "",
+                fontSize = 16.sp,
+                fontWeight = FontWeight.Bold,
+            )
+        }
        Text(text = "${momentEntity?.time?.formatPostTime()}")
-        Spacer(modifier = Modifier.height(8.dp))
-        Text(text = stringResource(R.string.comment_count, (momentEntity?.commentCount ?: 0)))
-
    }
 }

@@ -609,7 +643,6 @@ fun CommentItem(commentEntity: CommentEntity, onLike: () -> Unit = {}) {
            Box(
                modifier = Modifier
                    .size(40.dp)
-                    .clip(CircleShape)
                    .background(Color.Gray.copy(alpha = 0.1f))
                    .noRippleClickable {
                        navController.navigate(
@@ -632,27 +665,24 @@ fun CommentItem(commentEntity: CommentEntity, onLike: () -> Unit = {}) {
            Column(
                modifier = Modifier.weight(1f)
            ) {
-                Text(text = commentEntity.name, fontWeight = FontWeight.Bold)
-                Text(text = commentEntity.comment)
+                Text(text = commentEntity.name, fontWeight = FontWeight.Bold, fontSize = 14.sp)
+                Text(text = commentEntity.comment, fontSize = 12.sp)
                Text(
                    text = commentEntity.date.timeAgo(context),
                    fontSize = 12.sp,
                    color = Color.Gray
                )
            }
+            Spacer(modifier = Modifier.width(16.dp))
            Column(
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
-                IconButton(onClick = {
-                    onLike()
-                }) {
-                    Icon(
-                        Icons.Filled.Favorite,
-                        contentDescription = "Like",
-                        tint = if (commentEntity.liked) Color.Red else Color.Gray
-                    )
-                }
-                Text(text = commentEntity.likes.toString())
+                AnimatedLikeIcon(
+                    liked = commentEntity.liked,
+                    onClick = onLike,
+                    modifier = Modifier.size(16.dp)
+                )
+                Text(text = commentEntity.likes.toString(), fontSize = 11.sp)
            }
        }
        Spacer(modifier = Modifier.height(8.dp))
@@ -695,18 +725,25 @@ fun BottomNavigationBar(
    Column(
        modifier = Modifier.background(Color.White)
    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(1.dp)
+                .background(Color(0xFFF7F7F7))
+        ) {
+
+        }
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
-                .padding(horizontal = 16.dp)
+                .padding(horizontal = 16.dp, vertical = 13.dp)
                .background(Color.White)
        ) {
            // grey round box
            Box(
                modifier = Modifier
-                    .padding(8.dp)
                    .clip(RoundedCornerShape(16.dp))
-                    .background(Color.Gray.copy(alpha = 0.1f))
+                    .background(Color(0xFFF5F5F5))
                    .weight(1f)
                    .height(31.dp)
                    .padding(8.dp)
@@ -717,40 +754,34 @@ fun BottomNavigationBar(
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
-                    Icon(Icons.Filled.Edit, contentDescription = "Send")
+                    Image(
+                        ImageVector.vectorResource(R.drawable.rider_pro_new_comment),
+                        contentDescription = "Send"
+                    )
                    Spacer(modifier = Modifier.width(8.dp))
-                    Text(text = stringResource(R.string.post_comment_hint), fontSize = 12.sp)
+                    Text(
+                        text = stringResource(R.string.post_comment_hint),
+                        fontSize = 12.sp,
+                        color = Color(0xFFCCCCCC)
+                    )
                }
            }
-
-            IconButton(
-                onClick = {
-                    onLikeClick()
-                }) {
-                Icon(
-                    imageVector = ImageVector.vectorResource(id = R.drawable.rider_pro_like),
-                    contentDescription = "like",
-                    tint = if (momentEntity?.liked == true) Color.Red else Color.Gray
-                )
-            }
+            Spacer(modifier = Modifier.width(16.dp))
+            AnimatedLikeIcon(
+                liked = momentEntity?.liked == true,
+                onClick = onLikeClick,
+                modifier = Modifier.size(24.dp)
+            )
+            Spacer(modifier = Modifier.width(4.dp))
            Text(text = momentEntity?.likeCount.toString())
-            IconButton(
-                onClick = {
-                    onFavoriteClick()
-                }
-            ) {
-                Icon(
-                    imageVector = ImageVector.vectorResource(id = R.drawable.rider_pro_favoriate),
-                    contentDescription = "Favourite",
-                    tint = if (momentEntity?.isFavorite == true) Color.Red else Color.Gray
-                )
-            }
+            Spacer(modifier = Modifier.width(16.dp))
+            AnimatedFavouriteIcon(
+                isFavourite = momentEntity?.isFavorite == true,
+                onClick = onFavoriteClick,
+                modifier = Modifier.size(24.dp)
+            )
+            Spacer(modifier = Modifier.width(4.dp))
            Text(text = momentEntity?.favoriteCount.toString())
-//            IconButton(
-//                onClick = { /*TODO*/ }) {
-//                Icon(Icons.Filled.CheckCircle, contentDescription = "Send")
-//            }
-//            Text(text = "2077")

        }
        BottomNavigationPlaceholder(
--- a/app/src/main/res/drawable/rider_pro_comment.xml
+++ b/app/src/main/res/drawable/rider_pro_comment.xml
@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.77" android:height="24dp" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+      
+    <path android:fillColor="#00000000" android:fillType="evenOdd" android:pathData="M19.724,16.594C22.034,12.696 21.083,7.687 17.504,4.908C13.925,2.129 8.837,2.448 5.632,5.652C2.428,8.856 2.109,13.944 4.889,17.523C7.668,21.103 12.676,22.054 16.574,19.744L16.574,19.744L19.686,20.625C19.946,20.701 20.227,20.629 20.418,20.438C20.609,20.246 20.681,19.966 20.605,19.706L19.724,16.594Z" android:strokeColor="#000000" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="2"/>
+    
+</vector>
--- a/app/src/main/res/drawable/rider_pro_favourite.xml
+++ b/app/src/main/res/drawable/rider_pro_favourite.xml
@@ -0,0 +1,7 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.77" android:height="24dp" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+      
+    <path android:fillColor="#00000000" android:fillType="evenOdd" android:pathData="M5.45,14.7C5.45,14.7 6.35,13.8 9.05,13.8C11.75,13.8 13.55,15.6 16.25,15.6C18.95,15.6 19.85,14.7 19.85,14.7L19.85,3.9C19.85,3.9 18.95,4.8 16.25,4.8C13.55,4.8 11.75,3 9.05,3C6.35,3 5.45,3.9 5.45,3.9L5.45,14.7Z" android:strokeColor="#000000" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="2"/>
+      
+    <path android:fillColor="#00000000" android:fillType="evenOdd" android:pathData="M5.45,21L5.45,14.7" android:strokeColor="#000000" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="2"/>
+    
+</vector>
--- a/app/src/main/res/drawable/rider_pro_favourited.xml
+++ b/app/src/main/res/drawable/rider_pro_favourited.xml
@@ -0,0 +1,7 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.77" android:height="24dp" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+      
+    <path android:fillColor="#000000" android:fillType="evenOdd" android:pathData="M5.45,14.7C5.45,14.7 6.35,13.8 9.05,13.8C11.75,13.8 13.55,15.6 16.25,15.6C18.95,15.6 19.85,14.7 19.85,14.7L19.85,3.9C19.85,3.9 18.95,4.8 16.25,4.8C13.55,4.8 11.75,3 9.05,3C6.35,3 5.45,3.9 5.45,3.9L5.45,14.7Z" android:strokeColor="#000000" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="2"/>
+      
+    <path android:fillColor="#00000000" android:fillType="evenOdd" android:pathData="M5.45,21L5.45,14.7" android:strokeColor="#000000" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="2"/>
+    
+</vector>
--- a/app/src/main/res/drawable/rider_pro_moment_like.xml
+++ b/app/src/main/res/drawable/rider_pro_moment_like.xml
@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.77" android:height="24dp" android:viewportHeight="24" android:viewportWidth="25" android:width="25dp">
+      
+    <path android:fillColor="#00000000" android:fillType="evenOdd" android:pathData="M12.542,19.866L20.141,12.272C22.008,10.397 22.28,7.331 20.516,5.372C19.622,4.374 18.357,3.788 17.017,3.75C15.678,3.713 14.382,4.228 13.434,5.175L12.008,6.609L10.779,5.372C8.903,3.506 5.835,3.234 3.874,4.997C2.876,5.89 2.289,7.155 2.252,8.494C2.214,9.832 2.73,11.128 3.677,12.075L11.473,19.866C11.769,20.159 12.246,20.159 12.542,19.866Z" android:strokeColor="#000000" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="2"/>
+    
+</vector>
--- a/app/src/main/res/drawable/rider_pro_moment_liked.xml
+++ b/app/src/main/res/drawable/rider_pro_moment_liked.xml
@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.77" android:height="24dp" android:viewportHeight="24" android:viewportWidth="25" android:width="25dp">
+      
+    <path android:fillColor="#ED1C24" android:fillType="evenOdd" android:pathData="M12.542,19.866L20.141,12.272C22.008,10.397 22.28,7.331 20.516,5.372C19.622,4.374 18.357,3.788 17.017,3.75C15.678,3.713 14.382,4.228 13.434,5.175L12.008,6.609L10.779,5.372C8.903,3.506 5.835,3.234 3.874,4.997C2.876,5.89 2.289,7.155 2.252,8.494C2.214,9.832 2.73,11.128 3.677,12.075L11.473,19.866C11.769,20.159 12.246,20.159 12.542,19.866Z" android:strokeColor="#ED1C24" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="2"/>
+    
+</vector>
--- a/app/src/main/res/drawable/rider_pro_new_comment.xml
+++ b/app/src/main/res/drawable/rider_pro_new_comment.xml
@@ -0,0 +1,7 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.77" android:height="16dp" android:viewportHeight="16" android:viewportWidth="16" android:width="16dp">
+      
+    <path android:fillColor="#00000000" android:fillType="evenOdd" android:pathData="M9.185,2l2.37,2.341l-6.519,6.439l-2.37,0l0,-2.341z" android:strokeColor="#CCCCCC" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="1.18518519"/>
+      
+    <path android:fillColor="#00000000" android:fillType="evenOdd" android:pathData="M2.667,13.707L13.333,13.707" android:strokeColor="#CCCCCC" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="1.18518519"/>
+    
+</vector>
--- a/app/src/main/res/values-zh/strings.xml
+++ b/app/src/main/res/values-zh/strings.xml
@@ -51,4 +51,7 @@
    <string name="logout">登出</string>
    <string name="change_password">变更密码</string>
    <string name="cancel">取消</string>
+    <string name="bio">个性签名</string>
+    <string name="nickname">昵称</string>
+    <string name="comment">评论</string>
 </resources>
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -50,4 +50,7 @@
    <string name="logout">Logout</string>
    <string name="change_password">Change password</string>
    <string name="cancel">Cancel</string>
+    <string name="bio">Signature</string>
+    <string name="nickname">Name</string>
+    <string name="comment">Comment</string>
 </resources>