Reactions: update after remarks

This commit is contained in:
ganfra 2022-02-11 13:01:34 +01:00
parent c690bada0d
commit 0a52651e40
7 changed files with 42 additions and 27 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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)
}

View File

@ -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)
addMoreReactionsTextView.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_add_reaction_small, 0, 0, 0)
val addMoreReactionsTextView = createReactionTextView(holder)
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 {
return TextView(holder.view.context).apply {
textSize = 10f
gravity = Gravity.CENTER
minimumHeight = resources.getDimensionPixelSize(R.dimen.chat_reaction_min_height)
minimumWidth = resources.getDimensionPixelSize(R.dimen.chat_reaction_min_width)
private fun createReactionTextView(holder: H): TextView {
return TextView(ContextThemeWrapper(holder.view.context, R.style.TimelineReactionView)).apply {
background = getDrawable(context, R.drawable.reaction_rounded_rect_shape_off)
val padding = holder.dimensionConverter.dpToPx(horizontalPaddingDp)
setPadding(padding, 0, padding, 0)
TextViewCompat.setTextAppearance(this, R.style.TextAppearance_Vector_Micro)
setTypeface(typeface, Typeface.BOLD)
setTextColor(ThemeUtils.getColor(context, R.attr.vctr_content_secondary))
}
}

View File

@ -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()

View File

@ -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) :
LinearLayout(context, attrs, defStyleAttr), View.OnClickListener, View.OnLongClickListener {
defStyleAttr: Int = 0,
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)

View File

@ -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"