Improve UI of threePid screen

This commit is contained in:
Benoit Marty 2020-08-28 18:35:04 +02:00
parent 9fecc1b992
commit da4695ff2a
3 changed files with 120 additions and 12 deletions

View File

@ -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)
}
}

View File

@ -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(
GenericItem.Action(stringProvider.getString(R.string.remove))
.apply {
perform = Runnable { interactionListener?.deleteThreePid(threePid) }
}
)
deleteClickListener { 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)
}

View File

@ -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>