From 8527d3f162205b70f0b6d19f6cb283e8de9354c4 Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoitm@matrix.org>
Date: Mon, 9 Dec 2019 22:30:29 +0100
Subject: [PATCH] Improve emoji picker search result

---
 .../reactions/EmojiSearchResultController.kt  |  7 ++--
 .../reactions/EmojiSearchResultFragment.kt    | 20 +++++------
 .../reactions/EmojiSearchResultItem.kt        |  3 +-
 .../src/main/res/layout/item_emoji_result.xml | 33 ++++++++++---------
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultController.kt b/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultController.kt
index 3e8f1c9769..208d9d7a56 100644
--- a/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultController.kt
+++ b/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultController.kt
@@ -24,9 +24,10 @@ import im.vector.riotx.core.resources.StringProvider
 import im.vector.riotx.core.ui.list.genericFooterItem
 import javax.inject.Inject
 
-class EmojiSearchResultController @Inject constructor(val stringProvider: StringProvider,
-                                                      private val fontProvider: EmojiCompatFontProvider)
-    : TypedEpoxyController<EmojiSearchResultViewState>() {
+class EmojiSearchResultController @Inject constructor(
+        private val stringProvider: StringProvider,
+        private val fontProvider: EmojiCompatFontProvider
+) : TypedEpoxyController<EmojiSearchResultViewState>() {
 
     var emojiTypeface: Typeface? = fontProvider.typeface
 
diff --git a/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultFragment.kt b/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultFragment.kt
index b34a5f2357..a62b2d39cb 100644
--- a/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultFragment.kt
+++ b/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultFragment.kt
@@ -29,25 +29,18 @@ import javax.inject.Inject
 
 class EmojiSearchResultFragment @Inject constructor(
         private val epoxyController: EmojiSearchResultController
-) : VectorBaseFragment() {
+) : VectorBaseFragment(), ReactionClickListener {
 
     override fun getLayoutResId() = R.layout.fragment_generic_recycler
 
-    val viewModel: EmojiSearchResultViewModel by activityViewModel()
+    private val viewModel: EmojiSearchResultViewModel by activityViewModel()
 
-    var sharedViewModel: EmojiChooserViewModel? = null
+    private lateinit var sharedViewModel: EmojiChooserViewModel
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
         sharedViewModel = activityViewModelProvider.get(EmojiChooserViewModel::class.java)
-
-        epoxyController.listener = object : ReactionClickListener {
-            override fun onReactionSelected(reaction: String) {
-                sharedViewModel?.selectedReaction = reaction
-                sharedViewModel?.navigateEvent?.value = LiveEvent(EmojiChooserViewModel.NAVIGATE_FINISH)
-            }
-        }
-
+        epoxyController.listener = this
         recyclerView.configureWith(epoxyController, showDivider = true)
     }
 
@@ -57,6 +50,11 @@ class EmojiSearchResultFragment @Inject constructor(
         super.onDestroyView()
     }
 
+    override fun onReactionSelected(reaction: String) {
+        sharedViewModel.selectedReaction = reaction
+        sharedViewModel.navigateEvent.value = LiveEvent(EmojiChooserViewModel.NAVIGATE_FINISH)
+    }
+
     override fun invalidate() = withState(viewModel) { state ->
         epoxyController.setData(state)
     }
diff --git a/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultItem.kt b/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultItem.kt
index 1b117035d9..746fdddbf3 100644
--- a/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultItem.kt
+++ b/vector/src/main/java/im/vector/riotx/features/reactions/EmojiSearchResultItem.kt
@@ -22,6 +22,7 @@ import com.airbnb.epoxy.EpoxyModelClass
 import com.airbnb.epoxy.EpoxyModelWithHolder
 import im.vector.riotx.R
 import im.vector.riotx.core.epoxy.VectorEpoxyHolder
+import im.vector.riotx.core.extensions.setTextOrHide
 
 @EpoxyModelClass(layout = R.layout.item_emoji_result)
 abstract class EmojiSearchResultItem : EpoxyModelWithHolder<EmojiSearchResultItem.Holder>() {
@@ -44,7 +45,7 @@ abstract class EmojiSearchResultItem : EpoxyModelWithHolder<EmojiSearchResultIte
         holder.emojiText.text = emojiItem.emojiString()
         holder.emojiText.typeface = emojiTypeFace ?: Typeface.DEFAULT
         holder.emojiNameText.text = emojiItem.name
-        holder.emojiKeywordText.text = emojiItem.keywords?.joinToString(", ")
+        holder.emojiKeywordText.setTextOrHide(emojiItem.keywords?.joinToString())
         holder.view.setOnClickListener {
             onClickListener?.onReactionSelected(emojiItem.emojiString())
         }
diff --git a/vector/src/main/res/layout/item_emoji_result.xml b/vector/src/main/res/layout/item_emoji_result.xml
index cc93ee0d5d..9ef4b36bc8 100644
--- a/vector/src/main/res/layout/item_emoji_result.xml
+++ b/vector/src/main/res/layout/item_emoji_result.xml
@@ -3,49 +3,50 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:background="?riotx_background"
+    android:foreground="?attr/selectableItemBackground"
+    android:gravity="center_vertical"
+    android:minHeight="48dp"
     android:orientation="horizontal"
-    android:paddingEnd="8dp"
-    android:paddingStart="8dp"
-    android:minHeight="44dp">
+    android:paddingStart="@dimen/layout_horizontal_margin"
+    android:paddingEnd="@dimen/layout_horizontal_margin">
 
     <!-- size in dp, because we do not want the display to be impacted by font size setting -->
     <TextView
         android:id="@+id/item_emoji_tv"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_gravity="center"
         android:layout_marginEnd="8dp"
-        android:textSize="25sp"
+        android:textColor="@color/black"
+        android:textSize="25dp"
         tools:ignore="SpUsage"
-        android:textColor="?android:textColorPrimary"
         tools:text="@sample/reactions.json/data/reaction" />
 
     <LinearLayout
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:orientation="vertical"
-        android:layout_weight="1">
+        android:layout_weight="1"
+        android:orientation="vertical">
 
         <TextView
             android:id="@+id/item_emoji_name"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_gravity="center"
-            android:textStyle="bold"
+            android:textColor="?riotx_text_primary"
             android:textSize="16sp"
-            android:textColor="?android:textColorPrimary"
+            android:textStyle="bold"
             tools:text="Smiley Face" />
 
-
         <TextView
             android:id="@+id/item_emoji_keyword"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_gravity="center"
-            android:textSize="14sp"
             android:maxLines="2"
-            android:textColor="?android:textColorPrimary"
-            tools:text="Smile, foo, bar" />
+            android:textColor="?riotx_text_secondary"
+            android:textSize="14sp"
+            android:visibility="gone"
+            tools:text="Smile, foo, bar"
+            tools:visibility="visible" />
     </LinearLayout>
 
 </LinearLayout>