Proper styling of reactions

Making sure we display the public key when there is no name
2024-11-23 10:05:15 +00:00 · 2024-08-27 14:20:13 +10:00 · 2024-08-27 14:20:13 +10:00 · 1561295c25
commit 1561295c25
parent db6d67f53c
9 changed files with 85 additions and 34 deletions
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/messages/EmojiReactionsView.kt
+++ b/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 = ContextCompat.getDrawable(context, R.drawable.reaction_pill_background)
-            }
+            root.background = if(isCompact) ContextCompat.getDrawable(context, R.drawable.reaction_pill_background_bordered)
+                else ContextCompat.getDrawable(context, R.drawable.reaction_pill_background)
        }
        return root
    }
--- a/app/src/main/java/org/thoughtcrime/securesms/reactions/ReactionRecipientsAdapter.java
+++ b/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) {
-          name = name.substring(0, 4) + "..." + name.substring(name.length() - 4);
+        if(name == null){
+          name = truncateIdForDisplay(reaction.getSender().getAddress().serialize());
        }
        this.recipient.setText(name);
        this.remove.setVisibility(View.GONE);
--- a/app/src/main/java/org/thoughtcrime/securesms/reactions/ReactionsDialogFragment.java
+++ b/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);
--- a/app/src/main/res/drawable/reaction_pill_background_bordered.xml
+++ b/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>
--- a/app/src/main/res/layout/reactions_bottom_sheet_dialog_fragment_recipient_item.xml
+++ b/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"
--- a/app/src/main/res/layout/reactions_bottom_sheet_dialog_fragment_recycler_footer.xml
+++ b/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:padding="@dimen/small_spacing"
+    android:gravity="center"
    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" />
--- a/app/src/main/res/layout/reactions_bottom_sheet_dialog_fragment_recycler_header.xml
+++ b/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>
--- a/app/src/main/res/layout/reactions_pill.xml
+++ b/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:paddingStart="7dp"
-    android:paddingEnd="7dp"
+    android:layout_height="22dp"
+    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="17dp"
-      android:layout_height="17dp" />
+      android:layout_width="13dp"
+      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:paddingBottom="5dp"
-      android:textSize="12dp"
+      android:textSize="11sp"
      android:fontFamily="sans-serif-medium"
      android:textColor="?android:textColorTertiary"
+      android:layout_gravity="center_vertical"
      tools:text="23"
      tools:ignore="SpUsage" />

--- a/app/src/main/res/layout/reactions_pill_large.xml
+++ b/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>