1
0
mirror of https://github.com/TeamNewPipe/NewPipe synced 2025-02-02 12:19:16 +00:00

Improve comment replies dialog layout

This commit is contained in:
Stypox 2024-11-10 23:28:59 +01:00
parent e6b1341246
commit 802a094154
No known key found for this signature in database
GPG Key ID: 4BDF1B40A49FDD23
2 changed files with 53 additions and 43 deletions

View File

@ -6,9 +6,7 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.rememberCoroutineScope
@ -65,7 +63,6 @@ private fun CommentRepliesDialog(
val state = rememberLazyListState() val state = rememberLazyListState()
ModalBottomSheet(onDismissRequest = onDismissRequest) { ModalBottomSheet(onDismissRequest = onDismissRequest) {
Surface(color = MaterialTheme.colorScheme.background) {
LazyColumnScrollbar( LazyColumnScrollbar(
state = state, state = state,
settings = ScrollbarSettings.Default.copy( settings = ScrollbarSettings.Default.copy(
@ -79,7 +76,10 @@ private fun CommentRepliesDialog(
) { ) {
item { item {
CommentRepliesHeader(comment = parentComment) CommentRepliesHeader(comment = parentComment)
HorizontalDivider(thickness = 1.dp) HorizontalDivider(
thickness = 1.dp,
modifier = Modifier.padding(start = 24.dp, end = 24.dp, bottom = 8.dp)
)
} }
if (comments.itemCount == 0) { if (comments.itemCount == 0) {
@ -104,7 +104,6 @@ private fun CommentRepliesDialog(
} }
} }
} }
}
} }
@Preview(name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO) @Preview(name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO)

View File

@ -20,6 +20,7 @@ import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage import coil.compose.AsyncImage
@ -43,11 +44,13 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
Row( Row(
modifier = Modifier.clickable { modifier = Modifier
NavigationHelper.openCommentAuthorIfPresent(context, comment) .padding(end = 12.dp)
}, .clip(CircleShape)
.clickable { NavigationHelper.openCommentAuthorIfPresent(context, comment) }
.weight(1.0f, true),
horizontalArrangement = Arrangement.spacedBy(8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically,
) { ) {
AsyncImage( AsyncImage(
model = ImageStrategy.choosePreferredImage(comment.uploaderAvatars), model = ImageStrategy.choosePreferredImage(comment.uploaderAvatars),
@ -60,14 +63,18 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
) )
Column { Column {
Text(text = comment.uploaderName) Text(
text = comment.uploaderName,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = MaterialTheme.typography.titleSmall,
)
Text( Text(
color = MaterialTheme.colorScheme.secondary,
style = MaterialTheme.typography.bodySmall,
text = Localization.relativeTimeOrTextual( text = Localization.relativeTimeOrTextual(
context, comment.uploadDate, comment.textualUploadDate context, comment.uploadDate, comment.textualUploadDate
) ),
style = MaterialTheme.typography.bodySmall,
) )
} }
} }
@ -80,7 +87,10 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
painter = painterResource(R.drawable.ic_thumb_up), painter = painterResource(R.drawable.ic_thumb_up),
contentDescription = stringResource(R.string.detail_likes_img_view_description) contentDescription = stringResource(R.string.detail_likes_img_view_description)
) )
Text(text = Localization.likeCount(context, comment.likeCount)) Text(
text = Localization.likeCount(context, comment.likeCount),
maxLines = 1,
)
if (comment.isHeartedByUploader) { if (comment.isHeartedByUploader) {
Image( Image(
@ -100,7 +110,8 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
DescriptionText( DescriptionText(
description = comment.commentText, description = comment.commentText,
style = MaterialTheme.typography.bodyMedium style = MaterialTheme.typography.bodyMedium,
modifier = Modifier.padding(8.dp)
) )
} }
} }
@ -111,7 +122,7 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) {
fun CommentRepliesHeaderPreview() { fun CommentRepliesHeaderPreview() {
val comment = CommentsInfoItem( val comment = CommentsInfoItem(
commentText = Description("Hello world!", Description.PLAIN_TEXT), commentText = Description("Hello world!", Description.PLAIN_TEXT),
uploaderName = "Test", uploaderName = "Test really long lorem ipsum dolor sit",
likeCount = 1000, likeCount = 1000,
isPinned = true, isPinned = true,
isHeartedByUploader = true isHeartedByUploader = true