From a56151bc62c0f27300231162dd7c283f096d509d Mon Sep 17 00:00:00 2001 From: Jorge Martin Espinosa Date: Thu, 21 Dec 2023 10:39:11 +0100 Subject: [PATCH] Emojis in custom reaction bottomsheet are too tiny (#2074) * Emojis in custom reaction bottomsheet are too tiny --------- Co-authored-by: ElementBot --- changelog.d/2066.bugfix | 1 + .../components/customreaction/EmojiItem.kt | 15 ++++++++++----- .../components/customreaction/EmojiPicker.kt | 11 ++++++++--- ...l_EmojiItem-Day-30_30_null,NEXUS_5,1.0,en].png | 4 ++-- ...EmojiItem-Night-30_31_null,NEXUS_5,1.0,en].png | 4 ++-- ...EmojiPicker-Day-31_31_null,NEXUS_5,1.0,en].png | 4 ++-- ...ojiPicker-Night-31_32_null,NEXUS_5,1.0,en].png | 4 ++-- 7 files changed, 27 insertions(+), 16 deletions(-) create mode 100644 changelog.d/2066.bugfix diff --git a/changelog.d/2066.bugfix b/changelog.d/2066.bugfix new file mode 100644 index 0000000000..13ee4584da --- /dev/null +++ b/changelog.d/2066.bugfix @@ -0,0 +1 @@ +Emojis in custom reaction bottom sheet are too tiny. diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt index 97b4cbe96c..8b720ce390 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt @@ -22,9 +22,10 @@ import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.sizeIn import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.ripple.rememberRipple +import androidx.compose.material3.LocalTextStyle import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment @@ -33,12 +34,15 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.clearAndSetSemantics import androidx.compose.ui.semantics.contentDescription +import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import io.element.android.compound.theme.ElementTheme import io.element.android.emojibasebindings.Emoji import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight +import io.element.android.libraries.designsystem.text.toDp import io.element.android.libraries.designsystem.theme.components.Text -import io.element.android.compound.theme.ElementTheme import io.element.android.libraries.ui.strings.CommonStrings @Composable @@ -47,6 +51,7 @@ fun EmojiItem( isSelected: Boolean, onEmojiSelected: (Emoji) -> Unit, modifier: Modifier = Modifier, + emojiSize: TextUnit = 20.sp, ) { val backgroundColor = if (isSelected) { ElementTheme.colors.bgActionPrimaryRest @@ -60,12 +65,12 @@ fun EmojiItem( } Box( modifier = modifier - .size(40.dp) + .sizeIn(minWidth = 40.dp, minHeight = 40.dp) .background(backgroundColor, CircleShape) .clickable( enabled = true, onClick = { onEmojiSelected(item) }, - indication = rememberRipple(bounded = false, radius = 20.dp), + indication = rememberRipple(bounded = false, radius = emojiSize.toDp() / 2 + 10.dp), interactionSource = remember { MutableInteractionSource() } ) .clearAndSetSemantics { @@ -75,7 +80,7 @@ fun EmojiItem( ) { Text( text = item.unicode, - style = ElementTheme.typography.fontHeadingSmRegular, + style = LocalTextStyle.current.copy(fontSize = emojiSize), ) } } diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiPicker.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiPicker.kt index 02ddfec026..ddf524b656 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiPicker.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiPicker.kt @@ -20,6 +20,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.lazy.grid.GridCells @@ -43,6 +44,7 @@ import io.element.android.emojibasebindings.EmojibaseDatasource import io.element.android.emojibasebindings.EmojibaseStore import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight +import io.element.android.libraries.designsystem.text.toSp import io.element.android.libraries.designsystem.theme.components.Icon import kotlinx.collections.immutable.ImmutableSet import kotlinx.collections.immutable.persistentSetOf @@ -65,7 +67,7 @@ fun EmojiPicker( ) { EmojibaseCategory.entries.forEachIndexed { index, category -> Tab( - text = { + icon = { Icon( imageVector = category.icon, contentDescription = stringResource(id = category.title) @@ -87,15 +89,18 @@ fun EmojiPicker( val emojis = categories[category] ?: listOf() LazyVerticalGrid( modifier = Modifier.fillMaxSize(), - columns = GridCells.Adaptive(minSize = 40.dp), + columns = GridCells.Adaptive(minSize = 48.dp), contentPadding = PaddingValues(vertical = 10.dp, horizontal = 16.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), + verticalArrangement = Arrangement.spacedBy(2.dp) ) { items(emojis, key = { it.unicode }) { item -> EmojiItem( + modifier = Modifier.aspectRatio(1f), item = item, isSelected = selectedEmojis.contains(item.unicode), - onEmojiSelected = onEmojiSelected + onEmojiSelected = onEmojiSelected, + emojiSize = 32.dp.toSp(), ) } } diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Day-30_30_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Day-30_30_null,NEXUS_5,1.0,en].png index a1f01a3ac5..1431252351 100644 --- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Day-30_30_null,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Day-30_30_null,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a97571d655893966be7749c851787ec8173b871a912f8e74f6932e54d524e452 -size 9263 +oid sha256:3891edef642d713ee7ee3f7f8fef57c07b721e35e3b3ad48362bb40a4742f7d3 +size 9276 diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Night-30_31_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Night-30_31_null,NEXUS_5,1.0,en].png index d5254b7ce9..26b75e7f50 100644 --- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Night-30_31_null,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Night-30_31_null,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:99b040639102d5ed77fe2b5dfcf550395668348d711ec8da45e95584b8be9778 -size 9117 +oid sha256:ff10599bdfffe0857ebecff94a67ff5ca39f84f2fe61e01d27d6168b9a4c8661 +size 9143 diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Day-31_31_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Day-31_31_null,NEXUS_5,1.0,en].png index 65a27f228d..084ae61979 100644 --- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Day-31_31_null,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Day-31_31_null,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1fb074cd58034c90010dc437fc01d6ea77a2a22aa07bc1d4cf0c1730b543b41a -size 186707 +oid sha256:16f7600c138c86c88e74e3c9c108e47f290f83f98b6a5a654faaf6d8858cdd3a +size 242662 diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Night-31_32_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Night-31_32_null,NEXUS_5,1.0,en].png index aaab9d35c1..a62ac20738 100644 --- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Night-31_32_null,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Night-31_32_null,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5ea42394330d37a0aa5ba8940e023fc4454d902caf6d265adec0e11c8a34d85f -size 187744 +oid sha256:f0baf11279836eaa6ff80568048892653d221bed15f41caaf44658d0f3ea3777 +size 244028