Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Emojis in custom reaction bottomsheet are too tiny (#2074)

Browse source 
* Emojis in custom reaction bottomsheet are too tiny

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
Jorge Martin Espinosa 2023-12-21 10:39:11 +01:00 • committed by GitHub
parent 339c815bb4
commit a56151bc62
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 27 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

1
changelog.d/2066.bugfix Normal file
View file

@ -0,0 +1 @@
Emojis in custom reaction bottom sheet are too tiny.

15
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt
View file

@ -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),
)
}
}

11
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiPicker.kt
View file

@ -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(),
)
}
}

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a97571d655893966be7749c851787ec8173b871a912f8e74f6932e54d524e452
size 9263
oid sha256:3891edef642d713ee7ee3f7f8fef57c07b721e35e3b3ad48362bb40a4742f7d3
size 9276

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:99b040639102d5ed77fe2b5dfcf550395668348d711ec8da45e95584b8be9778
size 9117
oid sha256:ff10599bdfffe0857ebecff94a67ff5ca39f84f2fe61e01d27d6168b9a4c8661
size 9143

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1fb074cd58034c90010dc437fc01d6ea77a2a22aa07bc1d4cf0c1730b543b41a
size 186707
oid sha256:16f7600c138c86c88e74e3c9c108e47f290f83f98b6a5a654faaf6d8858cdd3a
size 242662

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5ea42394330d37a0aa5ba8940e023fc4454d902caf6d265adec0e11c8a34d85f
size 187744
oid sha256:f0baf11279836eaa6ff80568048892653d221bed15f41caaf44658d0f3ea3777
size 244028