From 1561295c253a466678a66b875a69482a6c2fa2e5 Mon Sep 17 00:00:00 2001 From: ThomasSession Date: Tue, 27 Aug 2024 14:20:13 +1000 Subject: [PATCH] Proper styling of reactions Making sure we display the public key when there is no name --- .../v2/messages/EmojiReactionsView.kt | 21 +++++------ .../reactions/ReactionRecipientsAdapter.java | 8 +++-- .../reactions/ReactionsDialogFragment.java | 2 +- .../reaction_pill_background_bordered.xml | 6 ++++ ...m_sheet_dialog_fragment_recipient_item.xml | 5 +-- ..._sheet_dialog_fragment_recycler_footer.xml | 11 +++--- ..._sheet_dialog_fragment_recycler_header.xml | 13 ++++--- app/src/main/res/layout/reactions_pill.xml | 18 +++++----- .../main/res/layout/reactions_pill_large.xml | 35 +++++++++++++++++++ 9 files changed, 85 insertions(+), 34 deletions(-) create mode 100644 app/src/main/res/drawable/reaction_pill_background_bordered.xml create mode 100644 app/src/main/res/layout/reactions_pill_large.xml diff --git 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 index 49e4b1044f..2234e657bb 100644 --- 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(R.id.reactions_pill_count).visibility = GONE pill.findViewById(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(R.id.reactions_pill_count) val spacer = root.findViewById(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 } diff --git a/app/src/main/java/org/thoughtcrime/securesms/reactions/ReactionRecipientsAdapter.java b/app/src/main/java/org/thoughtcrime/securesms/reactions/ReactionRecipientsAdapter.java index 79717eabb1..05817f4923 100644 --- 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 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); diff --git a/app/src/main/res/drawable/reaction_pill_background_bordered.xml b/app/src/main/res/drawable/reaction_pill_background_bordered.xml new file mode 100644 index 0000000000..0adaee8025 --- /dev/null +++ b/app/src/main/res/drawable/reaction_pill_background_bordered.xml @@ -0,0 +1,6 @@ + + + + + + diff --git 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 index ef94652a91..e3d037809d 100644 --- 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"> \ No newline at end of file + android:layout_weight="1" + style="@style/Signal.Text.Preview" + android:textColor="?android:textColorTertiary" + tools:text="And 1244 other have reacted to this message" /> \ No newline at end of file diff --git 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 index 46d9c6976e..2c20312645 100644 --- 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"> - + android:gravity="center_vertical"> @@ -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"/> + android:layout_height="wrap_content" + android:layout_gravity="center_vertical"/> \ No newline at end of file diff --git a/app/src/main/res/layout/reactions_pill.xml b/app/src/main/res/layout/reactions_pill.xml index a88673cba8..69546d092b 100644 --- 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"> + android:layout_width="13dp" + android:layout_height="13dp" + android:layout_gravity="center_vertical"/> diff --git a/app/src/main/res/layout/reactions_pill_large.xml b/app/src/main/res/layout/reactions_pill_large.xml new file mode 100644 index 0000000000..44fbd5aa02 --- /dev/null +++ b/app/src/main/res/layout/reactions_pill_large.xml @@ -0,0 +1,35 @@ + + + + + + + + + + \ No newline at end of file