Merge pull request #1934 from nextcloud/feature/1915/showOwnReactions

Show own reactions

app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingLocationMessageViewHolder.kt

@@ -102,7 +102,7 @@ class IncomingLocationMessageViewHolder(incomingView: View, payload: Any) : Mess
         // geo-location
         setLocationDataOnMessageItem(message)
 
-        Reaction().showReactions(message, binding.reactions, context!!, true)
+        Reaction().showReactions(message, binding.reactions, binding.messageText.context, false)
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }

app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingVoiceMessageViewHolder.kt

@@ -142,7 +142,7 @@ class IncomingVoiceMessageViewHolder(incomingView: View, payload: Any) : Message
             }
         })
 
-        Reaction().showReactions(message, binding.reactions, context!!, true)
+        Reaction().showReactions(message, binding.reactions, binding.messageTime.context, false)
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }

app/src/main/java/com/nextcloud/talk/adapters/messages/MagicIncomingTextMessageViewHolder.kt

@@ -122,7 +122,7 @@ class MagicIncomingTextMessageViewHolder(itemView: View, payload: Any) : Message
 
         itemView.setTag(MessageSwipeCallback.REPLYABLE_VIEW_TAG, message.isReplyable)
 
-        Reaction().showReactions(message, binding.reactions, context!!, true)
+        Reaction().showReactions(message, binding.reactions, binding.messageText.context, false)
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }

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, getMessageText().getContext(), true);
         reactionsBinding.reactionsEmojiWrapper.setOnClickListener(l -> {
             reactionsInterface.onClickReactions(message);
         });

app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingLocationMessageViewHolder.kt

@@ -114,7 +114,7 @@ class OutcomingLocationMessageViewHolder(incomingView: View) : MessageHolders
         // geo-location
         setLocationDataOnMessageItem(message)
 
-        Reaction().showReactions(message, binding.reactions, context!!, true)
+        Reaction().showReactions(message, binding.reactions, binding.messageText.context, true)
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }

app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingVoiceMessageViewHolder.kt

@@ -131,7 +131,7 @@ class OutcomingVoiceMessageViewHolder(outcomingView: View) : MessageHolders
 
         binding.checkMark.setContentDescription(readStatusContentDescriptionString)
 
-        Reaction().showReactions(message, binding.reactions, context!!, true)
+        Reaction().showReactions(message, binding.reactions, binding.messageTime.context, true)
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }

app/src/main/java/com/nextcloud/talk/adapters/messages/Reaction.kt

@@ -25,8 +25,9 @@ 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 com.nextcloud.talk.R
 import com.nextcloud.talk.databinding.ReactionsInsideMessageBinding
@@ -35,47 +36,75 @@ import com.nextcloud.talk.utils.DisplayUtils
 import com.vanniktech.emoji.EmojiTextView
 
 class Reaction {
+
     fun showReactions(
         message: ChatMessage,
         binding: ReactionsInsideMessageBinding,
         context: Context,
-        useLightColorForText: Boolean
+        isOutgoingMessage: Boolean
     ) {
         binding.reactionsEmojiWrapper.removeAllViews()
         if (message.reactions != null && message.reactions.isNotEmpty()) {
 
             var remainingEmojisToDisplay = MAX_EMOJIS_TO_DISPLAY
             val showInfoAboutMoreEmojis = message.reactions.size > MAX_EMOJIS_TO_DISPLAY
+
+            var textColor = ContextCompat.getColor(context, R.color.white)
+            if (!isOutgoingMessage) {
+                textColor = ContextCompat.getColor(binding.root.context, R.color.high_emphasis_text)
+            }
+
+            val amountParams = LinearLayout.LayoutParams(
+                ViewGroup.LayoutParams.WRAP_CONTENT,
+                ViewGroup.LayoutParams.WRAP_CONTENT
+            )
+            amountParams.marginStart = DisplayUtils.convertDpToPixel(AMOUNT_START_MARGIN, context).toInt()
+
+            val wrapperParams = LinearLayout.LayoutParams(
+                ViewGroup.LayoutParams.WRAP_CONTENT,
+                ViewGroup.LayoutParams.WRAP_CONTENT
+            )
+            wrapperParams.marginEnd = DisplayUtils.convertDpToPixel(EMOJI_END_MARGIN, context).toInt()
+
             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)
+                emojiWithAmountWrapper.addView(reactionEmoji)
 
                 if (amount > 1) {
-                    if (useLightColorForText) {
-                        reactionAmount.setTextColor(ContextCompat.getColor(context, R.color.nc_grey))
-                    }
+                    val reactionAmount = TextView(context)
+                    reactionAmount.setTextColor(textColor)
                     reactionAmount.text = amount.toString()
+                    reactionAmount.layoutParams = amountParams
+                    emojiWithAmountWrapper.addView(reactionAmount)
+                }
+
+                emojiWithAmountWrapper.layoutParams = wrapperParams
+
+                val paddingSide = DisplayUtils.convertDpToPixel(EMOJI_AND_AMOUNT_PADDING_SIDE, context).toInt()
+                val paddingTop = DisplayUtils.convertDpToPixel(WRAPPER_PADDING_TOP, context).toInt()
+                val paddingBottom = DisplayUtils.convertDpToPixel(WRAPPER_PADDING_BOTTOM, context).toInt()
+                if (message.reactionsSelf != null &&
+                    message.reactionsSelf.isNotEmpty() &&
+                    message.reactionsSelf.contains(emoji)
+                ) {
+                    emojiWithAmountWrapper.background =
+                        AppCompatResources.getDrawable(context, R.drawable.reaction_self_background)
+                    emojiWithAmountWrapper.setPaddingRelative(paddingSide, paddingTop, paddingSide, paddingBottom)
+                } else {
+                    emojiWithAmountWrapper.setPaddingRelative(0, paddingTop, paddingSide, paddingBottom)
                 }
 
-                val params = RelativeLayout.LayoutParams(
-                    ViewGroup.LayoutParams.WRAP_CONTENT,
-                    ViewGroup.LayoutParams.WRAP_CONTENT
-                )
-                params.setMargins(
-                    DisplayUtils.convertDpToPixel(EMOJI_START_MARGIN, context).toInt(),
-                    0,
-                    DisplayUtils.convertDpToPixel(EMOJI_END_MARGIN, context).toInt(),
-                    0
-                )
-                reactionAmount.layoutParams = params
-                binding.reactionsEmojiWrapper.addView(reactionAmount)
+                binding.reactionsEmojiWrapper.addView(emojiWithAmountWrapper)
 
                 remainingEmojisToDisplay--
                 if (remainingEmojisToDisplay == 0 && showInfoAboutMoreEmojis) {
                     val infoAboutMoreEmojis = TextView(context)
+                    infoAboutMoreEmojis.setTextColor(textColor)
                     infoAboutMoreEmojis.text = EMOJI_MORE
                     binding.reactionsEmojiWrapper.addView(infoAboutMoreEmojis)
                     break
@@ -86,8 +115,11 @@ 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 AMOUNT_START_MARGIN: Float = 2F
+        const val EMOJI_END_MARGIN: Float = 6F
+        const val EMOJI_AND_AMOUNT_PADDING_SIDE: Float = 4F
+        const val WRAPPER_PADDING_TOP: Float = 2F
+        const val WRAPPER_PADDING_BOTTOM: Float = 3F
         const val EMOJI_MORE = "…"
     }
 }

app/src/main/java/com/nextcloud/talk/controllers/ChatController.kt

@@ -2050,10 +2050,10 @@ class ChatController(args: Bundle) :
                             } else {
                                 processMessages(response, false, 0)
                             }
-                        } catch (npe: NullPointerException) {
+                        } catch (e: NullPointerException) {
                             // view binding can be null
                             // since this is called asynchrously and UI might have been destroyed in the meantime
-                            Log.i(TAG, "UI destroyed - view binding already gone")
+                            Log.i(TAG, "UI destroyed - view binding already gone", e)
                         }
                     }
 
@@ -2746,11 +2746,16 @@ class ChatController(args: Bundle) :
             message.reactions = LinkedHashMap()
         }
 
+        if (message.reactionsSelf == null) {
+            message.reactionsSelf = ArrayList<String>()
+        }
+
         var amount = message.reactions[emoji]
         if (amount == null) {
             amount = 0
         }
         message.reactions[emoji] = amount + 1
+        message.reactionsSelf.add(emoji)
         adapter?.update(message)
     }
 

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/java/com/nextcloud/talk/ui/dialog/MessageActionsDialog.kt

@@ -29,6 +29,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.inputmethod.InputMethodManager
 import androidx.annotation.NonNull
+import androidx.appcompat.content.res.AppCompatResources
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialog
 import com.nextcloud.talk.BuildConfig
@@ -43,6 +44,7 @@ import com.nextcloud.talk.models.json.conversations.Conversation
 import com.nextcloud.talk.models.json.generic.GenericOverall
 import com.nextcloud.talk.utils.ApiUtils
 import com.vanniktech.emoji.EmojiPopup
+import com.vanniktech.emoji.EmojiTextView
 import io.reactivex.Observer
 import io.reactivex.android.schedulers.AndroidSchedulers
 import io.reactivex.disposables.Disposable
@@ -123,24 +125,31 @@ class MessageActionsDialog(
 
     private fun initEmojiBar() {
         if (CapabilitiesUtil.hasSpreedFeatureCapability(user, "reactions")) {
+            checkAndSetEmojiSelfReaction(dialogMessageActionsBinding.emojiThumbsUp)
             dialogMessageActionsBinding.emojiThumbsUp.setOnClickListener {
                 sendReaction(message, dialogMessageActionsBinding.emojiThumbsUp.text.toString())
             }
+            checkAndSetEmojiSelfReaction(dialogMessageActionsBinding.emojiThumbsDown)
             dialogMessageActionsBinding.emojiThumbsDown.setOnClickListener {
                 sendReaction(message, dialogMessageActionsBinding.emojiThumbsDown.text.toString())
             }
+            checkAndSetEmojiSelfReaction(dialogMessageActionsBinding.emojiLaugh)
             dialogMessageActionsBinding.emojiLaugh.setOnClickListener {
                 sendReaction(message, dialogMessageActionsBinding.emojiLaugh.text.toString())
             }
+            checkAndSetEmojiSelfReaction(dialogMessageActionsBinding.emojiHeart)
             dialogMessageActionsBinding.emojiHeart.setOnClickListener {
                 sendReaction(message, dialogMessageActionsBinding.emojiHeart.text.toString())
             }
+            checkAndSetEmojiSelfReaction(dialogMessageActionsBinding.emojiConfused)
             dialogMessageActionsBinding.emojiConfused.setOnClickListener {
                 sendReaction(message, dialogMessageActionsBinding.emojiConfused.text.toString())
             }
+            checkAndSetEmojiSelfReaction(dialogMessageActionsBinding.emojiSad)
             dialogMessageActionsBinding.emojiSad.setOnClickListener {
                 sendReaction(message, dialogMessageActionsBinding.emojiSad.text.toString())
             }
+
             dialogMessageActionsBinding.emojiMore.setOnClickListener {
                 dismiss()
             }
@@ -150,6 +159,12 @@ class MessageActionsDialog(
         }
     }
 
+    private fun checkAndSetEmojiSelfReaction(emoji: EmojiTextView) {
+        if (emoji.text?.toString() != null && message.reactionsSelf?.contains(emoji.text?.toString()) == true) {
+            emoji.background = AppCompatResources.getDrawable(context, R.drawable.reaction_self_bottom_sheet_background)
+        }
+    }
+
     private fun initMenuMarkAsUnread(visible: Boolean) {
         if (visible) {
             dialogMessageActionsBinding.menuMarkAsUnread.setOnClickListener {
@@ -232,6 +247,14 @@ class MessageActionsDialog(
     }
 
     private fun sendReaction(message: ChatMessage, emoji: String) {
+        if (message.reactionsSelf.contains(emoji)) {
+            deleteReaction(message, emoji)
+        } else {
+            addReaction(message, emoji)
+        }
+    }
+
+    private fun addReaction(message: ChatMessage, emoji: String) {
         val credentials = ApiUtils.getCredentials(user?.username, user?.token)
 
         ncApi.sendReaction(
@@ -258,7 +281,40 @@ class MessageActionsDialog(
                 }
 
                 override fun onError(e: Throwable) {
-                    Log.e(TAG, "error while sending reaction")
+                    Log.e(TAG, "error while sending reaction: $emoji")
+                }
+
+                override fun onComplete() {
+                    dismiss()
+                }
+            })
+    }
+
+    private fun deleteReaction(message: ChatMessage, emoji: String) {
+        val credentials = ApiUtils.getCredentials(user?.username, user?.token)
+
+        ncApi.deleteReaction(
+            credentials,
+            ApiUtils.getUrlForMessageReaction(
+                user?.baseUrl,
+                currentConversation!!.token,
+                message.id
+            ),
+            emoji
+        )
+            ?.subscribeOn(Schedulers.io())
+            ?.observeOn(AndroidSchedulers.mainThread())
+            ?.subscribe(object : Observer<GenericOverall> {
+                override fun onSubscribe(d: Disposable) {
+                    // unused atm
+                }
+
+                override fun onNext(@NonNull genericOverall: GenericOverall) {
+                    Log.d(TAG, "deleted reaction: $emoji")
+                }
+
+                override fun onError(e: Throwable) {
+                    Log.e(TAG, "error while deleting reaction: $emoji")
                 }
 
                 override fun onComplete() {
@@ -271,7 +327,6 @@ class MessageActionsDialog(
         private const val TAG = "MessageActionsDialog"
         private const val ACTOR_LENGTH = 6
         private const val NO_PREVIOUS_MESSAGE_ID: Int = -1
-        private const val HTTP_OK: Int = 200
         private const val HTTP_CREATED: Int = 201
     }
 }

app/src/main/java/com/nextcloud/talk/ui/dialog/ShowReactionsDialog.kt

@@ -185,9 +185,8 @@ class ShowReactionsDialog(
     override fun onClick(reactionItem: ReactionItem) {
         if (reactionItem.reactionVoter.actorId?.equals(userEntity?.userId) == true) {
             deleteReaction(chatMessage, reactionItem.reaction!!)
+            dismiss()
         }
-
-        dismiss()
     }
 
     private fun deleteReaction(message: ChatMessage, emoji: String) {

app/src/main/res/drawable/reaction_self_background.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+    Nextcloud Android client application
+
+    @author Marcel Hibbe
+    Copyright (C) 2022 Marcel Hibbe
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<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/drawable/reaction_self_bottom_sheet_background.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Nextcloud Talk application
+  ~
+  ~ @author Andy Scherzinger
+  ~ Copyright (C) 2022 Andy Scherzinger <info@andy-scherzinger.de>
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <stroke
+        android:width="1dp"
+        android:color="@color/colorPrimary" />
+
+    <solid android:color="@color/bg_message_own_reaction" />
+
+</shape>

app/src/main/res/layout/dialog_attachment.xml

@@ -3,7 +3,7 @@
   ~
   ~ @author Marcel Hibbe
   ~ @author Andy Scherzinger
-  ~ Copyright (C) 2021 Andy Scherzinger <info@andy-scherzinger.de>
+  ~ Copyright (C) 2021-2022 Andy Scherzinger <info@andy-scherzinger.de>
   ~ Copyright (C) 2021 Marcel Hibbe <marcel.hibbe@nextcloud.com>
   ~
   ~ This program is free software: you can redistribute it and/or modify
@@ -19,15 +19,12 @@
   ~ You should have received a copy of the GNU General Public License
   ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   -->
-
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
-    android:paddingStart="@dimen/standard_padding"
-    android:paddingEnd="@dimen/standard_padding"
     android:paddingBottom="@dimen/standard_half_padding">
 
     <TextView
@@ -35,6 +32,8 @@
         android:layout_width="wrap_content"
         android:layout_height="@dimen/bottom_sheet_item_height"
         android:gravity="start|center_vertical"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         android:text="@string/nc_add_file"
         android:textAlignment="viewStart"
         android:textColor="@color/medium_emphasis_text"
@@ -47,6 +46,8 @@
         android:background="?android:attr/selectableItemBackground"
         android:gravity="center_vertical"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         tools:ignore="UseCompoundDrawables">
 
         <ImageView
@@ -78,6 +79,8 @@
         android:background="?android:attr/selectableItemBackground"
         android:gravity="center_vertical"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         tools:ignore="UseCompoundDrawables">
 
         <ImageView
@@ -109,6 +112,8 @@
         android:background="?android:attr/selectableItemBackground"
         android:gravity="center_vertical"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         tools:ignore="UseCompoundDrawables">
 
         <ImageView
@@ -140,6 +145,8 @@
         android:background="?android:attr/selectableItemBackground"
         android:gravity="center_vertical"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         tools:ignore="UseCompoundDrawables">
 
         <ImageView
@@ -171,6 +178,8 @@
         android:background="?android:attr/selectableItemBackground"
         android:gravity="center_vertical"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         tools:ignore="UseCompoundDrawables">
 
         <ImageView

app/src/main/res/layout/dialog_audio_output.xml

@@ -25,8 +25,6 @@
     android:layout_height="wrap_content"
     android:background="@color/bg_call_screen_dialog"
     android:orientation="vertical"
-    android:paddingStart="@dimen/standard_padding"
-    android:paddingEnd="@dimen/standard_padding"
     android:paddingBottom="@dimen/standard_half_padding">
 
     <TextView
@@ -34,6 +32,8 @@
         android:layout_width="wrap_content"
         android:layout_height="@dimen/bottom_sheet_item_height"
         android:gravity="start|center_vertical"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         android:text="@string/audio_output_dialog_headline"
         android:textColor="@color/medium_emphasis_text_dark_background"
         android:textSize="@dimen/bottom_sheet_text_size" />
@@ -45,6 +45,8 @@
         android:background="?android:attr/selectableItemBackground"
         android:gravity="center_vertical"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         tools:ignore="UseCompoundDrawables">
 
         <ImageView
@@ -76,6 +78,8 @@
         android:background="?android:attr/selectableItemBackground"
         android:gravity="center_vertical"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         tools:ignore="UseCompoundDrawables">
 
         <ImageView
@@ -107,6 +111,8 @@
         android:background="?android:attr/selectableItemBackground"
         android:gravity="center_vertical"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         tools:ignore="UseCompoundDrawables">
 
         <ImageView
@@ -138,6 +144,8 @@
         android:background="?android:attr/selectableItemBackground"
         android:gravity="center_vertical"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_padding"
         tools:ignore="UseCompoundDrawables">
 
         <ImageView

app/src/main/res/layout/dialog_choose_account.xml

@@ -89,7 +89,8 @@
         app:layout_constraintBottom_toTopOf="@+id/add_account"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/separator_line" />
+        app:layout_constraintTop_toBottomOf="@+id/separator_line"
+        tools:listitem="@layout/account_item" />
 
     <com.google.android.material.button.MaterialButton
         android:id="@+id/add_account"

app/src/main/res/layout/dialog_conversation_operations.xml

@@ -26,8 +26,6 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
-    android:paddingStart="@dimen/standard_padding"
-    android:paddingEnd="@dimen/standard_padding"
     android:paddingBottom="@dimen/standard_half_padding">
 
     <LinearLayout
@@ -42,6 +40,8 @@
             android:layout_width="wrap_content"
             android:layout_height="@dimen/bottom_sheet_item_height"
             android:gravity="start|center_vertical"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             android:textColor="@color/medium_emphasis_text"
             android:textSize="@dimen/bottom_sheet_text_size"
             tools:text="conversation name" />
@@ -50,8 +50,11 @@
             android:id="@+id/conversation_operation_remove_favorite"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -77,8 +80,11 @@
             android:id="@+id/conversation_operation_add_favorite"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -104,8 +110,11 @@
             android:id="@+id/conversation_operation_mark_as_read"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -131,8 +140,11 @@
             android:id="@+id/conversation_operation_rename"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -158,8 +170,11 @@
             android:id="@+id/conversation_operation_make_public"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -185,8 +200,11 @@
             android:id="@+id/conversation_operation_change_password"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -212,8 +230,11 @@
             android:id="@+id/conversation_operation_clear_password"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -239,8 +260,11 @@
             android:id="@+id/conversation_operation_set_password"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -266,8 +290,11 @@
             android:id="@+id/conversation_operation_delete"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -293,8 +320,11 @@
             android:id="@+id/conversation_operation_share_link"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -320,8 +350,11 @@
             android:id="@+id/conversation_operation_make_private"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView
@@ -347,8 +380,11 @@
             android:id="@+id/conversation_operation_leave"
             android:layout_width="match_parent"
             android:layout_height="@dimen/bottom_sheet_item_height"
+            android:background="?android:attr/selectableItemBackground"
             android:gravity="center_vertical"
             android:orientation="horizontal"
+            android:paddingStart="@dimen/standard_padding"
+            android:paddingEnd="@dimen/standard_padding"
             tools:ignore="UseCompoundDrawables">
 
             <ImageView

app/src/main/res/layout/dialog_message_actions.xml

@@ -29,76 +29,85 @@
     <LinearLayout
         android:id="@+id/emojiBar"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/bottom_sheet_item_height"
-        android:layout_marginStart="@dimen/standard_eighth_margin"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/standard_quarter_margin"
+        android:layout_marginTop="@dimen/standard_half_margin"
         android:layout_marginEnd="@dimen/zero"
+        android:layout_marginBottom="@dimen/standard_half_margin"
         android:gravity="center_vertical"
         android:orientation="horizontal">
 
         <com.vanniktech.emoji.EmojiTextView
             android:id="@+id/emojiThumbsUp"
-            android:layout_width="@dimen/activity_row_layout_height"
-            android:layout_height="@dimen/activity_row_layout_height"
-            android:layout_weight="1"
+            android:layout_width="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_height="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_marginLeft="@dimen/standard_quarter_margin"
+            android:layout_marginRight="@dimen/standard_quarter_margin"
             android:cursorVisible="false"
             android:gravity="center"
             android:text="@string/emoji_thumbsUp"
-            android:textSize="24sp" />
+            android:textSize="20sp" />
 
         <com.vanniktech.emoji.EmojiTextView
             android:id="@+id/emojiThumbsDown"
-            android:layout_width="@dimen/activity_row_layout_height"
-            android:layout_height="@dimen/activity_row_layout_height"
-            android:layout_weight="1"
+            android:layout_width="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_height="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_marginLeft="@dimen/standard_quarter_margin"
+            android:layout_marginRight="@dimen/standard_quarter_margin"
             android:cursorVisible="false"
             android:gravity="center"
             android:text="@string/emoji_thumbsDown"
-            android:textSize="24sp" />
+            android:textSize="20sp" />
 
         <com.vanniktech.emoji.EmojiTextView
             android:id="@+id/emojiHeart"
-            android:layout_width="@dimen/activity_row_layout_height"
-            android:layout_height="@dimen/activity_row_layout_height"
-            android:layout_weight="1"
+            android:layout_width="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_height="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_marginLeft="@dimen/standard_quarter_margin"
+            android:layout_marginRight="@dimen/standard_quarter_margin"
             android:cursorVisible="false"
             android:gravity="center"
             android:text="@string/default_emoji"
-            android:textSize="24sp" />
+            android:textSize="20sp" />
 
         <com.vanniktech.emoji.EmojiTextView
             android:id="@+id/emojiLaugh"
-            android:layout_width="@dimen/activity_row_layout_height"
-            android:layout_height="@dimen/activity_row_layout_height"
-            android:layout_weight="1"
+            android:layout_width="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_height="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_marginLeft="@dimen/standard_quarter_margin"
+            android:layout_marginRight="@dimen/standard_quarter_margin"
             android:cursorVisible="false"
             android:gravity="center"
             android:text="@string/emoji_heart"
-            android:textSize="24sp" />
+            android:textSize="20sp" />
 
         <com.vanniktech.emoji.EmojiTextView
             android:id="@+id/emojiConfused"
-            android:layout_width="@dimen/activity_row_layout_height"
-            android:layout_height="@dimen/activity_row_layout_height"
-            android:layout_weight="1"
+            android:layout_width="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_height="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_marginLeft="@dimen/standard_quarter_margin"
+            android:layout_marginRight="@dimen/standard_quarter_margin"
             android:cursorVisible="false"
             android:gravity="center"
             android:text="@string/emoji_confused"
-            android:textSize="24sp" />
+            android:textSize="20sp" />
 
         <com.vanniktech.emoji.EmojiTextView
             android:id="@+id/emojiSad"
-            android:layout_width="@dimen/activity_row_layout_height"
-            android:layout_height="@dimen/activity_row_layout_height"
-            android:layout_weight="1"
+            android:layout_width="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_height="@dimen/reaction_bottom_sheet_layout_size"
+            android:layout_marginLeft="@dimen/standard_quarter_margin"
+            android:layout_marginRight="@dimen/standard_quarter_margin"
             android:cursorVisible="false"
             android:gravity="center"
             android:text="@string/emoji_sad"
-            android:textSize="24sp" />
+            android:textSize="20sp" />
 
         <com.vanniktech.emoji.EmojiEditText
             android:id="@+id/emojiMore"
-            android:layout_width="@dimen/activity_row_layout_height"
+            android:layout_width="0dp"
             android:layout_height="@dimen/activity_row_layout_height"
+            android:layout_marginEnd="2dp"
             android:layout_weight="1"
             android:background="@android:color/transparent"
             android:contentDescription="@string/emoji_more"
@@ -111,8 +120,6 @@
         android:id="@+id/message_actions"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:paddingStart="@dimen/standard_padding"
-        android:paddingEnd="@dimen/standard_padding"
         android:orientation="vertical">
 
         <LinearLayout
@@ -129,6 +136,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:contentDescription="@null"
+                android:paddingStart="@dimen/standard_padding"
+                android:paddingEnd="@dimen/zero"
                 android:src="@drawable/ic_reply"
                 app:tint="@color/high_emphasis_menu_icon" />
 
@@ -138,7 +147,7 @@
                 android:layout_height="wrap_content"
                 android:layout_gravity="start|center_vertical"
                 android:paddingStart="@dimen/standard_double_padding"
-                android:paddingEnd="@dimen/zero"
+                android:paddingEnd="@dimen/standard_padding"
                 android:text="@string/nc_reply"
                 android:textAlignment="viewStart"
                 android:textColor="@color/high_emphasis_text"
@@ -160,6 +169,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:contentDescription="@null"
+                android:paddingStart="@dimen/standard_padding"
+                android:paddingEnd="@dimen/zero"
                 android:src="@drawable/ic_reply"
                 app:tint="@color/high_emphasis_menu_icon" />
 
@@ -169,7 +180,7 @@
                 android:layout_height="wrap_content"
                 android:layout_gravity="start|center_vertical"
                 android:paddingStart="@dimen/standard_double_padding"
-                android:paddingEnd="@dimen/zero"
+                android:paddingEnd="@dimen/standard_padding"
                 android:text="@string/nc_reply_privately"
                 android:textAlignment="viewStart"
                 android:textColor="@color/high_emphasis_text"
@@ -191,6 +202,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:contentDescription="@null"
+                android:paddingStart="@dimen/standard_padding"
+                android:paddingEnd="@dimen/zero"
                 android:src="@drawable/ic_share_action"
                 app:tint="@color/high_emphasis_menu_icon" />
 
@@ -200,7 +213,7 @@
                 android:layout_height="wrap_content"
                 android:layout_gravity="start|center_vertical"
                 android:paddingStart="@dimen/standard_double_padding"
-                android:paddingEnd="@dimen/zero"
+                android:paddingEnd="@dimen/standard_padding"
                 android:text="@string/nc_forward_message"
                 android:textAlignment="viewStart"
                 android:textColor="@color/high_emphasis_text"
@@ -222,6 +235,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:contentDescription="@null"
+                android:paddingStart="@dimen/standard_padding"
+                android:paddingEnd="@dimen/zero"
                 android:src="@drawable/ic_eye_off"
                 app:tint="@color/high_emphasis_menu_icon" />
 
@@ -231,7 +246,7 @@
                 android:layout_height="wrap_content"
                 android:layout_gravity="start|center_vertical"
                 android:paddingStart="@dimen/standard_double_padding"
-                android:paddingEnd="@dimen/zero"
+                android:paddingEnd="@dimen/standard_padding"
                 android:text="@string/nc_mark_as_unread"
                 android:textAlignment="viewStart"
                 android:textColor="@color/high_emphasis_text"
@@ -253,6 +268,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:contentDescription="@null"
+                android:paddingStart="@dimen/standard_padding"
+                android:paddingEnd="@dimen/zero"
                 android:src="@drawable/ic_content_copy"
                 app:tint="@color/high_emphasis_menu_icon" />
 
@@ -262,7 +279,7 @@
                 android:layout_height="wrap_content"
                 android:layout_gravity="start|center_vertical"
                 android:paddingStart="@dimen/standard_double_padding"
-                android:paddingEnd="@dimen/zero"
+                android:paddingEnd="@dimen/standard_padding"
                 android:text="@string/nc_copy_message"
                 android:textAlignment="viewStart"
                 android:textColor="@color/high_emphasis_text"
@@ -284,6 +301,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:contentDescription="@null"
+                android:paddingStart="@dimen/standard_padding"
+                android:paddingEnd="@dimen/zero"
                 android:src="@drawable/ic_delete"
                 app:tint="@color/high_emphasis_menu_icon" />
 
@@ -293,7 +312,7 @@
                 android:layout_height="wrap_content"
                 android:layout_gravity="start|center_vertical"
                 android:paddingStart="@dimen/standard_double_padding"
-                android:paddingEnd="@dimen/zero"
+                android:paddingEnd="@dimen/standard_padding"
                 android:text="@string/nc_delete_message"
                 android:textAlignment="viewStart"
                 android:textColor="@color/high_emphasis_text"

app/src/main/res/layout/dialog_scope.xml

@@ -4,7 +4,7 @@
   ~ @author Tobias Kaminsky
   ~ @author Andy Scherzinger
   ~ Copyright (C) 2021 Tobias Kaminsky <tobias.kaminsky@nextcloud.com>
-  ~ Copyright (C) 2021 Andy Scherzinger <info@andy-scherzinger.de>
+  ~ Copyright (C) 2021-2022 Andy Scherzinger <info@andy-scherzinger.de>
   ~
   ~ This program is free software: you can redistribute it and/or modify
   ~ it under the terms of the GNU General Public License as published by
@@ -19,23 +19,23 @@
   ~ You should have received a copy of the GNU General Public License
   ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   -->
-
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
-    android:paddingStart="@dimen/standard_padding"
     android:paddingTop="@dimen/standard_half_padding"
-    android:paddingEnd="@dimen/standard_padding"
     android:paddingBottom="@dimen/standard_half_padding">
 
     <LinearLayout
         android:id="@+id/scope_private"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="?android:attr/selectableItemBackground"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
         android:paddingTop="@dimen/standard_half_padding"
+        android:paddingEnd="@dimen/standard_padding"
         android:paddingBottom="@dimen/standard_half_padding">
 
         <ImageView
@@ -77,8 +77,11 @@
         android:id="@+id/scope_local"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="?android:attr/selectableItemBackground"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
         android:paddingTop="@dimen/standard_half_padding"
+        android:paddingEnd="@dimen/standard_padding"
         android:paddingBottom="@dimen/standard_half_padding">
 
         <ImageView
@@ -120,8 +123,11 @@
         android:id="@+id/scope_federated"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="?android:attr/selectableItemBackground"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
         android:paddingTop="@dimen/standard_half_padding"
+        android:paddingEnd="@dimen/standard_padding"
         android:paddingBottom="@dimen/standard_half_padding">
 
         <ImageView
@@ -163,8 +169,11 @@
         android:id="@+id/scope_published"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="?android:attr/selectableItemBackground"
         android:orientation="horizontal"
+        android:paddingStart="@dimen/standard_padding"
         android:paddingTop="@dimen/standard_half_padding"
+        android:paddingEnd="@dimen/standard_padding"
         android:paddingBottom="@dimen/standard_half_padding">
 
         <ImageView

app/src/main/res/layout/reaction_item.xml

@@ -22,7 +22,8 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="@dimen/item_height">
+    android:layout_height="@dimen/item_height"
+    android:background="?android:attr/selectableItemBackground">
 
     <com.facebook.drawee.view.SimpleDraweeView
         android:id="@+id/avatar"

app/src/main/res/values-night/colors.xml

@@ -64,6 +64,8 @@
     <color name="bg_message_list_incoming_bubble_deleted">#14FFFFFF</color>
 
     <color name="textColorMaxContrast">#8c8c8c</color>
+    
+    <color name="bg_message_own_reaction">#29ffffff</color>
 
     <!-- shimmer element colors -->
     <color name="nc_shimmer_default_color">#4B4B4B</color>

app/src/main/res/values/colors.xml

@@ -99,6 +99,8 @@
     <!-- voicemessage -->
     <color name="nc_voice_message_outgoing_controls">#606060</color>
 
+    <color name="bg_message_own_reaction">#99ffffff</color>
+
     <color name="camera_bg_tint">#99121212</color>
 
     <color name="list_divider_background">#eeeeee</color>

app/src/main/res/values/dimens.xml

@@ -68,5 +68,6 @@
     <dimen name="standard_quarter_margin">4dp</dimen>
     <dimen name="activity_list_item_title_header_text_size">16sp</dimen>
     <dimen name="activity_row_layout_height">48dp</dimen>
+    <dimen name="reaction_bottom_sheet_layout_size">40dp</dimen>
     <dimen name="standard_eighth_margin">2dp</dimen>
 </resources>