From 43339b8d36962e0f90a9f2a2c39724949001dc53 Mon Sep 17 00:00:00 2001 From: VASH Date: Sat, 15 Jun 2024 18:15:16 +0200 Subject: [PATCH] redesign emoji selector --- .../ui/actions/relays/AllRelayListView.kt | 2 + .../amethyst/ui/note/ReactionsRow.kt | 162 +++++++++--------- .../ui/note/UpdateReactionTypeDialog.kt | 35 ++-- 3 files changed, 104 insertions(+), 95 deletions(-) diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/actions/relays/AllRelayListView.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/actions/relays/AllRelayListView.kt index 0dbf3bc8f..b0f74cc86 100644 --- a/app/src/main/java/com/vitorpamplona/amethyst/ui/actions/relays/AllRelayListView.kt +++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/actions/relays/AllRelayListView.kt @@ -27,6 +27,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme @@ -112,6 +113,7 @@ fun AllRelayListView( Text( text = stringResource(R.string.relay_settings), style = MaterialTheme.typography.titleLarge, + modifier = Modifier.widthIn(max = 200.dp), ) SaveButton( 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 0d48b980a..30d17ece1 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 @@ -34,6 +34,8 @@ import androidx.compose.animation.slideInVertically import androidx.compose.animation.slideOutVertically import androidx.compose.animation.togetherWith import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement @@ -47,10 +49,13 @@ 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.RoundedCornerShape 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.IconButton import androidx.compose.material3.LinearProgressIndicator @@ -1305,16 +1310,25 @@ fun ReactionChoicePopup( offset = IntOffset(0, iconSizePx), onDismissRequest = { onDismiss() }, ) { - FlowRow(horizontalArrangement = Arrangement.Center) { - account.reactionChoices.forEach { reactionType -> - ActionableReactionButton( - baseNote, - reactionType, - accountViewModel, - onDismiss, - onChangeAmount, - toRemove, - ) + ElevatedCard( + Modifier + .border(width = 1.dp, color = MaterialTheme.colorScheme.outline, shape = RoundedCornerShape(5.dp)), + elevation = CardDefaults.elevatedCardElevation(defaultElevation = 8.dp), + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant), + ) { + Box(modifier = Modifier.padding(5.dp)) { + FlowRow(horizontalArrangement = Arrangement.Center) { + account.reactionChoices.forEach { reactionType -> + ActionableReactionButton( + baseNote, + reactionType, + accountViewModel, + onDismiss, + onChangeAmount, + toRemove, + ) + } + } } } } @@ -1330,24 +1344,11 @@ private fun ActionableReactionButton( onChangeAmount: () -> Unit, toRemove: ImmutableSet, ) { - Button( - modifier = Modifier.padding(horizontal = 3.dp), - onClick = { - accountViewModel.reactToOrDelete( - baseNote, - reactionType, - ) - onDismiss() - }, - shape = ButtonBorder, - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - ), - ) { - val thisModifier = - remember(reactionType) { - Modifier.combinedClickable( + val thisModifier = + remember(reactionType) { + Modifier + .padding(horizontal = 3.dp) + .combinedClickable( onClick = { accountViewModel.reactToOrDelete( baseNote, @@ -1357,63 +1358,64 @@ private fun ActionableReactionButton( }, onLongClick = { onChangeAmount() }, ) + .padding(5.dp) + } + + val removeSymbol = + remember(reactionType) { + if (reactionType in toRemove) { + " ✖" + } else { + "" } + } - val removeSymbol = - remember(reactionType) { - if (reactionType in toRemove) { - " ✖" - } else { - "" - } - } + if (reactionType.startsWith(":")) { + val noStartColon = reactionType.removePrefix(":") + val url = noStartColon.substringAfter(":") - if (reactionType.startsWith(":")) { - val noStartColon = reactionType.removePrefix(":") - val url = noStartColon.substringAfter(":") - - val renderable = - persistentListOf( - Nip30CustomEmoji.ImageUrlType(url), - Nip30CustomEmoji.TextType(removeSymbol), - ) - - InLineIconRenderer( - renderable, - style = SpanStyle(color = Color.White), - maxLines = 1, + val renderable = + persistentListOf( + Nip30CustomEmoji.ImageUrlType(url), + Nip30CustomEmoji.TextType(removeSymbol), ) - } else { - when (reactionType) { - "+" -> { - Icon( - painter = painterResource(R.drawable.ic_liked), - null, - modifier = remember { thisModifier.size(16.dp) }, - tint = Color.White, - ) - Text( - text = removeSymbol, - color = Color.White, - textAlign = TextAlign.Center, - modifier = thisModifier, - ) - } - "-" -> - Text( - text = "\uD83D\uDC4E$removeSymbol", - color = Color.White, - textAlign = TextAlign.Center, - modifier = thisModifier, - ) - else -> - Text( - "$reactionType$removeSymbol", - color = Color.White, - textAlign = TextAlign.Center, - modifier = thisModifier, - ) + + InLineIconRenderer( + renderable, + style = SpanStyle(color = Color.White), + maxLines = 1, + modifier = thisModifier, + ) + } else { + when (reactionType) { + "+" -> { + Icon( + painter = painterResource(R.drawable.ic_liked), + null, + modifier = remember { thisModifier.size(16.dp) }, + tint = Color.White, + ) + Text( + text = removeSymbol, + color = Color.White, + textAlign = TextAlign.Center, + modifier = thisModifier, + ) } + "-" -> + Text( + text = "\uD83D\uDC4E$removeSymbol", + color = Color.White, + textAlign = TextAlign.Center, + modifier = thisModifier, + ) + else -> + Text( + "$reactionType$removeSymbol", + color = Color.White, + textAlign = TextAlign.Center, + modifier = thisModifier, + ) } } } 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 68d1109c8..15a26db15 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 @@ -21,12 +21,14 @@ package com.vitorpamplona.amethyst.ui.note import androidx.compose.animation.animateContentSize +import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowRow -import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth @@ -38,6 +40,7 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Button @@ -269,15 +272,17 @@ private fun RenderReactionOption( reactionType: String, postViewModel: UpdateReactionTypeViewModel, ) { - Button( - modifier = Modifier.padding(horizontal = 3.dp), - shape = ButtonBorder, - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - ), - onClick = { postViewModel.removeChoice(reactionType) }, - contentPadding = PaddingValues(horizontal = 5.dp), + Box( + modifier = + Modifier + .padding(3.dp) + .clickable { postViewModel.removeChoice(reactionType) } + .border( + width = 1.dp, + color = MaterialTheme.colorScheme.surfaceDim, + shape = RoundedCornerShape(8.dp), + ) + .padding(8.dp), ) { if (reactionType.startsWith(":")) { val noStartColon = reactionType.removePrefix(":") @@ -291,7 +296,7 @@ private fun RenderReactionOption( InLineIconRenderer( renderable, - style = SpanStyle(color = Color.White), + style = SpanStyle(color = MaterialTheme.colorScheme.onBackground), maxLines = 1, ) } else { @@ -301,24 +306,24 @@ private fun RenderReactionOption( painter = painterResource(R.drawable.ic_liked), null, modifier = remember { Modifier.size(16.dp) }, - tint = Color.White, + tint = MaterialTheme.colorScheme.onBackground, ) Text( text = " ✖", - color = Color.White, + color = MaterialTheme.colorScheme.onBackground, textAlign = TextAlign.Center, ) } "-" -> Text( text = "\uD83D\uDC4E ✖", - color = Color.White, + color = MaterialTheme.colorScheme.onBackground, textAlign = TextAlign.Center, ) else -> Text( text = "$reactionType ✖", - color = Color.White, + color = MaterialTheme.colorScheme.onBackground, textAlign = TextAlign.Center, ) }