From 797fc6798232e59197b322e3124adb121654f34d Mon Sep 17 00:00:00 2001 From: andrekir Date: Tue, 3 Dec 2024 15:58:43 -0300 Subject: [PATCH] refactor: move reaction button to `MessageItem` --- .../mesh/ui/message/components/MessageItem.kt | 14 ++- .../mesh/ui/message/components/MessageList.kt | 5 +- .../mesh/ui/message/components/Reaction.kt | 96 +++++++++---------- 3 files changed, 57 insertions(+), 58 deletions(-) diff --git a/app/src/main/java/com/geeksville/mesh/ui/message/components/MessageItem.kt b/app/src/main/java/com/geeksville/mesh/ui/message/components/MessageItem.kt index d26bf570d..32853f592 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/message/components/MessageItem.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/message/components/MessageItem.kt @@ -74,6 +74,12 @@ internal fun MessageItem( onLongClick: () -> Unit = {}, onChipClick: () -> Unit = {}, onStatusClick: () -> Unit = {}, + onSendReaction: (String) -> Unit = {}, +) = Row( + modifier = Modifier + .fillMaxWidth() + .background(color = if (selected) Color.Gray else MaterialTheme.colors.background), + verticalAlignment = Alignment.CenterVertically, ) { val fromLocal = shortName == null val messageColor = if (fromLocal) R.color.colorMyMsg else R.color.colorMsg @@ -81,13 +87,12 @@ internal fun MessageItem( val messageModifier = if (fromLocal) { Modifier.padding(start = 48.dp, top = 8.dp, end = 8.dp, bottom = 6.dp) } else { - Modifier.padding(start = 8.dp, top = 8.dp, end = 48.dp, bottom = 6.dp) + Modifier.padding(start = 8.dp, top = 8.dp, end = 0.dp, bottom = 6.dp) } Card( modifier = Modifier - .background(color = if (selected) Color.Gray else MaterialTheme.colors.background) - .fillMaxWidth() + .weight(1f) .then(messageModifier), elevation = 4.dp, shape = RoundedCornerShape(topStart, topEnd, 12.dp, 12.dp), @@ -166,6 +171,9 @@ internal fun MessageItem( } } } + if (!fromLocal) { + ReactionButton(Modifier.padding(16.dp), onSendReaction) + } } @PreviewLightDark diff --git a/app/src/main/java/com/geeksville/mesh/ui/message/components/MessageList.kt b/app/src/main/java/com/geeksville/mesh/ui/message/components/MessageList.kt index 299a951b2..63a511c02 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/message/components/MessageList.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/message/components/MessageList.kt @@ -79,7 +79,7 @@ internal fun MessageList( val fromLocal = msg.user.id == DataPacket.ID_LOCAL val selected by remember { derivedStateOf { selectedIds.value.contains(msg.uuid) } } - ReactionRow(fromLocal, msg.emojis) { onSendReaction(it, msg.packetId) } + ReactionRow(fromLocal, msg.emojis) {} // TODO MessageItem( shortName = msg.user.shortName.takeIf { !fromLocal }, messageText = msg.text, @@ -89,7 +89,8 @@ internal fun MessageList( onClick = { if (inSelectionMode) toggle(msg.uuid) }, onLongClick = { toggle(msg.uuid) }, onChipClick = { onClick(msg) }, - onStatusClick = { showStatusDialog = msg } + onStatusClick = { showStatusDialog = msg }, + onSendReaction = { onSendReaction(it, msg.packetId) }, ) } } diff --git a/app/src/main/java/com/geeksville/mesh/ui/message/components/Reaction.kt b/app/src/main/java/com/geeksville/mesh/ui/message/components/Reaction.kt index 648b3dbdc..60fbc7cfe 100644 --- a/app/src/main/java/com/geeksville/mesh/ui/message/components/Reaction.kt +++ b/app/src/main/java/com/geeksville/mesh/ui/message/components/Reaction.kt @@ -23,25 +23,26 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowRow -import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Badge import androidx.compose.material.BadgedBox +import androidx.compose.material.ContentAlpha import androidx.compose.material.Icon +import androidx.compose.material.IconButton import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.twotone.Add +import androidx.compose.material.icons.filled.EmojiEmotions import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.text.font.FontWeight @@ -54,15 +55,39 @@ import com.geeksville.mesh.database.entity.Reaction import com.geeksville.mesh.ui.components.EmojiPicker import com.geeksville.mesh.ui.theme.AppTheme +@Composable +fun ReactionButton( + modifier: Modifier = Modifier, + onClick: (String) -> Unit = {} +) { + var showEmojiPickerDialog by remember { mutableStateOf(false) } + if (showEmojiPickerDialog) { + EmojiPickerDialog( + onConfirm = { + showEmojiPickerDialog = false + onClick(it) + }, + onDismiss = { showEmojiPickerDialog = false } + ) + } + IconButton(onClick = { showEmojiPickerDialog = true }) { + Icon( + imageVector = Icons.Default.EmojiEmotions, + contentDescription = "emoji", + modifier = modifier.size(16.dp), + tint = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium), + ) + } +} + @Composable private fun ReactionItem( emoji: String, - isAddEmojiItem: Boolean = false, emojiCount: Int = 1, onClick: () -> Unit = {}, ) { BadgedBox( - modifier = Modifier.padding(horizontal = 4.dp, vertical = 8.dp), + modifier = Modifier.padding(start = 2.dp, top = 8.dp, end = 2.dp, bottom = 4.dp), badge = { if (emojiCount > 1) { Badge( @@ -84,23 +109,12 @@ private fun ReactionItem( shape = RoundedCornerShape(32.dp), elevation = 4.dp, ) { - Row( - verticalAlignment = Alignment.CenterVertically, - ) { - if (isAddEmojiItem) { - Icon( - imageVector = Icons.TwoTone.Add, - contentDescription = null, - modifier = Modifier.padding(start = 8.dp), - ) - } - Text( - text = emoji, - modifier = Modifier - .padding(8.dp) - .clip(CircleShape), - ) - } + Text( + text = emoji, + modifier = Modifier + .padding(8.dp) + .clip(CircleShape), + ) } } } @@ -123,29 +137,13 @@ fun ReactionRow( ).entries ) } - var showEmojiPickerDialog by remember { mutableStateOf(false) } - if (showEmojiPickerDialog) { - EmojiPickerDialog( - onConfirm = { - showEmojiPickerDialog = false - onSendReaction(it) - }, - onDismiss = { showEmojiPickerDialog = false } - ) - } - @Composable - fun AddEmojiItem() { - ReactionItem( - emoji = "\uD83D\uDE42", - isAddEmojiItem = true, - onClick = { - showEmojiPickerDialog = true - } - ) - } - @Composable - fun EmojiList() { + FlowRow( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp), + horizontalArrangement = if (fromLocal) Arrangement.End else Arrangement.Start + ) { emojiList.forEach { entry -> ReactionItem( emoji = entry.key, @@ -156,14 +154,6 @@ fun ReactionRow( ) } } - - FlowRow( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = if (fromLocal) Arrangement.End else Arrangement.Start - ) { - EmojiList() - AddEmojiItem() - } } fun reduceEmojis(emojis: List): Map = emojis.groupingBy { it }.eachCount() @@ -192,7 +182,7 @@ fun ReactionItemPreview() { ) { ReactionItem(emoji = "\uD83D\uDE42") ReactionItem(emoji = "\uD83D\uDE42", emojiCount = 2) - ReactionItem(emoji = "\uD83D\uDE42", isAddEmojiItem = true) + ReactionButton() } } }