From 8ac2d66f639bd0272a4f568ff64e8c6e57fa7345 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Mon, 17 Aug 2020 11:52:41 -0400
Subject: [PATCH] refactor: make ChatInputButton to reduce duplication

---
 .../Chat/ChatColumn/ChatButtons.qml           | 139 +++---------------
 .../ChatComponents/ChatInputButton.qml        |  53 +++++++
 ui/nim-status-client.pro                      |   1 +
 3 files changed, 77 insertions(+), 116 deletions(-)
 create mode 100644 ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml

diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml
index 28556c450a..c85ee8e068 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml
+++ b/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 {
-        property bool hovered: false
-
+    ChatInputButton {
         id: emojiIconContainer
-        width: emojiIcon.width + chatButtonsContainer.iconPadding * 2
-        height: emojiIcon.height + chatButtonsContainer.iconPadding * 2
+        source: "../../../img/emojiBtn.svg"
         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
-        color: hovered ? Style.current.secondaryBackground : Style.current.transparent
-
-        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
+        opened: emojiPopup.opened
+        close: function () {
+            emojiPopup.close()
         }
-        ColorOverlay {
-            anchors.fill: emojiIcon
-            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()
-                }
-            }
+        open: function () {
+            emojiPopup.open()
         }
     }
 
-    Rectangle {
-        property bool hovered: false
-
+    ChatInputButton {
         id: stickerIconContainer
         visible: !chatColumn.isExtendedInput && txtData.length == 0
-        width: emojiIcon.width + chatButtonsContainer.iconPadding * 2
-        height: emojiIcon.height + chatButtonsContainer.iconPadding * 2
+        source: "../../../img/stickers_icon.svg"
         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
-        color: hovered ? Style.current.secondaryBackground : Style.current.transparent
-
-        Image {
-            id: stickersIcon
-            width: 20
-            height: 20
-            fillMode: Image.PreserveAspectFit
-            source: "../../../img/stickers_icon.svg"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-
+        opened: stickersPopup.opened
+        close: function () {
+            stickersPopup.close()
         }
-        ColorOverlay {
-            anchors.fill: stickersIcon
-            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()
-                 }
-            }
+        open: function () {
+            stickersPopup.open()
         }
     }
 
-    Rectangle {
-        property bool hovered: false
-        visible: !chatColumn.isExtendedInput && (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
+    ChatInputButton {
         id: imageIconContainer
-        width: emojiIcon.width + chatButtonsContainer.iconPadding * 2
-        height: emojiIcon.height + chatButtonsContainer.iconPadding * 2
+        visible: !chatColumn.isExtendedInput && (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
+        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
-        color: hovered ? Style.current.secondaryBackground : Style.current.transparent
-
-        Image {
-            id: imageIcon
-            width: 20
-            height: 20
-            fillMode: Image.PreserveAspectFit
-            source: "../../../img/images_icon.svg"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-
+        opened: imageDialog.visible
+        close: function () {
+            imageDialog.close()
         }
-        ColorOverlay {
-            anchors.fill: imageIcon
-            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();
-            }
+        open: function () {
+            imageDialog.open()
         }
     }
 
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml
new file mode 100644
index 0000000000..36352c4e41
--- /dev/null
+++ b/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()
+            }
+        }
+    }
+}
diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro
index 983e4ed1be..6304dd873f 100644
--- a/ui/nim-status-client.pro
+++ b/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 \