redesign emoji selector

2024-06-15 18:15:16 +02:00
parent 035affadb9
commit 43339b8d36
3 changed files with 104 additions and 95 deletions
@@ -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(
@@ -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<String>,
 ) {
-    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,
+                )
        }
    }
 }
@@ -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,
                    )
            }