refactor: make ChatInputButton to reduce duplication

ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml

@@ -4,6 +4,7 @@ import QtGraphicalEffects 1.13
 import "../../../../imports"
 import "../../../../shared"
 import "../components"
+import "./ChatComponents"
 
 Item {
     property int iconPadding: 6
@@ -48,12 +49,9 @@ Item {
         }
     }
 
-    Rectangle {
+    ChatInputButton {
-        property bool hovered: false
-
         id: emojiIconContainer
-        width: emojiIcon.width + chatButtonsContainer.iconPadding * 2
+        source: "../../../img/emojiBtn.svg"
-        height: emojiIcon.height + chatButtonsContainer.iconPadding * 2
         anchors.right: {
             if(stickerIconContainer.visible) return stickerIconContainer.left;
             if(imageIconContainer.visible) return imageIconContainer.left;
@@ -61,135 +59,44 @@ Item {
         }
         anchors.rightMargin: Style.current.padding - chatButtonsContainer.iconPadding * 2
         anchors.verticalCenter: parent.verticalCenter
-        radius: Style.current.radius
+        opened: emojiPopup.opened
-        color: hovered ? Style.current.secondaryBackground : Style.current.transparent
+        close: function () {
-
+            emojiPopup.close()
-        SVGImage {
-            id: emojiIcon
-            visible: txtData.length == 0
-            width: 20
-            height: 20
-            // fillMode: Image.PreserveAspectFit
-            source: "../../../img/emojiBtn.svg"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
         }
-        ColorOverlay {
+        open: function () {
-            anchors.fill: emojiIcon
+            emojiPopup.open()
-            source: emojiIcon
-            color: emojiIconContainer.hovered || emojiPopup.opened ? Style.current.blue : Style.current.darkGrey
-        }
-
-        MouseArea {
-            cursorShape: Qt.PointingHandCursor
-            anchors.fill: parent
-            hoverEnabled: true
-            onEntered: {
-              emojiIconContainer.hovered = true
-            }
-            onExited: {
-              emojiIconContainer.hovered = false
-            }
-            onClicked: {
-                if (emojiPopup.opened) {
-                    emojiPopup.close()
-                } else {
-                    emojiPopup.open()
-                }
-            }
         }
     }
 
-    Rectangle {
+    ChatInputButton {
-        property bool hovered: false
-
         id: stickerIconContainer
         visible: !chatColumn.isExtendedInput && txtData.length == 0
-        width: emojiIcon.width + chatButtonsContainer.iconPadding * 2
+        source: "../../../img/stickers_icon.svg"
-        height: emojiIcon.height + chatButtonsContainer.iconPadding * 2
         anchors.right: imageIconContainer.visible ? imageIconContainer.left : parent.right
         anchors.rightMargin: Style.current.padding - chatButtonsContainer.iconPadding * (imageIconContainer.visible ? 2 : 1)
         anchors.verticalCenter: parent.verticalCenter
-        radius: Style.current.radius
+        opened: stickersPopup.opened
-        color: hovered ? Style.current.secondaryBackground : Style.current.transparent
+        close: function () {
-
+            stickersPopup.close()
-        Image {
-            id: stickersIcon
-            width: 20
-            height: 20
-            fillMode: Image.PreserveAspectFit
-            source: "../../../img/stickers_icon.svg"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-
         }
-        ColorOverlay {
+        open: function () {
-            anchors.fill: stickersIcon
+            stickersPopup.open()
-            source: stickersIcon
-            color: stickerIconContainer.hovered || stickersPopup.opened ? Style.current.blue : Style.current.darkGrey
-        }
-
-        MouseArea {
-            cursorShape: Qt.PointingHandCursor
-            anchors.fill: parent
-            hoverEnabled: true
-            onEntered: {
-              stickerIconContainer.hovered = true
-            }
-            onExited: {
-              stickerIconContainer.hovered = false
-            }
-            onClicked: {
-                 if (stickersPopup.opened) {
-                     stickersPopup.close()
-                 } else {
-                     stickersPopup.open()
-                 }
-            }
         }
     }
 
-    Rectangle {
+    ChatInputButton {
-        property bool hovered: false
-        visible: !chatColumn.isExtendedInput && (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
         id: imageIconContainer
-        width: emojiIcon.width + chatButtonsContainer.iconPadding * 2
+        visible: !chatColumn.isExtendedInput && (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
-        height: emojiIcon.height + chatButtonsContainer.iconPadding * 2
+        source: "../../../img/images_icon.svg"
         anchors.right: chatSendBtn.visible ? chatSendBtn.left : parent.right
         anchors.rightMargin: Style.current.padding - chatButtonsContainer.iconPadding
         anchors.verticalCenter: parent.verticalCenter
-        radius: Style.current.radius
+        opened: imageDialog.visible
-        color: hovered ? Style.current.secondaryBackground : Style.current.transparent
+        close: function () {
-
+            imageDialog.close()
-        Image {
-            id: imageIcon
-            width: 20
-            height: 20
-            fillMode: Image.PreserveAspectFit
-            source: "../../../img/images_icon.svg"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-
         }
-        ColorOverlay {
+        open: function () {
-            anchors.fill: imageIcon
+            imageDialog.open()
-            source: imageIcon
-            color: imageIconContainer.hovered ? Style.current.blue : Style.current.darkGrey
-        }
-
-        MouseArea {
-            cursorShape: Qt.PointingHandCursor
-            anchors.fill: parent
-            hoverEnabled: true
-            onEntered: {
-              imageIconContainer.hovered = true
-            }
-            onExited: {
-              imageIconContainer.hovered = false
-            }
-            onClicked: {
-                imageDialog.open();
-            }
         }
     }
 

ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+import "../../../../../imports"
+import "../../../../../shared"
+
+Rectangle {
+    property url source: ""
+    property bool hovered: false
+    property bool opened: false
+    property var close: function () {}
+    property var open: function () {}
+
+    id: root
+    width: buttonIcon.width + chatButtonsContainer.iconPadding * 2
+    height: buttonIcon.height + chatButtonsContainer.iconPadding * 2
+    radius: Style.current.radius
+    color: hovered ? Style.current.secondaryBackground : Style.current.transparent
+
+    SVGImage {
+        id: buttonIcon
+        visible: txtData.length === 0
+        source: root.source
+        width: 20
+        height: 20
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+    ColorOverlay {
+        anchors.fill: buttonIcon
+        source: buttonIcon
+        color: root.hovered || root.opened ? Style.current.blue : Style.current.darkGrey
+    }
+
+    MouseArea {
+        cursorShape: Qt.PointingHandCursor
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: {
+          root.hovered = true
+        }
+        onExited: {
+          root.hovered = false
+        }
+        onClicked: {
+            if (root.opened) {
+                root.close()
+            } else {
+                root.open()
+            }
+        }
+    }
+}

ui/nim-status-client.pro

@@ -113,6 +113,7 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 !isEmpty(target.path): INSTALLS += target
 
 DISTFILES += \
+    app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml \
     app/AppLayouts/Chat/ChatColumn/CompactMessage.qml \
     app/AppLayouts/Chat/ChatColumn/MessageComponents/ChannelIdentifier.qml \
     app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml \