proper material 3 reactions theming

Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
This commit is contained in:
Andy Scherzinger 2022-08-03 21:38:10 +02:00
parent fd49b13b14
commit 4c9f5bec2e
No known key found for this signature in database
GPG key ID: 6CADC7E3523C308B
12 changed files with 106 additions and 29 deletions

View file

@ -102,7 +102,13 @@ class IncomingLocationMessageViewHolder(incomingView: View, payload: Any) : Mess
// geo-location
setLocationDataOnMessageItem(message)
Reaction().showReactions(message, binding.reactions, binding.messageText.context, false)
Reaction().showReactions(
message,
binding.reactions,
binding.messageText.context,
false,
viewThemeUtils
)
binding.reactions.reactionsEmojiWrapper.setOnClickListener {
reactionsInterface.onClickReactions(message)
}

View file

@ -88,7 +88,13 @@ class IncomingPollMessageViewHolder(incomingView: View, payload: Any) : MessageH
setPollPreview(message)
Reaction().showReactions(message, binding.reactions, binding.messageTime.context, false)
Reaction().showReactions(
message,
binding.reactions,
binding.messageTime.context,
false,
viewThemeUtils
)
binding.reactions.reactionsEmojiWrapper.setOnClickListener {
reactionsInterface.onClickReactions(message)
}

View file

@ -145,7 +145,13 @@ class IncomingVoiceMessageViewHolder(incomingView: View, payload: Any) : Message
}
})
Reaction().showReactions(message, binding.reactions, binding.messageTime.context, false)
Reaction().showReactions(
message,
binding.reactions,
binding.messageTime.context,
false,
viewThemeUtils
)
binding.reactions.reactionsEmojiWrapper.setOnClickListener {
reactionsInterface.onClickReactions(message)
}

View file

@ -122,7 +122,13 @@ class MagicIncomingTextMessageViewHolder(itemView: View, payload: Any) : Message
itemView.setTag(MessageSwipeCallback.REPLYABLE_VIEW_TAG, message.replyable)
Reaction().showReactions(message, binding.reactions, binding.messageText.context, false)
Reaction().showReactions(
message,
binding.reactions,
binding.messageText.context,
false,
viewThemeUtils
)
binding.reactions.reactionsEmojiWrapper.setOnClickListener {
reactionsInterface.onClickReactions(message)
}

View file

@ -128,7 +128,7 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
itemView.setTag(MessageSwipeCallback.REPLYABLE_VIEW_TAG, message.replyable)
Reaction().showReactions(message, binding.reactions, context!!, true)
Reaction().showReactions(message, binding.reactions, context, true, viewThemeUtils)
binding.reactions.reactionsEmojiWrapper.setOnClickListener {
reactionsInterface.onClickReactions(message)
}

View file

@ -51,6 +51,7 @@ import com.nextcloud.talk.data.user.model.User;
import com.nextcloud.talk.databinding.ReactionsInsideMessageBinding;
import com.nextcloud.talk.models.json.chat.ChatMessage;
import com.nextcloud.talk.ui.theme.ServerTheme;
import com.nextcloud.talk.ui.theme.ViewThemeUtils;
import com.nextcloud.talk.utils.DisplayUtils;
import com.nextcloud.talk.utils.DrawableUtils;
import com.nextcloud.talk.utils.FileViewerUtils;
@ -96,6 +97,9 @@ public abstract class MagicPreviewMessageViewHolder extends MessageHolders.Incom
@Inject
ServerTheme serverTheme;
@Inject
ViewThemeUtils viewThemeUtils;
@Inject
OkHttpClient okHttpClient;
@ -239,7 +243,11 @@ public abstract class MagicPreviewMessageViewHolder extends MessageHolders.Incom
itemView.setTag(REPLYABLE_VIEW_TAG, message.getReplyable());
reactionsBinding = getReactionsBinding();
new Reaction().showReactions(message, reactionsBinding, getMessageText().getContext(), true);
new Reaction().showReactions(message,
reactionsBinding,
getMessageText().getContext(),
true,
viewThemeUtils);
reactionsBinding.reactionsEmojiWrapper.setOnClickListener(l -> {
reactionsInterface.onClickReactions(message);
});

View file

@ -120,7 +120,13 @@ class OutcomingLocationMessageViewHolder(incomingView: View) : MessageHolders
// geo-location
setLocationDataOnMessageItem(message)
Reaction().showReactions(message, binding.reactions, binding.messageText.context, true)
Reaction().showReactions(
message,
binding.reactions,
binding.messageText.context,
true,
viewThemeUtils
)
binding.reactions.reactionsEmojiWrapper.setOnClickListener {
reactionsInterface.onClickReactions(message)
}

View file

@ -106,7 +106,13 @@ class OutcomingPollMessageViewHolder(outcomingView: View, payload: Any) : Messag
setPollPreview(message)
Reaction().showReactions(message, binding.reactions, binding.messageTime.context, true)
Reaction().showReactions(
message,
binding.reactions,
binding.messageTime.context,
true,
viewThemeUtils
)
binding.reactions.reactionsEmojiWrapper.setOnClickListener {
reactionsInterface.onClickReactions(message)
}

View file

@ -137,7 +137,13 @@ class OutcomingVoiceMessageViewHolder(outcomingView: View) : MessageHolders
binding.checkMark.setContentDescription(readStatusContentDescriptionString)
Reaction().showReactions(message, binding.reactions, binding.messageTime.context, true)
Reaction().showReactions(
message,
binding.reactions,
binding.messageTime.context,
true,
viewThemeUtils
)
binding.reactions.reactionsEmojiWrapper.setOnClickListener {
reactionsInterface.onClickReactions(message)
}

View file

@ -27,11 +27,11 @@ import android.content.Context
import android.view.ViewGroup
import android.widget.LinearLayout
import android.widget.TextView
import androidx.appcompat.content.res.AppCompatResources
import androidx.core.content.ContextCompat
import com.nextcloud.talk.R
import com.nextcloud.talk.databinding.ReactionsInsideMessageBinding
import com.nextcloud.talk.models.json.chat.ChatMessage
import com.nextcloud.talk.ui.theme.ViewThemeUtils
import com.nextcloud.talk.utils.DisplayUtils
import com.vanniktech.emoji.EmojiTextView
@ -41,7 +41,8 @@ class Reaction {
message: ChatMessage,
binding: ReactionsInsideMessageBinding,
context: Context,
isOutgoingMessage: Boolean
isOutgoingMessage: Boolean,
viewThemeUtils: ViewThemeUtils
) {
binding.reactionsEmojiWrapper.removeAllViews()
if (message.reactions != null && message.reactions!!.isNotEmpty()) {
@ -49,7 +50,6 @@ class Reaction {
var remainingEmojisToDisplay = MAX_EMOJIS_TO_DISPLAY
val showInfoAboutMoreEmojis = message.reactions!!.size > MAX_EMOJIS_TO_DISPLAY
val textColor = getTextColor(context, isOutgoingMessage, binding)
val amountParams = getAmountLayoutParams(context)
val wrapperParams = getWrapperLayoutParams(context)
@ -58,9 +58,12 @@ class Reaction {
val paddingBottom = DisplayUtils.convertDpToPixel(WRAPPER_PADDING_BOTTOM, context).toInt()
for ((emoji, amount) in message.reactions!!) {
val isSelfReaction = message.reactionsSelf != null &&
message.reactionsSelf!!.isNotEmpty() &&
message.reactionsSelf!!.contains(emoji)
val textColor = getTextColor(isOutgoingMessage, isSelfReaction, binding, viewThemeUtils)
val emojiWithAmountWrapper = getEmojiWithAmountWrapperLayout(
context,
message,
binding.reactionsEmojiWrapper.context,
emoji,
amount,
EmojiWithAmountWrapperLayoutInfo(
@ -69,7 +72,10 @@ class Reaction {
wrapperParams,
paddingSide,
paddingTop,
paddingBottom
paddingBottom,
viewThemeUtils,
isOutgoingMessage,
isSelfReaction
),
)
@ -86,7 +92,6 @@ class Reaction {
private fun getEmojiWithAmountWrapperLayout(
context: Context,
message: ChatMessage,
emoji: String,
amount: Int,
layoutInfo: EmojiWithAmountWrapperLayoutInfo
@ -98,12 +103,17 @@ class Reaction {
emojiWithAmountWrapper.addView(getReactionCount(context, layoutInfo.textColor, amount, layoutInfo.amountParams))
emojiWithAmountWrapper.layoutParams = layoutInfo.wrapperParams
if (message.reactionsSelf != null &&
message.reactionsSelf!!.isNotEmpty() &&
message.reactionsSelf!!.contains(emoji)
) {
emojiWithAmountWrapper.background =
AppCompatResources.getDrawable(context, R.drawable.reaction_self_background)
if (layoutInfo.isSelfReaction) {
val color = if (layoutInfo.isOutgoingMessage) {
ContextCompat.getColor(
emojiWithAmountWrapper.context,
R.color.bg_message_list_incoming_bubble
)
} else {
layoutInfo.viewThemeUtils.getScheme(emojiWithAmountWrapper.context).primaryContainer
}
layoutInfo.viewThemeUtils.setCheckedBackground(emojiWithAmountWrapper, color)
emojiWithAmountWrapper.setPaddingRelative(
layoutInfo.paddingSide,
layoutInfo.paddingTop,
@ -166,12 +176,13 @@ class Reaction {
}
private fun getTextColor(
context: Context,
isOutgoingMessage: Boolean,
binding: ReactionsInsideMessageBinding
isSelfReaction: Boolean,
binding: ReactionsInsideMessageBinding,
viewThemeUtils: ViewThemeUtils
): Int {
var textColor = ContextCompat.getColor(context, R.color.white)
if (!isOutgoingMessage) {
var textColor = viewThemeUtils.getScheme(binding.root.context).onSurfaceVariant
if (!isOutgoingMessage || isSelfReaction) {
textColor = ContextCompat.getColor(binding.root.context, R.color.high_emphasis_text)
}
return textColor
@ -183,7 +194,10 @@ class Reaction {
val wrapperParams: LinearLayout.LayoutParams,
val paddingSide: Int,
val paddingTop: Int,
val paddingBottom: Int
val paddingBottom: Int,
val viewThemeUtils: ViewThemeUtils,
val isOutgoingMessage: Boolean,
val isSelfReaction: Boolean
)
companion object {

View file

@ -690,6 +690,19 @@ class ViewThemeUtils @Inject constructor(private val theme: ServerTheme, private
}
}
fun setCheckedBackground(linearLayout: LinearLayout, @ColorInt backgroundColor: Int) {
withScheme(linearLayout) { scheme ->
val drawable = AppCompatResources
.getDrawable(linearLayout.context, R.drawable.reaction_self_background)!!
.mutate()
DrawableCompat.setTintList(
drawable,
ColorStateList.valueOf(backgroundColor)
)
linearLayout.background = drawable
}
}
companion object {
private val THEMEABLE_PLACEHOLDER_IDS = listOf(
R.drawable.ic_mimetype_package_x_generic,

View file

@ -21,10 +21,10 @@
<stroke
android:width="1dp"
android:color="@color/colorPrimary" />
android:color="@color/high_emphasis_text" />
<solid
android:color="@color/bg_message_own_reaction" />
android:color="#FFFFFF" />
<padding
android:left="1dp"