Proper styling of reactions

Making sure we display the public key when there is no name

app/src/main/java/org/thoughtcrime/securesms/conversation/v2/messages/EmojiReactionsView.kt

@@ -10,6 +10,7 @@ import android.widget.LinearLayout
 import android.widget.TextView
 import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.core.content.ContextCompat
+import androidx.core.view.setPadding
 import com.google.android.flexbox.JustifyContent
 import network.loki.messenger.R
 import network.loki.messenger.databinding.ViewEmojiReactionsBinding
@@ -43,6 +44,8 @@ class EmojiReactionsView : ConstraintLayout, OnTouchListener {
     private var onDownTimestamp: Long = 0
     private var extended = false
 
+    private val overflowItemSize = ViewUtil.dpToPx(24)
+
     constructor(context: Context) : super(context) { init(null) }
     constructor(context: Context, attrs: AttributeSet) : super(context, attrs) { init(attrs) }
     constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { init(attrs) }
@@ -91,18 +94,15 @@ class EmojiReactionsView : ConstraintLayout, OnTouchListener {
         binding.layoutEmojiContainer.removeAllViews()
         val overflowContainer = LinearLayout(context)
         overflowContainer.orientation = LinearLayout.HORIZONTAL
-        val innerPadding = ViewUtil.dpToPx(4)
-        overflowContainer.setPaddingRelative(innerPadding, innerPadding, innerPadding, innerPadding)
         val pixelSize = ViewUtil.dpToPx(1)
-        for (reaction in reactions) {
+        reactions.forEachIndexed { index, reaction ->
             if (binding.layoutEmojiContainer.childCount + 1 >= DEFAULT_THRESHOLD && threshold != Int.MAX_VALUE && reactions.size > threshold) {
                 if (overflowContainer.parent == null) {
                     binding.layoutEmojiContainer.addView(overflowContainer)
                     val overflowParams = overflowContainer.layoutParams as MarginLayoutParams
-                    overflowParams.height = ViewUtil.dpToPx(26)
+                    overflowParams.height = MarginLayoutParams.WRAP_CONTENT
                     overflowParams.setMargins(pixelSize, pixelSize, pixelSize, pixelSize)
                     overflowContainer.layoutParams = overflowParams
-                    overflowContainer.background = ContextCompat.getDrawable(context, R.drawable.reaction_pill_background)
                 }
                 val pill = buildPill(context, this, reaction, true)
                 pill.setOnClickListener { v: View? ->
@@ -111,6 +111,7 @@ class EmojiReactionsView : ConstraintLayout, OnTouchListener {
                 }
                 pill.findViewById<View>(R.id.reactions_pill_count).visibility = GONE
                 pill.findViewById<View>(R.id.reactions_pill_spacer).visibility = GONE
+                pill.z = reaction.count - index.toFloat() // make sure the overflow is stacked properly
                 overflowContainer.addView(pill)
             } else {
                 val pill = buildPill(context, this, reaction, false)
@@ -179,9 +180,10 @@ class EmojiReactionsView : ConstraintLayout, OnTouchListener {
         val countView = root.findViewById<TextView>(R.id.reactions_pill_count)
         val spacer = root.findViewById<View>(R.id.reactions_pill_spacer)
         if (isCompact) {
-            root.setPaddingRelative(1, 1, 1, 1)
+            root.setPadding(0)
             val layoutParams = root.layoutParams
-            layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
+            layoutParams.height = overflowItemSize
+            layoutParams.width = overflowItemSize
             root.layoutParams = layoutParams
         }
         if (reaction.emoji != null) {
@@ -201,9 +203,8 @@ class EmojiReactionsView : ConstraintLayout, OnTouchListener {
             root.background = ContextCompat.getDrawable(context, R.drawable.reaction_pill_background_selected)
             countView.setTextColor(ThemeUtil.getThemedColor(context, R.attr.reactionsPillSelectedTextColor))
         } else {
-            if (!isCompact) {
+            root.background = if(isCompact) ContextCompat.getDrawable(context, R.drawable.reaction_pill_background_bordered)
-                root.background = ContextCompat.getDrawable(context, R.drawable.reaction_pill_background)
+                else ContextCompat.getDrawable(context, R.drawable.reaction_pill_background)
-            }
         }
         return root
     }

app/src/main/java/org/thoughtcrime/securesms/reactions/ReactionRecipientsAdapter.java

@@ -1,5 +1,7 @@
 package org.thoughtcrime.securesms.reactions;
 
+import static org.session.libsession.utilities.IdUtilKt.truncateIdForDisplay;
+
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
@@ -129,7 +131,7 @@ final class ReactionRecipientsAdapter extends RecyclerView.Adapter<ReactionRecip
       EmojiImageView emojiView = itemView.findViewById(R.id.header_view_emoji);
       emojiView.setImageEmoji(emoji.getDisplayEmoji());
       TextView count = itemView.findViewById(R.id.header_view_emoji_count);
-      count.setText(String.format(" ·  %s", emoji.getCount()));
+      count.setText(String.format(" •  %s", emoji.getCount()));
     }
   }
 
@@ -161,8 +163,8 @@ final class ReactionRecipientsAdapter extends RecyclerView.Adapter<ReactionRecip
         this.remove.setVisibility(View.VISIBLE);
       } else {
         String name = reaction.getSender().getName();
-        if (name != null && new AccountId(name).getPrefix() != null) {
+        if(name == null){
-          name = name.substring(0, 4) + "..." + name.substring(name.length() - 4);
+          name = truncateIdForDisplay(reaction.getSender().getAddress().serialize());
         }
         this.recipient.setText(name);
         this.remove.setVisibility(View.GONE);

app/src/main/java/org/thoughtcrime/securesms/reactions/ReactionsDialogFragment.java

@@ -101,7 +101,7 @@ public final class ReactionsDialogFragment extends BottomSheetDialogFragment imp
       ViewCompat.setOnApplyWindowInsetsListener(container, (v, insets) -> insets.consumeSystemWindowInsets());
 
       TabLayoutMediator mediator = new TabLayoutMediator(emojiTabs, recipientPagerView, (tab, position) -> {
-        tab.setCustomView(R.layout.reactions_pill);
+        tab.setCustomView(R.layout.reactions_pill_large);
 
         View           customView = Objects.requireNonNull(tab.getCustomView());
         EmojiImageView emoji      = customView.findViewById(R.id.reactions_pill_emoji);

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

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <corners android:radius="1000dp" />
+    <solid android:color="?reactionsPillNormalBackground" />
+    <stroke android:width="1dp" android:color="?colorPrimary" />
+</shape>

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

@@ -3,7 +3,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="52dp">
+    android:layout_height="50dp"
+    android:background="?backgroundSecondary">
 
     <org.thoughtcrime.securesms.components.ProfilePictureView
         android:id="@+id/reactions_bottom_view_avatar"
@@ -22,7 +23,7 @@
         android:ellipsize="end"
         android:gravity="center_vertical"
         android:maxLines="2"
-        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
+        style="@style/Signal.Text.Preview"
         android:textColor="?android:textColorPrimary"
         app:layout_constrainedWidth="true"
         app:layout_constraintBottom_toBottomOf="parent"

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

@@ -1,9 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <TextView xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
+    android:layout_height="50dp"
+    xmlns:tools="http://schemas.android.com/tools"
     android:orientation="horizontal"
-    android:gravity="center_horizontal"
+    android:gravity="center"
-    android:padding="@dimen/small_spacing"
     android:id="@+id/footer_view_emoji_count"
-    android:layout_weight="1" />
+    android:layout_weight="1"
+    style="@style/Signal.Text.Preview"
+    android:textColor="?android:textColorTertiary"
+    tools:text="And 1244 other have reacted to this message" />

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

@@ -6,21 +6,21 @@
     android:layout_height="wrap_content">
     <View
         android:layout_gravity="top"
-        android:alpha="0.3"
         android:layout_marginHorizontal="@dimen/small_spacing"
         android:background="?colorDividerBackground"
         android:layout_width="match_parent"
         android:layout_height="1dp"/>
-    <LinearLayout android:layout_height="wrap_content"
+    <LinearLayout android:layout_height="43dp"
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_marginHorizontal="@dimen/medium_spacing"
-        android:padding="@dimen/small_spacing">
+        android:gravity="center_vertical">
         <org.thoughtcrime.securesms.components.emoji.EmojiImageView
             android:id="@+id/header_view_emoji"
             android:layout_width="20dp"
             android:layout_height="20dp"
             android:layout_marginEnd="4dp"
+            android:layout_gravity="center_vertical"
             android:gravity="center"
             android:textStyle="bold"
             app:emoji_forceCustom="true" />
@@ -28,13 +28,16 @@
             android:id="@+id/header_view_emoji_count"
             android:layout_weight="1"
             android:layout_width="0dp"
-            android:layout_height="wrap_content"/>
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_vertical"
+            android:textColor="?android:textColorTertiary"/>
         <TextView
             android:text="@string/message_requests_clear_all"
             android:textColor="?danger"
             android:visibility="gone"
             android:id="@+id/header_view_clear_all"
             android:layout_width="wrap_content"
-            android:layout_height="wrap_content"/>
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_vertical"/>
     </LinearLayout>
 </FrameLayout>

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

@@ -4,31 +4,31 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:orientation="horizontal"
     android:layout_width="wrap_content"
-    android:layout_height="26dp"
+    android:layout_height="22dp"
-    android:paddingStart="7dp"
+    android:paddingStart="8dp"
-    android:paddingEnd="7dp"
+    android:paddingEnd="8dp"
     android:gravity="center">
 
   <org.thoughtcrime.securesms.components.emoji.EmojiImageView
       android:scaleType="centerInside"
       android:id="@+id/reactions_pill_emoji"
-      android:layout_width="17dp"
+      android:layout_width="13dp"
-      android:layout_height="17dp" />
+      android:layout_height="13dp"
+      android:layout_gravity="center_vertical"/>
 
   <View
       android:id="@+id/reactions_pill_spacer"
-      android:layout_width="4dp"
+      android:layout_width="6dp"
       android:layout_height="wrap_content" />
 
   <TextView
       android:id="@+id/reactions_pill_count"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:paddingTop="5dp"
+      android:textSize="11sp"
-      android:paddingBottom="5dp"
-      android:textSize="12dp"
       android:fontFamily="sans-serif-medium"
       android:textColor="?android:textColorTertiary"
+      android:layout_gravity="center_vertical"
       tools:text="23"
       tools:ignore="SpUsage" />
 

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

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:orientation="horizontal"
+    android:layout_width="wrap_content"
+    android:layout_height="32dp"
+    android:paddingStart="8dp"
+    android:paddingEnd="8dp"
+    android:gravity="center">
+
+  <org.thoughtcrime.securesms.components.emoji.EmojiImageView
+      android:scaleType="centerInside"
+      android:id="@+id/reactions_pill_emoji"
+      android:layout_width="20dp"
+      android:layout_height="20dp"
+      android:layout_gravity="center_vertical"/>
+
+  <View
+      android:id="@+id/reactions_pill_spacer"
+      android:layout_width="10dp"
+      android:layout_height="wrap_content" />
+
+  <TextView
+      android:id="@+id/reactions_pill_count"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:textSize="14sp"
+      android:fontFamily="sans-serif-medium"
+      android:textColor="?android:textColorTertiary"
+      android:layout_gravity="center_vertical"
+      tools:text="23"
+      tools:ignore="SpUsage" />
+
+</LinearLayout>