Reactions: update after remarks

library/ui-styles/src/main/res/values/dimens.xml

@@ -61,9 +61,6 @@
     <dimen name="chat_bubble_fixed_size">300dp</dimen>
     <dimen name="chat_bubble_corner_radius">12dp</dimen>
 
-    <dimen name="chat_reaction_min_height">28dp</dimen>
-    <dimen name="chat_reaction_min_width">40dp</dimen>
-
     <!--  Onboarding   -->
     <item name="ftue_auth_gutter_start_percent" format="float" type="dimen">0.05</item>
     <item name="ftue_auth_gutter_end_percent" format="float" type="dimen">0.95</item>

library/ui-styles/src/main/res/values/styles_timeline.xml

@@ -23,4 +23,15 @@
         <item name="android:backgroundTint">?vctr_content_quinary</item>
     </style>
 
+    <style name="TimelineReactionView">
+        <item name="android:paddingStart">6dp</item>
+        <item name="android:paddingEnd">6dp</item>
+        <item name="android:paddingTop">1dp</item>
+        <item name="android:paddingBottom">1dp</item>
+        <item name="android:minHeight">28dp</item>
+        <item name="android:minWidth">40dp</item>
+        <item name="android:gravity">center</item>
+    </style>
+
+
 </resources>

vector/src/main/java/im/vector/app/core/extensions/Context.kt

@@ -18,6 +18,9 @@ package im.vector.app.core.extensions
 
 import android.content.Context
 import android.graphics.drawable.Drawable
+import android.text.Spannable
+import android.text.SpannableString
+import android.text.style.ImageSpan
 import androidx.annotation.ColorInt
 import androidx.annotation.ColorRes
 import androidx.annotation.DrawableRes
@@ -34,6 +37,16 @@ fun Context.singletonEntryPoint(): SingletonEntryPoint {
     return EntryPoints.get(applicationContext, SingletonEntryPoint::class.java)
 }
 
+fun Context.getDrawableAsSpannable(@DrawableRes drawableRes: Int, alignment: Int = ImageSpan.ALIGN_BOTTOM): Spannable {
+    return SpannableString(" ").apply {
+        val span = ContextCompat.getDrawable(this@getDrawableAsSpannable, drawableRes)?.let {
+            it.setBounds(0, 0, it.intrinsicWidth, it.intrinsicHeight)
+            ImageSpan(it, alignment)
+        }
+        setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE)
+    }
+}
+
 fun Context.getResTintedDrawable(@DrawableRes drawableRes: Int, @ColorRes tint: Int, @FloatRange(from = 0.0, to = 1.0) alpha: Float = 1f): Drawable? {
     return getTintedDrawable(drawableRes, ContextCompat.getColor(this, tint), alpha)
 }

vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/AbsBaseMessageItem.kt

@@ -17,17 +17,20 @@
 package im.vector.app.features.home.room.detail.timeline.item
 
 import android.annotation.SuppressLint
-import android.view.Gravity
+import android.graphics.Typeface
 import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
 import android.widget.TextView
 import androidx.annotation.IdRes
+import androidx.appcompat.view.ContextThemeWrapper
 import androidx.core.content.ContextCompat.getDrawable
 import androidx.core.view.isVisible
+import androidx.core.widget.TextViewCompat
 import im.vector.app.R
 import im.vector.app.core.epoxy.ClickListener
 import im.vector.app.core.epoxy.onClick
+import im.vector.app.core.extensions.getDrawableAsSpannable
 import im.vector.app.core.ui.views.ShieldImageView
 import im.vector.app.core.utils.DimensionConverter
 import im.vector.app.features.home.AvatarRenderer
@@ -35,6 +38,7 @@ import im.vector.app.features.home.room.detail.timeline.MessageColorProvider
 import im.vector.app.features.home.room.detail.timeline.TimelineEventController
 import im.vector.app.features.home.room.detail.timeline.view.TimelineMessageLayoutRenderer
 import im.vector.app.features.reactions.widget.ReactionButton
+import im.vector.app.features.themes.ThemeUtils
 import org.matrix.android.sdk.api.crypto.RoomEncryptionTrustLevel
 import org.matrix.android.sdk.api.session.room.send.SendState
 
@@ -114,7 +118,7 @@ abstract class AbsBaseMessageItem<H : AbsBaseMessageItem.Holder> : BaseEventItem
                 holder.reactionsContainer.addView(reactionButton)
             }
             if (reactions.count() > MAX_REACTIONS_TO_SHOW) {
-                val showReactionsTextView = createReactionTextView(holder, 6)
+                val showReactionsTextView = createReactionTextView(holder)
                 if (reactionsSummary.showAll) {
                     showReactionsTextView.setText(R.string.message_reaction_show_less)
                     showReactionsTextView.onClick { reactionsSummary.onShowLessClicked() }
@@ -125,23 +129,21 @@ abstract class AbsBaseMessageItem<H : AbsBaseMessageItem.Holder> : BaseEventItem
                 }
                 holder.reactionsContainer.addView(showReactionsTextView)
             }
-            val addMoreReactionsTextView = createReactionTextView(holder, 14)
+            val addMoreReactionsTextView = createReactionTextView(holder)
-            addMoreReactionsTextView.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_add_reaction_small, 0, 0, 0)
+
+            addMoreReactionsTextView.text = holder.view.context.getDrawableAsSpannable(R.drawable.ic_add_reaction_small)
             addMoreReactionsTextView.onClick { reactionsSummary.onAddMoreClicked() }
             holder.reactionsContainer.addView(addMoreReactionsTextView)
             holder.reactionsContainer.setOnLongClickListener(baseAttributes.itemLongClickListener)
         }
     }
 
-    private fun createReactionTextView(holder: H, horizontalPaddingDp: Int): TextView {
+    private fun createReactionTextView(holder: H): TextView {
-        return TextView(holder.view.context).apply {
+        return TextView(ContextThemeWrapper(holder.view.context, R.style.TimelineReactionView)).apply {
-            textSize = 10f
-            gravity = Gravity.CENTER
-            minimumHeight = resources.getDimensionPixelSize(R.dimen.chat_reaction_min_height)
-            minimumWidth = resources.getDimensionPixelSize(R.dimen.chat_reaction_min_width)
             background = getDrawable(context, R.drawable.reaction_rounded_rect_shape_off)
-            val padding = holder.dimensionConverter.dpToPx(horizontalPaddingDp)
+            TextViewCompat.setTextAppearance(this, R.style.TextAppearance_Vector_Micro)
-            setPadding(padding, 0, padding, 0)
+            setTypeface(typeface, Typeface.BOLD)
+            setTextColor(ThemeUtils.getColor(context, R.attr.vctr_content_secondary))
         }
     }
 

vector/src/main/java/im/vector/app/features/home/room/detail/timeline/view/MessageBubbleView.kt

@@ -31,7 +31,6 @@ import androidx.core.content.withStyledAttributes
 import androidx.core.graphics.drawable.DrawableCompat
 import androidx.core.view.isVisible
 import androidx.core.view.updateLayoutParams
-import com.google.android.flexbox.FlexDirection
 import com.google.android.material.shape.MaterialShapeDrawable
 import im.vector.app.R
 import im.vector.app.core.resources.LocaleProvider
@@ -80,7 +79,6 @@ class MessageBubbleView @JvmOverloads constructor(context: Context, attrs: Attri
         views.messageThreadSummaryContainer.layoutDirection = layoutDirectionToSet
         views.bubbleWrapper.layoutDirection = layoutDirectionToSet
         views.bubbleView.layoutDirection = currentLayoutDirection
-        views.reactionsContainer.flexDirection = if (isIncoming) FlexDirection.ROW else FlexDirection.ROW_REVERSE
 
         bubbleDrawable = MaterialShapeDrawable()
         rippleMaskDrawable = MaterialShapeDrawable()

vector/src/main/java/im/vector/app/features/reactions/widget/ReactionButton.kt

@@ -18,7 +18,6 @@ package im.vector.app.features.reactions.widget
 import android.content.Context
 import android.graphics.drawable.Drawable
 import android.util.AttributeSet
-import android.view.Gravity
 import android.view.View
 import android.widget.LinearLayout
 import androidx.core.content.ContextCompat
@@ -37,8 +36,9 @@ import javax.inject.Inject
 @AndroidEntryPoint
 class ReactionButton @JvmOverloads constructor(context: Context,
                                                attrs: AttributeSet? = null,
-                                               defStyleAttr: Int = 0) :
+                                               defStyleAttr: Int = 0,
-        LinearLayout(context, attrs, defStyleAttr), View.OnClickListener, View.OnLongClickListener {
+                                               defStyleRes: Int = R.style.TimelineReactionView) :
+        LinearLayout(context, attrs, defStyleAttr, defStyleRes), View.OnClickListener, View.OnLongClickListener {
 
     @Inject lateinit var emojiSpanify: EmojiSpanify
 
@@ -67,9 +67,6 @@ class ReactionButton @JvmOverloads constructor(context: Context,
     init {
         inflate(context, R.layout.reaction_button, this)
         orientation = HORIZONTAL
-        minimumHeight = resources.getDimensionPixelSize(R.dimen.chat_reaction_min_height)
-        minimumWidth = resources.getDimensionPixelSize(R.dimen.chat_reaction_min_width)
-        gravity = Gravity.CENTER
         layoutDirection = View.LAYOUT_DIRECTION_LOCALE
         views = ReactionButtonBinding.bind(this)
         views.reactionCount.text = TextUtils.formatCountToShortDecimal(reactionCount)

vector/src/main/res/layout/reaction_button.xml

@@ -3,11 +3,10 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="wrap_content"
-    android:layout_height="@dimen/chat_reaction_min_height"
+    android:layout_height="wrap_content"
     android:background="@drawable/reaction_rounded_rect_shape"
     android:clipChildren="false"
     android:gravity="center"
-    android:minWidth="@dimen/chat_reaction_min_width"
     tools:parentTag="android.widget.LinearLayout">
 
     <!--<View-->
@@ -21,7 +20,6 @@
         style="@style/Widget.Vector.TextView.Caption"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginStart="6dp"
         android:ellipsize="middle"
         android:gravity="center"
         android:maxEms="10"
@@ -35,7 +33,6 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginStart="2dp"
-        android:layout_marginEnd="6dp"
         android:gravity="center"
         android:maxLines="1"
         android:textColor="?vctr_content_secondary"