Merge branch '1358-message-bubbles' into 'master'

New Design for Message Bubbles

Closes #1358

See merge request briar/briar!896

briar-android/build.gradle

@@ -155,7 +155,7 @@ task verifyTranslations {
 
 		def folders = ["default", "en-US"]
 		project.file("src/main/res").eachDir { dir ->
-			if (dir.name.startsWith("values-") && !dir.name.endsWith("night")) {
+			if (dir.name.startsWith("values-") && !dir.name.endsWith("night") && !dir.name.endsWith("v21")) {
 				folders.add(dir.name.substring(7).replace("-r", "-"))
 			}
 		}

briar-android/src/main/res/drawable/msg_in.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+	<corners
+		android:bottomLeftRadius="@dimen/message_bubble_radius_big"
+		android:bottomRightRadius="@dimen/message_bubble_radius_big"
+		android:topLeftRadius="@dimen/message_bubble_radius_small"
+		android:topRightRadius="@dimen/message_bubble_radius_big"/>
+	<padding
+		android:bottom="@dimen/message_bubble_padding_bottom"
+		android:left="@dimen/message_bubble_padding_sides"
+		android:right="@dimen/message_bubble_padding_sides"
+		android:top="@dimen/message_bubble_padding_top"/>
+	<solid
+		android:color="@color/msg_in"/>
+	<stroke
+		android:width="@dimen/message_bubble_stroke"
+		android:color="@color/msg_stroke"/>
+</shape>

briar-android/src/main/res/drawable/msg_in_top.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+	<corners
+		android:bottomLeftRadius="0dp"
+		android:bottomRightRadius="0dp"
+		android:topLeftRadius="@dimen/message_bubble_radius_small"
+		android:topRightRadius="@dimen/message_bubble_radius_big"/>
+	<padding
+		android:bottom="@dimen/message_bubble_padding_top"
+		android:left="@dimen/message_bubble_padding_sides"
+		android:right="@dimen/message_bubble_padding_sides"
+		android:top="@dimen/message_bubble_padding_top"/>
+	<solid
+		android:color="@color/msg_in"/>
+	<stroke
+		android:width="@dimen/message_bubble_stroke"
+		android:color="@color/msg_stroke"/>
+</shape>

briar-android/src/main/res/drawable/msg_out.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+	<corners
+		android:bottomLeftRadius="@dimen/message_bubble_radius_big"
+		android:bottomRightRadius="@dimen/message_bubble_radius_big"
+		android:topLeftRadius="@dimen/message_bubble_radius_big"
+		android:topRightRadius="@dimen/message_bubble_radius_small"/>
+	<padding
+		android:bottom="@dimen/message_bubble_padding_bottom"
+		android:left="@dimen/message_bubble_padding_sides"
+		android:right="@dimen/message_bubble_padding_sides"
+		android:top="@dimen/message_bubble_padding_top"/>
+	<solid
+		android:color="@color/msg_out"/>
+	<stroke
+		android:width="@dimen/message_bubble_stroke"
+		android:color="@color/msg_stroke_dark"/>
+</shape>

briar-android/src/main/res/drawable/msg_out_top.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+	<corners
+		android:bottomLeftRadius="0dp"
+		android:bottomRightRadius="0dp"
+		android:topLeftRadius="@dimen/message_bubble_radius_big"
+		android:topRightRadius="@dimen/message_bubble_radius_small"/>
+	<padding
+		android:bottom="@dimen/message_bubble_padding_top"
+		android:left="@dimen/message_bubble_padding_sides"
+		android:right="@dimen/message_bubble_padding_sides"
+		android:top="@dimen/message_bubble_padding_top"/>
+	<solid
+		android:color="@color/msg_out"/>
+	<stroke
+		android:width="@dimen/message_bubble_stroke"
+		android:color="@color/msg_stroke_dark"/>
+</shape>

briar-android/src/main/res/drawable/notice_in.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+	<corners
+		android:bottomLeftRadius="@dimen/message_bubble_radius_big"
+		android:bottomRightRadius="@dimen/message_bubble_radius_big"
+		android:topLeftRadius="@dimen/message_bubble_radius_small"
+		android:topRightRadius="@dimen/message_bubble_radius_big"/>
+	<padding
+		android:bottom="@dimen/message_bubble_padding_bottom"
+		android:left="@dimen/message_bubble_padding_sides"
+		android:right="@dimen/message_bubble_padding_sides"
+		android:top="@dimen/message_bubble_padding_top"/>
+	<solid
+		android:color="@color/notice_in"/>
+	<stroke
+		android:width="@dimen/message_bubble_stroke"
+		android:color="@color/msg_stroke"/>
+</shape>

briar-android/src/main/res/drawable/notice_in_bottom.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+	<corners
+		android:bottomLeftRadius="@dimen/message_bubble_radius_big"
+		android:bottomRightRadius="@dimen/message_bubble_radius_big"
+		android:topLeftRadius="0dp"
+		android:topRightRadius="0dp"/>
+	<padding
+		android:bottom="@dimen/message_bubble_padding_bottom"
+		android:left="@dimen/message_bubble_padding_sides"
+		android:right="@dimen/message_bubble_padding_sides"
+		android:top="@dimen/message_bubble_padding_bottom"/>
+	<solid
+		android:color="@color/notice_in"/>
+	<stroke
+		android:width="@dimen/message_bubble_stroke"
+		android:color="@color/msg_stroke"/>
+</shape>

briar-android/src/main/res/drawable/notice_out.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+	<corners
+		android:bottomLeftRadius="@dimen/message_bubble_radius_big"
+		android:bottomRightRadius="@dimen/message_bubble_radius_big"
+		android:topLeftRadius="@dimen/message_bubble_radius_big"
+		android:topRightRadius="@dimen/message_bubble_radius_small"/>
+	<padding
+		android:bottom="@dimen/message_bubble_padding_bottom"
+		android:left="@dimen/message_bubble_padding_sides"
+		android:right="@dimen/message_bubble_padding_sides"
+		android:top="@dimen/message_bubble_padding_top"/>
+	<solid
+		android:color="@color/notice_out"/>
+	<stroke
+		android:width="@dimen/message_bubble_stroke"
+		android:color="@color/msg_stroke_dark"/>
+</shape>

briar-android/src/main/res/drawable/notice_out_bottom.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	android:shape="rectangle">
+	<corners
+		android:bottomLeftRadius="@dimen/message_bubble_radius_big"
+		android:bottomRightRadius="@dimen/message_bubble_radius_big"
+		android:topLeftRadius="0dp"
+		android:topRightRadius="0dp"/>
+	<padding
+		android:bottom="@dimen/message_bubble_padding_bottom"
+		android:left="@dimen/message_bubble_padding_sides"
+		android:right="@dimen/message_bubble_padding_sides"
+		android:top="@dimen/message_bubble_padding_bottom"/>
+	<solid
+		android:color="@color/notice_out"/>
+	<stroke
+		android:width="@dimen/message_bubble_stroke"
+		android:color="@color/msg_stroke_dark"/>
+</shape>

briar-android/src/main/res/layout/list_item_conversation_msg_in.xml

@@ -5,9 +5,12 @@
 	xmlns:tools="http://schemas.android.com/tools"
 	android:layout_width="wrap_content"
 	android:layout_height="wrap_content"
+	android:layout_marginBottom="@dimen/message_bubble_margin"
 	android:layout_marginLeft="@dimen/message_bubble_margin_tail"
 	android:layout_marginRight="@dimen/message_bubble_margin_non_tail"
+	android:layout_marginTop="@dimen/message_bubble_margin"
 	android:background="@drawable/msg_in"
+	android:elevation="@dimen/message_bubble_elevation"
 	android:orientation="vertical">
 
 	<org.thoughtcrime.securesms.components.emoji.EmojiTextView
@@ -25,7 +28,6 @@
 		android:layout_height="wrap_content"
 		android:layout_gravity="right|end"
 		android:layout_marginTop="@dimen/message_bubble_timestamp_margin"
-		android:textColor="?android:attr/textColorSecondary"
 		tools:text="Dec 24, 13:37"/>
 
 </LinearLayout>

briar-android/src/main/res/layout/list_item_conversation_msg_out.xml

@@ -11,9 +11,12 @@
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
 		android:layout_gravity="right|end"
+		android:layout_marginBottom="@dimen/message_bubble_margin"
 		android:layout_marginLeft="@dimen/message_bubble_margin_non_tail"
 		android:layout_marginRight="@dimen/message_bubble_margin_tail"
-		android:background="@drawable/msg_out">
+		android:layout_marginTop="@dimen/message_bubble_margin"
+		android:background="@drawable/msg_out"
+		android:elevation="@dimen/message_bubble_elevation">
 
 		<org.thoughtcrime.securesms.components.emoji.EmojiTextView
 			android:id="@+id/text"

briar-android/src/main/res/layout/list_item_conversation_notice_in.xml

@@ -4,6 +4,7 @@
 	xmlns:tools="http://schemas.android.com/tools"
 	android:layout_width="match_parent"
 	android:layout_height="wrap_content"
+	android:layout_marginTop="@dimen/message_bubble_margin"
 	android:orientation="vertical">
 
 	<org.thoughtcrime.securesms.components.emoji.EmojiTextView
@@ -15,16 +16,18 @@
 		android:layout_marginLeft="@dimen/message_bubble_margin_tail"
 		android:layout_marginRight="@dimen/message_bubble_margin_non_tail"
 		android:background="@drawable/msg_in_top"
-		android:textColor="?android:attr/textColorPrimary"
+		android:elevation="@dimen/message_bubble_elevation"
 		tools:text="Short message"/>
 
 	<RelativeLayout
 		android:id="@+id/layout"
 		android:layout_width="match_parent"
 		android:layout_height="wrap_content"
+		android:layout_marginBottom="@dimen/message_bubble_margin"
 		android:layout_marginLeft="@dimen/message_bubble_margin_tail"
 		android:layout_marginRight="@dimen/message_bubble_margin_non_tail"
-		android:background="@drawable/notice_in_bottom">
+		android:background="@drawable/notice_in_bottom"
+		android:elevation="@dimen/message_bubble_elevation">
 
 		<org.thoughtcrime.securesms.components.emoji.EmojiTextView
 			android:id="@+id/text"
@@ -32,7 +35,6 @@
 			android:layout_width="match_parent"
 			android:layout_height="wrap_content"
 			android:minWidth="80dp"
-			android:textColor="?android:attr/textColorSecondary"
 			tools:text="@string/forum_invitation_received"/>
 
 		<TextView
@@ -44,7 +46,6 @@
 			android:layout_alignRight="@+id/text"
 			android:layout_below="@+id/text"
 			android:layout_marginTop="@dimen/message_bubble_timestamp_margin"
-			android:textColor="?android:attr/textColorTertiary"
 			tools:text="Dec 24, 13:37"/>
 
 	</RelativeLayout>

briar-android/src/main/res/layout/list_item_conversation_notice_out.xml

@@ -5,6 +5,7 @@
 	xmlns:tools="http://schemas.android.com/tools"
 	android:layout_width="match_parent"
 	android:layout_height="wrap_content"
+	android:layout_marginTop="@dimen/message_bubble_margin"
 	android:orientation="vertical">
 
 	<org.thoughtcrime.securesms.components.emoji.EmojiTextView
@@ -15,6 +16,7 @@
 		android:layout_marginLeft="@dimen/message_bubble_margin_non_tail"
 		android:layout_marginRight="@dimen/message_bubble_margin_tail"
 		android:background="@drawable/msg_out_top"
+		android:elevation="@dimen/message_bubble_elevation"
 		android:textColor="@color/briar_text_primary_inverse"
 		tools:text="This is a long long long message that spans over several lines.\n\nIt ends here."/>
 
@@ -22,16 +24,18 @@
 		android:id="@+id/layout"
 		android:layout_width="match_parent"
 		android:layout_height="wrap_content"
+		android:layout_marginBottom="@dimen/message_bubble_margin"
 		android:layout_marginLeft="@dimen/message_bubble_margin_non_tail"
 		android:layout_marginRight="@dimen/message_bubble_margin_tail"
-		android:background="@drawable/notice_out_bottom">
+		android:background="@drawable/notice_out_bottom"
+		android:elevation="@dimen/message_bubble_elevation">
 
 		<org.thoughtcrime.securesms.components.emoji.EmojiTextView
 			android:id="@+id/text"
 			style="@style/TextMessage.Notice"
 			android:layout_width="match_parent"
 			android:layout_height="wrap_content"
-			android:textColor="?android:attr/textColorSecondary"
+			android:textColor="@color/private_message_date_inverse"
 			tools:text="@string/introduction_request_received"/>
 
 		<TextView
@@ -43,7 +47,7 @@
 			android:layout_alignParentStart="true"
 			android:layout_below="@+id/text"
 			android:layout_marginTop="@dimen/message_bubble_timestamp_margin"
-			android:textColor="?android:attr/textColorTertiary"
+			android:textColor="@color/private_message_date_inverse"
 			tools:text="Dec 24, 13:37"/>
 
 		<android.support.v7.widget.AppCompatImageView
@@ -54,7 +58,7 @@
 			android:layout_marginLeft="@dimen/margin_medium"
 			android:layout_toEndOf="@+id/time"
 			android:layout_toRightOf="@+id/time"
-			app:tint="?attr/colorControlNormal"
+			app:tint="@color/private_message_date_inverse"
 			tools:ignore="ContentDescription"
 			tools:src="@drawable/message_delivered"/>
 

briar-android/src/main/res/layout/list_item_conversation_request.xml

@@ -4,6 +4,7 @@
 	xmlns:tools="http://schemas.android.com/tools"
 	android:layout_width="match_parent"
 	android:layout_height="wrap_content"
+	android:layout_marginTop="@dimen/message_bubble_margin"
 	android:orientation="vertical">
 
 	<org.thoughtcrime.securesms.components.emoji.EmojiTextView
@@ -14,6 +15,7 @@
 		android:layout_marginLeft="@dimen/message_bubble_margin_tail"
 		android:layout_marginRight="@dimen/message_bubble_margin_non_tail"
 		android:background="@drawable/msg_in_top"
+		android:elevation="@dimen/message_bubble_elevation"
 		android:textColor="?android:attr/textColorPrimary"
 		tools:text="Short message"/>
 
@@ -21,16 +23,17 @@
 		android:id="@+id/layout"
 		android:layout_width="match_parent"
 		android:layout_height="wrap_content"
+		android:layout_marginBottom="@dimen/message_bubble_margin"
 		android:layout_marginLeft="@dimen/message_bubble_margin_tail"
 		android:layout_marginRight="@dimen/message_bubble_margin_non_tail"
-		android:background="@drawable/notice_in_bottom">
+		android:background="@drawable/notice_in_bottom"
+		android:elevation="@dimen/message_bubble_elevation">
 
 		<org.thoughtcrime.securesms.components.emoji.EmojiTextView
 			android:id="@+id/text"
 			style="@style/TextMessage.Notice"
 			android:layout_width="match_parent"
 			android:layout_height="wrap_content"
-			android:textColor="?android:attr/textColorSecondary"
 			tools:text="@string/introduction_request_received"/>
 
 		<TextView
@@ -42,7 +45,6 @@
 			android:layout_alignRight="@+id/text"
 			android:layout_below="@+id/acceptButton"
 			android:layout_marginTop="@dimen/message_bubble_timestamp_margin"
-			android:textColor="?android:attr/textColorTertiary"
 			tools:text="Dec 24, 13:37"/>
 
 		<Button

briar-android/src/main/res/values-night/color.xml

@@ -8,6 +8,12 @@
 
 	<color name="color_primary">@color/briar_white</color>
 
+	<color name="msg_in">@color/briar_blue</color>
+	<color name="msg_out">@color/briar_blue_elio_light</color>
+	<color name="notice_in">@color/briar_blue_dark</color>
+	<color name="notice_out">@color/briar_blue_elio</color>
+	<color name="msg_stroke">@color/msg_stroke_dark</color>
+
 	<color name="window_background">@color/briar_blue_very_dark</color>
 	<color name="card_background">@color/briar_blue_dark</color>
 	<color name="item_background_highlight">@color/briar_blue</color>

briar-android/src/main/res/values-v21/dimens.xml

@@ -0,0 +1,5 @@
+<resources>
+
+	<dimen name="message_bubble_stroke">0px</dimen>
+
+</resources>

briar-android/src/main/res/values/color.xml

@@ -4,7 +4,10 @@
 	<color name="briar_blue_dark">#222E3C</color>
 	<color name="briar_blue_very_dark">#0F1720</color>
 	<color name="briar_blue_medium">#4F6C8C</color>
+	<color name="briar_blue_elio">#236087</color>
+	<color name="briar_blue_elio_light">#3C80A9</color>
 	<color name="briar_blue_light">#2A93C6</color>
+	<color name="briar_blue_grey">#EBEFF2</color>
 	<color name="briar_green">#5C940D</color>
 	<color name="briar_green_light">#95D220</color>
 	<color name="briar_red">#ff0000</color>
@@ -30,6 +33,14 @@
 
 	<color name="color_primary">#dd000000</color>
 
+	<color name="msg_in">@color/briar_white</color>
+	<color name="msg_out">@color/briar_blue_elio_light</color>
+	<color name="notice_in">@color/briar_blue_grey</color>
+	<color name="notice_out">@color/briar_blue_elio</color>
+	<color name="msg_stroke_light">#cbcbcb</color>
+	<color name="msg_stroke_dark">#333333</color>
+	<color name="msg_stroke">@color/msg_stroke_light</color>
+
 	<!-- text colors -->
 	<color name="briar_text_link">@color/briar_blue_light</color>
 	<color name="briar_text_primary">#df000000</color>

briar-android/src/main/res/values/dimens.xml

@@ -38,9 +38,17 @@
 	<dimen name="unread_bubble_padding_horizontal">6dp</dimen>
 	<dimen name="unread_bubble_size">19dp</dimen>
 
-	<dimen name="message_bubble_margin_tail">3dp</dimen>
+	<dimen name="message_bubble_radius_big">16dp</dimen>
+	<dimen name="message_bubble_radius_small">4dp</dimen>
+	<dimen name="message_bubble_margin">6dp</dimen>
+	<dimen name="message_bubble_padding_sides">12dp</dimen>
+	<dimen name="message_bubble_padding_top">6dp</dimen>
+	<dimen name="message_bubble_padding_bottom">4dp</dimen>
+	<dimen name="message_bubble_timestamp_margin">4dp</dimen>
+	<dimen name="message_bubble_elevation">2dp</dimen>
+	<dimen name="message_bubble_margin_tail">8dp</dimen>
 	<dimen name="message_bubble_margin_non_tail">30dp</dimen>
-	<dimen name="message_bubble_timestamp_margin">7dp</dimen>
+	<dimen name="message_bubble_stroke">1px</dimen>
 
 	<dimen name="forum_nested_line_width">2dp</dimen>
 	<dimen name="forum_nested_indicator">24dp</dimen>