From d2f06f53107598a2fb6db08776c722246ef7576c Mon Sep 17 00:00:00 2001 From: Vitor Pamplona Date: Fri, 21 Jun 2024 13:18:48 -0400 Subject: [PATCH] Removing the X to delete reaction in favor of a Selected background --- .../amethyst/ui/note/ReactionsRow.kt | 98 ++++++++----------- .../ui/note/UpdateReactionTypeDialog.kt | 17 ++-- .../vitorpamplona/amethyst/ui/theme/Shape.kt | 6 ++ .../vitorpamplona/amethyst/ui/theme/Theme.kt | 20 ++++ 4 files changed, 77 insertions(+), 64 deletions(-) diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/ReactionsRow.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/ReactionsRow.kt index 91f2d25de..b37b34612 100644 --- a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/ReactionsRow.kt +++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/ReactionsRow.kt @@ -48,15 +48,12 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Cancel import androidx.compose.material.ripple.rememberRipple import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.CardDefaults import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.ElevatedCard -import androidx.compose.material3.Icon import androidx.compose.material3.LinearProgressIndicator import androidx.compose.material3.MaterialTheme import androidx.compose.material3.ProgressIndicatorDefaults @@ -135,6 +132,8 @@ import com.vitorpamplona.amethyst.ui.theme.ThemeComparisonColumn import com.vitorpamplona.amethyst.ui.theme.TinyBorders import com.vitorpamplona.amethyst.ui.theme.mediumImportanceLink import com.vitorpamplona.amethyst.ui.theme.placeholderText +import com.vitorpamplona.amethyst.ui.theme.reactionBox +import com.vitorpamplona.amethyst.ui.theme.selectedReactionBoxModifier import com.vitorpamplona.quartz.encoders.Nip30CustomEmoji import com.vitorpamplona.quartz.events.BaseTextNoteEvent import kotlinx.collections.immutable.ImmutableList @@ -1305,7 +1304,6 @@ private fun BoostTypeChoicePopup( } } -@OptIn(ExperimentalLayoutApi::class) @Composable fun ReactionChoicePopup( baseNote: Note, @@ -1357,7 +1355,7 @@ fun ReactionChoicePopupContent( colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant), ) { FlowRow( - modifier = HalfPadding, + modifier = Modifier.padding(horizontal = 3.dp), horizontalArrangement = Arrangement.Center, verticalArrangement = Arrangement.Center, ) { @@ -1394,72 +1392,60 @@ fun ReactionChoicePopupPeeview() { ), onClick = {}, onChangeAmount = {}, - toRemove = persistentSetOf(), + toRemove = persistentSetOf("\uD83D\uDE80"), ) } } @Composable -@OptIn(ExperimentalFoundationApi::class) private fun ActionableReactionButton( reactionType: String, onClick: () -> Unit, onChangeAmount: () -> Unit, toRemove: ImmutableSet, ) { - val thisModifier = - Modifier - .padding(horizontal = 8.dp, vertical = 5.dp) - .height(Size20dp) - .combinedClickable( - role = Role.Button, - interactionSource = remember { MutableInteractionSource() }, - indication = rememberRipple(bounded = false, radius = Size24dp), - onClick = onClick, - onLongClick = onChangeAmount, - ) + ClickableBox( + modifier = if (reactionType in toRemove) MaterialTheme.colorScheme.selectedReactionBoxModifier else reactionBox, + onClick = onClick, + onLongClick = onChangeAmount, + ) { + RenderReaction(reactionType) + } +} - Row(thisModifier, verticalAlignment = Alignment.CenterVertically) { - if (reactionType.startsWith(":")) { - val noStartColon = reactionType.removePrefix(":") - val url = noStartColon.substringAfter(":") +@Composable +fun RenderReaction(reactionType: String) { + if (reactionType.startsWith(":")) { + val noStartColon = reactionType.removePrefix(":") + val url = noStartColon.substringAfter(":") - InLineIconRenderer( - persistentListOf( - Nip30CustomEmoji.ImageUrlType(url), - ), - style = SpanStyle(color = MaterialTheme.colorScheme.onBackground), - maxLines = 1, - ) - } else { - when (reactionType) { - "+" -> { - LikedIcon(modifier = Modifier.size(20.dp)) - } - - "-" -> { - Text( - text = "\uD83D\uDC4E", - color = MaterialTheme.colorScheme.onBackground, - maxLines = 1, - ) - } - else -> { - Text( - "$reactionType", - color = MaterialTheme.colorScheme.onBackground, - maxLines = 1, - ) - } + InLineIconRenderer( + persistentListOf( + Nip30CustomEmoji.ImageUrlType(url), + ), + style = SpanStyle(color = MaterialTheme.colorScheme.onBackground), + maxLines = 1, + ) + } else { + when (reactionType) { + "+" -> { + LikedIcon(modifier = Size20Modifier) } - } - if (reactionType in toRemove) { - Icon( - imageVector = Icons.Default.Cancel, - contentDescription = null, - modifier = Modifier.padding(start = 2.dp).size(14.dp), - ) + "-" -> { + Text( + text = "\uD83D\uDC4E", + color = MaterialTheme.colorScheme.onBackground, + maxLines = 1, + ) + } + else -> { + Text( + reactionType, + color = MaterialTheme.colorScheme.onBackground, + maxLines = 1, + ) + } } } } diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/UpdateReactionTypeDialog.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/UpdateReactionTypeDialog.kt index ce474e245..27df7ae23 100644 --- a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/UpdateReactionTypeDialog.kt +++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/UpdateReactionTypeDialog.kt @@ -277,8 +277,7 @@ private fun RenderReactionOption( width = 1.dp, color = MaterialTheme.colorScheme.surfaceDim, shape = RoundedCornerShape(8.dp), - ) - .padding(8.dp), + ).padding(8.dp), ) { if (reactionType.startsWith(":")) { val noStartColon = reactionType.removePrefix(":") @@ -298,13 +297,15 @@ private fun RenderReactionOption( } else { when (reactionType) { "+" -> { - LikedIcon(modifier = Modifier.size(16.dp), tint = MaterialTheme.colorScheme.onBackground) + Row { + LikedIcon(modifier = Modifier.size(20.dp), tint = Color.Unspecified) - Text( - text = " ✖", - color = MaterialTheme.colorScheme.onBackground, - textAlign = TextAlign.Center, - ) + Text( + text = " ✖", + color = MaterialTheme.colorScheme.onBackground, + textAlign = TextAlign.Center, + ) + } } "-" -> Text( diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt index dd4d233a6..1d98d30a0 100644 --- a/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt +++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt @@ -268,3 +268,9 @@ val hashVerifierMark = Modifier.width(40.dp).height(40.dp).padding(10.dp) val noteComposeRelayBox = Modifier.width(55.dp).heightIn(min = 17.dp).padding(start = 2.dp, end = 1.dp) val previewCardImageModifier = Modifier.fillMaxWidth().heightIn(max = 200.dp).padding(bottom = 5.dp) + +val reactionBox = + Modifier + .padding(horizontal = 3.dp, vertical = 6.dp) + .height(Size30dp) + .padding(5.dp) diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt index 14ae768ab..95521724d 100644 --- a/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt +++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt @@ -28,6 +28,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CircleShape @@ -162,6 +163,22 @@ val LightInnerPostBorderModifier = .clip(shape = QuoteBorder) .border(1.dp, LightSubtleBorder, QuoteBorder) +val DarkSelectedReactionBoxModifier = + Modifier + .padding(horizontal = 3.dp, vertical = 6.dp) + .height(Size30dp) + .clip(shape = SmallBorder) + .background(DarkColorPalette.secondaryContainer) + .padding(5.dp) + +val LightSelectedReactionBoxModifier = + Modifier + .padding(horizontal = 3.dp, vertical = 6.dp) + .height(Size30dp) + .clip(shape = SmallBorder) + .background(LightColorPalette.secondaryContainer) + .padding(5.dp) + val DarkChannelNotePictureModifier = Modifier .size(30.dp) @@ -361,6 +378,9 @@ val ColorScheme.relayIconModifier: Modifier val ColorScheme.largeRelayIconModifier: Modifier get() = if (isLight) LightLargeRelayIconModifier else DarkLargeRelayIconModifier +val ColorScheme.selectedReactionBoxModifier: Modifier + get() = if (isLight) LightSelectedReactionBoxModifier else DarkSelectedReactionBoxModifier + val ColorScheme.chartStyle: ChartStyle get() { val defaultColors = if (isLight) DefaultColors.Light else DefaultColors.Dark