From 7eefbee0e3cd648cbc920714c18e33de7b76e79a Mon Sep 17 00:00:00 2001 From: Vitor Pamplona Date: Mon, 25 Mar 2024 10:44:10 -0400 Subject: [PATCH] Realigning the reaction icons and texts between main feed and video feed. --- .../com/vitorpamplona/amethyst/ui/note/Icons.kt | 13 +++++++++++++ .../amethyst/ui/note/ReactionsRow.kt | 16 +++++++++------- .../amethyst/ui/screen/loggedIn/VideoScreen.kt | 5 +++-- .../com/vitorpamplona/amethyst/ui/theme/Shape.kt | 7 ++++++- 4 files changed, 31 insertions(+), 10 deletions(-) diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/Icons.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/Icons.kt index ba57c5d1b..84d409fc9 100644 --- a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/Icons.kt +++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/Icons.kt @@ -22,6 +22,7 @@ package com.vitorpamplona.amethyst.ui.note import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -206,6 +207,18 @@ fun ZappedIcon(modifier: Modifier) { ZapIcon(modifier = modifier, BitcoinOrange) } +@Preview +@Composable +fun ReactionRowIconPreview() { + Row(verticalAlignment = Alignment.CenterVertically) { + CommentIcon(Size20Modifier, Color.Unspecified) + RepostedIcon(Size20Modifier) + LikeIcon(Size20Modifier, Color.Unspecified) + ZapIcon(Size20Modifier) + ZappedIcon(Size20Modifier) + } +} + @Composable fun ZapIcon( modifier: Modifier, 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 41b05af49..0e4fbeb89 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 @@ -99,7 +99,6 @@ import coil.request.CachePolicy import coil.request.ImageRequest import com.vitorpamplona.amethyst.R import com.vitorpamplona.amethyst.model.Note -import com.vitorpamplona.amethyst.model.zap import com.vitorpamplona.amethyst.service.ZapPaymentHandler import com.vitorpamplona.amethyst.ui.actions.NewPostView import com.vitorpamplona.amethyst.ui.components.GenericLoadable @@ -111,13 +110,13 @@ import com.vitorpamplona.amethyst.ui.theme.ButtonBorder import com.vitorpamplona.amethyst.ui.theme.DarkerGreen import com.vitorpamplona.amethyst.ui.theme.Font14SP import com.vitorpamplona.amethyst.ui.theme.HalfDoubleVertSpacer -import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding import com.vitorpamplona.amethyst.ui.theme.Height24dpModifier import com.vitorpamplona.amethyst.ui.theme.ModifierWidth3dp import com.vitorpamplona.amethyst.ui.theme.NoSoTinyBorders import com.vitorpamplona.amethyst.ui.theme.ReactionRowExpandButton import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeight import com.vitorpamplona.amethyst.ui.theme.ReactionRowZapraiserSize +import com.vitorpamplona.amethyst.ui.theme.RowColSpacing import com.vitorpamplona.amethyst.ui.theme.Size0dp import com.vitorpamplona.amethyst.ui.theme.Size16Modifier import com.vitorpamplona.amethyst.ui.theme.Size17Modifier @@ -229,7 +228,11 @@ private fun GenericInnerReactionRow( five: @Composable () -> Unit, six: @Composable () -> Unit, ) { - Row(verticalAlignment = CenterVertically, modifier = ReactionRowHeight) { + Row( + verticalAlignment = CenterVertically, + horizontalArrangement = RowColSpacing, + modifier = ReactionRowHeight, + ) { val fullWeight = remember { Modifier.weight(1f) } if (showReactionDetail) { @@ -241,11 +244,11 @@ private fun GenericInnerReactionRow( } } - Row(verticalAlignment = CenterVertically, modifier = fullWeight) { two() } + Row(verticalAlignment = CenterVertically, horizontalArrangement = RowColSpacing, modifier = fullWeight) { two() } - Row(verticalAlignment = CenterVertically, modifier = fullWeight) { three() } + Row(verticalAlignment = CenterVertically, horizontalArrangement = RowColSpacing, modifier = fullWeight) { three() } - Row(verticalAlignment = CenterVertically, modifier = fullWeight) { four() } + Row(verticalAlignment = CenterVertically, horizontalArrangement = RowColSpacing, modifier = fullWeight) { four() } Row(verticalAlignment = CenterVertically, modifier = fullWeight) { five() } @@ -658,7 +661,6 @@ fun TextCount( text = showCount(count), fontSize = Font14SP, color = textColor, - modifier = HalfStartPadding, maxLines = 1, ) } diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/VideoScreen.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/VideoScreen.kt index 5c9ca3a4c..2270fd09a 100644 --- a/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/VideoScreen.kt +++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/VideoScreen.kt @@ -99,6 +99,7 @@ import com.vitorpamplona.amethyst.ui.theme.Size39Modifier import com.vitorpamplona.amethyst.ui.theme.Size40Modifier import com.vitorpamplona.amethyst.ui.theme.Size40dp import com.vitorpamplona.amethyst.ui.theme.Size55dp +import com.vitorpamplona.amethyst.ui.theme.VideoReactionColumnPadding import com.vitorpamplona.amethyst.ui.theme.onBackgroundColorFilter import com.vitorpamplona.amethyst.ui.theme.placeholderText import com.vitorpamplona.quartz.events.FileHeaderEvent @@ -462,7 +463,7 @@ fun ReactionsColumn( Column( horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.padding(bottom = 75.dp, end = 10.dp), + modifier = VideoReactionColumnPadding, ) { ReplyReaction( baseNote = baseNote, @@ -495,7 +496,7 @@ fun ReactionsColumn( nav = nav, iconSize = Size40dp, heartSizeModifier = Size35Modifier, - 28.sp, + iconFontSize = 28.sp, ) ZapReaction( baseNote = baseNote, 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 cc20be1b8..e19db38ee 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 @@ -21,6 +21,7 @@ package com.vitorpamplona.amethyst.ui.theme import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth @@ -101,6 +102,8 @@ val HalfPadding = Modifier.padding(5.dp) val StdPadding = Modifier.padding(10.dp) val BigPadding = Modifier.padding(15.dp) +val RowColSpacing = Arrangement.spacedBy(3.dp) + val HalfHorzPadding = Modifier.padding(horizontal = 5.dp) val HalfVertPadding = Modifier.padding(vertical = 5.dp) @@ -136,6 +139,8 @@ val ReactionRowExpandButton = Modifier.width(65.dp).padding(start = 31.dp) val WidthAuthorPictureModifier = Modifier.width(55.dp) val WidthAuthorPictureModifierWithPadding = Modifier.width(65.dp) +val VideoReactionColumnPadding = Modifier.padding(bottom = 75.dp) + val DividerThickness = 0.25.dp val ReactionRowHeight = Modifier.height(24.dp).padding(start = 10.dp) @@ -223,4 +228,4 @@ val liveStreamTag = .padding(horizontal = Size5dp) val chatAuthorImage = Modifier.size(20.dp).clip(shape = CircleShape) -val AuthorInfoVideoFeed = Modifier.width(75.dp) +val AuthorInfoVideoFeed = Modifier.width(75.dp).padding(end = 15.dp)