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.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,7 +63,6 @@ private fun CommentRepliesDialog(
val state = rememberLazyListState()
ModalBottomSheet(onDismissRequest = onDismissRequest) {
Surface(color = MaterialTheme.colorScheme.background) {
LazyColumnScrollbar(
state = state,
settings = ScrollbarSettings.Default.copy(
@ -79,7 +76,10 @@ private fun CommentRepliesDialog(
) {
item {
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) {
@ -104,7 +104,6 @@ private fun CommentRepliesDialog(
}
}
}
}
}
@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.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