re-layout conversation list item layout

- unread conversation display
- harmonize font-sizes
- re-enlarge avatar to 48dp
- make unread-bubble bold
- use grey tones for text/headline

Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
This commit is contained in:
Andy Scherzinger 2021-03-22 11:45:58 +01:00
parent aee794142e
commit 22589be2af
No known key found for this signature in database
GPG Key ID: 6CADC7E3523C308B
7 changed files with 123 additions and 83 deletions

View File

@ -23,11 +23,14 @@
package com.nextcloud.talk.newarch.features.conversationsList
import android.content.Context
import android.graphics.Color
import android.graphics.Typeface
import android.graphics.drawable.Drawable
import android.text.TextUtils
import android.text.format.DateUtils
import android.view.View
import android.view.ViewGroup
import androidx.core.content.ContextCompat
import androidx.core.view.isVisible
import coil.api.load
import coil.transform.CircleCropTransformation
@ -73,17 +76,33 @@ open class ConversationPresenter(context: Context, onElementClick: ((Page, Holde
if (conversation.unreadMessages > 0) {
holder.itemView.dialogUnreadBubble!!.visibility = View.VISIBLE
if (conversation.unreadMessages < 100) {
holder.itemView.dialogName.setTypeface(
holder.itemView.dialogName.getTypeface(),
Typeface.BOLD
)
holder.itemView.dialogDate.setTypeface(
holder.itemView.dialogDate.getTypeface(),
Typeface.BOLD
)
holder.itemView.dialogLastMessage.setTypeface(
holder.itemView.dialogLastMessage.getTypeface(),
Typeface.BOLD
)
if (conversation.unreadMessages < 1000) {
holder.itemView.dialogUnreadBubble!!.text = conversation.unreadMessages.toLong()
.toString()
} else {
holder.itemView.dialogUnreadBubble!!.text = context.getString(R.string.nc_99_plus)
holder.itemView.dialogUnreadBubble!!.text = context.getString(R.string.nc_999_plus)
}
if (conversation.unreadMention || conversation.type == Conversation.ConversationType.ONE_TO_ONE_CONVERSATION) {
holder.itemView.dialogUnreadBubble!!.setChipBackgroundColorResource(R.color.colorPrimary)
holder.itemView.dialogUnreadBubble!!.setTextColor(Color.WHITE)
} else {
holder.itemView.dialogUnreadBubble!!.setChipBackgroundColorResource(R.color.grey_600)
holder.itemView.dialogUnreadBubble!!.setChipBackgroundColorResource(R.color.conversation_unread_bubble)
holder.itemView.dialogUnreadBubble!!.setTextColor(
ContextCompat.getColor(context, R.color.conversation_unread_bubble_text)
)
}
} else {
holder.itemView.dialogUnreadBubble!!.visibility = View.GONE

View File

@ -22,51 +22,54 @@
-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="@dimen/item_height"
android:padding="@dimen/double_margin_between_elements"
android:animateLayoutChanges="true">
android:layout_height="72dp"
android:animateLayoutChanges="true"
android:paddingTop="@dimen/margin_between_elements"
android:paddingBottom="@dimen/margin_between_elements"
android:paddingLeft="@dimen/double_margin_between_elements"
android:paddingRight="@dimen/double_margin_between_elements">
<FrameLayout
android:id="@+id/dialogAvatarFrameLayout"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginEnd="@dimen/double_margin_between_elements">
<FrameLayout
android:id="@+id/dialogAvatarFrameLayout"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_centerVertical="true"
android:layout_marginEnd="@dimen/double_margin_between_elements">
<ImageView
android:id="@id/dialogAvatar"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerCrop"
tools:src="@tools:sample/avatars[0]"/>
<ImageView
android:id="@id/dialogAvatar"
android:layout_width="48dp"
android:layout_height="48dp"
android:scaleType="centerCrop"
tools:src="@tools:sample/avatars[0]" />
<ImageView
android:id="@+id/passwordProtectedRoomImageView"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_lock_grey600_24px" />
<ImageView
android:id="@+id/passwordProtectedRoomImageView"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_lock_grey600_24px" />
<ImageView
android:id="@+id/favoriteConversationImageView"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="top|end"
android:src="@drawable/ic_star_black_24dp"
android:tint="@color/favorite_icon_tint"
android:tintMode="src_in"/>
<ImageView
android:id="@+id/favoriteConversationImageView"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="top|end"
android:src="@drawable/ic_star_black_24dp"
app:tint="@color/favorite_icon_tint"
app:tintMode="src_in" />
</FrameLayout>
</FrameLayout>
<androidx.emoji.widget.EmojiTextView
android:id="@id/dialogLastMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:layout_below="@+id/dialogName"
android:layout_marginTop="8dp"
android:layout_toStartOf="@+id/dialogUnreadBubble"
android:layout_toEndOf="@id/dialogAvatarFrameLayout"
android:ellipsize="end"
@ -74,6 +77,7 @@
android:lines="1"
android:singleLine="true"
android:textColor="@color/conversation_last_message"
android:textSize="14sp"
tools:text="This is the last message\nof an incredibly long two line conversation text" />
@ -82,52 +86,56 @@
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:layout_below="@+id/dialogName"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:gravity="top"
android:lines="1"
android:textColor="@color/conversation_unread_bubble"
android:textAppearance="@style/ChipUnreadMessagesTextAppearance"
android:textColor="@color/conversation_unread_bubble_text"
app:chipBackgroundColor="@color/conversation_unread_bubble"
app:chipEndPadding="-1dp"
app:chipMinTouchTargetSize="0dp"
app:chipStartPadding="-3dp"
app:ensureMinTouchTargetSize="false"
tools:text="99+" />
<TextView
android:id="@id/dialogDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/dialogAvatarFrameLayout"
android:layout_alignParentEnd="true"
android:layout_marginStart="@dimen/margin_between_elements"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@color/conversation_date"
tools:text="@string/nc_date_header_yesterday" />
<TextView
android:id="@id/dialogDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/dialogAvatarFrameLayout"
android:layout_alignParentEnd="true"
android:layout_marginStart="@dimen/margin_between_elements"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@color/conversation_date"
android:textSize="14sp"
tools:text="@string/nc_date_header_yesterday" />
<ProgressBar
android:layout_width="16sp"
android:layout_height="16sp"
android:id="@+id/actionProgressBar"
android:layout_alignBottom="@id/dialogName"
android:layout_marginEnd="8dp"
android:layout_toEndOf="@+id/dialogAvatarFrameLayout"
android:indeterminateTint="@color/colorPrimary"
android:visibility="gone" />
<ProgressBar
android:id="@+id/actionProgressBar"
android:layout_width="16sp"
android:layout_height="16sp"
android:layout_alignBottom="@id/dialogName"
android:layout_marginEnd="8dp"
android:layout_toEndOf="@+id/dialogAvatarFrameLayout"
android:indeterminateTint="@color/colorPrimary"
android:visibility="gone" />
<androidx.emoji.widget.EmojiTextView
android:id="@id/dialogName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@id/dialogAvatarFrameLayout"
android:layout_toStartOf="@id/dialogDate"
android:layout_toEndOf="@id/actionProgressBar"
android:ellipsize="end"
android:includeFontPadding="false"
android:maxLines="1"
android:textColor="@color/conversation_item_header"
android:textSize="16sp"
tools:text="Best conversation" />
<androidx.emoji.widget.EmojiTextView
android:id="@id/dialogName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@id/dialogAvatarFrameLayout"
android:layout_toStartOf="@id/dialogDate"
android:layout_toEndOf="@id/actionProgressBar"
android:ellipsize="end"
android:includeFontPadding="false"
android:maxLines="1"
android:textColor="@color/conversation_item_header"
android:textSize="16sp"
tools:text="Best conversation" />
</RelativeLayout>

View File

@ -26,12 +26,12 @@
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
<com.google.android.material.card.MaterialCardView
android:id="@+id/searchCardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginHorizontal="12dp"
android:background="@color/transparent"
android:background="@color/appbar"
app:cardPreventCornerOverlap="true"
android:clipToPadding="true"
android:layout_marginBottom="-4dp"
@ -148,5 +148,5 @@
</FrameLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</com.google.android.material.card.MaterialCardView>
</merge>

View File

@ -29,15 +29,19 @@
<color name="colorPrimaryDark">#006AA3</color>
<color name="colorAccent">#007CC2</color>
<color name="conversation_item_header">#9FBDCC</color>
<!--<color name="conversation_item_header">#CFCFCF</color>-->
<color name="appbar">#1E1E1E</color>
<color name="bg_default">#222222</color>
<color name="bg_alt">#222222</color>
<!-- Name of person or group for the chat conversation -->
<color name="conversation_item_header">#E3E3E3</color>
<color name="conversation_unread_bubble">#373737</color>
<color name="conversation_unread_bubble_text">#D8D8D8</color>
<color name="bg_default">#121212</color>
<color name="bg_alt">#121212</color>
<color name="bg_inverse">@color/grey950</color>
<color name="fg_default">#FFFFFF</color>
<color name="fg_inverse">#222222</color>
<color name="fg_inverse">#121212</color>
<color name="fg_chat_message_sent">@color/fg_default</color>
<!-- Chat window incoming message text & informational -->
@ -46,7 +50,7 @@
<color name="nc_chip_mention_you_background">#0083C9</color>
<color name="nc_chip_mention_others_background">#6F6F6F</color>
<color name="nc_grey">@android:color/holo_purple</color>
<color name="bg_bottom_sheet">#222222</color>
<color name="bg_bottom_sheet">#121212</color>
<color name="bg_selected_participant_clear_icon">#EFEFEF</color>
<color name="bg_message_list_incoming_bubble">#484848</color>
<color name="bg_message_list_outcoming_bubble">#003F62</color>

View File

@ -27,16 +27,20 @@
<color name="colorPrimaryDark">#006AA3</color>
<color name="colorAccent">#007CC2</color>
<color name="appbar">@android:color/white</color>
<color name="fontAppbar">#A5A5A5</color>
<!-- Text color of sent messages -->
<color name="nc_outcoming_text_default">#FFFFFF</color>
<!-- Text color of received messages -->
<color name="nc_incoming_text_default">#37505D</color>
<!-- Name of person or group for the chat conversation -->
<color name="conversation_item_header">#37505D</color>
<color name="conversation_item_header">#333333</color>
<color name="conversation_date">@color/warm_grey_two</color>
<color name="conversation_last_message">@color/warm_grey_four</color>
<color name="conversation_unread_bubble">#FFFFFF</color>
<color name="conversation_unread_bubble">#DBDBDB</color>
<color name="conversation_unread_bubble_text">#222222</color>
<color name="nc_incoming_text_mention_you">#C98879</color>
<color name="nc_incoming_text_mention_others">#37505D</color>

View File

@ -337,7 +337,7 @@
<string name="nc_last_moderator">You need to promote a new moderator before you can leave %1$s.</string>
<!-- Chat -->
<string name="nc_99_plus">99+</string>
<string name="nc_999_plus" translatable="false">999+</string>
<string name="nc_copy_message">Copy</string>
<string name="nc_reply">Reply</string>

View File

@ -51,6 +51,11 @@
<item name="android:textColor">@color/colorAccent</item>
</style>
<style name="ChipUnreadMessagesTextAppearance" parent="TextAppearance.MaterialComponents.Chip">
<item name="android:textSize">14sp</item>
<item name="android:textStyle">bold</item>
</style>
<style name="appActionBarStyle" parent="@style/Widget.MaterialComponents.ActionBar.Solid">
<item name="android:colorPrimary">@color/fg_inverse</item>
<item name="android:textColor">@color/fg_inverse</item>