add chip styled background to self reaction (wip)

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

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);
         });

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()
-                if (amount > 1) {
+                    && message.reactionsSelf.contains(emoji)
-                    if (useLightColorForText) {
+                ) {
-                        reactionAmount.setTextColor(ContextCompat.getColor(context, R.color.nc_grey))
+                    emojiWithAmountWrapper.background =
-                    }
+                        AppCompatResources.getDrawable(context, R.drawable.reaction_self_background)
-                    reactionAmount.text = amount.toString()
                 }
 
-                val params = RelativeLayout.LayoutParams(
+                emojiWithAmountWrapper.addView(reactionEmoji)
+
+                if (amount > 1) {
+                    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 = 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
+                emojiWithAmountWrapper.layoutParams = params
-                binding.reactionsEmojiWrapper.addView(reactionAmount)
+
+                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 = "…"
     }
 }

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;

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>

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>

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>