From a96cc19eb600aa8857ec46d82fa87f06059834fd Mon Sep 17 00:00:00 2001
From: Onuray Sahin <onurays@element.io>
Date: Wed, 9 Dec 2020 18:47:34 +0300
Subject: [PATCH] Update composer layout by adding emoji icon.

---
 ...constraint_set_composer_layout_compact.xml | 69 ++++++++---------
 ...onstraint_set_composer_layout_expanded.xml | 76 +++++++++----------
 .../main/res/layout/merge_composer_layout.xml | 18 ++---
 3 files changed, 78 insertions(+), 85 deletions(-)

diff --git a/vector/src/main/res/layout/constraint_set_composer_layout_compact.xml b/vector/src/main/res/layout/constraint_set_composer_layout_compact.xml
index ac67db6a64..6b9fbd4885 100644
--- a/vector/src/main/res/layout/constraint_set_composer_layout_compact.xml
+++ b/vector/src/main/res/layout/constraint_set_composer_layout_compact.xml
@@ -77,9 +77,9 @@
         android:alpha="0"
         app:layout_constraintEnd_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="parent"
+        app:tint="?riotx_text_primary"
         tools:ignore="MissingConstraints,MissingPrefix"
-        tools:src="@drawable/ic_edit"
-        app:tint="?riotx_text_primary" />
+        tools:src="@drawable/ic_edit" />
 
 
     <ImageButton
@@ -88,54 +88,50 @@
         android:layout_height="22dp"
         android:background="?android:attr/selectableItemBackground"
         android:src="@drawable/ic_close_round"
-        app:tint="@color/riotx_notice"
         android:visibility="invisible"
         app:layout_constraintBottom_toTopOf="parent"
         app:layout_constraintStart_toEndOf="parent"
-        tools:visibility="visible"
-        tools:ignore="MissingPrefix" />
+        app:tint="@color/riotx_notice"
+        tools:ignore="MissingPrefix"
+        tools:visibility="visible" />
 
-    <ImageView
-        android:id="@+id/composer_avatar_view"
+    <ImageButton
+        android:id="@+id/attachmentButton"
         android:layout_width="32dp"
         android:layout_height="32dp"
-        android:layout_marginStart="8dp"
-        android:layout_marginTop="8dp"
-        android:layout_marginEnd="4dp"
-        app:layout_goneMarginEnd="8dp"
-        android:layout_marginBottom="8dp"
+        android:layout_margin="12dp"
+        android:background="?android:attr/selectableItemBackground"
+        android:src="@drawable/ic_attachment"
         app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/composer_shield"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="1"
-        app:layout_constraintEnd_toStartOf="@+id/composer_shield"
-        tools:src="@tools:sample/avatars" />
-
+        tools:ignore="MissingPrefix" />
 
     <ImageView
         android:id="@+id/composer_shield"
         android:layout_width="16dp"
         android:layout_height="16dp"
-        app:layout_constraintTop_toTopOf="@id/composer_avatar_view"
-        app:layout_constraintEnd_toStartOf="@+id/composerEditText"
-        app:layout_constraintBottom_toBottomOf="@id/composer_avatar_view"
-        app:layout_constraintStart_toEndOf="@+id/composer_avatar_view"
+        app:layout_constraintBottom_toBottomOf="@id/attachmentButton"
+        app:layout_constraintEnd_toStartOf="@+id/attachmentButton"
+        app:layout_constraintStart_toEndOf="@+id/attachmentButton"
+        app:layout_constraintTop_toTopOf="@id/attachmentButton"
         tools:src="@drawable/ic_shield_black"
-        tools:visibility="visible"
-        />
-
+        tools:visibility="visible" />
 
     <ImageButton
-        android:id="@+id/attachmentButton"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
+        android:id="@+id/composer_emoji"
+        android:layout_width="32dp"
+        android:layout_height="32dp"
+        android:layout_marginStart="10dp"
+        android:layout_marginEnd="10dp"
         android:background="?android:attr/selectableItemBackground"
-        android:src="@drawable/ic_attachment"
-        app:tint="?attr/colorAccent"
-        app:layout_constraintBottom_toBottomOf="parent"
+        android:src="@drawable/ic_insert_emoji"
+        app:layout_constraintBottom_toBottomOf="@id/sendButton"
         app:layout_constraintEnd_toStartOf="@+id/sendButton"
         app:layout_constraintStart_toEndOf="@id/composerEditText"
-        tools:ignore="MissingPrefix" />
+        app:layout_constraintTop_toTopOf="@id/sendButton"
+        app:layout_goneMarginEnd="8dp" />
 
     <androidx.constraintlayout.widget.Barrier
         android:id="@+id/composer_preview_barrier"
@@ -149,14 +145,15 @@
 
     <ImageButton
         android:id="@+id/sendButton"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
-        android:background="?android:attr/selectableItemBackground"
+        android:layout_width="36dp"
+        android:layout_height="36dp"
+        android:layout_marginEnd="12dp"
+        android:layout_marginBottom="10dp"
+        android:background="@drawable/bg_send"
         android:src="@drawable/ic_send"
-        app:tint="?attr/colorAccent"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toEndOf="@id/attachmentButton"
+        app:layout_constraintStart_toEndOf="@id/composer_emoji"
         tools:ignore="MissingPrefix" />
 
     <im.vector.app.features.home.room.detail.composer.ComposerEditText
@@ -168,7 +165,7 @@
         android:nextFocusLeft="@id/composerEditText"
         android:nextFocusUp="@id/composerEditText"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/attachmentButton"
+        app:layout_constraintEnd_toStartOf="@+id/composer_emoji"
         app:layout_constraintStart_toEndOf="@+id/composer_shield"
         app:layout_constraintTop_toTopOf="parent"
         tools:text="@tools:sample/lorem/random" />
diff --git a/vector/src/main/res/layout/constraint_set_composer_layout_expanded.xml b/vector/src/main/res/layout/constraint_set_composer_layout_expanded.xml
index dba996309e..f52b072ece 100644
--- a/vector/src/main/res/layout/constraint_set_composer_layout_expanded.xml
+++ b/vector/src/main/res/layout/constraint_set_composer_layout_expanded.xml
@@ -83,9 +83,9 @@
         app:layout_constraintEnd_toEndOf="@id/composer_related_message_avatar_view"
         app:layout_constraintStart_toStartOf="@id/composer_related_message_avatar_view"
         app:layout_constraintTop_toBottomOf="@id/composer_related_message_avatar_view"
-        tools:src="@drawable/ic_edit"
         app:tint="?riotx_text_primary"
-        tools:ignore="MissingPrefix" />
+        tools:ignore="MissingPrefix"
+        tools:src="@drawable/ic_edit" />
 
 
     <ImageButton
@@ -94,51 +94,47 @@
         android:layout_height="48dp"
         android:background="?android:attr/selectableItemBackground"
         android:src="@drawable/ic_close_round"
-        app:tint="@color/riotx_notice"
         app:layout_constraintBottom_toBottomOf="@id/composer_related_message_preview"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="@id/composer_related_message_preview"
+        app:tint="@color/riotx_notice"
         tools:ignore="MissingPrefix" />
 
-
-    <ImageView
-        android:id="@+id/composer_avatar_view"
-        android:layout_width="32dp"
-        android:layout_height="32dp"
-        android:layout_marginStart="8dp"
-        android:layout_marginTop="8dp"
-        android:layout_marginEnd="4dp"
-        app:layout_goneMarginEnd="8dp"
-        android:layout_marginBottom="8dp"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/composer_shield"
-        app:layout_constraintStart_toStartOf="parent"
-        tools:src="@tools:sample/avatars" />
-
-
-    <ImageView
-        android:id="@+id/composer_shield"
-        android:layout_width="16dp"
-        android:layout_height="16dp"
-        app:layout_constraintTop_toTopOf="@id/composer_avatar_view"
-        app:layout_constraintEnd_toStartOf="@+id/composerEditText"
-        app:layout_constraintBottom_toBottomOf="@id/composer_avatar_view"
-        app:layout_constraintStart_toEndOf="@+id/composer_avatar_view"
-        tools:src="@drawable/ic_shield_black" />
-
-
-
     <ImageButton
         android:id="@+id/attachmentButton"
         android:layout_width="48dp"
         android:layout_height="48dp"
         android:background="?android:attr/selectableItemBackground"
         android:src="@drawable/ic_attachment"
-        app:tint="?attr/colorAccent"
-        app:layout_constraintEnd_toStartOf="@+id/sendButton"
+        app:layout_constraintStart_toStartOf="@id/composerEditText"
         app:layout_constraintTop_toBottomOf="parent"
         tools:ignore="MissingPrefix" />
 
+    <ImageView
+        android:id="@+id/composer_shield"
+        android:layout_width="16dp"
+        android:layout_height="16dp"
+        android:layout_marginStart="8dp"
+        app:layout_constraintBottom_toBottomOf="@id/composer_emoji"
+        app:layout_constraintEnd_toStartOf="@+id/composerEditText"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="@id/composer_emoji"
+        tools:src="@drawable/ic_shield_black" />
+
+    <ImageButton
+        android:id="@+id/composer_emoji"
+        android:layout_width="32dp"
+        android:layout_height="32dp"
+        android:layout_marginStart="10dp"
+        android:layout_marginEnd="10dp"
+        android:background="?android:attr/selectableItemBackground"
+        android:src="@drawable/ic_insert_emoji"
+        app:layout_constraintBottom_toBottomOf="@id/sendButton"
+        app:layout_constraintEnd_toStartOf="@+id/sendButton"
+        app:layout_constraintStart_toEndOf="@id/composerEditText"
+        app:layout_constraintTop_toTopOf="@id/sendButton"
+        app:layout_goneMarginEnd="8dp" />
+
     <androidx.constraintlayout.widget.Barrier
         android:id="@+id/composer_preview_barrier"
         android:layout_width="0dp"
@@ -151,11 +147,13 @@
 
     <ImageButton
         android:id="@+id/sendButton"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
-        android:background="?android:attr/selectableItemBackground"
+        android:layout_width="36dp"
+        android:layout_height="36dp"
+        android:background="@drawable/bg_send"
         android:src="@drawable/ic_send"
-        app:tint="?attr/colorAccent"
+        android:layout_marginTop="10dp"
+        android:layout_marginBottom="10dp"
+        android:layout_marginEnd="12dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toBottomOf="@id/composer_preview_barrier"
@@ -170,8 +168,8 @@
         android:nextFocusLeft="@id/composerEditText"
         android:nextFocusUp="@id/composerEditText"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/sendButton"
-        app:layout_constraintStart_toEndOf="@id/composer_shield"
+        app:layout_constraintEnd_toStartOf="@+id/composer_emoji"
+        app:layout_constraintStart_toEndOf="@+id/composer_shield"
         app:layout_constraintTop_toBottomOf="@id/composer_preview_barrier"
         tools:text="@tools:sample/lorem/random" />
 
diff --git a/vector/src/main/res/layout/merge_composer_layout.xml b/vector/src/main/res/layout/merge_composer_layout.xml
index 908b3f009b..ea2bc1bf30 100644
--- a/vector/src/main/res/layout/merge_composer_layout.xml
+++ b/vector/src/main/res/layout/merge_composer_layout.xml
@@ -70,8 +70,8 @@
         android:id="@+id/composer_related_message_action_image"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        tools:ignore="MissingConstraints,MissingPrefix"
-        app:tint="?riotx_text_primary" />
+        app:tint="?riotx_text_primary"
+        tools:ignore="MissingConstraints,MissingPrefix" />
 
     <ImageButton
         android:id="@+id/composer_related_message_close"
@@ -83,13 +83,13 @@
         android:tint="@color/riotx_notice"
         tools:ignore="MissingConstraints" />
 
-
-    <ImageView
-        android:id="@+id/composer_avatar_view"
+    <ImageButton
+        android:id="@+id/composer_emoji"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        tools:ignore="MissingConstraints"
-        tools:src="@tools:sample/avatars" />
+        android:background="?android:attr/selectableItemBackground"
+        android:src="@drawable/ic_insert_emoji"
+        tools:ignore="MissingConstraints" />
 
     <ImageButton
         android:id="@+id/attachmentButton"
@@ -98,7 +98,6 @@
         android:background="?android:attr/selectableItemBackground"
         android:contentDescription="@string/option_send_files"
         android:src="@drawable/ic_attachment"
-        android:tint="?attr/colorAccent"
         tools:ignore="MissingConstraints" />
 
     <androidx.constraintlayout.widget.Barrier
@@ -115,10 +114,9 @@
         android:id="@+id/sendButton"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        android:background="?android:attr/selectableItemBackground"
+        android:background="@drawable/bg_send"
         android:contentDescription="@string/send"
         android:src="@drawable/ic_send"
-        android:tint="?attr/colorAccent"
         tools:ignore="MissingConstraints" />
 
     <im.vector.app.features.home.room.detail.composer.ComposerEditText