From 621d9f971d0744b25cc573ec7358ea610cfaf2fb Mon Sep 17 00:00:00 2001 From: Diego Beraldin Date: Tue, 7 May 2024 14:05:30 +0200 Subject: [PATCH] fix home and inbox title, text and footer padding (#802) --- .../core/commonui/lemmyui/InboxCard.kt | 2 +- .../commonui/lemmyui/InboxReplySubtitle.kt | 215 ++++++++++-------- .../core/commonui/lemmyui/PostCardBody.kt | 4 +- .../core/commonui/lemmyui/PostCardFooter.kt | 22 +- .../core/commonui/lemmyui/PostCardTitle.kt | 4 +- 5 files changed, 138 insertions(+), 109 deletions(-) diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/InboxCard.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/InboxCard.kt index 98c9d4b22..ed29d5761 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/InboxCard.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/InboxCard.kt @@ -110,7 +110,7 @@ fun InboxCard( modifier = Modifier.padding( start = Spacing.s, end = Spacing.s, - top = Spacing.xs, + top = Spacing.s, ), creator = mention.creator, community = mention.community, diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/InboxReplySubtitle.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/InboxReplySubtitle.kt index 2cb2f9e6b..53d233e7e 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/InboxReplySubtitle.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/InboxReplySubtitle.kt @@ -78,7 +78,7 @@ fun InboxReplySubtitle( onOptionSelected: ((OptionId) -> Unit)? = null, onReply: (() -> Unit)? = null, ) { - val buttonModifier = Modifier.size(IconSize.m).padding(3.dp) + val buttonModifier = Modifier.size(IconSize.m) val themeRepository = remember { getThemeRepository() } val upVoteColor by themeRepository.upVoteColor.collectAsState() val downVoteColor by themeRepository.downVoteColor.collectAsState() @@ -90,6 +90,7 @@ fun InboxReplySubtitle( Column( modifier = modifier, + verticalArrangement = Arrangement.spacedBy(Spacing.xxs), ) { val communityName = community?.readableName(preferNicknames).orEmpty() val communityIcon = community?.icon.orEmpty() @@ -97,6 +98,7 @@ fun InboxReplySubtitle( val creatorAvatar = creator?.avatar.orEmpty() if (communityName.isNotEmpty() || creatorName.isNotEmpty()) { Row( + modifier = Modifier.padding(horizontal = Spacing.xxs), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(Spacing.xs), ) { @@ -176,119 +178,130 @@ fun InboxReplySubtitle( } } } - } - Box { - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(Spacing.xxs), - ) { - Icon( - modifier = buttonModifier.padding(1.dp) - .onClick( + Box { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(Spacing.xxs), + ) { + Icon( + modifier = buttonModifier.padding( + top = 3.5.dp, + bottom = 3.5.dp, + end = 3.5.dp, + ).onClick( onClick = { onReply?.invoke() }, ), - imageVector = Icons.AutoMirrored.Default.Chat, - contentDescription = null, - tint = ancillaryColor, - ) - Row( - verticalAlignment = Alignment.CenterVertically, - ) { - Icon( - modifier = Modifier.size(IconSize.s).padding(0.5.dp), - imageVector = Icons.Default.Schedule, + imageVector = Icons.AutoMirrored.Default.Chat, contentDescription = null, tint = ancillaryColor, ) - Text( - modifier = Modifier.padding(start = Spacing.xxs), - text = date?.prettifyDate() ?: "", - style = MaterialTheme.typography.labelMedium, - color = ancillaryColor, - ) - } - if (options.isNotEmpty()) { - Icon( - modifier = Modifier.size(IconSize.m) - .padding(Spacing.xs) - .onGloballyPositioned { - optionsOffset = it.positionInParent() - } - .onClick( - onClick = { - optionsExpanded = true - }, - ), - imageVector = Icons.Default.MoreHoriz, - contentDescription = null, - tint = ancillaryColor - ) - } - Spacer(modifier = Modifier.weight(1f)) - FeedbackButton( - modifier = buttonModifier.onClick(), - imageVector = Icons.Default.ArrowCircleUp, - tintColor = if (upVoted) { - upVoteColor ?: defaultUpvoteColor - } else { - ancillaryColor - }, - onClick = { - onUpVote?.invoke() - }, - ) - if (showScores) { - Text( - text = formatToReadableValue( - voteFormat = voteFormat, - score = score, - upVotes = upVotes, - downVotes = downVotes, - upVoteColor = upVoteColor ?: defaultUpvoteColor, - downVoteColor = downVoteColor ?: defaultDownVoteColor, - upVoted = upVoted, - downVoted = downVoted, + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + Icon( + modifier = Modifier.size(IconSize.s).padding(0.5.dp), + imageVector = Icons.Default.Schedule, + contentDescription = null, + tint = ancillaryColor, + ) + Text( + modifier = Modifier.padding(start = Spacing.xxs), + text = date?.prettifyDate() ?: "", + style = MaterialTheme.typography.labelMedium, + color = ancillaryColor, + ) + } + if (options.isNotEmpty()) { + Icon( + modifier = Modifier.size(IconSize.m) + .padding(Spacing.xs) + .onGloballyPositioned { + optionsOffset = it.positionInParent() + } + .onClick( + onClick = { + optionsExpanded = true + }, + ), + imageVector = Icons.Default.MoreHoriz, + contentDescription = null, + tint = ancillaryColor + ) + } + Spacer(modifier = Modifier.weight(1f)) + FeedbackButton( + modifier = buttonModifier.padding( + top = 2.5.dp, + bottom = 2.5.dp, + end = 2.5.dp, ), - style = MaterialTheme.typography.labelMedium, - color = ancillaryColor, - ) - } - FeedbackButton( - modifier = buttonModifier.onClick(), - imageVector = Icons.Default.ArrowCircleDown, - tintColor = if (downVoted) { - downVoteColor ?: defaultDownVoteColor - } else { - ancillaryColor - }, - onClick = { - onDownVote?.invoke() - }, - ) - } - CustomDropDown( - expanded = optionsExpanded, - onDismiss = { - optionsExpanded = false - }, - offset = DpOffset( - x = optionsOffset.x.toLocalDp(), - y = optionsOffset.y.toLocalDp(), - ), - ) { - options.forEach { option -> - DropdownMenuItem( - text = { - Text(option.text) + imageVector = Icons.Default.ArrowCircleUp, + tintColor = if (upVoted) { + upVoteColor ?: defaultUpvoteColor + } else { + ancillaryColor }, onClick = { - optionsExpanded = false - onOptionSelected?.invoke(option.id) + onUpVote?.invoke() }, ) + if (showScores) { + Text( + text = formatToReadableValue( + voteFormat = voteFormat, + score = score, + upVotes = upVotes, + downVotes = downVotes, + upVoteColor = upVoteColor ?: defaultUpvoteColor, + downVoteColor = downVoteColor ?: defaultDownVoteColor, + upVoted = upVoted, + downVoted = downVoted, + ), + style = MaterialTheme.typography.labelMedium, + color = ancillaryColor, + ) + } + FeedbackButton( + modifier = buttonModifier.padding( + top = 2.5.dp, + bottom = 2.5.dp, + start = 2.5.dp, + ), + imageVector = Icons.Default.ArrowCircleDown, + tintColor = if (downVoted) { + downVoteColor ?: defaultDownVoteColor + } else { + ancillaryColor + }, + onClick = { + onDownVote?.invoke() + }, + ) + } + CustomDropDown( + expanded = optionsExpanded, + onDismiss = { + optionsExpanded = false + }, + offset = DpOffset( + x = optionsOffset.x.toLocalDp(), + y = optionsOffset.y.toLocalDp(), + ), + ) { + options.forEach { option -> + DropdownMenuItem( + text = { + Text(option.text) + }, + onClick = { + optionsExpanded = false + onOptionSelected?.invoke(option.id) + }, + ) + } } } } diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardBody.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardBody.kt index 6a7572f32..a67293746 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardBody.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardBody.kt @@ -1,5 +1,6 @@ package com.github.diegoberaldin.raccoonforlemmy.core.commonui.lemmyui +import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState @@ -10,6 +11,7 @@ import androidx.compose.ui.platform.LocalUriHandler import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontStyle import com.github.diegoberaldin.raccoonforlemmy.core.appearance.di.getThemeRepository +import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.readContentAlpha import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.toTypography import com.github.diegoberaldin.raccoonforlemmy.core.markdown.CustomMarkdownWrapper @@ -51,7 +53,7 @@ fun PostCardBody( if (text.isNotEmpty()) { CustomMarkdownWrapper( - modifier = modifier, + modifier = modifier.padding(horizontal = Spacing.xxs), content = text, maxLines = maxLines, autoLoadImages = autoLoadImages, diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardFooter.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardFooter.kt index 1f5b2cbd6..d342bb493 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardFooter.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardFooter.kt @@ -91,13 +91,17 @@ fun PostCardFooter( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(Spacing.xxs), ) { - val buttonModifier = Modifier.size(IconSize.m).padding(2.5.dp) + val buttonModifier = Modifier.size(IconSize.m) if (comments != null) { Row( verticalAlignment = Alignment.CenterVertically, ) { Icon( - modifier = buttonModifier.padding(1.dp) + modifier = buttonModifier.padding( + top = 3.5.dp, + end = 3.5.dp, + bottom = 3.5.dp, + ) .onClick( onClick = { onReply?.invoke() @@ -183,7 +187,11 @@ fun PostCardFooter( Spacer(modifier = Modifier.weight(1f)) if (actionButtonsActive) { FeedbackButton( - modifier = buttonModifier, + modifier = buttonModifier.padding( + top = 2.5.dp, + bottom = 2.5.dp, + end = 2.5.dp, + ), imageVector = if (!saved) { Icons.Default.BookmarkBorder } else { @@ -200,7 +208,7 @@ fun PostCardFooter( ) } FeedbackButton( - modifier = buttonModifier, + modifier = buttonModifier.padding(all = 2.5.dp), imageVector = if (actionButtonsActive) { Icons.Default.ArrowCircleUp } else { @@ -232,7 +240,11 @@ fun PostCardFooter( ) } FeedbackButton( - modifier = buttonModifier, + modifier = buttonModifier.padding( + top = 2.5.dp, + bottom = 2.5.dp, + end = 2.5.dp, + ), imageVector = if (actionButtonsActive) { Icons.Default.ArrowCircleDown } else { diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardTitle.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardTitle.kt index 490ecf1bf..098f8135f 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardTitle.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/lemmyui/PostCardTitle.kt @@ -1,5 +1,6 @@ package com.github.diegoberaldin.raccoonforlemmy.core.commonui.lemmyui +import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState @@ -11,6 +12,7 @@ import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight import com.github.diegoberaldin.raccoonforlemmy.core.appearance.di.getThemeRepository +import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.readContentAlpha import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.toTypography import com.github.diegoberaldin.raccoonforlemmy.core.markdown.CustomMarkdownWrapper @@ -61,7 +63,7 @@ fun PostCardTitle( val additionalAlphaFactor = if (markRead) readContentAlpha else 1f CustomMarkdownWrapper( - modifier = modifier, + modifier = modifier.padding(horizontal = Spacing.xxs), content = text, autoLoadImages = autoLoadImages, typography = markdownTypography(