From f4d16d766186d305cdcf0d9aa0db0669f344cd3a Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Fri, 21 Aug 2020 13:11:50 +0200
Subject: [PATCH] refactor(IconButton): turn IconButton into proper button
 control

So far our `IconButton` hasn't been a proper button control which comes
with many downsides, such as:

- Some default button behaviours need to be simulated (e.g. `onClicked`)
- Any support built-in features for all controls in QML like `ToolTip` aren't can't be used
- There are probably accessibility aspects to it as well

We use the `IconButton` in many different places. Sometimes it doesn't
even act as a button, but just as an icon. I suggest we introduce a separate
`StatusIcon` component for that in future changes.

This commit turns the `IconButton` into a proper `RoundButton`, restoring
the control behaviour and features we get from QML.

This also required to expose the `icon` property as a `iconImg`,
because a `RoundButton` already comes with an `icon`.
On the other hand, we could remove the `onClick` simulation and can now
take advantage of components like `ToolTip`.
---
 .../Chat/ContactsColumn/AddChat.qml           |  2 +-
 .../Wallet/components/AddAccount.qml          |  2 +-
 ui/shared/IconButton.qml                      | 31 ++++++++++++-------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml b/ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml
index 27ab5b217f..d548785b12 100644
--- a/ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml
+++ b/ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml
@@ -9,7 +9,7 @@ AddButton {
     height: 36
 
     onClicked: {
-        let x = btnAdd.icon.x + btnAdd.icon.width / 2 - newChatMenu.width / 2
+        let x = btnAdd.iconImg.x + btnAdd.icon.width / 2 - newChatMenu.width / 2
         newChatMenu.popup(x, btnAdd.icon.height + 10)
     }
     
diff --git a/ui/app/AppLayouts/Wallet/components/AddAccount.qml b/ui/app/AppLayouts/Wallet/components/AddAccount.qml
index 91be0f2191..aa57481b6a 100644
--- a/ui/app/AppLayouts/Wallet/components/AddAccount.qml
+++ b/ui/app/AppLayouts/Wallet/components/AddAccount.qml
@@ -6,7 +6,7 @@ import "../../../../imports"
 AddButton {
     id: btnAdd
     onClicked: {
-        let x = btnAdd.icon.x + btnAdd.icon.width / 2 - newAccountMenu.width / 2
+        let x = btnAdd.iconImg.x + btnAdd.icon.width / 2 - newAccountMenu.width / 2
         newAccountMenu.popup(x, btnAdd.icon.height + 10)
     }
 
diff --git a/ui/shared/IconButton.qml b/ui/shared/IconButton.qml
index e1e0293247..47629d2816 100644
--- a/ui/shared/IconButton.qml
+++ b/ui/shared/IconButton.qml
@@ -4,26 +4,33 @@ import QtQuick.Layouts 1.3
 import Qt.labs.platform 1.1
 import "../imports"
 
-Rectangle {
-    signal clicked
+RoundButton {
     property int iconWidth: 14
     property int iconHeight: 14
-    property alias icon: imgIcon
+    property alias iconImg: imgIcon
     property bool clickable: true
     property string iconName: "plusSign"
+    property color color: Style.current.blue
+
+    icon.width: iconWidth
+    icon.height: iconHeight
 
     id: btnAddContainer
     width: 36
     height: 36
-    color: Style.current.blue
     radius: width / 2
 
+    background: Rectangle {
+      color: parent.color
+      radius: parent.radius
+    }
+
     Image {
         id: imgIcon
         fillMode: Image.PreserveAspectFit
         source: "../app/img/" + parent.iconName + ".svg"
-        width: iconWidth
-        height: iconHeight
+        width: btnAddContainer.iconWidth
+        height: btnAddContainer.iconHeight
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
 
@@ -68,16 +75,18 @@ Rectangle {
         ]
     }
 
+    onClicked: {
+        if (btnAddContainer.clickable) {
+            imgIcon.state = "rotated"
+        }
+    }
+
     MouseArea {
         id: mouseArea
         visible: btnAddContainer.clickable
         anchors.fill: parent
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onPressed:  mouse.accepted = false
         cursorShape: Qt.PointingHandCursor
-        onClicked: {
-            imgIcon.state = "rotated"
-            btnAddContainer.clicked()
-        }
     }
 }