From 22589be2afcfa35f3c4daa59d0ba441bf7452f55 Mon Sep 17 00:00:00 2001
From: Andy Scherzinger <info@andy-scherzinger.de>
Date: Mon, 22 Mar 2021 11:45:58 +0100
Subject: [PATCH] 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>
---
.../ConversationPresenter.kt | 25 ++-
...rv_item_conversation_with_last_message.xml | 144 +++++++++---------
app/src/main/res/layout/search_layout.xml | 6 +-
app/src/main/res/values-night/colors.xml | 16 +-
app/src/main/res/values/colors.xml | 8 +-
app/src/main/res/values/strings.xml | 2 +-
app/src/main/res/values/styles.xml | 5 +
7 files changed, 123 insertions(+), 83 deletions(-)
diff --git a/app/src/main/java/com/nextcloud/talk/newarch/features/conversationsList/ConversationPresenter.kt b/app/src/main/java/com/nextcloud/talk/newarch/features/conversationsList/ConversationPresenter.kt
index 42b9490b0..85adbaee7 100644
--- a/app/src/main/java/com/nextcloud/talk/newarch/features/conversationsList/ConversationPresenter.kt
+++ b/app/src/main/java/com/nextcloud/talk/newarch/features/conversationsList/ConversationPresenter.kt
@@ -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
diff --git a/app/src/main/res/layout/rv_item_conversation_with_last_message.xml b/app/src/main/res/layout/rv_item_conversation_with_last_message.xml
index cd22a36b5..08b6206a2 100644
--- a/app/src/main/res/layout/rv_item_conversation_with_last_message.xml
+++ b/app/src/main/res/layout/rv_item_conversation_with_last_message.xml
@@ -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>
diff --git a/app/src/main/res/layout/search_layout.xml b/app/src/main/res/layout/search_layout.xml
index f970e3766..b83070d40 100644
--- a/app/src/main/res/layout/search_layout.xml
+++ b/app/src/main/res/layout/search_layout.xml
@@ -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>
\ No newline at end of file
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
index 4c7f0c6e6..e7b0eb185 100644
--- a/app/src/main/res/values-night/colors.xml
+++ b/app/src/main/res/values-night/colors.xml
@@ -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>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 6f5c60e79..5184312da 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -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>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index c2be87d9e..56e6682b4 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -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>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index c2c1fb076..9fac1f550 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -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>