From 3d25c41e7aa08661c1a87c474f6674fe2ccbd7da Mon Sep 17 00:00:00 2001
From: Torsten Grote <t@grobox.de>
Date: Fri, 13 May 2016 16:35:38 -0300
Subject: [PATCH] Add unread count as bubble to avatar image in contact list

Closes #399
---
 briar-android/res/drawable/bubble.xml         | 21 ++++++++++
 .../res/layout/list_item_contact.xml          | 39 ++++++++++++++-----
 briar-android/res/values/dimens.xml           |  6 +++
 .../android/contact/ContactListAdapter.java   | 15 +++----
 4 files changed, 63 insertions(+), 18 deletions(-)
 create mode 100644 briar-android/res/drawable/bubble.xml

diff --git a/briar-android/res/drawable/bubble.xml b/briar-android/res/drawable/bubble.xml
new file mode 100644
index 000000000..9b7f37f9f
--- /dev/null
+++ b/briar-android/res/drawable/bubble.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+
+	<corners
+		android:radius="@dimen/unread_bubble_size"/>
+
+	<padding
+		android:left="@dimen/unread_bubble_padding_horizontal"
+		android:right="@dimen/unread_bubble_padding_horizontal"/>
+
+	<solid
+		android:color="@color/briar_primary"/>
+
+	<stroke
+		android:color="@color/briar_text_primary_inverse"
+	    android:width="@dimen/avatar_border_width"/>
+
+</shape>
+
diff --git a/briar-android/res/layout/list_item_contact.xml b/briar-android/res/layout/list_item_contact.xml
index 5658f85b0..989acb439 100644
--- a/briar-android/res/layout/list_item_contact.xml
+++ b/briar-android/res/layout/list_item_contact.xml
@@ -15,17 +15,38 @@
 		android:paddingTop="@dimen/listitem_horizontal_margin"
 		>
 
-		<de.hdodenhof.circleimageview.CircleImageView
-			android:id="@+id/avatarView"
-			style="@style/BriarAvatar"
-			android:layout_width="@dimen/listitem_picture_size"
-			android:layout_height="@dimen/listitem_picture_size"
+		<FrameLayout
+			android:id="@+id/avatarFrameView"
+			android:layout_width="@dimen/listitem_picture_frame_size"
+			android:layout_height="@dimen/listitem_picture_frame_size"
 			android:layout_alignParentLeft="true"
 			android:layout_alignParentStart="true"
 			android:layout_centerVertical="true"
 			android:layout_marginLeft="@dimen/listitem_horizontal_margin"
-			android:layout_marginStart="@dimen/listitem_horizontal_margin"
-			tools:src="@drawable/ic_launcher"/>
+			android:layout_marginStart="@dimen/listitem_horizontal_margin">
+
+			<de.hdodenhof.circleimageview.CircleImageView
+				android:id="@+id/avatarView"
+				style="@style/BriarAvatar"
+				android:layout_width="@dimen/listitem_picture_size"
+				android:layout_height="@dimen/listitem_picture_size"
+				android:layout_gravity="bottom|left"
+				tools:src="@drawable/ic_launcher"/>
+
+			<TextView
+				android:id="@+id/unreadCountView"
+				android:layout_width="wrap_content"
+				android:layout_height="@dimen/unread_bubble_size"
+				android:layout_gravity="right|top"
+				android:background="@drawable/bubble"
+				android:gravity="center"
+				android:minWidth="@dimen/unread_bubble_size"
+				android:textColor="@color/briar_text_primary_inverse"
+				android:textSize="@dimen/unread_bubble_text_size"
+				android:textStyle="bold"
+				tools:text="123"/>
+
+		</FrameLayout>
 
 		<LinearLayout
 			android:id="@+id/textViews"
@@ -34,9 +55,9 @@
 			android:layout_centerVertical="true"
 			android:layout_marginLeft="@dimen/listitem_horizontal_margin"
 			android:layout_marginStart="@dimen/listitem_horizontal_margin"
-			android:layout_toEndOf="@+id/avatarView"
+			android:layout_toEndOf="@+id/avatarFrameView"
 			android:layout_toLeftOf="@+id/bulbView"
-			android:layout_toRightOf="@+id/avatarView"
+			android:layout_toRightOf="@+id/avatarFrameView"
 			android:orientation="vertical">
 
 			<TextView
diff --git a/briar-android/res/values/dimens.xml b/briar-android/res/values/dimens.xml
index 96e5c86fc..392bb9885 100644
--- a/briar-android/res/values/dimens.xml
+++ b/briar-android/res/values/dimens.xml
@@ -26,11 +26,17 @@
 	<dimen name="listitem_height_one_line_avatar">56dp</dimen>
 	<dimen name="listitem_height_contact_selector">68dp</dimen>
 	<dimen name="listitem_picture_size">48dp</dimen>
+	<dimen name="listitem_picture_frame_size">50dp</dimen>
 	<dimen name="listitem_selectable_picture_size">40dp</dimen>
 	<dimen name="dropdown_picture_size">32dp</dimen>
 	<dimen name="avatar_forum_size">48dp</dimen>
 	<dimen name="avatar_border_width">2dp</dimen>
 
+	<dimen name="unread_bubble_text_size">12sp</dimen>
+	<dimen name="unread_bubble_border_width">2dp</dimen>
+	<dimen name="unread_bubble_padding_horizontal">6dp</dimen>
+	<dimen name="unread_bubble_size">19dp</dimen>
+
 	<dimen name="message_bubble_margin_tail">14dp</dimen>
 	<dimen name="message_bubble_margin_non_tail">51dp</dimen>
 	<dimen name="message_bubble_timestamp_margin">15dp</dimen>
diff --git a/briar-android/src/org/briarproject/android/contact/ContactListAdapter.java b/briar-android/src/org/briarproject/android/contact/ContactListAdapter.java
index 374d85d21..1c2951b40 100644
--- a/briar-android/src/org/briarproject/android/contact/ContactListAdapter.java
+++ b/briar-android/src/org/briarproject/android/contact/ContactListAdapter.java
@@ -34,18 +34,13 @@ public class ContactListAdapter
 
 		ContactListItem item = getItem(position);
 
-		// name and unread count
-		String contactName = item.getContact().getAuthor().getName();
+		// unread count
 		int unread = item.getUnreadCount();
 		if (unread > 0) {
-			// TODO show these in a bubble on top of the avatar
-			ui.name.setText(contactName + " (" + unread + ")");
-
-			// different background for contacts with unread messages
-			ui.layout.setBackgroundColor(
-					ContextCompat.getColor(ctx, R.color.unread_background));
+			ui.unread.setText(String.valueOf(unread));
+			ui.unread.setVisibility(View.VISIBLE);
 		} else {
-			ui.name.setText(contactName);
+			ui.unread.setVisibility(View.INVISIBLE);
 		}
 
 		// date of last message
@@ -73,6 +68,7 @@ public class ContactListAdapter
 			extends BaseContactListAdapter.BaseContactHolder {
 
 		public final ImageView bulb;
+		public final TextView unread;
 		public final TextView date;
 		public final TextView identity;
 
@@ -80,6 +76,7 @@ public class ContactListAdapter
 			super(v);
 
 			bulb = (ImageView) v.findViewById(R.id.bulbView);
+			unread = (TextView) v.findViewById(R.id.unreadCountView);
 			date = (TextView) v.findViewById(R.id.dateView);
 			identity = (TextView) v.findViewById(R.id.identityView);
 		}