add chip styled background to self reaction (wip)

Signed-off-by: Marcel Hibbe <dev@mhibbe.de>

6 files changed, 67 insertions, 11 deletions

diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicPreviewMessageViewHolder.java b/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicPreviewMessageViewHolder.java
index c4095bb17..f3481ad94 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicPreviewMessageViewHolder.java
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicPreviewMessageViewHolder.java
@@ -259,7 +259,7 @@ public abstract class MagicPreviewMessageViewHolder extends MessageHolders.Incom
         itemView.setTag(REPLYABLE_VIEW_TAG, message.isReplyable());
 
         reactionsBinding = getReactionsBinding();
-        new Reaction().showReactions(message, reactionsBinding, context, false);
+        new Reaction().showReactions(message, reactionsBinding, context, true);
         reactionsBinding.reactionsEmojiWrapper.setOnClickListener(l -> {
             reactionsInterface.onClickReactions(message);
         });
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/Reaction.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/Reaction.kt
index c0ab6ed06..0f7187a08 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/Reaction.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/Reaction.kt
@@ -25,9 +25,12 @@ package com.nextcloud.talk.adapters.messages
 
 import android.content.Context
 import android.view.ViewGroup
-import android.widget.RelativeLayout
+import android.widget.LinearLayout
 import android.widget.TextView
+import androidx.appcompat.content.res.AppCompatResources
 import androidx.core.content.ContextCompat
+import androidx.core.content.res.ResourcesCompat
+import androidx.core.view.updatePadding
 import com.nextcloud.talk.R
 import com.nextcloud.talk.databinding.ReactionsInsideMessageBinding
 import com.nextcloud.talk.models.json.chat.ChatMessage
@@ -39,7 +42,7 @@ class Reaction {
         message: ChatMessage,
         binding: ReactionsInsideMessageBinding,
         context: Context,
-        useLightColorForText: Boolean
+        isOutgoingMessage: Boolean
     ) {
         binding.reactionsEmojiWrapper.removeAllViews()
         if (message.reactions != null && message.reactions.isNotEmpty()) {
@@ -47,20 +50,41 @@ class Reaction {
             var remainingEmojisToDisplay = MAX_EMOJIS_TO_DISPLAY
             val showInfoAboutMoreEmojis = message.reactions.size > MAX_EMOJIS_TO_DISPLAY
             for ((emoji, amount) in message.reactions) {
+                val emojiWithAmountWrapper = LinearLayout(context)
+                emojiWithAmountWrapper.orientation = LinearLayout.HORIZONTAL
+
                 val reactionEmoji = EmojiTextView(context)
                 reactionEmoji.text = emoji
-                binding.reactionsEmojiWrapper.addView(reactionEmoji)
 
-                val reactionAmount = TextView(context)
+                if (message.reactionsSelf != null
+                    && message.reactionsSelf.isNotEmpty()
+                    && message.reactionsSelf.contains(emoji)
+                ) {
+                    emojiWithAmountWrapper.background =
+                        AppCompatResources.getDrawable(context, R.drawable.reaction_self_background)
+                }
+
+                emojiWithAmountWrapper.addView(reactionEmoji)
 
                 if (amount > 1) {
-                    if (useLightColorForText) {
-                        reactionAmount.setTextColor(ContextCompat.getColor(context, R.color.nc_grey))
+                    val reactionAmount = TextView(context)
+                    if (isOutgoingMessage) {
+                        reactionAmount.setTextColor(ContextCompat.getColor(context, R.color.white))
+                    } else {
+                        // reactionAmount.setTextColor(ContextCompat.getColor(context, R.color.nc_message_incoming_reaction_text_color))
+                        reactionAmount.setTextColor(
+                            ResourcesCompat.getColor(
+                                context.applicationContext.resources,
+                                R.color.nc_message_incoming_reaction_text_color,
+                                null
+                            )
+                        )
                     }
                     reactionAmount.text = amount.toString()
+                    emojiWithAmountWrapper.addView(reactionAmount)
                 }
 
-                val params = RelativeLayout.LayoutParams(
+                val params = LinearLayout.LayoutParams(
                     ViewGroup.LayoutParams.WRAP_CONTENT,
                     ViewGroup.LayoutParams.WRAP_CONTENT
                 )
@@ -70,12 +94,17 @@ class Reaction {
                     DisplayUtils.convertDpToPixel(EMOJI_END_MARGIN, context).toInt(),
                     0
                 )
-                reactionAmount.layoutParams = params
-                binding.reactionsEmojiWrapper.addView(reactionAmount)
+                emojiWithAmountWrapper.layoutParams = params
+
+                val paddingSide = DisplayUtils.convertDpToPixel(EMOJI_AND_AMOUNT_PADDING_SIDE, context).toInt()
+                emojiWithAmountWrapper.updatePadding(left = paddingSide, right = paddingSide)
+
+                binding.reactionsEmojiWrapper.addView(emojiWithAmountWrapper)
 
                 remainingEmojisToDisplay--
                 if (remainingEmojisToDisplay == 0 && showInfoAboutMoreEmojis) {
                     val infoAboutMoreEmojis = TextView(context)
+                    infoAboutMoreEmojis.setTextColor(ContextCompat.getColor(context, R.color.textColorMaxContrast))
                     infoAboutMoreEmojis.text = EMOJI_MORE
                     binding.reactionsEmojiWrapper.addView(infoAboutMoreEmojis)
                     break
@@ -87,7 +116,8 @@ class Reaction {
     companion object {
         const val MAX_EMOJIS_TO_DISPLAY = 4
         const val EMOJI_START_MARGIN: Float = 2F
-        const val EMOJI_END_MARGIN: Float = 8F
+        const val EMOJI_END_MARGIN: Float = 6F
+        const val EMOJI_AND_AMOUNT_PADDING_SIDE: Float = 6F
         const val EMOJI_MORE = "…"
     }
 }
diff --git a/app/src/main/java/com/nextcloud/talk/models/json/chat/ChatMessage.java b/app/src/main/java/com/nextcloud/talk/models/json/chat/ChatMessage.java
index a6d7e1a51..3057a51ca 100644
--- a/app/src/main/java/com/nextcloud/talk/models/json/chat/ChatMessage.java
+++ b/app/src/main/java/com/nextcloud/talk/models/json/chat/ChatMessage.java
@@ -38,6 +38,7 @@ import com.stfalcon.chatkit.commons.models.MessageContentType;
 import org.parceler.Parcel;
 
 import java.security.MessageDigest;
+import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.Date;
 import java.util.HashMap;
@@ -96,6 +97,8 @@ public class ChatMessage implements MessageContentType, MessageContentType.Image
     public String messageType;
     @JsonField(name = "reactions")
     public LinkedHashMap<String, Integer> reactions;
+    @JsonField(name = "reactionsSelf")
+    public ArrayList<String> reactionsSelf;
 
     public boolean isDownloadingVoiceMessage;
     public boolean resetVoiceMessage;
diff --git a/app/src/main/res/drawable/reaction_self_background.xml b/app/src/main/res/drawable/reaction_self_background.xml
new file mode 100644
index 000000000..6ac21b10d
--- /dev/null
+++ b/app/src/main/res/drawable/reaction_self_background.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" >
+
+    <stroke
+        android:width="1dp"
+        android:color="@color/colorPrimary" />
+
+    <solid
+        android:color="@color/bg_message_own_reaction" />
+
+    <padding
+        android:left="1dp"
+        android:right="1dp"
+        android:bottom="1dp"
+        android:top="1dp" />
+
+    <corners android:radius="15dp" />
+</shape>
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
index 5debb59e5..755d53c66 100644
--- a/app/src/main/res/values-night/colors.xml
+++ b/app/src/main/res/values-night/colors.xml
@@ -65,6 +65,8 @@
 
     <color name="textColorMaxContrast">#8c8c8c</color>
 
+    <color name="nc_message_incoming_reaction_text_color">#FFFFFF</color>
+
     <!-- shimmer element colors -->
     <color name="nc_shimmer_default_color">#4B4B4B</color>
     <color name="nc_shimmer_darker_color">#282828</color>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 8953461c1..92c400639 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -99,6 +99,9 @@
     <!-- voicemessage -->
     <color name="nc_voice_message_outgoing_controls">#606060</color>
 
+    <color name="nc_message_incoming_reaction_text_color">#de000000</color>
+    <color name="bg_message_own_reaction">#99ffffff</color>
+
     <color name="camera_bg_tint">#99121212</color>
 
     <color name="list_divider_background">#eeeeee</color>