Show emoji picker dialog when touched add reaction icon

app/src/main/java/chat/rocket/android/chatroom/adapter/MessageReactionsAdapter.kt

 package chat.rocket.android.chatroom.adapter
 
+import android.support.design.widget.TabLayout
+import android.support.v4.view.ViewPager
 import android.support.v7.widget.RecyclerView
+import android.view.Gravity
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.PopupWindow
 import android.widget.TextView
 import chat.rocket.android.R
 import chat.rocket.android.chatroom.viewmodel.ReactionViewModel
 import chat.rocket.android.dagger.DaggerLocalComponent
 import chat.rocket.android.infrastructure.LocalRepository
+import chat.rocket.android.widget.emoji.*
 import java.util.concurrent.CopyOnWriteArrayList
 import javax.inject.Inject
 
@@ -39,7 +45,8 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
         if (holder is SingleReactionViewHolder) {
             holder.bind(reactions[position])
         } else {
-
+            holder as AddReactionViewHolder
+            holder.bind(reactions[0].messageId)
         }
     }
 
@@ -91,6 +98,41 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
     }
 
     class AddReactionViewHolder(view: View) : RecyclerView.ViewHolder(view) {
+        private lateinit var viewPager: ViewPager
+        private lateinit var tabLayout: TabLayout
+
+        fun bind(messageId: String) {
+            itemView as ImageView
+            itemView.setOnClickListener {
+                val ep = EmojiPickerPopup(itemView.context)
+                ep.show()
+            }
+        }
+
+        private fun setupViewPager() {
+            itemView.context.let {
+                viewPager.adapter = CategoryPagerAdapter(object : EmojiKeyboardPopup.Listener {
+                    override fun onNonEmojiKeyPressed(keyCode: Int) {
+                        // do nothing
+                    }
 
+                    override fun onEmojiAdded(emoji: Emoji) {
+                        EmojiRepository.addToRecents(emoji)
+                    }
+                })
+
+                for (category in EmojiCategory.values()) {
+                    val tab = tabLayout.getTabAt(category.ordinal)
+                    val tabView = LayoutInflater.from(it).inflate(R.layout.emoji_picker_tab, null)
+                    tab?.setCustomView(tabView)
+                    val textView = tabView.findViewById(R.id.image_category) as ImageView
+                    textView.setImageResource(category.resourceIcon())
+                }
+
+                val currentTab = if (EmojiRepository.getRecents().isEmpty()) EmojiCategory.PEOPLE.ordinal else
+                    EmojiCategory.RECENTS.ordinal
+                viewPager.setCurrentItem(currentTab)
+            }
+        }
     }
 }
\ No newline at end of file

app/src/main/java/chat/rocket/android/chatroom/viewmodel/ReactionViewModel.kt

 package chat.rocket.android.chatroom.viewmodel
 
 data class ReactionViewModel(
+        val messageId: String,
         val shortname: CharSequence,
         val count: Int,
         val usernames: List<String> = emptyList()

app/src/main/java/chat/rocket/android/chatroom/viewmodel/ViewModelMapper.kt

@@ -159,7 +159,10 @@ class ViewModelMapper @Inject constructor(private val context: Context,
                 val usernames = it.getUsernames(shortname) ?: emptyList()
                 val count = usernames.size
                 list.add(
-                        ReactionViewModel(EmojiParser.parse(shortname), count, usernames)
+                        ReactionViewModel(messageId = message.id,
+                                shortname = EmojiParser.parse(shortname),
+                                count = count,
+                                usernames = usernames)
                 )
             }
             list

app/src/main/java/chat/rocket/android/widget/emoji/EmojiKeyboardPopup.kt

@@ -28,7 +28,7 @@ class EmojiKeyboardPopup(context: Context, view: View) : OverKeyboardPopupWindow
     }
 
     override fun onCreateView(inflater: LayoutInflater): View {
-        val view = inflater.inflate(R.layout.emoji_popup_layout, null, false)
+        val view = inflater.inflate(R.layout.emoji_keyboard, null)
         parentContainer = view.findViewById(R.id.emoji_keyboard_container)
         viewPager = view.findViewById(R.id.pager_categories)
         searchView = view.findViewById(R.id.emoji_search)

app/src/main/java/chat/rocket/android/widget/emoji/EmojiPickerPopup.kt

+package chat.rocket.android.widget.emoji
+
+import android.app.Dialog
+import android.content.Context
+import android.os.Bundle
+import android.support.design.widget.TabLayout
+import android.support.v4.view.ViewPager
+import android.view.LayoutInflater
+import android.view.Window
+import android.view.WindowManager
+import android.widget.ImageView
+import chat.rocket.android.R
+
+
+class EmojiPickerPopup(context: Context) : Dialog(context) {
+    private lateinit var viewPager: ViewPager
+    private lateinit var tabLayout: TabLayout
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        requestWindowFeature(Window.FEATURE_NO_TITLE)
+        setContentView(R.layout.emoji_picker)
+
+        viewPager = findViewById(R.id.pager_categories)
+        tabLayout = findViewById(R.id.tabs)
+        tabLayout.setupWithViewPager(viewPager)
+        setupViewPager()
+        val lp = WindowManager.LayoutParams()
+        lp.copyFrom(window.attributes)
+        val dialogWidth = lp.width
+        val dialogHeight = lp.height
+
+        window.setLayout(dialogWidth, context.resources.getDimensionPixelSize(R.dimen.picker_popup_height))
+    }
+
+    private fun setupViewPager() {
+        viewPager.adapter = CategoryPagerAdapter(object : EmojiKeyboardPopup.Listener {
+            override fun onNonEmojiKeyPressed(keyCode: Int) {
+                // do nothing
+            }
+
+            override fun onEmojiAdded(emoji: Emoji) {
+                EmojiRepository.addToRecents(emoji)
+            }
+        })
+
+        for (category in EmojiCategory.values()) {
+            val tab = tabLayout.getTabAt(category.ordinal)
+            val tabView = LayoutInflater.from(context).inflate(R.layout.emoji_picker_tab, null)
+            tab?.customView = tabView
+            val textView = tabView.findViewById(R.id.image_category) as ImageView
+            textView.setImageResource(category.resourceIcon())
+        }
+
+        val currentTab = if (EmojiRepository.getRecents().isEmpty()) EmojiCategory.PEOPLE.ordinal else
+            EmojiCategory.RECENTS.ordinal
+        viewPager.currentItem = currentTab
+    }
+}
\ No newline at end of file

app/src/main/res/layout/emoji_popup_layout.xml → app/src/main/res/layout/emoji_keyboard.xml

@@ -11,35 +11,18 @@
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:background="@color/colorDividerMessageComposer"
-        app:layout_constraintBottom_toTopOf="@+id/tabs"
+        app:layout_constraintBottom_toTopOf="@+id/picker_container"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <android.support.design.widget.TabLayout
-        android:id="@+id/tabs"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        app:layout_constraintBottom_toTopOf="@+id/pager_categories"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:tabBackground="@color/whitesmoke"
-        app:tabGravity="fill"
-        app:tabMaxWidth="48dp"
-        app:tabMode="scrollable" />
-
-    <android.support.v4.view.ViewPager
-        android:id="@+id/pager_categories"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_marginEnd="8dp"
-        android:layout_marginStart="8dp"
-        android:background="@color/white"
+    <include
+        android:id="@+id/picker_container"
+        layout="@layout/emoji_picker"
         app:layout_constraintBottom_toTopOf="@+id/emoji_actions_container"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/tabs" />
+        app:layout_constraintTop_toTopOf="parent" />
 
     <RelativeLayout
         android:id="@+id/emoji_actions_container"
@@ -60,8 +43,8 @@
             android:clickable="true"
             android:focusable="true"
             android:padding="8dp"
-            android:visibility="invisible"
-            android:src="@drawable/ic_search_gray_24px" />
+            android:src="@drawable/ic_search_gray_24px"
+            android:visibility="invisible" />
 
         <ImageView
             android:id="@+id/emoji_backspace"

app/src/main/res/layout/emoji_picker.xml

+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/picker_container"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/white"
+    android:orientation="vertical">
+
+    <android.support.design.widget.TabLayout
+        android:id="@+id/tabs"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:tabBackground="@color/whitesmoke"
+        app:tabGravity="fill"
+        app:tabMaxWidth="48dp"
+        app:tabMode="scrollable" />
+
+    <android.support.v4.view.ViewPager
+        android:id="@+id/pager_categories"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_marginEnd="8dp"
+        android:layout_marginStart="8dp"
+        android:background="@color/white" />
+
+</LinearLayout>
\ No newline at end of file

app/src/main/res/values/dimens.xml

@@ -19,6 +19,8 @@
     <!-- Emoji -->
     <dimen name="picker_padding_bottom">16dp</dimen>
     <dimen name="supposed_keyboard_height">252dp</dimen>
+    <dimen name="picker_popup_height">250dp</dimen>
+    <dimen name="picker_popup_width">300dp</dimen>
 
     <!-- Message -->
     <dimen name="padding_quote">8dp</dimen>