Improve UI of threePid screen

vector/src/main/java/im/vector/app/features/settings/threepids/ThreePidItem.kt

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2020 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package im.vector.app.features.settings.threepids
+
+import android.view.View
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.annotation.DrawableRes
+import androidx.core.view.isVisible
+import com.airbnb.epoxy.EpoxyAttribute
+import com.airbnb.epoxy.EpoxyModelClass
+import com.airbnb.epoxy.EpoxyModelWithHolder
+import im.vector.app.R
+import im.vector.app.core.epoxy.ClickListener
+import im.vector.app.core.epoxy.VectorEpoxyHolder
+import im.vector.app.core.epoxy.onClick
+
+@EpoxyModelClass(layout = R.layout.item_settings_three_pid)
+abstract class ThreePidItem : EpoxyModelWithHolder<ThreePidItem.Holder>() {
+
+    @EpoxyAttribute
+    var title: String? = null
+
+    @EpoxyAttribute
+    @DrawableRes
+    var iconResId: Int? = null
+
+    @EpoxyAttribute
+    var deleteClickListener: ClickListener? = null
+
+    override fun bind(holder: Holder) {
+        super.bind(holder)
+        val safeIconResId = iconResId
+        if (safeIconResId != null) {
+            holder.icon.isVisible = true
+            holder.icon.setImageResource(safeIconResId)
+        } else {
+            holder.icon.isVisible = false
+        }
+
+        holder.title.text = title
+        holder.delete.onClick { deleteClickListener?.invoke() }
+        holder.delete.isVisible = deleteClickListener != null
+    }
+
+    class Holder : VectorEpoxyHolder() {
+        val icon by bind<ImageView>(R.id.item_settings_three_pid_icon)
+        val title by bind<TextView>(R.id.item_settings_three_pid_title)
+        val delete by bind<View>(R.id.item_settings_three_pid_delete)
+    }
+}

vector/src/main/java/im/vector/app/features/settings/threepids/ThreePidsSettingsController.kt

@@ -26,10 +26,8 @@ import im.vector.app.R
 import im.vector.app.core.epoxy.loadingItem
 import im.vector.app.core.resources.ColorProvider
 import im.vector.app.core.resources.StringProvider
-import im.vector.app.core.ui.list.GenericItem
 import im.vector.app.core.ui.list.genericButtonItem
 import im.vector.app.core.ui.list.genericFooterItem
-import im.vector.app.core.ui.list.genericItem
 import im.vector.app.features.discovery.settingsContinueCancelItem
 import im.vector.app.features.discovery.settingsInformationItem
 import im.vector.app.features.discovery.settingsSectionTitleItem
@@ -88,7 +86,7 @@ class ThreePidsSettingsController @Inject constructor(
         // Pending threePids
         pendingThreePids.invoke()
                 ?.filterIsInstance(ThreePid.Email::class.java)
-                ?.forEach { buildPendingThreePid("email ", it) }
+                ?.forEach { buildPendingThreePid("p_email ", it) }
 
         genericButtonItem {
             id("addEmail")
@@ -107,7 +105,7 @@ class ThreePidsSettingsController @Inject constructor(
         // Pending threePids
         pendingThreePids.invoke()
                 ?.filterIsInstance(ThreePid.Msisdn::class.java)
-                ?.forEach { buildPendingThreePid("msisdn ", it) }
+                ?.forEach { buildPendingThreePid("p_msisdn ", it) }
 
         genericButtonItem {
             id("addMsisdn")
@@ -118,21 +116,20 @@ class ThreePidsSettingsController @Inject constructor(
     }
 
     private fun buildThreePid(idPrefix: String, threePid: ThreePid) {
-        genericItem {
+        threePidItem {
             id(idPrefix + threePid.value)
+            // TODO Add an icon for emails
+            iconResId(if (threePid is ThreePid.Msisdn) R.drawable.ic_phone else null)
             title(threePid.value)
-            destructiveButtonAction(
+            deleteClickListener { interactionListener?.deleteThreePid(threePid) }
-                    GenericItem.Action(stringProvider.getString(R.string.remove))
-                            .apply {
-                                perform = Runnable { interactionListener?.deleteThreePid(threePid) }
-                            }
-            )
         }
     }
 
     private fun buildPendingThreePid(idPrefix: String, threePid: ThreePid) {
-        genericItem {
+        threePidItem {
             id(idPrefix + threePid.value)
+            // TODO Add an icon for emails
+            iconResId(if (threePid is ThreePid.Msisdn) R.drawable.ic_phone else null)
             title(threePid.value)
         }
 

vector/src/main/res/layout/item_settings_three_pid.xml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<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="wrap_content"
+    android:minHeight="64dp"
+    android:paddingStart="@dimen/layout_horizontal_margin"
+    android:paddingEnd="@dimen/layout_horizontal_margin">
+
+    <ImageView
+        android:id="@+id/item_settings_three_pid_icon"
+        android:layout_width="16dp"
+        android:layout_height="16dp"
+        android:scaleType="center"
+        android:tint="?riotx_text_secondary"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:src="@drawable/ic_phone" />
+
+    <TextView
+        android:id="@+id/item_settings_three_pid_title"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="8dp"
+        android:layout_marginBottom="4dp"
+        android:textColor="?riotx_text_primary"
+        android:textSize="16sp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/item_settings_three_pid_delete"
+        app:layout_constraintStart_toEndOf="@+id/item_settings_three_pid_icon"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="alice@email-provider.org" />
+
+    <ImageView
+        android:id="@+id/item_settings_three_pid_delete"
+        android:layout_width="@dimen/layout_touch_size"
+        android:layout_height="@dimen/layout_touch_size"
+        android:scaleType="center"
+        android:src="@drawable/ic_trash_24"
+        android:tint="@color/riotx_destructive_accent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>