Improve comment replies dialog layout
This commit is contained in:
parent
e6b1341246
commit
802a094154
|
@ -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]!!)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue