From 7bd3e0beabfc3950d2277b26333a885e301ddafc Mon Sep 17 00:00:00 2001 From: Vitor Pamplona Date: Tue, 20 Aug 2024 13:05:44 -0400 Subject: [PATCH] Improved padding and spacing for chat messages --- .../ui/note/ChatroomMessageCompose.kt | 62 +++++++++++++++---- .../vitorpamplona/amethyst/ui/theme/Shape.kt | 7 ++- 2 files changed, 53 insertions(+), 16 deletions(-) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/ChatroomMessageCompose.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/ChatroomMessageCompose.kt index 4210031af..56ee4a456 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/ChatroomMessageCompose.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/ChatroomMessageCompose.kt @@ -71,7 +71,7 @@ import com.vitorpamplona.amethyst.ui.theme.ChatPaddingInnerQuoteModifier import com.vitorpamplona.amethyst.ui.theme.ChatPaddingModifier import com.vitorpamplona.amethyst.ui.theme.DoubleHorzSpacer import com.vitorpamplona.amethyst.ui.theme.Font12SP -import com.vitorpamplona.amethyst.ui.theme.HalfTopPadding +import com.vitorpamplona.amethyst.ui.theme.HalfHalfTopPadding import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeightChat import com.vitorpamplona.amethyst.ui.theme.RowColSpacing import com.vitorpamplona.amethyst.ui.theme.RowColSpacing5dp @@ -79,7 +79,6 @@ import com.vitorpamplona.amethyst.ui.theme.Size18Modifier import com.vitorpamplona.amethyst.ui.theme.Size20dp import com.vitorpamplona.amethyst.ui.theme.Size5Modifier import com.vitorpamplona.amethyst.ui.theme.StdHorzSpacer -import com.vitorpamplona.amethyst.ui.theme.StdTopPadding import com.vitorpamplona.amethyst.ui.theme.chatAuthorBox import com.vitorpamplona.amethyst.ui.theme.incognitoIconModifier import com.vitorpamplona.amethyst.ui.theme.mediumImportanceLink @@ -292,9 +291,7 @@ fun ChatBubbleLayout( modifier = if (innerQuote) ChatPaddingInnerQuoteModifier else ChatPaddingModifier, horizontalArrangement = alignment, ) { - var popupExpanded = remember { mutableStateOf(false) } - - val modif2 = if (innerQuote) Modifier else ChatBubbleMaxSizeModifier + val popupExpanded = remember { mutableStateOf(false) } val showDetails = remember { @@ -323,7 +320,7 @@ fun ChatBubbleLayout( Row( horizontalArrangement = alignment, - modifier = modif2, + modifier = if (innerQuote) Modifier else ChatBubbleMaxSizeModifier, ) { Surface( color = backgroundBubbleColor.value, @@ -335,7 +332,7 @@ fun ChatBubbleLayout( Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = alignment, - modifier = StdTopPadding.then(Modifier.clickable(onClick = onAuthorClick)), + modifier = HalfHalfTopPadding.clickable(onClick = onAuthorClick), ) { drawAuthorLine() } @@ -389,11 +386,14 @@ private fun BubblePreview() { Icon( imageVector = Icons.Default.Person, contentDescription = null, - modifier = Modifier.size(Size20dp).clip(CircleShape), + modifier = + Modifier + .size(Size20dp) + .clip(CircleShape), ) }, name = { - Text("Me", fontWeight = FontWeight.Bold) + Text("Someone else", fontWeight = FontWeight.Bold) }, ) }, @@ -419,7 +419,10 @@ private fun BubblePreview() { Icon( imageVector = Icons.Default.Person, contentDescription = null, - modifier = Modifier.size(Size20dp).clip(CircleShape), + modifier = + Modifier + .size(Size20dp) + .clip(CircleShape), ) }, name = { @@ -431,6 +434,39 @@ private fun BubblePreview() { ) { backgroundBubbleColor -> Text("This is a very long long loong note") } + + ChatBubbleLayout( + isLoggedInUser = true, + innerQuote = false, + isComplete = false, + hasDetailsToShow = false, + drawAuthorInfo = false, + parentBackgroundColor = backgroundBubbleColor, + onClick = { false }, + onAuthorClick = {}, + actionMenu = { onDismiss -> + }, + drawAuthorLine = { + UserDisplayNameLayout( + picture = { + Icon( + imageVector = Icons.Default.Person, + contentDescription = null, + modifier = + Modifier + .size(Size20dp) + .clip(CircleShape), + ) + }, + name = { + Text("Me", fontWeight = FontWeight.Bold) + }, + ) + }, + detailRow = { Text("Relays and Actions") }, + ) { backgroundBubbleColor -> + Text("Short note") + } } } @@ -654,7 +690,7 @@ private fun RenderRegularTextNote( content = eventContent, canPreview = canPreview, quotesLeft = if (innerQuote) 0 else 1, - modifier = HalfTopPadding, + modifier = Modifier, tags = tags, backgroundColor = backgroundBubbleColor, id = note.idHex, @@ -668,7 +704,7 @@ private fun RenderRegularTextNote( content = stringRes(id = R.string.could_not_decrypt_the_message), canPreview = true, quotesLeft = 0, - modifier = HalfTopPadding, + modifier = Modifier, tags = EmptyTagList, backgroundColor = backgroundBubbleColor, id = note.idHex, @@ -738,7 +774,7 @@ fun UserDisplayNameLayout( picture: @Composable () -> Unit, name: @Composable () -> Unit, ) { - Box(chatAuthorBox, contentAlignment = Alignment.TopEnd) { + Box(chatAuthorBox, contentAlignment = Alignment.Center) { picture() } diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt index 8866d48d0..3892257b6 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt @@ -107,6 +107,7 @@ val HalfStartPadding = Modifier.padding(start = 5.dp) val StdStartPadding = Modifier.padding(start = 10.dp) val StdTopPadding = Modifier.padding(top = 10.dp) val HalfTopPadding = Modifier.padding(top = 5.dp) +val HalfHalfTopPadding = Modifier.padding(top = 3.dp) val HalfPadding = Modifier.padding(5.dp) val StdPadding = Modifier.padding(10.dp) @@ -163,7 +164,7 @@ val DividerThickness = 0.25.dp val ReactionRowHeight = Modifier.padding(vertical = 7.dp).height(24.dp) val ReactionRowHeightWithPadding = Modifier.padding(vertical = 7.dp).height(24.dp).padding(horizontal = 10.dp) -val ReactionRowHeightChat = Modifier.height(25.dp) +val ReactionRowHeightChat = Modifier.height(20.dp) val ReactionRowHeightChatMaxWidth = Modifier.height(25.dp).fillMaxWidth() val UserNameRowHeight = Modifier.fillMaxWidth() val UserNameMaxRowHeight = Modifier.fillMaxWidth() @@ -201,7 +202,7 @@ val ZeroPadding = PaddingValues(0.dp) val FeedPadding = PaddingValues(top = 10.dp, bottom = 10.dp) val ButtonPadding = PaddingValues(vertical = 6.dp, horizontal = 16.dp) -val ChatPaddingInnerQuoteModifier = Modifier.padding(top = 10.dp) +val ChatPaddingInnerQuoteModifier = Modifier val ChatPaddingModifier = Modifier .fillMaxWidth(1f) @@ -255,7 +256,7 @@ val chatAuthorImage = Modifier.size(20.dp).clip(shape = CircleShape) val AuthorInfoVideoFeed = Modifier.width(75.dp).padding(end = 15.dp) val messageDetailsModifier = Modifier.height(Size25dp) -val messageBubbleLimits = Modifier.padding(start = 10.dp, end = 10.dp, bottom = 5.dp) +val messageBubbleLimits = Modifier.padding(start = 7.dp, end = 7.dp, top = 5.dp, bottom = 5.dp) val inlinePlaceholder = Placeholder(