Various UI improvements related to emoji reactions

This commit is contained in:
Sylvain Berfini 2024-07-19 15:13:19 +02:00
parent 87f4ebbd4c
commit 756a83797f
7 changed files with 83 additions and 33 deletions

View file

@ -117,6 +117,8 @@ class MessageModel @WorkerThread constructor(
val reactions = MutableLiveData<String>()
val ourReactionIndex = MutableLiveData<Int>()
val filesList = MutableLiveData<ArrayList<FileModel>>()
val firstFileModel = MediatorLiveData<FileModel>()
@ -531,8 +533,23 @@ class MessageModel @WorkerThread constructor(
reactionsList += " $count"
}
}
Log.d("$TAG Reactions for message [$id] are [$reactionsList]")
val ourOwnReaction = chatMessage.ownReaction
if (ourOwnReaction != null) {
val index = when (ourOwnReaction.body) {
AppUtils.getString(R.string.emoji_thumbs_up) -> 0
AppUtils.getString(R.string.emoji_love) -> 1
AppUtils.getString(R.string.emoji_laughing) -> 2
AppUtils.getString(R.string.emoji_surprised) -> 3
AppUtils.getString(R.string.emoji_tear) -> 4
else -> -1
}
ourReactionIndex.postValue(index)
} else {
ourReactionIndex.postValue(-1)
}
reactions.postValue(reactionsList)
}

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
</shape>

View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="?attr/color_grey_200"/>
</shape>

View file

@ -291,7 +291,7 @@
android:background="@drawable/shape_chat_bubble_incoming_reactions_background"
android:text="@{model.reactions, default=@string/emoji_love}"
android:visibility="@{model.reactions.length() > 0 ? View.VISIBLE : View.GONE}"
app:layout_constraintEnd_toEndOf="@id/bubble"
app:layout_constraintStart_toStartOf="@id/bubble"
app:layout_constraintTop_toBottomOf="@id/bubble" />
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -26,12 +26,14 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:visibility="@{viewModel.isChatRoomReadOnly ? View.GONE : View.VISIBLE}"
layout="@layout/chat_emoji_reaction_picker"
bind:model="@{viewModel.messageModel}"
bind:pickEmojiClickListener="@{() -> viewModel.pickEmoji()}"
app:layout_constraintHorizontal_bias="@{viewModel.horizontalBias, default=0}"
app:layout_constraintWidth_max="@dimen/dialog_max_width"
app:layout_constraintWidth_max="@dimen/emoji_list_max_width"
app:layout_constraintBottom_toTopOf="@id/bubbles"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
@ -40,8 +42,8 @@
android:id="@+id/bubbles"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
@ -84,9 +86,9 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="60dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="@dimen/screen_bottom_margin"
android:background="@drawable/shape_squircle_white_background"
app:layout_constraintWidth_max="250dp"
app:layout_constraintHorizontal_bias="@{viewModel.horizontalBias, default=0}"

View file

@ -19,9 +19,7 @@
<ImageView
android:id="@+id/emojis_background"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_height="70dp"
android:src="@drawable/shape_squircle_white_background"
android:contentDescription="@null"
app:layout_constraintStart_toStartOf="parent"
@ -33,11 +31,17 @@
android:id="@+id/thumbs_up"
android:onClick="@{() -> model.sendReaction(@string/emoji_thumbs_up)}"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="10dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="3dp"
android:text="@string/emoji_thumbs_up"
android:textSize="@dimen/chat_bubble_long_press_emoji_reaction_size"
android:background="@{model.ourReactionIndex == 0 ? @drawable/shape_squircle_gray_200_background : @drawable/shape_empty, default=@drawable/shape_squircle_gray_200_background}"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintTop_toTopOf="@id/emojis_background"
app:layout_constraintBottom_toBottomOf="@id/emojis_background"
@ -49,13 +53,16 @@
android:id="@+id/love"
android:onClick="@{() -> model.sendReaction(@string/emoji_love)}"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="3dp"
android:text="@string/emoji_love"
android:textSize="@dimen/chat_bubble_long_press_emoji_reaction_size"
android:background="@{model.ourReactionIndex == 1 ? @drawable/shape_squircle_gray_200_background : @drawable/shape_empty}"
app:layout_constraintTop_toTopOf="@id/thumbs_up"
app:layout_constraintBottom_toBottomOf="@id/emojis_background"
app:layout_constraintBottom_toBottomOf="@id/thumbs_up"
app:layout_constraintStart_toEndOf="@id/thumbs_up"
app:layout_constraintEnd_toStartOf="@id/laughing"/>
@ -64,13 +71,16 @@
android:id="@+id/laughing"
android:onClick="@{() -> model.sendReaction(@string/emoji_laughing)}"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="3dp"
android:text="@string/emoji_laughing"
android:textSize="@dimen/chat_bubble_long_press_emoji_reaction_size"
android:background="@{model.ourReactionIndex == 2 ? @drawable/shape_squircle_gray_200_background : @drawable/shape_empty}"
app:layout_constraintTop_toTopOf="@id/thumbs_up"
app:layout_constraintBottom_toBottomOf="@id/emojis_background"
app:layout_constraintBottom_toBottomOf="@id/thumbs_up"
app:layout_constraintStart_toEndOf="@id/love"
app:layout_constraintEnd_toStartOf="@id/surprised"/>
@ -79,13 +89,16 @@
android:id="@+id/surprised"
android:onClick="@{() -> model.sendReaction(@string/emoji_surprised)}"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="3dp"
android:text="@string/emoji_surprised"
android:textSize="@dimen/chat_bubble_long_press_emoji_reaction_size"
android:background="@{model.ourReactionIndex == 3 ? @drawable/shape_squircle_gray_200_background : @drawable/shape_empty}"
app:layout_constraintTop_toTopOf="@id/thumbs_up"
app:layout_constraintBottom_toBottomOf="@id/emojis_background"
app:layout_constraintBottom_toBottomOf="@id/thumbs_up"
app:layout_constraintStart_toEndOf="@id/laughing"
app:layout_constraintEnd_toStartOf="@id/tear"/>
@ -94,29 +107,37 @@
android:id="@+id/tear"
android:onClick="@{() -> model.sendReaction(@string/emoji_tear)}"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="3dp"
android:text="@string/emoji_tear"
android:textSize="@dimen/chat_bubble_long_press_emoji_reaction_size"
android:background="@{model.ourReactionIndex == 4 ? @drawable/shape_squircle_gray_200_background : @drawable/shape_empty}"
app:layout_constraintTop_toTopOf="@id/thumbs_up"
app:layout_constraintBottom_toBottomOf="@id/emojis_background"
app:layout_constraintBottom_toBottomOf="@id/thumbs_up"
app:layout_constraintStart_toEndOf="@id/surprised"
app:layout_constraintEnd_toStartOf="@id/plus"/>
<ImageView
android:id="@+id/plus"
android:onClick="@{pickEmojiClickListener}"
android:layout_width="30dp"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="16dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="6dp"
android:paddingTop="10dp"
android:adjustViewBounds="true"
android:src="@drawable/plus_circle"
android:contentDescription="@string/content_description_chat_open_emoji_picker"
app:layout_constraintStart_toEndOf="@id/tear"
app:layout_constraintEnd_toEndOf="@id/emojis_background"
app:layout_constraintTop_toTopOf="@id/thumbs_up"
app:layout_constraintBottom_toBottomOf="@id/emojis_background" />
app:layout_constraintBottom_toBottomOf="@id/thumbs_up"
app:tint="?attr/color_main2_500" />
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -49,6 +49,7 @@
<dimen name="button_max_width">400dp</dimen>
<dimen name="dialog_max_width">400dp</dimen>
<dimen name="text_input_max_width">400dp</dimen>
<dimen name="emoji_list_max_width">400dp</dimen>
<dimen name="popup_menu_width">250dp</dimen>
<dimen name="popup_menu_padding">15dp</dimen>
<dimen name="popup_menu_item_top_margin">20dp</dimen>
@ -93,7 +94,7 @@
<dimen name="chat_room_emoji_picker_height">300dp</dimen>
<dimen name="chat_room_participants_list_max_height">300dp</dimen>
<dimen name="chat_bubble_emoji_picker_height">425dp</dimen>
<dimen name="chat_bubble_max_height_long_press">300dp</dimen>
<dimen name="chat_bubble_max_height_long_press">340dp</dimen>
<dimen name="recycler_view_min_height">200dp</dimen>