tweaked comment indentation style and elements

This commit is contained in:
Christopher N7_X 2024-08-04 11:41:54 -04:00
parent 0d3186497d
commit b54124ec72
2 changed files with 120 additions and 124 deletions

View File

@ -3,6 +3,7 @@ package com.livefast.eattrash.raccoonforlemmy.core.commonui.lemmyui
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -26,7 +27,7 @@ import com.livefast.eattrash.raccoonforlemmy.core.utils.toLocalDp
import com.livefast.eattrash.raccoonforlemmy.domain.lemmy.data.CommentModel import com.livefast.eattrash.raccoonforlemmy.domain.lemmy.data.CommentModel
import com.livefast.eattrash.raccoonforlemmy.domain.lemmy.data.UserModel import com.livefast.eattrash.raccoonforlemmy.domain.lemmy.data.UserModel
private const val INDENT_AMOUNT = 3 private const val INDENT_AMOUNT = 2
@Composable @Composable
fun CollapsedCommentCard( fun CollapsedCommentCard(
@ -59,78 +60,76 @@ fun CollapsedCommentCard(
depth = comment.depth, depth = comment.depth,
commentBarTheme = commentBarTheme, commentBarTheme = commentBarTheme,
) )
Column( Row(
modifier = modifier =
modifier.onClick( modifier.onClick(
onClick = onClick ?: {}, onClick = onClick ?: {},
), ),
) { ) {
Box( Box(
modifier = modifier = Modifier
Modifier.padding( .width((INDENT_AMOUNT * comment.depth).dp),
start = (INDENT_AMOUNT * comment.depth).dp, )
), if (comment.depth > 0) {
) { Box(
Column(
modifier = modifier =
Modifier Modifier
.padding(start = barWidth) .padding(top = Spacing.xxs)
.fillMaxWidth() .width(INDENT_AMOUNT.dp)
.padding( .height(commentHeight.toLocalDp())
vertical = Spacing.xxs, .background(color = barColor),
horizontal = Spacing.s, )
).onGloballyPositioned { }
commentHeight = it.size.toSize().height Column(
}, modifier =
) { Modifier
CommunityAndCreatorInfo( .padding(start = barWidth)
iconSize = IconSize.s, .fillMaxWidth()
creator = comment.creator, .padding(
indicatorExpanded = comment.expanded, vertical = Spacing.xxs,
distinguished = comment.distinguished, horizontal = Spacing.s,
isOp = isOp, ).onGloballyPositioned {
isMod = isMod, commentHeight = it.size.toSize().height
isBot = comment.creator?.bot?.takeIf { showBot } ?: false, },
autoLoadImages = autoLoadImages, ) {
preferNicknames = preferNicknames, CommunityAndCreatorInfo(
onToggleExpanded = { modifier = Modifier.padding(top = Spacing.xxs),
onToggleExpanded?.invoke() iconSize = IconSize.s,
}, creator = comment.creator,
onOpenCreator = onOpenCreator, indicatorExpanded = comment.expanded,
) distinguished = comment.distinguished,
PostCardFooter( isOp = isOp,
modifier = Modifier.padding(vertical = Spacing.xs), isMod = isMod,
score = comment.score, isBot = comment.creator?.bot?.takeIf { showBot } ?: false,
showScores = showScores, autoLoadImages = autoLoadImages,
voteFormat = voteFormat, preferNicknames = preferNicknames,
upVotes = comment.upvotes, onToggleExpanded = {
downVotes = comment.downvotes, onToggleExpanded?.invoke()
saved = comment.saved, },
upVoted = comment.myVote > 0, onOpenCreator = onOpenCreator,
downVoted = comment.myVote < 0, )
comments = comment.comments, PostCardFooter(
onClick = onClick, modifier = Modifier.padding(vertical = Spacing.xs),
onUpVote = onUpVote, score = comment.score,
onDownVote = onDownVote, showScores = showScores,
onSave = onSave, voteFormat = voteFormat,
onReply = onReply, upVotes = comment.upvotes,
publishDate = comment.publishDate, downVotes = comment.downvotes,
updateDate = comment.updateDate, saved = comment.saved,
actionButtonsActive = actionButtonsActive, upVoted = comment.myVote > 0,
options = options, downVoted = comment.myVote < 0,
onOptionSelected = onOptionSelected, comments = comment.comments,
) onClick = onClick,
} onUpVote = onUpVote,
if (comment.depth > 0) { onDownVote = onDownVote,
Box( onSave = onSave,
modifier = onReply = onReply,
Modifier publishDate = comment.publishDate,
.padding(top = Spacing.xxs) updateDate = comment.updateDate,
.width(barWidth) actionButtonsActive = actionButtonsActive,
.height(commentHeight.toLocalDp()) options = options,
.background(color = barColor), onOptionSelected = onOptionSelected,
) )
}
} }
} }
} }

View File

@ -4,6 +4,7 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -112,48 +113,54 @@ fun CommentCard(
CompositionLocalProvider( CompositionLocalProvider(
LocalTextToolbar provides LocalTextToolbar provides
getCustomTextToolbar( getCustomTextToolbar(
shareActionLabel = shareActionLabel, shareActionLabel = shareActionLabel,
onShare = onShareLambda, onShare = onShareLambda,
), ),
) { ) {
Column( Row(
modifier = modifier, modifier = modifier,
) { ) {
Box( Box(
modifier = modifier = Modifier
.width((indentAmount * comment.depth).dp)
)
if (indentAmount > 0 && comment.depth > 0) {
Box(
modifier =
Modifier Modifier
.onClick( .padding(top = Spacing.xxs)
onClick = { .width(indentAmount.dp)
if (textSelection) { .height(commentHeight.toLocalDp())
focusManager.clearFocus() .background(color = barColor, shape = RoundedCornerShape(indentAmount / 2)),
textSelection = false )
} else { }
onClick?.invoke() Box(
} modifier =
}, Modifier
onDoubleClick = onDoubleClick ?: {}, .onClick(
).padding( onClick = {
start = if (textSelection) {
indentAmount focusManager.clearFocus()
.takeIf { textSelection = false
it > 0 && comment.depth > 0 } else {
}?.let { onClick?.invoke()
(it * comment.depth).dp + Spacing.xxxs }
} ?: 0.dp, },
), onDoubleClick = onDoubleClick ?: {},
),
) { ) {
Column( Column(
modifier = modifier =
Modifier Modifier
.padding(start = barWidth) .padding(start = barWidth)
.fillMaxWidth() .fillMaxWidth()
.padding( .padding(
vertical = Spacing.xxs, vertical = Spacing.xxs,
horizontal = Spacing.s, horizontal = Spacing.s,
).onGloballyPositioned { ).onGloballyPositioned {
commentHeight = it.size.toSize().height commentHeight = it.size.toSize().height
}, },
verticalArrangement = Arrangement.spacedBy(Spacing.xs), verticalArrangement = Arrangement.spacedBy(Spacing.xs),
) { ) {
CommunityAndCreatorInfo( CommunityAndCreatorInfo(
@ -170,13 +177,13 @@ fun CommentCard(
isAdmin = isAdmin, isAdmin = isAdmin,
isBot = comment.creator?.bot.takeIf { showBot } ?: false, isBot = comment.creator?.bot.takeIf { showBot } ?: false,
onOpenCreator = onOpenCreator =
rememberCallbackArgs { user -> rememberCallbackArgs { user ->
onOpenCreator?.invoke(user, "") onOpenCreator?.invoke(user, "")
}, },
onOpenCommunity = onOpenCommunity =
rememberCallbackArgs { community -> rememberCallbackArgs { community ->
onOpenCommunity?.invoke(community, "") onOpenCommunity?.invoke(community, "")
}, },
onToggleExpanded = onToggleExpanded, onToggleExpanded = onToggleExpanded,
) )
if (comment.removed) { if (comment.removed) {
@ -197,11 +204,11 @@ fun CommentCard(
CustomizedContent(ContentFontClass.Comment) { CustomizedContent(ContentFontClass.Comment) {
CompositionLocalProvider( CompositionLocalProvider(
LocalDensity provides LocalDensity provides
Density( Density(
density = LocalDensity.current.density, density = LocalDensity.current.density,
// additional downscale for font in comments // additional downscale for font in comments
fontScale = LocalDensity.current.fontScale * COMMENT_TEXT_SCALE_FACTOR, fontScale = LocalDensity.current.fontScale * COMMENT_TEXT_SCALE_FACTOR,
), ),
) { ) {
PostCardBody( PostCardBody(
text = comment.text.orEmpty(), text = comment.text.orEmpty(),
@ -252,16 +259,6 @@ fun CommentCard(
onOptionSelected = onOptionSelected, onOptionSelected = onOptionSelected,
) )
} }
if (indentAmount > 0 && comment.depth > 0) {
Box(
modifier =
Modifier
.padding(top = Spacing.xxs)
.width(barWidth)
.height(commentHeight.toLocalDp())
.background(color = barColor, shape = RoundedCornerShape(barWidth / 2)),
)
}
} }
} }
} }