mirror of
https://gitlab.linphone.org/BC/public/linphone-android.git
synced 2026-01-17 03:18:06 +00:00
Various UI improvements related to emoji reactions
This commit is contained in:
parent
87f4ebbd4c
commit
756a83797f
7 changed files with 83 additions and 33 deletions
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
|||
4
app/src/main/res/drawable/shape_empty.xml
Normal file
4
app/src/main/res/drawable/shape_empty.xml
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue