Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Emojis in custom reaction bottomsheet are too tiny #2074

Merged
merged 4 commits into from
Dec 21, 2023
Merged

Emojis in custom reaction bottomsheet are too tiny #2074

merged 4 commits into from
Dec 21, 2023

Conversation

jmartinesp
Copy link
Member

@jmartinesp jmartinesp commented Dec 20, 2023 •
edited
Loading

Type of change

  • Feature
  • Bugfix
  • Technical
  • Other :

Content

  • Changes the size of emojis in the custom reactions bottom sheet so they're larger.
  • Fixes aspect ratio issues.
  • Makes icons in the bottom sheet tabs larger too (they were using a wrong config that made them way smaller than needed).

Motivation and context

Fixes #2066.

Screenshots / GIFs

Before After

Tests

  • Open a room.
  • Long click in a message and add a reaction, or select a message which already has reactions.
  • Long click again, select the 'emoji +' icon to open the custom reactions bottom sheet.
  • Check that emojis are large enough, the ripple looks fine and so does the background for already selected reactions.

Tested devices

  • Physical
  • Emulator
  • OS version(s): 11

Checklist

@jmartinesp jmartinesp requested a review from a team as a code owner December 20, 2023 09:27
@jmartinesp jmartinesp requested review from ganfra and amshakal and removed request for a team December 20, 2023 09:27
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 20, 2023 •
edited
Loading

📱 Scan the QR code below to install the build (arm64 only) for this PR.
QR code
If you can't scan the QR code you can install the build via this link: https://i.diawi.com/6y2XqC

@codecov Codecov
Copy link

codecov bot commented Dec 20, 2023 •
edited
Loading

Codecov Report

Attention: 8 lines in your changes are missing coverage. Please review.

Comparison is base (0575c4d) 67.53% compared to head (0d0537a) 67.54%.
Report is 42 commits behind head on develop.

Files Patch % Lines
.../timeline/components/customreaction/EmojiPicker.kt 50.00% 3 Missing ⚠️
...eatures/roomlist/impl/components/RoomListTopBar.kt 0.00% 1 Missing and 1 partial ⚠️
...in/io/element/android/appconfig/AnalyticsConfig.kt 0.00% 1 Missing ⚠️
...lin/io/element/android/appconfig/RoomListConfig.kt 0.00% 1 Missing ⚠️
...pl/timeline/components/customreaction/EmojiItem.kt 75.00% 0 Missing and 1 partial ⚠️
Additional details and impacted files 
@@             Coverage Diff             @@
##           develop    #2074      +/-   ##
===========================================
+ Coverage    67.53%   67.54%   +0.01%     
===========================================
  Files         1357     1358       +1     
  Lines        33822    33817       -5     
  Branches      7274     7272       -2     
===========================================
+ Hits         22841    22843       +2     
+ Misses        7523     7517       -6     
+ Partials      3458     3457       -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

bmarty
bmarty reviewed Dec 20, 2023
View reviewed changes
.../io/element/android/features/messages/impl/timeline/components/customreaction/EmojiPicker.kt
@@ -65,7 +69,7 @@ fun EmojiPicker(
) {
EmojibaseCategory.entries.forEachIndexed { index, category ->
Tab(
text = {
icon = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

.../io/element/android/features/messages/impl/timeline/components/customreaction/EmojiPicker.kt Outdated
@@ -87,15 +91,18 @@ fun EmojiPicker(
val emojis = categories[category] ?: listOf()
LazyVerticalGrid(
modifier = Modifier.fillMaxSize(),
columns = GridCells.Adaptive(minSize = 40.dp),
columns = GridCells.Adaptive(minSize = 60.dp),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree this is way too large. Users want to see as many as Emoji as possible. On my phone it's currently 8 columns and it's OK for me. Also we do not have a way to filter Emoji (search), so better to see more Emojis.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe use 48 as it is the classical recommended touch area size?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of curiosity, do we have some info now to search for emojis? Is Emoji.label intended for this, and is it localised?

@jmartinesp jmartinesp added the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label Dec 20, 2023
@github-actions github-actions bot removed the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label Dec 20, 2023
@sonarqubecloud SonarQubeCloud
Copy link

Quality Gate Passed Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud

@jmartinesp jmartinesp mentioned this pull request Dec 20, 2023
Closed
@jmartinesp jmartinesp added the Run-Maestro Starts a Maestro Cloud session to run integration tests label Dec 21, 2023
@github-actions github-actions bot removed the Run-Maestro Starts a Maestro Cloud session to run integration tests label Dec 21, 2023
@jmartinesp jmartinesp merged commit a56151b into develop Dec 21, 2023
@jmartinesp jmartinesp deleted the fix/jme/2066-emojis-in-bottom-sheet-are-too-small branch December 21, 2023 09:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bmarty bmarty bmarty left review comments

@amshakal amshakal amshakal approved these changes

@ganfra ganfra Awaiting requested review from ganfra ganfra is a code owner automatically assigned from element-hq/element-x-android-reviewers

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Emojis in the bottom sheet are very tiny
3 participants
@jmartinesp @bmarty @amshakal