From 04c4485e3e2b57d98f89ab9b8b3749173c1e40c3 Mon Sep 17 00:00:00 2001
From: ganfra <francoisg@matrix.org>
Date: Thu, 4 Feb 2021 16:29:23 +0100
Subject: [PATCH] VoIP: add some feedback on controls

---
 .../main/res/drawable/bg_rounded_button.xml   | 13 ++++++
 .../main/res/drawable/oval_destructive.xml    | 11 -----
 .../src/main/res/drawable/oval_positive.xml   | 11 -----
 vector/src/main/res/layout/activity_call.xml  | 11 ++---
 .../layout/alerter_incoming_call_layout.xml   | 43 ++++++++++---------
 .../main/res/layout/view_call_controls.xml    | 38 +++++++++-------
 6 files changed, 64 insertions(+), 63 deletions(-)
 create mode 100644 vector/src/main/res/drawable/bg_rounded_button.xml
 delete mode 100644 vector/src/main/res/drawable/oval_destructive.xml
 delete mode 100644 vector/src/main/res/drawable/oval_positive.xml

diff --git a/vector/src/main/res/drawable/bg_rounded_button.xml b/vector/src/main/res/drawable/bg_rounded_button.xml
new file mode 100644
index 0000000000..4b5503a92f
--- /dev/null
+++ b/vector/src/main/res/drawable/bg_rounded_button.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="?android:attr/colorControlHighlight">
+    <item android:id="@android:id/mask">
+        <shape android:shape="oval">
+            <solid android:color="#000000" />
+        </shape>
+    </item>
+    <item>
+        <shape android:shape="oval"/>
+    </item>
+</ripple>
\ No newline at end of file
diff --git a/vector/src/main/res/drawable/oval_destructive.xml b/vector/src/main/res/drawable/oval_destructive.xml
deleted file mode 100644
index 045a50456d..0000000000
--- a/vector/src/main/res/drawable/oval_destructive.xml
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="oval">
-
-    <size
-        android:width="40dp"
-        android:height="40dp" />
-
-    <solid android:color="@color/riotx_destructive_accent" />
-
-</shape>
\ No newline at end of file
diff --git a/vector/src/main/res/drawable/oval_positive.xml b/vector/src/main/res/drawable/oval_positive.xml
deleted file mode 100644
index d2e17d746b..0000000000
--- a/vector/src/main/res/drawable/oval_positive.xml
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="oval">
-
-    <size
-        android:width="40dp"
-        android:height="40dp" />
-
-    <solid android:color="@color/riotx_positive_accent" />
-
-</shape>
\ No newline at end of file
diff --git a/vector/src/main/res/layout/activity_call.xml b/vector/src/main/res/layout/activity_call.xml
index 45be67ae8e..ff33c5f17c 100644
--- a/vector/src/main/res/layout/activity_call.xml
+++ b/vector/src/main/res/layout/activity_call.xml
@@ -42,11 +42,11 @@
         android:layout_height="144dp"
         android:layout_marginTop="32dp"
         android:layout_marginEnd="16dp"
-        android:visibility="gone"
-        tools:visibility="visible"
         android:background="@color/riotx_background_light"
+        android:visibility="gone"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent">
+        app:layout_constraintTop_toTopOf="parent"
+        tools:visibility="visible">
 
         <ImageView
             android:id="@+id/otherKnownCallAvatarView"
@@ -120,9 +120,10 @@
         app:layout_constraintTop_toBottomOf="@id/participantNameText"
         tools:text="@string/call_connecting" />
 
-    <TextView
+    <Button
         android:id="@+id/callActionText"
-        android:layout_width="0dp"
+        style="@style/VectorButtonStyleText"
+        android:layout_width="wrap_content"
         android:layout_height="48dp"
         android:layout_margin="8dp"
         android:gravity="center"
diff --git a/vector/src/main/res/layout/alerter_incoming_call_layout.xml b/vector/src/main/res/layout/alerter_incoming_call_layout.xml
index 8487d8885f..05296dd65a 100644
--- a/vector/src/main/res/layout/alerter_incoming_call_layout.xml
+++ b/vector/src/main/res/layout/alerter_incoming_call_layout.xml
@@ -1,32 +1,31 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:clipToPadding="false"
     android:paddingTop="4dp"
     android:paddingBottom="4dp"
-    xmlns:tools="http://schemas.android.com/tools"
-    tools:style="@style/AlertStyle"
-    xmlns:app="http://schemas.android.com/apk/res-auto">
+    tools:style="@style/AlertStyle">
 
     <ImageView
         android:id="@+id/incomingCallAvatar"
         android:layout_width="40dp"
         android:layout_height="40dp"
-        android:contentDescription="@string/call_notification_answer"
         android:layout_margin="12dp"
-        app:layout_constraintTop_toTopOf="parent"
+        android:contentDescription="@string/call_notification_answer"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
         tools:src="@tools:sample/avatars" />
 
     <TextView
         android:id="@+id/incomingCallNameView"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginEnd="12dp"
         android:layout_marginStart="12dp"
+        android:layout_marginEnd="12dp"
         android:ellipsize="end"
         android:maxLines="1"
         android:textColor="?riotx_text_primary"
@@ -43,12 +42,12 @@
         android:layout_height="wrap_content"
         android:layout_marginTop="3dp"
         android:layout_marginEnd="8dp"
-        android:ellipsize="end"
-        android:textColor="?riotx_text_secondary"
-        app:drawableTint="?riotx_text_secondary"
         android:drawablePadding="4dp"
-        android:textSize="15sp"
+        android:ellipsize="end"
         android:maxLines="1"
+        android:textColor="?riotx_text_secondary"
+        android:textSize="15sp"
+        app:drawableTint="?riotx_text_secondary"
         app:layout_constraintEnd_toStartOf="@+id/incomingCallRejectView"
         app:layout_constraintStart_toStartOf="@id/incomingCallNameView"
         app:layout_constraintTop_toBottomOf="@id/incomingCallNameView"
@@ -58,31 +57,33 @@
         android:id="@+id/incomingCallAcceptView"
         android:layout_width="40dp"
         android:layout_height="40dp"
-        android:background="@drawable/oval_positive"
+        android:layout_marginEnd="12dp"
+        android:background="@drawable/bg_rounded_button"
+        android:backgroundTint="@color/riotx_accent"
         android:clickable="true"
         android:contentDescription="@string/call_notification_answer"
         android:focusable="true"
-        android:layout_marginEnd="12dp"
         android:padding="8dp"
-        app:layout_constraintTop_toTopOf="parent"
+        android:src="@drawable/ic_call_answer"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:tint="@color/white"
-        android:src="@drawable/ic_call_answer" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:tint="@android:color/white" />
 
     <ImageView
         android:id="@+id/incomingCallRejectView"
         android:layout_width="40dp"
         android:layout_height="40dp"
-        android:background="@drawable/oval_destructive"
+        android:layout_marginEnd="12dp"
+        android:background="@drawable/bg_rounded_button"
+        android:backgroundTint="@color/riotx_destructive_accent"
         android:clickable="true"
         android:contentDescription="@string/call_notification_reject"
         android:focusable="true"
         android:padding="8dp"
-        android:layout_marginEnd="12dp"
-        app:layout_constraintTop_toTopOf="parent"
+        android:src="@drawable/ic_call_hangup"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@id/incomingCallAcceptView"
-        android:src="@drawable/ic_call_hangup" />
+        app:layout_constraintTop_toTopOf="parent" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/vector/src/main/res/layout/view_call_controls.xml b/vector/src/main/res/layout/view_call_controls.xml
index 6d52153469..81684cafea 100644
--- a/vector/src/main/res/layout/view_call_controls.xml
+++ b/vector/src/main/res/layout/view_call_controls.xml
@@ -18,7 +18,8 @@
             android:id="@+id/ringingControlAccept"
             android:layout_width="56dp"
             android:layout_height="56dp"
-            android:background="@drawable/oval_positive"
+            android:background="@drawable/bg_rounded_button"
+            android:backgroundTint="@color/riotx_accent"
             android:clickable="true"
             android:contentDescription="@string/call_notification_answer"
             android:focusable="true"
@@ -31,7 +32,8 @@
             android:id="@+id/ringingControlDecline"
             android:layout_width="56dp"
             android:layout_height="56dp"
-            android:background="@drawable/oval_destructive"
+            android:background="@drawable/bg_rounded_button"
+            android:backgroundTint="@color/riotx_destructive_accent"
             android:clickable="true"
             android:contentDescription="@string/call_notification_reject"
             android:focusable="true"
@@ -43,6 +45,8 @@
         <androidx.constraintlayout.helper.widget.Flow
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+            app:flow_horizontalStyle="packed"
+            app:flow_horizontalGap="48dp"
             app:constraint_referenced_ids="ringingControlDecline, ringingControlAccept"
             tools:ignore="MissingConstraints" />
 
@@ -63,12 +67,13 @@
 
         <ImageView
             android:id="@+id/openChatIcon"
-            android:layout_width="32dp"
-            android:layout_height="32dp"
+            android:layout_width="@dimen/layout_touch_size"
+            android:layout_height="@dimen/layout_touch_size"
+            android:scaleType="center"
             android:clickable="true"
+            android:background="@drawable/bg_rounded_button"
             android:contentDescription="@string/a11y_open_chat"
             android:focusable="true"
-            android:padding="4dp"
             android:src="@drawable/ic_call_pip"
             app:tint="@android:color/white"
             tools:ignore="MissingConstraints,MissingPrefix" />
@@ -77,7 +82,7 @@
             android:id="@+id/muteIcon"
             android:layout_width="56dp"
             android:layout_height="56dp"
-            android:background="@drawable/oval_positive"
+            android:background="@drawable/bg_rounded_button"
             android:clickable="true"
             android:focusable="true"
             android:padding="16dp"
@@ -85,14 +90,14 @@
             app:backgroundTint="?attr/riotx_background"
             app:tint="?attr/riotx_text_primary"
             tools:contentDescription="@string/a11y_mute_microphone"
-            tools:ignore="MissingConstraints,MissingPrefix"
-            tools:src="@drawable/ic_microphone_on" />
+            tools:ignore="MissingConstraints,MissingPrefix" />
 
         <ImageView
             android:id="@+id/endCallIcon"
             android:layout_width="56dp"
             android:layout_height="56dp"
-            android:background="@drawable/oval_destructive"
+            android:background="@drawable/bg_rounded_button"
+            android:backgroundTint="@color/riotx_destructive_accent"
             android:clickable="true"
             android:contentDescription="@string/call_notification_hangup"
             android:focusable="true"
@@ -103,9 +108,9 @@
 
         <ImageView
             android:id="@+id/videoToggleIcon"
-            android:layout_width="64dp"
-            android:layout_height="64dp"
-            android:background="@drawable/oval_positive"
+            android:layout_width="56dp"
+            android:layout_height="56dp"
+            android:background="@drawable/bg_rounded_button"
             android:clickable="true"
             android:focusable="true"
             android:padding="16dp"
@@ -117,12 +122,13 @@
 
         <ImageView
             android:id="@+id/moreIcon"
-            android:layout_width="32dp"
-            android:layout_height="32dp"
+            android:layout_width="@dimen/layout_touch_size"
+            android:layout_height="@dimen/layout_touch_size"
+            android:scaleType="center"
             android:clickable="true"
+            android:background="@drawable/bg_rounded_button"
             android:contentDescription="@string/settings"
             android:focusable="true"
-            android:padding="8dp"
             android:src="@drawable/ic_more_horizontal"
             app:tint="@android:color/white"
             tools:ignore="MissingConstraints,MissingPrefix" />
@@ -130,6 +136,8 @@
         <androidx.constraintlayout.helper.widget.Flow
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+            app:flow_horizontalGap="16dp"
+            app:flow_horizontalStyle="packed"
             app:constraint_referenced_ids="openChatIcon, muteIcon, endCallIcon,videoToggleIcon,moreIcon"
             tools:ignore="MissingConstraints" />