refactor: move emoji suggestion to own component and make it reusable

ui/nim-status-client.pro

@@ -393,4 +393,6 @@ DISTFILES += \
     shared/img/loading.svg \
     shared/img/status-logo.png \
     shared/qmldir \
+    shared/status/StatusEmojiSuggestionPopup.qml \
+    shared/status/StatusInputListPopup.qml \
     sounds/ErrorSound.qml

ui/shared/status/StatusChatInput.qml

@@ -98,10 +98,10 @@ Rectangle {
         }
 
         if (event.key === Qt.Key_Down) {
-            return emojiList.incrementCurrentIndex()
+            return emojiSuggestions.listView.incrementCurrentIndex()
         }
         if (event.key === Qt.Key_Up) {
-            return emojiList.decrementCurrentIndex()
+            return emojiSuggestions.listView.decrementCurrentIndex()
         }
 
         isColonPressed = (event.key === Qt.Key_Colon) && (event.modifiers & Qt.ShiftModifier);
@@ -338,98 +338,8 @@ Rectangle {
         standardButtons: StandardButton.Ok
     }
 
-    Popup {
+    StatusEmojiSuggestionPopup {
-        property var emojis
-        property string shortname
-
-        function openPopup(emojisParam, shortnameParam) {
-            emojis = emojisParam
-            shortname = shortnameParam
-            emojiSuggestions.open()
-        }
-
-        function addEmoji(index) {
-            if (index === undefined) {
-                index = emojiList.currentIndex
-            }
-
-            const message = extrapolateCursorPosition();
-            const unicode = emojiSuggestions.emojis[index].unicode_alternates || emojiSuggestions.emojis[index].unicode
-            replaceWithEmoji(message, emojiSuggestions.shortname, unicode)
-        }
-
         id: emojiSuggestions
-        width: messageInput.width
-        height: Math.min(400, emojiList.contentHeight + Style.current.smallPadding)
-        x : messageInput.x
-        y: -height
-        background: Rectangle {
-            id: bgRectangle
-            visible: !!emojiSuggestions.emojis && emojiSuggestions.emojis.length > 0
-            color: Style.current.background
-            border.width: 0
-            radius: Style.current.radius
-            layer.enabled: true
-                layer.effect: DropShadow{
-                width: bgRectangle.width
-                height: bgRectangle.height
-                x: bgRectangle.x
-                y: bgRectangle.y + 10
-                visible: bgRectangle.visible
-                source: bgRectangle
-                horizontalOffset: 0
-                verticalOffset: 2
-                radius: 10
-                samples: 15
-                color: "#22000000"
-            }
-        }
-
-        ListView {
-            id: emojiList
-            model: emojiSuggestions.emojis || []
-            keyNavigationEnabled: true
-            anchors.fill: parent
-            clip: true
-
-            delegate: Rectangle {
-                id: rectangle
-                color: emojiList.currentIndex === index ? Style.current.backgroundHover : Style.current.transparent
-                border.width: 0
-                width: parent.width
-                height: 42
-                radius: Style.current.radius
-
-                SVGImage {
-                    id: emojiImage
-                    source: `../../imports/twemoji/26x26/${modelData.unicode}.png`
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: parent.left
-                    anchors.leftMargin: Style.current.smallPadding
-                }
-
-                StyledText {
-                    text: modelData.shortname
-                    color: Style.current.textColor
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: emojiImage.right
-                    anchors.leftMargin: Style.current.smallPadding
-                    font.pixelSize: 15
-                }
-
-                MouseArea {
-                    cursorShape: Qt.PointingHandCursor
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onEntered: {
-                        emojiList.currentIndex = index
-                    }
-                    onClicked: {
-                        emojiSuggestions.addEmoji(index)
-                    }
-                }
-            }
-        }
     }
 
     StatusChatCommandsPopup {

ui/shared/status/StatusEmojiSuggestionPopup.qml

@@ -0,0 +1,37 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.12
+import QtQuick.Dialogs 1.3
+import "../../imports"
+import "../../shared"
+
+StatusInputListPopup {
+    property string shortname
+
+    id: emojiSuggestions
+    getImageSource: function (modelData) {
+        return `../../imports/twemoji/26x26/${modelData.unicode}.png`
+    }
+    getText: function (modelData) {
+        return modelData.shortname
+    }
+    onClicked: function (index) {
+        emojiSuggestions.addEmoji(index)
+    }
+
+    function openPopup(emojisParam, shortnameParam) {
+        modelList = emojisParam
+        shortname = shortnameParam
+        emojiSuggestions.open()
+    }
+
+    function addEmoji(index) {
+        if (index === undefined) {
+            index = listView.currentIndex
+        }
+
+        const message = extrapolateCursorPosition();
+        const unicode = emojiSuggestions.modelList[index].unicode_alternates || emojiSuggestions.modelList[index].unicode
+        replaceWithEmoji(message, emojiSuggestions.shortname, unicode)
+    }
+}

ui/shared/status/StatusInputListPopup.qml

@@ -0,0 +1,92 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.12
+import QtQuick.Dialogs 1.3
+import "../../imports"
+import "../../shared"
+
+Popup {
+    property var modelList
+    property alias listView: listView
+    property var getImageSource: function () {}
+    property var getText: function () {}
+    property var onClicked: function () {}
+
+    function openPopup(listParam) {
+        modelList = listParam
+        popup.open()
+    }
+
+    id: popup
+    width: messageInput.width
+    height: Math.min(400, listView.contentHeight + Style.current.smallPadding)
+    x : messageInput.x
+    y: -height
+    background: Rectangle {
+        id: bgRectangle
+        visible: !!popup.modelList && popup.modelList.length > 0
+        color: Style.current.background
+        border.width: 0
+        radius: Style.current.radius
+        layer.enabled: true
+        layer.effect: DropShadow{
+            width: bgRectangle.width
+            height: bgRectangle.height
+            x: bgRectangle.x
+            y: bgRectangle.y + 10
+            visible: bgRectangle.visible
+            source: bgRectangle
+            horizontalOffset: 0
+            verticalOffset: 2
+            radius: 10
+            samples: 15
+            color: "#22000000"
+        }
+    }
+
+    ListView {
+        id: listView
+        model: popup.modelList || []
+        keyNavigationEnabled: true
+        anchors.fill: parent
+        clip: true
+
+        delegate: Rectangle {
+            id: rectangle
+            color: listView.currentIndex === index ? Style.current.backgroundHover : Style.current.transparent
+            border.width: 0
+            width: parent.width
+            height: 42
+            radius: Style.current.radius
+
+            SVGImage {
+                id: image
+                source: popup.getImageSource(modelData)
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: Style.current.smallPadding
+            }
+
+            StyledText {
+                text: popup.getText(modelData)
+                color: Style.current.textColor
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: image.right
+                anchors.leftMargin: Style.current.smallPadding
+                font.pixelSize: 15
+            }
+
+            MouseArea {
+                cursorShape: Qt.PointingHandCursor
+                anchors.fill: parent
+                hoverEnabled: true
+                onEntered: {
+                    listView.currentIndex = index
+                }
+                onClicked: {
+                    popup.onClicked(index)
+                }
+            }
+        }
+    }
+}