From 802a0941548391280af3e826072559b0a80ac7f3 Mon Sep 17 00:00:00 2001 From: Stypox Date: Sun, 10 Nov 2024 23:28:59 +0100 Subject: [PATCH] Improve comment replies dialog layout --- .../video/comment/CommentRepliesDialog.kt | 63 +++++++++---------- .../video/comment/CommentRepliesHeader.kt | 33 ++++++---- 2 files changed, 53 insertions(+), 43 deletions(-) diff --git a/app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesDialog.kt b/app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesDialog.kt index 30131d91e..33eedd0b4 100644 --- a/app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesDialog.kt +++ b/app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesDialog.kt @@ -6,9 +6,7 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.HorizontalDivider -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.ModalBottomSheet -import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope @@ -65,41 +63,42 @@ private fun CommentRepliesDialog( val state = rememberLazyListState() ModalBottomSheet(onDismissRequest = onDismissRequest) { - Surface(color = MaterialTheme.colorScheme.background) { - LazyColumnScrollbar( - state = state, - settings = ScrollbarSettings.Default.copy( - thumbSelectedColor = md_theme_dark_primary, - thumbUnselectedColor = Color.Red - ) + LazyColumnScrollbar( + state = state, + settings = ScrollbarSettings.Default.copy( + thumbSelectedColor = md_theme_dark_primary, + thumbUnselectedColor = Color.Red + ) + ) { + LazyColumn( + modifier = Modifier.nestedScroll(nestedScrollInterop), + state = state ) { - LazyColumn( - modifier = Modifier.nestedScroll(nestedScrollInterop), - state = state - ) { - item { - CommentRepliesHeader(comment = parentComment) - HorizontalDivider(thickness = 1.dp) - } + item { + CommentRepliesHeader(comment = parentComment) + HorizontalDivider( + thickness = 1.dp, + modifier = Modifier.padding(start = 24.dp, end = 24.dp, bottom = 8.dp) + ) + } - if (comments.itemCount == 0) { - item { - val refresh = comments.loadState.refresh - if (refresh is LoadState.Loading) { - LoadingIndicator(modifier = Modifier.padding(top = 8.dp)) + if (comments.itemCount == 0) { + item { + val refresh = comments.loadState.refresh + if (refresh is LoadState.Loading) { + LoadingIndicator(modifier = Modifier.padding(top = 8.dp)) + } else { + val message = if (refresh is LoadState.Error) { + R.string.error_unable_to_load_comments } else { - val message = if (refresh is LoadState.Error) { - R.string.error_unable_to_load_comments - } else { - R.string.no_comments - } - NoItemsMessage(message) + R.string.no_comments } + NoItemsMessage(message) } - } else { - items(comments.itemCount) { - Comment(comment = comments[it]!!) - } + } + } else { + items(comments.itemCount) { + Comment(comment = comments[it]!!) } } } diff --git a/app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesHeader.kt b/app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesHeader.kt index 3a10fe021..6025a5df4 100644 --- a/app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesHeader.kt +++ b/app/src/main/java/org/schabi/newpipe/ui/components/video/comment/CommentRepliesHeader.kt @@ -20,6 +20,7 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import coil.compose.AsyncImage @@ -43,11 +44,13 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) { verticalAlignment = Alignment.CenterVertically ) { Row( - modifier = Modifier.clickable { - NavigationHelper.openCommentAuthorIfPresent(context, comment) - }, + modifier = Modifier + .padding(end = 12.dp) + .clip(CircleShape) + .clickable { NavigationHelper.openCommentAuthorIfPresent(context, comment) } + .weight(1.0f, true), horizontalArrangement = Arrangement.spacedBy(8.dp), - verticalAlignment = Alignment.CenterVertically + verticalAlignment = Alignment.CenterVertically, ) { AsyncImage( model = ImageStrategy.choosePreferredImage(comment.uploaderAvatars), @@ -60,14 +63,18 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) { ) Column { - Text(text = comment.uploaderName) + Text( + text = comment.uploaderName, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = MaterialTheme.typography.titleSmall, + ) Text( - color = MaterialTheme.colorScheme.secondary, - style = MaterialTheme.typography.bodySmall, text = Localization.relativeTimeOrTextual( context, comment.uploadDate, comment.textualUploadDate - ) + ), + style = MaterialTheme.typography.bodySmall, ) } } @@ -80,7 +87,10 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) { painter = painterResource(R.drawable.ic_thumb_up), 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) { Image( @@ -100,7 +110,8 @@ fun CommentRepliesHeader(comment: CommentsInfoItem) { DescriptionText( 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() { val comment = CommentsInfoItem( commentText = Description("Hello world!", Description.PLAIN_TEXT), - uploaderName = "Test", + uploaderName = "Test really long lorem ipsum dolor sit", likeCount = 1000, isPinned = true, isHeartedByUploader = true